From aa6357739214b8582b79f19be07a5ca8c35a5665 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 31 Oct 2018 12:17:03 -0700 Subject: [PATCH 001/123] Start of the new homepage. --- core/scss/homepage.md | 62 +++++++++++++++-- kss/builder/decanter/index.twig | 9 ++- kss/builder/decanter/kss-assets/css/kss.css | 74 +++++++++++++++++++++ kss/builder/decanter/scss/_home.scss | 66 ++++++++++++++++++ kss/builder/decanter/scss/kss.scss | 2 + 5 files changed, 206 insertions(+), 7 deletions(-) create mode 100644 kss/builder/decanter/scss/_home.scss diff --git a/core/scss/homepage.md b/core/scss/homepage.md index 26fa92918..b894e5332 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -1,8 +1,58 @@ -# Decanter +
+

Decanter

+ +
-Welcome to the Decanter Style Guide and Pattern Library. +
+

Welcome to the Decanter Style Guide and Pattern Library.

+

Decanter is an artifact (and tool) of the design and development system that while aligned with a single product line, has a chief goal of housing patterns that can be used in any project. It is also a browsable collection of design patterns that have been vetted and translated into code.

+
-Decanter is an artifact (and tool) of the design and development system that -while aligned with a single product line, has a chief goal of housing patterns -that can be used in any project. It is also a browsable collection of design -patterns that have been vetted and translated into code. +
+

Explore our UI components

+ +

From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

+ +

Browse ›

+
+ +
+ +

Developer Resources

+
Components
+
Documentation
+ +
+ +
+
+

More from Stanford University

+

Stanford Web Services

+

Providing the Stanford community a full range of website planning, design, development, and maintenance support at below-market rates.

+

Learn more about Stanford Web Services ›

+
+ +
+

Stanford University Communications

+ +

Providing information about Stanford University; coordinating the university's public and media relations efforts; and producing the university's main web pages, social media channels and central publications.

+ +

Learn more about Stanford University Communications

+
+ +
+

Stanford Identity Toolkit

+ +

If you’re inside Stanford, and looking for guidelines applying the identity, emblem files, policies, or support, this is your resource.

+ +

Use the Identity Toolkit ›

+
+ +
diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 7a8efad85..45cfa0b2e 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -11,7 +11,8 @@ {{ styles|raw }} - + +
@@ -19,6 +20,9 @@
+ +{% if not template.isHomepage %} +

{{ options.title }}

@@ -53,6 +57,9 @@
+ +{% endif %} +
{% if template.isHomepage %} {% if homepage %} diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 5e68dfe5f..8ad5aa9b2 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1019,6 +1019,80 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .kss-color code { display: none; } +#kss-node.kss-home .kss-main { + width: 100%; + margin: 30px 0 0 0; } + +#kss-node.kss-home { + background: #2E2D29; } + #kss-node.kss-home h1, + #kss-node.kss-home h2, + #kss-node.kss-home h3, + #kss-node.kss-home h4, + #kss-node.kss-home h5, + #kss-node.kss-home p { + color: #ffffff; } + #kss-node.kss-home header { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 11fr; + grid-template-columns: 1fr 11fr; + padding: 30px 0 0; } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home header { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: auto auto; + grid-template-rows: auto auto; } + #kss-node.kss-home header > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home header { + grid-column-gap: 20px; } + #kss-node.kss-home header > * { + margin-left: 0; + margin-right: 0; } } } + #kss-node.kss-home .main-nav { + margin: 0; + text-align: right; + vertical-align: middle; } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home .main-nav { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; + text-align: center; } + #kss-node.kss-home .main-nav > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .main-nav { + grid-column-gap: 20px; } + #kss-node.kss-home .main-nav > * { + margin-left: 0; + margin-right: 0; } } } + #kss-node.kss-home .main-nav li { + padding: 0; + display: inline-block; } + #kss-node.kss-home .main-nav li a { + padding: 5px; + display: inline-block; + color: #999999; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: em(16px); } + #kss-node.kss-home .main-nav li:first-child > a, + #kss-node.kss-home .main-nav li a:hover { + color: #ffffff; + border-bottom: solid 3px #006cb8; } + #kss-node.kss-home .section--welcome { + max-width: 80%; } + .page-layout { position: relative; } .page-layout::before { diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss new file mode 100644 index 000000000..40aacc1b3 --- /dev/null +++ b/kss/builder/decanter/scss/_home.scss @@ -0,0 +1,66 @@ +#kss-node.kss-home .kss-main { + width: 100%; + margin: 30px 0 0 0; +} + +#kss-node.kss-home { + background: #2E2D29; + + h1, + h2, + h3, + h4, + h5, + p { + color: $color-white; + } + + // The logo and the nav wrapper. + header { + @include display-grid; + @include grid-columns(1fr 11fr); + @include padding(30px 0 0 0); + + @include grid-media-only('xs') { + @include grid-columns(1fr); + @include grid-rows(auto auto); + } + + } + + // Main navigation. + .main-nav { + @include margin(0); + text-align: right; + vertical-align: middle; + + @include grid-media-only('xs') { + text-align: center; + } + + li { + @include padding(0); + display: inline-block; + + a { + @include padding(5px); + display: inline-block; + color: darken($color-white, 40%); + font-family: $font-sans; + font-size: em(16px); + } + + &:first-child > a, + a:hover { + color: $color-white; + border-bottom: solid 3px $color-bright-blue; + } + } + } + + // Welcome Section. + .section--welcome { + max-width: 80% + } + +} diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index 49141a769..b15442a46 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -8,6 +8,7 @@ 'utilities/variables/index', 'kss-variables'; +// 3. Gotta have this now don't we. @import 'decanter-no-markup'; @@ -18,4 +19,5 @@ 'builder', 'class-based-grid', 'colors-demo', + 'home', 'layout-colors'; From aa883531db11e776de52c5086bf3fc5c88729d8a Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 31 Oct 2018 12:23:42 -0700 Subject: [PATCH 002/123] Start of the new homepage. --- kss/builder/decanter/kss-assets/css/kss.css | 12 ++++++++++- kss/builder/decanter/scss/_home.scss | 22 ++++++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 8ad5aa9b2..ddff7b515 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1021,7 +1021,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .kss-main { width: 100%; - margin: 30px 0 0 0; } + margin: 30px 0 0; + padding: 0; } #kss-node.kss-home { background: #2E2D29; } @@ -1090,8 +1091,17 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .main-nav li a:hover { color: #ffffff; border-bottom: solid 3px #006cb8; } + #kss-node.kss-home .section { + margin: 0; + padding: 20px; } #kss-node.kss-home .section--welcome { max-width: 80%; } + #kss-node.kss-home .section--ui-components { + background: #ffffff; } + #kss-node.kss-home .section--dev-resources { + background: #f9f6ef; } + #kss-node.kss-home .section--more-info { + background: #009b76; } .page-layout { position: relative; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 40aacc1b3..16b342589 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -1,6 +1,7 @@ #kss-node.kss-home .kss-main { width: 100%; - margin: 30px 0 0 0; + @include margin(30px 0 0 0); + @include padding(0); } #kss-node.kss-home { @@ -58,9 +59,28 @@ } } + .section { + @include margin(0); + @include padding(20px); + } + // Welcome Section. .section--welcome { max-width: 80% } + // UI Components Section. + .section--ui-components { + background: $color-white; + } + + // Developer Resources Section + .section--dev-resources { + background: $color-light-sandstone; + } + + .section--more-info { + background: $color-mint; + } + } From 9f21173f9ac83ca6beeb6396f350fd3a33e334e7 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 1 Nov 2018 16:10:19 -0700 Subject: [PATCH 003/123] fixup! wip. --- core/scss/homepage.md | 72 +++++++++------- .../layout/_centered-grid-container.scss | 10 +-- kss/builder/decanter/kss-assets/css/kss.css | 86 ++++++++++++++++--- kss/builder/decanter/scss/_home.scss | 26 +++--- 4 files changed, 139 insertions(+), 55 deletions(-) diff --git a/core/scss/homepage.md b/core/scss/homepage.md index b894e5332..c32aca7c2 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -11,48 +11,62 @@
-

Welcome to the Decanter Style Guide and Pattern Library.

-

Decanter is an artifact (and tool) of the design and development system that while aligned with a single product line, has a chief goal of housing patterns that can be used in any project. It is also a browsable collection of design patterns that have been vetted and translated into code.

+
+

Welcome to the Decanter Style Guide and Pattern Library.

+

Decanter is an artifact (and tool) of the design and development system that while aligned with a single product line, has a chief goal of housing patterns that can be used in any project. It is also a browsable collection of design patterns that have been vetted and translated into code.

+
-

Explore our UI components

- -

From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

- -

Browse ›

+
+

Explore our UI components

+

From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

+

Browse ›

+ UI-Components +
- -

Developer Resources

-
Components
-
Documentation
- +
+ +

Developer Resources

+
    +
  • +
    Components
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    +

    Work with components

    +
    • +
  • +
    Documentation
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    +

    Work with components

    +
    • +
-
+

More from Stanford University

-

Stanford Web Services

-

Providing the Stanford community a full range of website planning, design, development, and maintenance support at below-market rates.

-

Learn more about Stanford Web Services ›

-
- -
-

Stanford University Communications

+
    -

    Providing information about Stanford University; coordinating the university's public and media relations efforts; and producing the university's main web pages, social media channels and central publications.

    +
  • +

    Stanford University Communications

    +

    Providing information about Stanford University; coordinating the university's public and media relations efforts; and producing the university's main web pages, social media channels and central publications.

    +

    Learn more about Stanford University Communications

    +
    • -

    Learn more about Stanford University Communications

    -
+
  • +

    Stanford Identity Toolkit

    +

    If you’re inside Stanford, and looking for guidelines applying the identity, emblem files, policies, or support, this is your resource.

    +

    Use the Identity Toolkit

    +
    • -
    -

    Stanford Identity Toolkit

    +
  • +

    Stanford Web Services

    +

    Providing the Stanford community a full range of website planning, design, development, and maintenance support at below-market rates.

    +

    Learn more about Stanford Web Services

    +
    • -

    If you’re inside Stanford, and looking for guidelines applying the identity, emblem files, policies, or support, this is your resource.

    - -

    Use the Identity Toolkit ›

    +
    -
    diff --git a/core/scss/utilities/mixins/layout/_centered-grid-container.scss b/core/scss/utilities/mixins/layout/_centered-grid-container.scss index cc22f7775..0e5eee131 100644 --- a/core/scss/utilities/mixins/layout/_centered-grid-container.scss +++ b/core/scss/utilities/mixins/layout/_centered-grid-container.scss @@ -17,20 +17,20 @@ } @media #{$breakpoint-sm} { - @include grid-columns(auto $screen-sm auto); + @include grid-columns(auto $screen-sm auto); } @media #{$breakpoint-md} { - @include grid-columns(auto $screen-md auto); + @include grid-columns(auto $screen-md auto); } @media #{$breakpoint-lg} { - @include grid-columns(auto $screen-lg auto); + @include grid-columns(auto $screen-lg auto); } @media #{$breakpoint-xl} { - @include grid-columns(auto $screen-xl auto); + @include grid-columns(auto $screen-xl auto); } - @include grid-columns(auto 100% auto); + @include grid-columns(auto 100% auto); } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index c404ce73b..b920f7759 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1012,14 +1012,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { padding: 0; } #kss-node.kss-home { - background: #2E2D29; } - #kss-node.kss-home h1, - #kss-node.kss-home h2, - #kss-node.kss-home h3, - #kss-node.kss-home h4, - #kss-node.kss-home h5, - #kss-node.kss-home p { - color: #ffffff; } + background: #2e2d29; } #kss-node.kss-home header { display: -ms-grid; display: grid; @@ -1082,13 +1075,86 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { margin: 0; padding: 20px; } #kss-node.kss-home .section--welcome { - max-width: 80%; } + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; } + #kss-node.kss-home .section--welcome > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--welcome { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--welcome { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--welcome { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + color: #ffffff; } #kss-node.kss-home .section--ui-components { - background: #ffffff; } + background: #ffffff; + clear: both; } #kss-node.kss-home .section--dev-resources { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; background: #f9f6ef; } + #kss-node.kss-home .section--dev-resources > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--more-info { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; background: #009b76; } + #kss-node.kss-home .section--more-info > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } .page-layout { position: relative; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 16b342589..51f11aea7 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -5,16 +5,7 @@ } #kss-node.kss-home { - background: #2E2D29; - - h1, - h2, - h3, - h4, - h5, - p { - color: $color-white; - } + background: $color-black; // The logo and the nav wrapper. header { @@ -66,20 +57,33 @@ // Welcome Section. .section--welcome { - max-width: 80% + @include centered-grid-container; + + h1, + h2, + h3, + h4, + h5, + p { + color: $color-white; + } } // UI Components Section. .section--ui-components { background: $color-white; + clear: both; } // Developer Resources Section .section--dev-resources { + @include centered-grid-container; background: $color-light-sandstone; } + // More Info Section .section--more-info { + @include centered-grid-container; background: $color-mint; } From 54e91c87c843406054a2c04fe019764be2d6cb8d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 1 Nov 2018 16:29:20 -0700 Subject: [PATCH 004/123] fixup! wip. --- core/scss/homepage.md | 28 +++--- kss/builder/decanter/kss-assets/css/kss.css | 93 ++++++++++-------- .../decanter/kss-assets/ui-components.png | Bin 0 -> 13024 bytes kss/builder/decanter/scss/_builder.scss | 42 ++++---- kss/builder/decanter/scss/_home.scss | 23 ++++- 5 files changed, 106 insertions(+), 80 deletions(-) create mode 100644 kss/builder/decanter/kss-assets/ui-components.png diff --git a/core/scss/homepage.md b/core/scss/homepage.md index c32aca7c2..bbfc2ac94 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -1,19 +1,21 @@
    -

    Decanter

    - +
    -

    Welcome to the Decanter Style Guide and Pattern Library.

    -

    Decanter is an artifact (and tool) of the design and development system that while aligned with a single product line, has a chief goal of housing patterns that can be used in any project. It is also a browsable collection of design patterns that have been vetted and translated into code.

    +

    Welcome to the Decanter Style Guide and Pattern Library.

    +

    Decanter is an artifact (and tool) of the design and development system that while aligned with a single product line, has a chief goal of housing patterns that can be used in any project. It is also a browsable collection of design patterns that have been vetted and translated into code.

    @@ -32,12 +34,12 @@

    Developer Resources

    • -
      Components
      +

      Components

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Work with components

    • -
      Documentation
      +

      Documentation

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Work with components

      • diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index b920f7759..de66de6a7 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -392,27 +392,6 @@ template { color: #faa700; } .kss-style a:hover, .kss-style a:active { outline: 0; } - .kss-style p { - margin: 15px 0 30px 0; } - .kss-style h1, .kss-style h2, .kss-style h3, .kss-style h4, .kss-style h5, .kss-style h6 { - margin: 30px 0 0 0; - font-family: "Roboto Slab", "Georgia", "Times", "Times New Roman", serif; - color: #2e2d29; - line-height: 1.15em; } - .kss-style h4, .kss-style h5, .kss-style h6 { - font-weight: bold; } - .kss-style h1 { - font-size: 50px; } - .kss-style h2 { - font-size: 45px; } - .kss-style h3 { - font-size: 42.5px; } - .kss-style h4 { - font-size: 40px; } - .kss-style h5 { - font-size: 37.5px; } - .kss-style h6 { - font-size: 35px; } .kss-style blockquote { color: #666; margin: 0; @@ -1013,31 +992,37 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home { background: #2e2d29; } + #kss-node.kss-home h2, #kss-node.kss-home h3, #kss-node.kss-home h4, #kss-node.kss-home h5, #kss-node.kss-home p, #kss-node.kss-home li { + color: #2e2d29; } #kss-node.kss-home header { display: -ms-grid; display: grid; - -ms-grid-columns: 1fr 11fr; - grid-template-columns: 1fr 11fr; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; padding: 30px 0 0; } - @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home header > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { #kss-node.kss-home header { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } - #kss-node.kss-home header > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home header { - grid-column-gap: 20px; } - #kss-node.kss-home header > * { - margin-left: 0; - margin-right: 0; } } } + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home header { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home header { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home header { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } + #kss-node.kss-home header div { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 6fr; + grid-template-columns: 1fr 6fr; } #kss-node.kss-home .main-nav { margin: 0; text-align: right; @@ -1104,9 +1089,35 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--welcome h5, #kss-node.kss-home .section--welcome p { color: #ffffff; } + #kss-node.kss-home .section--welcome h2 { + font-size: 3.0517578125em; } + #kss-node.kss-home .section--welcome p { + font-size: 1.953125em; } #kss-node.kss-home .section--ui-components { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; background: #ffffff; clear: both; } + #kss-node.kss-home .section--ui-components > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--dev-resources { display: -ms-grid; display: grid; diff --git a/kss/builder/decanter/kss-assets/ui-components.png b/kss/builder/decanter/kss-assets/ui-components.png new file mode 100644 index 0000000000000000000000000000000000000000..d5a4082796104ce13f9f8563a6fd852e302f7627 GIT binary patch literal 13024 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�s2v$ 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 Date: Thu, 1 Nov 2018 20:15:40 -0700 Subject: [PATCH 005/123] fixup! wip. --- kss/builder/decanter/kss-assets/css/kss.css | 115 ++++---------------- kss/builder/decanter/scss/_home.scss | 15 +-- 2 files changed, 26 insertions(+), 104 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index de66de6a7..c18033f22 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -999,7 +999,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { display: grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; - padding: 30px 0 0; } + padding-top: 30px; } #kss-node.kss-home header > :first-child { grid-column: 2; } @media only screen and (min-width: 576px) { @@ -1018,14 +1018,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } - #kss-node.kss-home header div { - display: -ms-grid; - display: grid; - -ms-grid-columns: 1fr 6fr; - grid-template-columns: 1fr 6fr; } + #kss-node.kss-home header h1 { + color: #ffffff; } #kss-node.kss-home .main-nav { margin: 0; - text-align: right; vertical-align: middle; } @media only screen and (min-width: 0) and (max-width: 575px) { #kss-node.kss-home .main-nav { @@ -1057,115 +1053,48 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { color: #ffffff; border-bottom: solid 3px #006cb8; } #kss-node.kss-home .section { - margin: 0; - padding: 20px; } - #kss-node.kss-home .section--welcome { display: -ms-grid; display: grid; -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; } - #kss-node.kss-home .section--welcome > :first-child { + grid-template-columns: auto 100% auto; + padding: 20px; } + #kss-node.kss-home .section > :first-child { grid-column: 2; } @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--welcome { + #kss-node.kss-home .section { -ms-grid-columns: auto 576px auto; grid-template-columns: auto 576px auto; } } @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--welcome { + #kss-node.kss-home .section { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } @media only screen and (min-width: 1024px) { - #kss-node.kss-home .section--welcome { + #kss-node.kss-home .section { -ms-grid-columns: auto 1024px auto; grid-template-columns: auto 1024px auto; } } @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--welcome { + #kss-node.kss-home .section { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } - #kss-node.kss-home .section--welcome h1, - #kss-node.kss-home .section--welcome h2, - #kss-node.kss-home .section--welcome h3, - #kss-node.kss-home .section--welcome h4, - #kss-node.kss-home .section--welcome h5, - #kss-node.kss-home .section--welcome p { - color: #ffffff; } - #kss-node.kss-home .section--welcome h2 { - font-size: 3.0517578125em; } - #kss-node.kss-home .section--welcome p { - font-size: 1.953125em; } + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + color: #ffffff; + max-width: 80%; } + #kss-node.kss-home .section--welcome h2 { + font-size: 3.0517578125em; } + #kss-node.kss-home .section--welcome p { + font-size: 1.953125em; } #kss-node.kss-home .section--ui-components { - display: -ms-grid; - display: grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; background: #ffffff; clear: both; } - #kss-node.kss-home .section--ui-components > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--dev-resources { - display: -ms-grid; - display: grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; background: #f9f6ef; } - #kss-node.kss-home .section--dev-resources > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--more-info { - display: -ms-grid; - display: grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; background: #009b76; } - #kss-node.kss-home .section--more-info > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } .page-layout { position: relative; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 746d1574d..595d80223 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -14,11 +14,8 @@ // The logo and the nav wrapper. header { @include centered-grid-container; - @include padding(30px 0 0 0); - - div { - @include display-grid; - @include grid-columns(1fr 6fr); + h1{ + color: $color-white; } } @@ -26,7 +23,6 @@ // Main navigation. .main-nav { @include margin(0); - text-align: right; vertical-align: middle; @include grid-media-only('xs') { @@ -54,13 +50,12 @@ } .section { - @include margin(0); + @include centered-grid-container; @include padding(20px); } // Welcome Section. .section--welcome { - @include centered-grid-container; h1, h2, @@ -69,6 +64,7 @@ h5, p { color: $color-white; + max-width: 80%; } h2 { @@ -83,20 +79,17 @@ // UI Components Section. .section--ui-components { - @include centered-grid-container; background: $color-white; clear: both; } // Developer Resources Section .section--dev-resources { - @include centered-grid-container; background: $color-light-sandstone; } // More Info Section .section--more-info { - @include centered-grid-container; background: $color-mint; } From 44d933a71034b62754b6565afc63feced3d961f7 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 2 Nov 2018 00:05:00 -0700 Subject: [PATCH 006/123] It is not pretty but it is something. --- core/scss/homepage.md | 48 +-- .../utilities/mixins/layout/_ms-grid.scss | 2 +- kss/builder/decanter/kss-assets/css/kss.css | 291 ++++++++++++++++-- kss/builder/decanter/scss/_home.scss | 152 ++++++++- 4 files changed, 433 insertions(+), 60 deletions(-) diff --git a/core/scss/homepage.md b/core/scss/homepage.md index bbfc2ac94..feec6eb7b 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -3,10 +3,10 @@

      Decanter

    @@ -20,29 +20,35 @@
    -
    -

    Explore our UI components

    -

    From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

    -

    Browse ›

    - UI-Components +
    + UI-Components +
    +

    Explore our UI components

    +

    From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

    + Browse +
    -
    - -

    Developer Resources

    -
      -
    • -

      Components

      -

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      -

      Work with components

      -
      • -
    • -

      Documentation

      -

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      -

      Work with components

      -
      • +

      Developer Resources

      + +
      + Star +
      +

      Components

      +

      Browse our catalog of compontens and view the markup.

      + Browse +
      +
      + +
      + Star +
      +

      Documentation

      +

      From coding standards to best practices follow the link to find out more.

      + Wiki Docs +
    diff --git a/core/scss/utilities/mixins/layout/_ms-grid.scss b/core/scss/utilities/mixins/layout/_ms-grid.scss index 283c77569..d167858ea 100644 --- a/core/scss/utilities/mixins/layout/_ms-grid.scss +++ b/core/scss/utilities/mixins/layout/_ms-grid.scss @@ -21,7 +21,7 @@ // Style guide: Mixins.Layout.grid-item-spans // -@mixin grid-item-spans ($col-start, $col-end, $row-start, $row-end) { +@mixin grid-item-spans($col-start, $col-end, $row-start, $row-end) { -ms-grid-column: $col-start; -ms-grid-column-span: $col-end - $col-start; -ms-grid-row: $row-start; diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index c18033f22..37af834f7 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -999,7 +999,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { display: grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; - padding-top: 30px; } + padding-top: 15px; } #kss-node.kss-home header > :first-child { grid-column: 2; } @media only screen and (min-width: 576px) { @@ -1018,18 +1018,45 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } + #kss-node.kss-home header div { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 11fr; + grid-template-columns: 1fr 11fr; + align-items: center; } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home header div { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + -ms-grid-rows: auto auto; + grid-template-rows: auto auto; } + #kss-node.kss-home header div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home header div { + grid-column-gap: 20px; } + #kss-node.kss-home header div > * { + margin-left: 0; + margin-right: 0; } } } #kss-node.kss-home header h1 { - color: #ffffff; } + color: #ffffff; + text-align: center; } #kss-node.kss-home .main-nav { margin: 0; - vertical-align: middle; } - @media only screen and (min-width: 0) and (max-width: 575px) { + padding: 0; + text-align: center; } + @media only screen and (min-width: 576px) { #kss-node.kss-home .main-nav { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; padding-left: 20px; padding-right: 20px; - text-align: center; } + text-align: right; } #kss-node.kss-home .main-nav > * { margin-left: 10px; margin-right: 10px; } @@ -1045,56 +1072,264 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .main-nav li a { padding: 5px; display: inline-block; - color: #999999; + color: #b3b2b2; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: em(16px); } + font-size: em(16px); + border-bottom: solid 3px #2e2d29; } #kss-node.kss-home .main-nav li:first-child > a, #kss-node.kss-home .main-nav li a:hover { color: #ffffff; border-bottom: solid 3px #006cb8; } #kss-node.kss-home .section { + padding: 20px; } + #kss-node.kss-home .section--welcome { display: -ms-grid; display: grid; -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; - padding: 20px; } - #kss-node.kss-home .section > :first-child { + grid-template-columns: auto 100% auto; } + #kss-node.kss-home .section--welcome > :first-child { grid-column: 2; } @media only screen and (min-width: 576px) { - #kss-node.kss-home .section { + #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 576px auto; grid-template-columns: auto 576px auto; } } @media only screen and (min-width: 768px) { - #kss-node.kss-home .section { + #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } @media only screen and (min-width: 1024px) { - #kss-node.kss-home .section { + #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 1024px auto; grid-template-columns: auto 1024px auto; } } @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section { + #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } - #kss-node.kss-home .section--welcome h1, - #kss-node.kss-home .section--welcome h2, - #kss-node.kss-home .section--welcome h3, - #kss-node.kss-home .section--welcome h4, - #kss-node.kss-home .section--welcome h5, - #kss-node.kss-home .section--welcome p { - color: #ffffff; - max-width: 80%; } - #kss-node.kss-home .section--welcome h2 { - font-size: 3.0517578125em; } - #kss-node.kss-home .section--welcome p { - font-size: 1.953125em; } + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + color: #ffffff; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + max-width: 80%; } } + #kss-node.kss-home .section--welcome h2 { + margin: 0; + font-size: 1.953125em; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome h2 { + font-size: 1.953125em; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--welcome h2 { + font-size: 2.44140625em; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--welcome h2 { + font-size: 2.44140625em; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--welcome h2 { + font-size: 3.8146972656em; } } + #kss-node.kss-home .section--welcome p { + font-size: 1em; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome p { + font-size: 1.25em; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome p { + font-size: 1.25em; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome p { + font-size: 1.5625em; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome p { + font-size: 1.5625em; } } #kss-node.kss-home .section--ui-components { - background: #ffffff; - clear: both; } + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; + background: #ffffff; } + #kss-node.kss-home .section--ui-components > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } + #kss-node.kss-home .section--ui-components .su-card { + box-shadow: none; + border: 0; } #kss-node.kss-home .section--dev-resources { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; background: #f9f6ef; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources { + grid-column-gap: 30px; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 0; + margin-right: 0; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; + -ms-grid-columns: auto 268px 268px auto; + grid-template-columns: auto 268px 268px auto; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources { + grid-column-gap: 20px; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; + -ms-grid-columns: auto 364px 364px auto; + grid-template-columns: auto 364px 364px auto; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources { + grid-column-gap: 20px; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 30px; + padding-right: 30px; + -ms-grid-columns: auto 482px 482px auto; + grid-template-columns: auto 482px 482px auto; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources { + grid-column-gap: 30px; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-left: 30px; + padding-right: 30px; + -ms-grid-columns: auto 720px 720px auto; + grid-template-columns: auto 720px 720px auto; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources { + grid-column-gap: 30px; } + #kss-node.kss-home .section--dev-resources > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources h2 { + grid-column-start: 2; } } + #kss-node.kss-home .section--dev-resources .su-card { + border: 0; + box-shadow: none; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources .su-card { + grid-row-start: row2-start; + grid-column-start: 2; } } + #kss-node.kss-home .section--dev-resources .su-card img { + max-width: 100px; + margin: 20px auto; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources .su-card h3 { + text-align: center; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources .card-2 { + grid-column-start: 3; } } #kss-node.kss-home .section--more-info { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; background: #009b76; } + #kss-node.kss-home .section--more-info > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } + #kss-node.kss-home .section--more-info h2 { + text-align: center; } + #kss-node.kss-home .section--more-info ul { + display: -ms-grid; + display: grid; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + padding-left: 20px; + padding-right: 20px; } + #kss-node.kss-home .section--more-info ul > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 20px; } + #kss-node.kss-home .section--more-info ul > * { + margin-left: 0; + margin-right: 0; } } } + #kss-node.kss-home .section--more-info li { + list-style: none; + list-style-type: none; } + #kss-node.kss-home .section--more-info a { + color: #2e2d29; + text-decoration: underline; } + #kss-node.kss-home .section--more-info a:hover { + color: #ffffff; } .page-layout { position: relative; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 595d80223..fa5401fa0 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -14,19 +14,33 @@ // The logo and the nav wrapper. header { @include centered-grid-container; + @include padding(15px null null null); + + div { + @include display-grid; + @include grid-columns(1fr 11fr); + align-items: center; + + @include grid-media-only('xs') { + @include grid-columns(1fr); + @include grid-rows(auto auto); + } + } + h1{ color: $color-white; + text-align: center; } - } // Main navigation. .main-nav { @include margin(0); - vertical-align: middle; + @include padding(0); + text-align: center; - @include grid-media-only('xs') { - text-align: center; + @include grid-media('sm') { + text-align: right; } li { @@ -36,9 +50,10 @@ a { @include padding(5px); display: inline-block; - color: darken($color-white, 40%); + color: darken($color-white, 30%); font-family: $font-sans; font-size: em(16px); + border-bottom: solid 3px $color-black; } &:first-child > a, @@ -49,13 +64,17 @@ } } + // -------------------------------- + // SECTIONS + // -------------------------------- + .section { - @include centered-grid-container; @include padding(20px); } // Welcome Section. .section--welcome { + @include centered-grid-container; h1, h2, @@ -64,33 +83,146 @@ h5, p { color: $color-white; - max-width: 80%; + @media #{$breakpoint-sm} { + max-width: 80%; + } } h2 { - font-size: modular-scale(5); + @include margin(0); + + @media #{$breakpoint-sm} { + font-size: modular-scale(3); + } + @media #{$breakpoint-md} { + font-size: modular-scale(4); + } + @media #{$breakpoint-lg} { + font-size: modular-scale(4); + } + @media #{$breakpoint-xl} { + font-size: modular-scale(6); + } + font-size: modular-scale(3); + } p { - font-size: modular-scale(3); + @media #{$breakpoint-sm} { + font-size: modular-scale(1); + } + @media #{$breakpoint-sm} { + font-size: modular-scale(1); + } + @media #{$breakpoint-sm} { + font-size: modular-scale(2); + } + @media #{$breakpoint-sm} { + font-size: modular-scale(2); + } + font-size: modular-scale(0); } } // UI Components Section. .section--ui-components { + @include centered-grid-container; background: $color-white; - clear: both; + .su-card { + box-shadow: none; + border: 0; + } } // Developer Resources Section .section--dev-resources { + @include display-grid; + @include grid-column-gap; + @include grid-columns(1fr); + + @include grid-media('sm') { + $width: ($screen-sm/2) - $gutter-sm; + @include grid-columns(auto $width $width auto); + } + + @include grid-media('md') { + $width: ($screen-md/2) - $gutter-md; + @include grid-columns(auto $width $width auto); + } + + @include grid-media('lg') { + $width: ($screen-lg/2) - $gutter-lg; + @include grid-columns(auto $width $width auto); + } + + @include grid-media('xl') { + $width: ($screen-xl/2) - $gutter-xl; + @include grid-columns(auto $width $width auto); + } + + + background: $color-light-sandstone; + + h2 { + @media #{$breakpoint-sm} { + grid-column-start: 2; + } + } + + .su-card { + @media #{$breakpoint-sm} { + grid-row-start: row2-start; + grid-column-start: 2; + } + border: 0; + box-shadow: none; + img { + max-width: 100px; + margin: $gutter-md auto; + } + h3 { + @media #{$breakpoint-sm} { + text-align: center; + } + } + } + .card-2 { + @media #{$breakpoint-sm} { + grid-column-start: 3; + } + } } // More Info Section .section--more-info { + @include centered-grid-container; background: $color-mint; + + h2 { + text-align: center; + } + + ul { + @include display-grid; + @include grid-media('sm', 1fr 1fr 1fr); + } + + li { + list-style: none; + list-style-type: none; + } + + a { + color: $color-black; + text-decoration: underline; + + &:hover { + color: $color-white; + } + } + } } From 4ca3a3814d87e7f501f13692333e618b546915f2 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 2 Nov 2018 12:03:49 -0700 Subject: [PATCH 007/123] fixup! wip. --- core/css/decanter.css | 22 ------------------- .../global-footer/_global-footer.scss | 3 +-- .../mixins/layout/_sticky-footer.scss | 7 ++++++ core/scss/utilities/mixins/layout/index.scss | 3 ++- kss/builder/decanter/index.twig | 1 + kss/builder/decanter/kss-assets/css/kss.css | 5 +++-- kss/builder/decanter/scss/_global-footer.scss | 0 kss/builder/decanter/scss/_home.scss | 3 ++- kss/builder/decanter/scss/kss.scss | 3 ++- 9 files changed, 18 insertions(+), 29 deletions(-) create mode 100644 core/scss/utilities/mixins/layout/_sticky-footer.scss create mode 100644 kss/builder/decanter/scss/_global-footer.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 6592d2486..c135c594a 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2101,31 +2101,9 @@ button, width: auto; } } .global-footer { - display: -ms-grid; - display: grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; padding: 2.5rem 0; background-color: #8c1515; color: #ffffff; } - .global-footer > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - .global-footer { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } - @media only screen and (min-width: 768px) { - .global-footer { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { - .global-footer { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { - .global-footer { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } .global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index 3fb701955..4bee60ec5 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -13,7 +13,7 @@ // Global styles for the global footer. .global-footer { - @include centered-grid-container; + // @include centered-grid-container; @include padding(2.5rem 0); background-color: $color-cardinal-red; color: $color-white; @@ -34,7 +34,6 @@ @include grid-media("xs", 100%) { @include grid-rows(auto auto); - justify-items: center; } diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss new file mode 100644 index 000000000..853f6dcf7 --- /dev/null +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -0,0 +1,7 @@ +@charset 'UTF-8'; + +@mixin sticky-footer { + body > footer:last-child { + background: #F0F; + } +} diff --git a/core/scss/utilities/mixins/layout/index.scss b/core/scss/utilities/mixins/layout/index.scss index 6b50611d5..7695e7dff 100644 --- a/core/scss/utilities/mixins/layout/index.scss +++ b/core/scss/utilities/mixins/layout/index.scss @@ -17,4 +17,5 @@ 'page-layout--single-column', 'page-layout--left-sidebar', 'page-layout--right-sidebar', - 'page-layout--three-column'; + 'page-layout--three-column', + 'sticky-footer'; diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index d27ebdafc..fde18ed9a 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -258,6 +258,7 @@ Fork me on GitHub {% endif %} +{% include "@decanter/components/global-footer/global-footer.twig" with {} only %} diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 37af834f7..7dfeaee71 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -986,9 +986,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { display: none; } #kss-node.kss-home .kss-main { - width: 100%; margin: 30px 0 0; - padding: 0; } + padding: 0; + width: 100%; + float: none; } #kss-node.kss-home { background: #2e2d29; } diff --git a/kss/builder/decanter/scss/_global-footer.scss b/kss/builder/decanter/scss/_global-footer.scss new file mode 100644 index 000000000..e69de29bb diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index fa5401fa0..f64ee6275 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -1,7 +1,8 @@ #kss-node.kss-home .kss-main { - width: 100%; @include margin(30px 0 0 0); @include padding(0); + width: 100%; + float: none; } #kss-node.kss-home { diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index b15442a46..930c093f5 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -20,4 +20,5 @@ 'class-based-grid', 'colors-demo', 'home', - 'layout-colors'; + 'layout-colors', + 'global-footer'; From 2bb7cfe840a775ea9062c64159fe7f2e18d1cc9e Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 2 Nov 2018 12:22:02 -0700 Subject: [PATCH 008/123] fixup! wip. --- .../utilities/mixins/layout/_sticky-footer.scss | 17 +++++++++++++++-- kss/builder/decanter/kss-assets/css/kss.css | 13 ++++++++++--- kss/builder/decanter/scss/_brand-bar.scss | 3 --- kss/builder/decanter/scss/_global-footer.scss | 5 +++++ kss/builder/decanter/scss/_home.scss | 4 ++++ 5 files changed, 34 insertions(+), 8 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index 853f6dcf7..8d6732657 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -1,7 +1,20 @@ @charset 'UTF-8'; +// +// @sticky-footer +// +// Slam the footer to the bottom of the window below all content no matter +// the size of the browser or content. +// +// Apply this mixin to the body tag only. +// @mixin sticky-footer { - body > footer:last-child { - background: #F0F; + display: grid; + height: 100vh; // Avoid the IE 10-11 `min-height` bug. + @include padding(0); + @include margin(0); + + .global-footer { + align-self: flex-end; } } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 7dfeaee71..8d981d1f0 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -370,9 +370,6 @@ template { position: fixed; top: 0; z-index: 9999; } - @media screen and (max-width: 769px) { - #kss-node > .su-brand-bar { - margin-left: -20px; } } .kss-style { color: #3D3D3D; @@ -993,6 +990,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home { background: #2e2d29; } + #kss-node.kss-home .kss-section { + margin-bottom: 0; } #kss-node.kss-home h2, #kss-node.kss-home h3, #kss-node.kss-home h4, #kss-node.kss-home h5, #kss-node.kss-home p, #kss-node.kss-home li { color: #2e2d29; } #kss-node.kss-home header { @@ -1384,4 +1383,12 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .region--sidebar-second { background-color: rgba(0, 128, 0, 0.2); } +body#kss-node { + display: grid; + height: 100vh; + padding: 0; + margin: 0; } + body#kss-node .global-footer { + align-self: flex-end; } + /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_brand-bar.scss b/kss/builder/decanter/scss/_brand-bar.scss index ca6f7fce4..6ec34eafd 100644 --- a/kss/builder/decanter/scss/_brand-bar.scss +++ b/kss/builder/decanter/scss/_brand-bar.scss @@ -6,8 +6,5 @@ position: fixed; top: 0; z-index: 9999; - @media screen and (max-width: 769px) { - margin-left: -20px; - } } } diff --git a/kss/builder/decanter/scss/_global-footer.scss b/kss/builder/decanter/scss/_global-footer.scss index e69de29bb..35c6646e7 100644 --- a/kss/builder/decanter/scss/_global-footer.scss +++ b/kss/builder/decanter/scss/_global-footer.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +body#kss-node { + @include sticky-footer; +} diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index f64ee6275..d29d226c8 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -8,6 +8,10 @@ #kss-node.kss-home { background: $color-black; + .kss-section { + @include margin(null null 0 null); + } + h2,h3,h4,h5,p,li { color: $color-black; } From 51b1b9e895b8e94d2fd35ddb25c277dca7cac28b Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 2 Nov 2018 12:26:05 -0700 Subject: [PATCH 009/123] Sticky footer mixin. --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 11 +++++++++-- kss/builder/decanter/kss-assets/css/kss.css | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index 8d6732657..f50ea9306 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -6,7 +6,14 @@ // Slam the footer to the bottom of the window below all content no matter // the size of the browser or content. // -// Apply this mixin to the body tag only. +// Apply this mixin to the body tag only. It will set the body tag height to +// 100% and set it to display as #grid. This mixin will then target a direct +// decendant element with the class `.global-footer` and set it to css grid's +// align-self: flex-end; This will keep the footer at the bottom of the page +// when the content is shorter than the window but all the content to push the +// footer below the viewport when the page is long. +// +// Style guide: Mixins.Layout.Sticky Footer // @mixin sticky-footer { display: grid; @@ -14,7 +21,7 @@ @include padding(0); @include margin(0); - .global-footer { + > .global-footer { align-self: flex-end; } } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 8d981d1f0..a1813e862 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1388,7 +1388,7 @@ body#kss-node { height: 100vh; padding: 0; margin: 0; } - body#kss-node .global-footer { + body#kss-node > .global-footer { align-self: flex-end; } /*# sourceMappingURL=kss.css.map */ \ No newline at end of file From dd4c3c72903368682e81b3c22033d76065eb6ddc Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 2 Nov 2018 12:40:16 -0700 Subject: [PATCH 010/123] Sticky footer mixin. --- core/css/decanter.css | 22 +++++++++++++++++++ .../global-footer/_global-footer.scss | 3 +-- kss/builder/decanter/kss-assets/css/kss.css | 6 +++++ kss/builder/decanter/scss/_global-footer.scss | 13 +++++++++++ 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index c135c594a..6592d2486 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2101,9 +2101,31 @@ button, width: auto; } } .global-footer { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; padding: 2.5rem 0; background-color: #8c1515; color: #ffffff; } + .global-footer > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + .global-footer { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } + @media only screen and (min-width: 768px) { + .global-footer { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } + @media only screen and (min-width: 1024px) { + .global-footer { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } + @media only screen and (min-width: 1500px) { + .global-footer { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } .global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index 4bee60ec5..f4a001bcd 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -12,8 +12,7 @@ // Global styles for the global footer. .global-footer { - - // @include centered-grid-container; + @include centered-grid-container; @include padding(2.5rem 0); background-color: $color-cardinal-red; color: $color-white; diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index a1813e862..093857217 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1390,5 +1390,11 @@ body#kss-node { margin: 0; } body#kss-node > .global-footer { align-self: flex-end; } + body#kss-node .kss-sidebar { + padding-bottom: 150px; + z-index: 0; } + body#kss-node .global-footer { + position: relative; + z-index: 10; } /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_global-footer.scss b/kss/builder/decanter/scss/_global-footer.scss index 35c6646e7..2a33c599f 100644 --- a/kss/builder/decanter/scss/_global-footer.scss +++ b/kss/builder/decanter/scss/_global-footer.scss @@ -1,5 +1,18 @@ @charset "UTF-8"; + body#kss-node { @include sticky-footer; + + + // To support the sticky footer we must put the sidebar behind the footer. + .kss-sidebar { + @include padding(null null 150px null); + z-index: 0; + } + + .global-footer { + position: relative; + z-index: 10; + } } From 7702e1f71682701fcc5178819df8d0c591bc96e6 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 2 Nov 2018 15:29:04 -0700 Subject: [PATCH 011/123] Update core/scss/utilities/mixins/layout/_sticky-footer.scss Co-Authored-By: sherakama --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index f50ea9306..20f47df3d 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -3,7 +3,7 @@ // // @sticky-footer // -// Slam the footer to the bottom of the window below all content no matter +// Stick the footer to the bottom of the browser window no matter // the size of the browser or content. // // Apply this mixin to the body tag only. It will set the body tag height to From d9296afe0e451ca8b178efa5be1fd4e2d2b724bd Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 2 Nov 2018 15:29:12 -0700 Subject: [PATCH 012/123] Update core/scss/utilities/mixins/layout/_sticky-footer.scss Co-Authored-By: sherakama --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index 20f47df3d..dcd586427 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -8,7 +8,7 @@ // // Apply this mixin to the body tag only. It will set the body tag height to // 100% and set it to display as #grid. This mixin will then target a direct -// decendant element with the class `.global-footer` and set it to css grid's +// descendant element with the class `.global-footer` and set it to css grid's // align-self: flex-end; This will keep the footer at the bottom of the page // when the content is shorter than the window but all the content to push the // footer below the viewport when the page is long. From c8576e4830829a56ec71d8c5d3a1cd4f158fc148 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 2 Nov 2018 15:29:51 -0700 Subject: [PATCH 013/123] Update core/scss/utilities/mixins/layout/_sticky-footer.scss Co-Authored-By: sherakama --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index dcd586427..a3a30933f 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -6,7 +6,7 @@ // Stick the footer to the bottom of the browser window no matter // the size of the browser or content. // -// Apply this mixin to the body tag only. It will set the body tag height to +// Apply this mixin to the `` tag only. It will set the body tag height to // 100% and set it to display as #grid. This mixin will then target a direct // descendant element with the class `.global-footer` and set it to css grid's // align-self: flex-end; This will keep the footer at the bottom of the page From 8c63bf7d151681f2c7fae5b55a8118fc8a17c11e Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 14:31:45 -0800 Subject: [PATCH 014/123] New grid stuff. --- Gruntfile.js | 16 + core/scss/core/grid/_grid.scss | 2 +- .../mixins/flex/_flex-container.scss | 22 + .../utilities/mixins/flex/_flex-item.scss | 17 + core/scss/utilities/mixins/flex/index.scss | 5 + .../_centered-grid-container.scss | 2 +- .../utilities/mixins/grid/_display-grid.scss | 14 + .../mixins/grid/_grid-align-self.scss | 10 + .../utilities/mixins/grid/_grid-classes.scss | 38 - .../mixins/grid/_grid-column-gap.scss | 25 + .../utilities/mixins/grid/_grid-columns.scss | 13 + .../mixins/grid/_grid-item-spans.scss | 17 + .../mixins/grid/_grid-justify-self.scss | 11 + .../utilities/mixins/grid/_grid-rows.scss | 14 + .../mixins/grid/_responsive-grid-columns.scss | 54 + core/scss/utilities/mixins/grid/index.scss | 12 +- .../mixins/layout/_grid-media-only.scss | 47 - .../utilities/mixins/layout/_grid-media.scss | 47 - .../utilities/mixins/layout/_ms-grid.scss | 82 - .../mixins/layout/four-column/_molive.scss | 29 + .../mixins/layout/four-column/index.scss | 5 + core/scss/utilities/mixins/layout/index.scss | 11 +- .../{ => pages}/_page-layout--global.scss | 0 .../_page-layout--left-sidebar.scss | 0 .../_page-layout--right-sidebar.scss | 0 .../_page-layout--single-column.scss | 0 .../_page-layout--three-column.scss | 0 .../utilities/mixins/layout/pages/index.scss | 8 + .../centered-container.json | 3 + .../centered-container.twig | 23 +- .../layout/four-column/molive/molive.json | 9 + .../layout/four-column/molive/molive.png | Bin 0 -> 4294 bytes .../layout/four-column/molive/molive.twig | 51 + .../layout/full-width/bricks/bricks.html.twig | 47 + .../layout/full-width/bricks/bricks.png | Bin 0 -> 3832 bytes .../layout/full-width/bricks/css/bricks.css | 189 ++ .../layout/full-width/bricks/scss/bricks.scss | 38 + .../layout/full-width/ibeam/css/ibeam.css | 141 ++ .../layout/full-width/ibeam/ibeam.html.twig | 33 + .../layout/full-width/ibeam/ibeam.png | Bin 0 -> 1978 bytes .../layout/full-width/ibeam/scss/ibeam.scss | 27 + .../layout/one-column/basic/basic.html.twig | 19 + .../layout/one-column/basic/basic.png | Bin 0 -> 1488 bytes .../layout/one-column/basic/css/basic.css | 67 + .../layout/one-column/basic/scss/basic.scss | 11 + .../page-layout--single-column.json | 0 .../page-layout--single-column.twig | 0 .../layout/three-column/bars/bars.html.twig | 31 + .../layout/three-column/bars/bars.png | Bin 0 -> 3298 bytes .../layout/three-column/bars/css/bars.css | 169 ++ .../layout/three-column/bars/scss/bars.scss | 31 + .../battleship/battleship.html.twig | 51 + .../three-column/battleship/battleship.png | Bin 0 -> 4710 bytes .../battleship/css/battleship.css | 275 +++ .../battleship/scss/battleship.scss | 64 + .../blastila/left/blastila-left.html.twig | 45 + .../blastila/left/blastila-left.png | Bin 0 -> 3864 bytes .../blastila/left/css/blastila-left.css | 285 +++ .../blastila/left/scss/blastila-left.scss | 75 + .../blastila/right/blastila-right.html.twig | 46 + .../blastila/right/blastila-right.png | Bin 0 -> 3735 bytes .../blastila/right/css/blastila-right.css | 319 +++ .../blastila/right/scss/blastila-right.scss | 71 + .../layout/three-column/chess/chess.html.twig | 52 + .../layout/three-column/chess/chess.png | Bin 0 -> 5046 bytes .../layout/three-column/chess/css/chess.css | 173 ++ .../layout/three-column/chess/scss/chess.scss | 34 + .../cuttoner/left/css/cuttoner-left.css | 271 +++ .../cuttoner/left/cuttoner-left.html.twig | 41 + .../cuttoner/left/cuttoner-left.png | Bin 0 -> 3940 bytes .../cuttoner/left/scss/cuttoner-left.scss | 63 + .../cuttoner/right/css/cuttoner-right.css | 265 +++ .../cuttoner/right/cuttoner-right.html.twig | 40 + .../cuttoner/right/cuttoner-right.png | Bin 0 -> 3851 bytes .../cuttoner/right/scss/cuttoner-right.scss | 57 + .../page-layout--three-column.json | 0 .../page-layout--three-column.twig | 0 .../percles/left/css/percles-left.css | 221 ++ .../percles/left/percles-left.html.twig | 39 + .../percles/left/percles-left.png | Bin 0 -> 3783 bytes .../percles/left/scss/percles-left.scss | 48 + .../percles/right/css/percles-right.css | 221 ++ .../percles/right/percles-right.html.twig | 39 + .../percles/right/percles-right.png | Bin 0 -> 3745 bytes .../percles/right/scss/percles-right.scss | 48 + .../layout/three-column/robot/css/robot.css | 223 ++ .../layout/three-column/robot/robot.html.twig | 37 + .../layout/three-column/robot/robot.png | Bin 0 -> 3304 bytes .../layout/three-column/robot/scss/robot.scss | 46 + .../space-invader/css/space-invader.css | 181 ++ .../space-invader/scss/space-invader.scss | 33 + .../space-invader/space-invader.html.twig | 36 + .../space-invader/space-invader.png | Bin 0 -> 3469 bytes .../three-column/strigges/css/strigges.css | 217 ++ .../three-column/strigges/scss/strigges.scss | 44 + .../three-column/strigges/strigges.html.twig | 33 + .../layout/three-column/strigges/strigges.png | Bin 0 -> 3254 bytes .../left/css/sunset-delorean-left.css | 325 +++ .../left/scss/sunset-delorean-left.scss | 73 + .../left/sunset-delorean-left.html.twig | 40 + .../left/sunset-delorean-left.png | Bin 0 -> 3140 bytes .../right/css/sunset-delorean-right.css | 348 +++ .../right/scss/sunset-delorean-right.scss | 85 + .../right/sunset-delorean-right.html.twig | 40 + .../right/sunset-delorean-right.png | Bin 0 -> 3054 bytes .../thions/bottom/css/thions-bottom.css | 227 ++ .../thions/bottom/scss/thions-bottom.scss | 50 + .../thions/bottom/thions-bottom.html.twig | 39 + .../thions/bottom/thions-bottom.png | Bin 0 -> 3564 bytes .../thions/top/css/thions-top.css | 227 ++ .../thions/top/scss/thions-top.scss | 49 + .../thions/top/thions-top.html.twig | 39 + .../three-column/thions/top/thions-top.png | Bin 0 -> 3628 bytes .../valmer/left/css/valmer-left.css | 223 ++ .../valmer/left/scss/valmer-left.scss | 45 + .../valmer/left/valmer-left.html.twig | 41 + .../three-column/valmer/left/valmer-left.png | Bin 0 -> 4009 bytes .../valmer/right/css/valmer-right.css | 243 ++ .../valmer/right/scss/valmer-right.scss | 52 + .../valmer/right/valmer-right.html.twig | 41 + .../valmer/right/valmer-right.png | Bin 0 -> 3725 bytes .../layout/two-column/aiur/aiur.html.twig | 34 + .../templates/layout/two-column/aiur/aiur.png | Bin 0 -> 1074 bytes .../layout/two-column/aiur/css/aiur.css | 94 + .../layout/two-column/aiur/scss/aiur.scss | 36 + .../layout/two-column/donies/css/donies.css | 175 ++ .../layout/two-column/donies/donies.html.twig | 33 + .../layout/two-column/donies/donies.png | Bin 0 -> 3832 bytes .../layout/two-column/donies/scss/donies.scss | 32 + .../layout/two-column/frogger/css/frogger.css | 175 ++ .../two-column/frogger/frogger.html.twig | 45 + .../layout/two-column/frogger/frogger.png | Bin 0 -> 4654 bytes .../two-column/frogger/scss/frogger.scss | 32 + .../pacman/left/css/pacman-left.css | 217 ++ .../pacman/left/pacman-left.html.twig | 33 + .../two-column/pacman/left/pacman-left.png | Bin 0 -> 3272 bytes .../pacman/left/scss/pacman-left.scss | 44 + .../pacman/right/css/pacman-right.css | 217 ++ .../pacman/right/pacman-right.html.twig | 36 + .../two-column/pacman/right/pacman-right.png | Bin 0 -> 3278 bytes .../pacman/right/scss/pacman-right.scss | 46 + .../page-layout--left-sidebar.json | 0 .../page-layout--left-sidebar.twig | 0 .../page-layout--right-sidebar.json | 0 .../page-layout--right-sidebar.twig | 0 .../plakes/left/css/plakes-left.css | 251 ++ .../plakes/left/plakes-left.html.twig | 30 + .../two-column/plakes/left/plakes-left.png | Bin 0 -> 952 bytes .../plakes/left/scss/plakes-left.scss | 57 + .../plakes/right/css/plakes-right.css | 217 ++ .../plakes/right/plakes-right.html.twig | 30 + .../two-column/plakes/right/plakes-right.png | Bin 0 -> 2827 bytes .../plakes/right/scss/plakes-right.scss | 45 + .../layout/two-column/toucan/css/toucan.css | 175 ++ .../layout/two-column/toucan/scss/toucan.scss | 32 + .../layout/two-column/toucan/toucan.html.twig | 11 + .../layout/two-column/toucan/toucan.png | Bin 0 -> 2090 bytes .../trunks/left/css/trunks-left.css | 217 ++ .../trunks/left/scss/trunks-left.scss | 45 + .../trunks/left/trunks-left.html.twig | 27 + .../two-column/trunks/left/trunks-left.png | Bin 0 -> 2467 bytes .../trunks/right/css/trunks-right.css | 217 ++ .../trunks/right/scss/trunks-right.scss | 43 + .../trunks/right/trunks-right.html.twig | 27 + .../two-column/trunks/right/trunks-right.png | Bin 0 -> 2280 bytes .../two-column/wedge/left/css/wedge-left.css | 240 ++ .../wedge/left/scss/wedge-left.scss | 51 + .../wedge/left/wedge-left.html.twig | 27 + .../two-column/wedge/left/wedge-left.png | Bin 0 -> 2084 bytes .../wedge/right/css/wedge-right.css | 217 ++ .../wedge/right/scss/wedge-right.scss | 44 + .../wedge/right/wedge-right.html.twig | 27 + .../two-column/wedge/right/wedge-right.png | Bin 0 -> 2188 bytes package-lock.json | 2077 +++++++++-------- package.json | 3 +- 175 files changed, 11361 insertions(+), 1268 deletions(-) create mode 100644 core/scss/utilities/mixins/flex/_flex-container.scss create mode 100644 core/scss/utilities/mixins/flex/_flex-item.scss create mode 100644 core/scss/utilities/mixins/flex/index.scss rename core/scss/utilities/mixins/{layout => grid}/_centered-grid-container.scss (93%) create mode 100644 core/scss/utilities/mixins/grid/_display-grid.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-align-self.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-column-gap.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-columns.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-item-spans.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-justify-self.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-rows.scss create mode 100644 core/scss/utilities/mixins/grid/_responsive-grid-columns.scss delete mode 100644 core/scss/utilities/mixins/layout/_grid-media-only.scss delete mode 100644 core/scss/utilities/mixins/layout/_grid-media.scss delete mode 100644 core/scss/utilities/mixins/layout/_ms-grid.scss create mode 100644 core/scss/utilities/mixins/layout/four-column/_molive.scss create mode 100644 core/scss/utilities/mixins/layout/four-column/index.scss rename core/scss/utilities/mixins/layout/{ => pages}/_page-layout--global.scss (100%) rename core/scss/utilities/mixins/layout/{ => pages}/_page-layout--left-sidebar.scss (100%) rename core/scss/utilities/mixins/layout/{ => pages}/_page-layout--right-sidebar.scss (100%) rename core/scss/utilities/mixins/layout/{ => pages}/_page-layout--single-column.scss (100%) rename core/scss/utilities/mixins/layout/{ => pages}/_page-layout--three-column.scss (100%) create mode 100644 core/scss/utilities/mixins/layout/pages/index.scss create mode 100644 core/templates/layout/centered-container/centered-container.json create mode 100644 core/templates/layout/four-column/molive/molive.json create mode 100644 core/templates/layout/four-column/molive/molive.png create mode 100644 core/templates/layout/four-column/molive/molive.twig create mode 100644 core/templates/layout/full-width/bricks/bricks.html.twig create mode 100644 core/templates/layout/full-width/bricks/bricks.png create mode 100644 core/templates/layout/full-width/bricks/css/bricks.css create mode 100644 core/templates/layout/full-width/bricks/scss/bricks.scss create mode 100644 core/templates/layout/full-width/ibeam/css/ibeam.css create mode 100644 core/templates/layout/full-width/ibeam/ibeam.html.twig create mode 100644 core/templates/layout/full-width/ibeam/ibeam.png create mode 100644 core/templates/layout/full-width/ibeam/scss/ibeam.scss create mode 100644 core/templates/layout/one-column/basic/basic.html.twig create mode 100644 core/templates/layout/one-column/basic/basic.png create mode 100644 core/templates/layout/one-column/basic/css/basic.css create mode 100644 core/templates/layout/one-column/basic/scss/basic.scss rename core/templates/layout/{ => one-column}/page-layout--single-column/page-layout--single-column.json (100%) rename core/templates/layout/{ => one-column}/page-layout--single-column/page-layout--single-column.twig (100%) create mode 100644 core/templates/layout/three-column/bars/bars.html.twig create mode 100644 core/templates/layout/three-column/bars/bars.png create mode 100644 core/templates/layout/three-column/bars/css/bars.css create mode 100644 core/templates/layout/three-column/bars/scss/bars.scss create mode 100644 core/templates/layout/three-column/battleship/battleship.html.twig create mode 100644 core/templates/layout/three-column/battleship/battleship.png create mode 100644 core/templates/layout/three-column/battleship/css/battleship.css create mode 100644 core/templates/layout/three-column/battleship/scss/battleship.scss create mode 100644 core/templates/layout/three-column/blastila/left/blastila-left.html.twig create mode 100644 core/templates/layout/three-column/blastila/left/blastila-left.png create mode 100644 core/templates/layout/three-column/blastila/left/css/blastila-left.css create mode 100644 core/templates/layout/three-column/blastila/left/scss/blastila-left.scss create mode 100644 core/templates/layout/three-column/blastila/right/blastila-right.html.twig create mode 100644 core/templates/layout/three-column/blastila/right/blastila-right.png create mode 100644 core/templates/layout/three-column/blastila/right/css/blastila-right.css create mode 100644 core/templates/layout/three-column/blastila/right/scss/blastila-right.scss create mode 100644 core/templates/layout/three-column/chess/chess.html.twig create mode 100644 core/templates/layout/three-column/chess/chess.png create mode 100644 core/templates/layout/three-column/chess/css/chess.css create mode 100644 core/templates/layout/three-column/chess/scss/chess.scss create mode 100644 core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css create mode 100644 core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig create mode 100644 core/templates/layout/three-column/cuttoner/left/cuttoner-left.png create mode 100644 core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss create mode 100644 core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css create mode 100644 core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig create mode 100644 core/templates/layout/three-column/cuttoner/right/cuttoner-right.png create mode 100644 core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss rename core/templates/layout/{ => three-column}/page-layout--three-column/page-layout--three-column.json (100%) rename core/templates/layout/{ => three-column}/page-layout--three-column/page-layout--three-column.twig (100%) create mode 100644 core/templates/layout/three-column/percles/left/css/percles-left.css create mode 100644 core/templates/layout/three-column/percles/left/percles-left.html.twig create mode 100644 core/templates/layout/three-column/percles/left/percles-left.png create mode 100644 core/templates/layout/three-column/percles/left/scss/percles-left.scss create mode 100644 core/templates/layout/three-column/percles/right/css/percles-right.css create mode 100644 core/templates/layout/three-column/percles/right/percles-right.html.twig create mode 100644 core/templates/layout/three-column/percles/right/percles-right.png create mode 100644 core/templates/layout/three-column/percles/right/scss/percles-right.scss create mode 100644 core/templates/layout/three-column/robot/css/robot.css create mode 100644 core/templates/layout/three-column/robot/robot.html.twig create mode 100644 core/templates/layout/three-column/robot/robot.png create mode 100644 core/templates/layout/three-column/robot/scss/robot.scss create mode 100644 core/templates/layout/three-column/space-invader/css/space-invader.css create mode 100644 core/templates/layout/three-column/space-invader/scss/space-invader.scss create mode 100644 core/templates/layout/three-column/space-invader/space-invader.html.twig create mode 100644 core/templates/layout/three-column/space-invader/space-invader.png create mode 100644 core/templates/layout/three-column/strigges/css/strigges.css create mode 100644 core/templates/layout/three-column/strigges/scss/strigges.scss create mode 100644 core/templates/layout/three-column/strigges/strigges.html.twig create mode 100644 core/templates/layout/three-column/strigges/strigges.png create mode 100644 core/templates/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css create mode 100644 core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss create mode 100644 core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig create mode 100644 core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.png create mode 100644 core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css create mode 100644 core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss create mode 100644 core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig create mode 100644 core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.png create mode 100644 core/templates/layout/three-column/thions/bottom/css/thions-bottom.css create mode 100644 core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss create mode 100644 core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig create mode 100644 core/templates/layout/three-column/thions/bottom/thions-bottom.png create mode 100644 core/templates/layout/three-column/thions/top/css/thions-top.css create mode 100644 core/templates/layout/three-column/thions/top/scss/thions-top.scss create mode 100644 core/templates/layout/three-column/thions/top/thions-top.html.twig create mode 100644 core/templates/layout/three-column/thions/top/thions-top.png create mode 100644 core/templates/layout/three-column/valmer/left/css/valmer-left.css create mode 100644 core/templates/layout/three-column/valmer/left/scss/valmer-left.scss create mode 100644 core/templates/layout/three-column/valmer/left/valmer-left.html.twig create mode 100644 core/templates/layout/three-column/valmer/left/valmer-left.png create mode 100644 core/templates/layout/three-column/valmer/right/css/valmer-right.css create mode 100644 core/templates/layout/three-column/valmer/right/scss/valmer-right.scss create mode 100644 core/templates/layout/three-column/valmer/right/valmer-right.html.twig create mode 100644 core/templates/layout/three-column/valmer/right/valmer-right.png create mode 100644 core/templates/layout/two-column/aiur/aiur.html.twig create mode 100644 core/templates/layout/two-column/aiur/aiur.png create mode 100644 core/templates/layout/two-column/aiur/css/aiur.css create mode 100644 core/templates/layout/two-column/aiur/scss/aiur.scss create mode 100644 core/templates/layout/two-column/donies/css/donies.css create mode 100644 core/templates/layout/two-column/donies/donies.html.twig create mode 100644 core/templates/layout/two-column/donies/donies.png create mode 100644 core/templates/layout/two-column/donies/scss/donies.scss create mode 100644 core/templates/layout/two-column/frogger/css/frogger.css create mode 100644 core/templates/layout/two-column/frogger/frogger.html.twig create mode 100644 core/templates/layout/two-column/frogger/frogger.png create mode 100644 core/templates/layout/two-column/frogger/scss/frogger.scss create mode 100644 core/templates/layout/two-column/pacman/left/css/pacman-left.css create mode 100644 core/templates/layout/two-column/pacman/left/pacman-left.html.twig create mode 100644 core/templates/layout/two-column/pacman/left/pacman-left.png create mode 100644 core/templates/layout/two-column/pacman/left/scss/pacman-left.scss create mode 100644 core/templates/layout/two-column/pacman/right/css/pacman-right.css create mode 100644 core/templates/layout/two-column/pacman/right/pacman-right.html.twig create mode 100644 core/templates/layout/two-column/pacman/right/pacman-right.png create mode 100644 core/templates/layout/two-column/pacman/right/scss/pacman-right.scss rename core/templates/layout/{ => two-column}/page-layout--left-sidebar/page-layout--left-sidebar.json (100%) rename core/templates/layout/{ => two-column}/page-layout--left-sidebar/page-layout--left-sidebar.twig (100%) rename core/templates/layout/{ => two-column}/page-layout--right-sidebar/page-layout--right-sidebar.json (100%) rename core/templates/layout/{ => two-column}/page-layout--right-sidebar/page-layout--right-sidebar.twig (100%) create mode 100644 core/templates/layout/two-column/plakes/left/css/plakes-left.css create mode 100644 core/templates/layout/two-column/plakes/left/plakes-left.html.twig create mode 100644 core/templates/layout/two-column/plakes/left/plakes-left.png create mode 100644 core/templates/layout/two-column/plakes/left/scss/plakes-left.scss create mode 100644 core/templates/layout/two-column/plakes/right/css/plakes-right.css create mode 100644 core/templates/layout/two-column/plakes/right/plakes-right.html.twig create mode 100644 core/templates/layout/two-column/plakes/right/plakes-right.png create mode 100644 core/templates/layout/two-column/plakes/right/scss/plakes-right.scss create mode 100644 core/templates/layout/two-column/toucan/css/toucan.css create mode 100644 core/templates/layout/two-column/toucan/scss/toucan.scss create mode 100644 core/templates/layout/two-column/toucan/toucan.html.twig create mode 100644 core/templates/layout/two-column/toucan/toucan.png create mode 100644 core/templates/layout/two-column/trunks/left/css/trunks-left.css create mode 100644 core/templates/layout/two-column/trunks/left/scss/trunks-left.scss create mode 100644 core/templates/layout/two-column/trunks/left/trunks-left.html.twig create mode 100644 core/templates/layout/two-column/trunks/left/trunks-left.png create mode 100644 core/templates/layout/two-column/trunks/right/css/trunks-right.css create mode 100644 core/templates/layout/two-column/trunks/right/scss/trunks-right.scss create mode 100644 core/templates/layout/two-column/trunks/right/trunks-right.html.twig create mode 100644 core/templates/layout/two-column/trunks/right/trunks-right.png create mode 100644 core/templates/layout/two-column/wedge/left/css/wedge-left.css create mode 100644 core/templates/layout/two-column/wedge/left/scss/wedge-left.scss create mode 100644 core/templates/layout/two-column/wedge/left/wedge-left.html.twig create mode 100644 core/templates/layout/two-column/wedge/left/wedge-left.png create mode 100644 core/templates/layout/two-column/wedge/right/css/wedge-right.css create mode 100644 core/templates/layout/two-column/wedge/right/scss/wedge-right.scss create mode 100644 core/templates/layout/two-column/wedge/right/wedge-right.html.twig create mode 100644 core/templates/layout/two-column/wedge/right/wedge-right.png diff --git a/Gruntfile.js b/Gruntfile.js index 193867626..4f1be8d15 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,8 +1,24 @@ +/** + * Gruntfile. + * @type {[type]} + */ module.exports = function(grunt) { + + /** + * [sass description] + * @type {[type]} + */ + const sass = require('node-sass'); + + /** + * [pkg description] + * @type {[type]} + */ grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { options: { + implementation: sass, includePaths: [ "node_modules/bourbon/core", "node_modules/bourbon-neat/app/assets/stylesheets", diff --git a/core/scss/core/grid/_grid.scss b/core/scss/core/grid/_grid.scss index 38272564d..25451c3cf 100644 --- a/core/scss/core/grid/_grid.scss +++ b/core/scss/core/grid/_grid.scss @@ -8,7 +8,7 @@ // The grid. .grid--container { - @include grid--container; + @include flex-container; } .grid--item { diff --git a/core/scss/utilities/mixins/flex/_flex-container.scss b/core/scss/utilities/mixins/flex/_flex-container.scss new file mode 100644 index 000000000..979a03a3b --- /dev/null +++ b/core/scss/utilities/mixins/flex/_flex-container.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +// +// @flex-container +// +// Mixin to apply to the wrapper of all class-based layouts. +// +// Style guide: Mixins.Flex.flex-container +// +@mixin flex-container($gap: $gutter-md) { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: $site-max-width; + @include padding(null $site-margins-mobile); + + @media #{$breakpoint-md} { + @include padding(null $site-margins); + } +} diff --git a/core/scss/utilities/mixins/flex/_flex-item.scss b/core/scss/utilities/mixins/flex/_flex-item.scss new file mode 100644 index 000000000..92d8e5e61 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_flex-item.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// @flex-item +// +// Mixin to apply to an element within a class-based grid row. +// +// Style guide: Mixins.Flex.flex-item +// + +@mixin flex-item { + @media #{$breakpoint-md-only} { + &:last-child:nth-child(odd) { + width: calc(1 / 1 * 100% - (#{(1 - 1 / 1) * $gutter-md})); + } + } +} diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss new file mode 100644 index 000000000..5a518591f --- /dev/null +++ b/core/scss/utilities/mixins/flex/index.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +@import + 'flex-container', + 'flex-item'; diff --git a/core/scss/utilities/mixins/layout/_centered-grid-container.scss b/core/scss/utilities/mixins/grid/_centered-grid-container.scss similarity index 93% rename from core/scss/utilities/mixins/layout/_centered-grid-container.scss rename to core/scss/utilities/mixins/grid/_centered-grid-container.scss index 0e5eee131..b2ed20341 100644 --- a/core/scss/utilities/mixins/layout/_centered-grid-container.scss +++ b/core/scss/utilities/mixins/grid/_centered-grid-container.scss @@ -7,7 +7,7 @@ // This creates a three column row and places the first html element in to the // second column with a max width of the current breakpoint screen size. // -// Style guide Mixins.Layout.Centered Grid Container +// Style guide Mixins.Grid.Centered Grid Container // @mixin centered-grid-container { @include display-grid; diff --git a/core/scss/utilities/mixins/grid/_display-grid.scss b/core/scss/utilities/mixins/grid/_display-grid.scss new file mode 100644 index 000000000..5563b0a5c --- /dev/null +++ b/core/scss/utilities/mixins/grid/_display-grid.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +// +// @display-grid +// +// Mixin to render cssGrid in all modern browsers, including IE11. +// +// Style guide: Mixins.Layout.display-grid +// + +@mixin display-grid { + display: -ms-grid; + display: grid; +} diff --git a/core/scss/utilities/mixins/grid/_grid-align-self.scss b/core/scss/utilities/mixins/grid/_grid-align-self.scss new file mode 100644 index 000000000..a5d1b6f09 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-align-self.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// +// +// +@mixin grid-align-self($value) { + -ms-grid-row-align: $value; + align-self: $value; +} diff --git a/core/scss/utilities/mixins/grid/_grid-classes.scss b/core/scss/utilities/mixins/grid/_grid-classes.scss index 5b769bd2d..d136295a9 100644 --- a/core/scss/utilities/mixins/grid/_grid-classes.scss +++ b/core/scss/utilities/mixins/grid/_grid-classes.scss @@ -1,43 +1,5 @@ @charset "UTF-8"; -// -// @grid--container -// -// Mixin to apply to the wrapper of all class-based layouts. -// -// Style guide: Mixins.Grid.grid--container -// - -@mixin grid--container($gap: $gutter-md) { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: $site-max-width; - @include padding(null $site-margins-mobile); - - @media #{$breakpoint-md} { - @include padding(null $site-margins); - } -} - -// -// @grid--item -// -// Mixin to apply to an element within a class-based grid row. -// -// Style guide: Mixins.Grid.grid--item -// - -@mixin grid--item { - @media #{$breakpoint-md-only} { - &:last-child:nth-child(odd) { - width: calc(1 / 1 * 100% - (#{(1 - 1 / 1) * $gutter-md})); - } - } -} - // // @grid--12-of-12 // diff --git a/core/scss/utilities/mixins/grid/_grid-column-gap.scss b/core/scss/utilities/mixins/grid/_grid-column-gap.scss new file mode 100644 index 000000000..17e693f7f --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-column-gap.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +// +// @grid-column-gap +// +// Mixin to render cssGrid column gaps in all modern browsers, including IE11. +// +// Style guide: Mixins.Grid.grid-column-gap +// +@mixin grid-column-gap($gap: 30px) { + + > * { + margin-left: $gap / 2; + margin-right: $gap / 2; + } + + @supports (grid-column-gap: 20px) { + grid-column-gap: $gap; + + > * { + margin-left: 0; + margin-right: 0; + } + } +} diff --git a/core/scss/utilities/mixins/grid/_grid-columns.scss b/core/scss/utilities/mixins/grid/_grid-columns.scss new file mode 100644 index 000000000..38a8a0ad6 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-columns.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// @grid-columns +// +// Mixin to render cssGrid template columns in all modern browsers, including IE11. +// +// Style guide: Mixins.Grid.grid-columns +// +@mixin grid-columns($columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) { + -ms-grid-columns: $columns; + grid-template-columns: $columns; +} diff --git a/core/scss/utilities/mixins/grid/_grid-item-spans.scss b/core/scss/utilities/mixins/grid/_grid-item-spans.scss new file mode 100644 index 000000000..14079b1c1 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-item-spans.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// @grid-item-spans +// +// Mixin to render cssGrid column spans in all modern browsers, including IE11. +// +// Style guide: Mixins.Grid.grid-item-spans +// +@mixin grid-item-spans($col-start, $col-end, $row-start, $row-end) { + -ms-grid-column: $col-start; + -ms-grid-column-span: $col-end - $col-start; + -ms-grid-row: $row-start; + -ms-grid-row-span: $row-end - $row-start; + grid-column: #{$col-start} / #{$col-end}; + grid-row: #{$row-start} / #{$row-end}; +} diff --git a/core/scss/utilities/mixins/grid/_grid-justify-self.scss b/core/scss/utilities/mixins/grid/_grid-justify-self.scss new file mode 100644 index 000000000..b3356053e --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-justify-self.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// +// +// +// +@mixin grid-justify-self($value) { + -ms-grid-column-align: $value; + justify-self: $value; +} diff --git a/core/scss/utilities/mixins/grid/_grid-rows.scss b/core/scss/utilities/mixins/grid/_grid-rows.scss new file mode 100644 index 000000000..29d7f584b --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-rows.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +// +// @grid-rows +// +// Mixin to render cssGrid in IE11 browsers. +// +// Style guide: Mixins.Grid.grid-rows +// + +@mixin grid-rows($rows) { + -ms-grid-rows: $rows; + grid-template-rows: $rows; +} diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss new file mode 100644 index 000000000..1a81877b9 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +$responsive-columns-default: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr, + $breakpoint-xl: 1fr 1fr +); + +$responsive-columns-three: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr +); + +$responsive-columns-four: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr +); + +$responsive-gutters-default:( + $breakpoint-xs: $gutter-xs, + $breakpoint-sm: $gutter-sm, + $breakpoint-md: $gutter-md, + $breakpoint-lg: $gutter-lg, + $breakpoint-xl: $gutter-xl +); + +// +// responsive-grid-columns($grid-map) +// +// A mixin to create a responsive grid layout. +// +// $grid-map: A sass map with the columns per breakpoint. +// +// Styleguide: Mixins.Grid.Responsive Grid Columns +// +@mixin responsive-grid-columns($grid-map: $responsive-columns-default) { + @include display-grid; + + @each $breakpoint, $columns in $grid-map { + @media #{$breakpoint} { + // Todo: Add breakpoint sized gap. + @include grid-column-gap(map-get($breakpoint, $responsive-gutters-default)); + @include grid-columns($columns); + } + } +} diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index d41cb7198..af4fcab52 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -9,4 +9,14 @@ // @import - 'grid-classes'; + 'centered-grid-container', + 'display-grid' + 'grid-classes' + 'grid-column-gap', + 'grid-columns', + 'grid-container', + 'grid-item-spans', + 'grid-item', + 'grid-media-only', + 'grid-media', + 'grid-rows'; diff --git a/core/scss/utilities/mixins/layout/_grid-media-only.scss b/core/scss/utilities/mixins/layout/_grid-media-only.scss deleted file mode 100644 index 7212cddfc..000000000 --- a/core/scss/utilities/mixins/layout/_grid-media-only.scss +++ /dev/null @@ -1,47 +0,0 @@ -@charset 'UTF-8'; - -// -// @grid-media-only($breakpoint: 'xs', $grid: '1fr 1fr 1fr 1fr') -// -// A mixin for quickly defining a grid at a provided breakpoint. -// -// $breakpoint - String: One of xs, sm, md, lg, xl -// $grid - String: CSS grid definition of grid-columns -// $gutters - Mixed: 0 for disabled, 1 for enabled, or a specific setting. -// -// Style guide Mixins.Layout.Grid Media -// -@mixin grid-media-only($breakpoint: 'xs', $columns: 1fr 1fr 1fr 1fr, $gutters: 1) { - - $breakpoint-map: ( - 'xs': $breakpoint-xs-only, - 'sm': $breakpoint-sm-only, - 'md': $breakpoint-md-only, - 'lg': $breakpoint-lg-only, - 'xl': $breakpoint-xl - ); - - $gutter-map: ( - 'xs': $gutter-xs, - 'sm': $gutter-sm, - 'md': $gutter-md, - 'lg': $gutter-lg, - 'xl': $gutter-xl - ); - - @media #{map-get($breakpoint-map, $breakpoint)} { - @include grid-columns($columns); // Can't use repeat() function in IE - - @if $gutters == 1 { - padding-left: map-get($gutter-map, $breakpoint); - padding-right: map-get($gutter-map, $breakpoint); - } @elseif $gutters != 0 { - padding-left: $gutters; - padding-right: $gutters; - } - - @include grid-column-gap(map-get($gutter-map, $breakpoint)); - @content; - } - -} diff --git a/core/scss/utilities/mixins/layout/_grid-media.scss b/core/scss/utilities/mixins/layout/_grid-media.scss deleted file mode 100644 index 1f842df39..000000000 --- a/core/scss/utilities/mixins/layout/_grid-media.scss +++ /dev/null @@ -1,47 +0,0 @@ -@charset 'UTF-8'; - -// -// @grid-media($breakpoint: 'xs', $grid: '1fr 1fr 1fr 1fr') -// -// A mixin for quickly defining a grid at a provided breakpoint. -// -// $breakpoint - String: One of xs, sm, md, lg, xl -// $grid - String: CSS grid definition of grid-columns -// $gutters - Mixed: 0 for disabled, 1 for enabled, or a specific setting. -// -// Style guide Mixins.Layout.Grid Media -// -@mixin grid-media($breakpoint: 'xs', $columns: 1fr 1fr 1fr 1fr, $gutters: 1) { - - $breakpoint-map: ( - 'xs': $breakpoint-xs, - 'sm': $breakpoint-sm, - 'md': $breakpoint-md, - 'lg': $breakpoint-lg, - 'xl': $breakpoint-xl - ); - - $gutter-map: ( - 'xs': $gutter-xs, - 'sm': $gutter-sm, - 'md': $gutter-md, - 'lg': $gutter-lg, - 'xl': $gutter-xl - ); - - @media #{map-get($breakpoint-map, $breakpoint)} { - @include grid-columns($columns); // Can't use repeat() function in IE - - @if $gutters == 1 { - padding-left: map-get($gutter-map, $breakpoint); - padding-right: map-get($gutter-map, $breakpoint); - } @elseif $gutters != 0 { - padding-left: $gutters; - padding-right: $gutters; - } - - @include grid-column-gap(map-get($gutter-map, $breakpoint)); - @content; - } - -} diff --git a/core/scss/utilities/mixins/layout/_ms-grid.scss b/core/scss/utilities/mixins/layout/_ms-grid.scss deleted file mode 100644 index d167858ea..000000000 --- a/core/scss/utilities/mixins/layout/_ms-grid.scss +++ /dev/null @@ -1,82 +0,0 @@ -@charset "UTF-8"; - -// -// @display-grid -// -// Mixin to render cssGrid in all modern browsers, including IE11. -// -// Style guide: Mixins.Layout.display-grid -// - -@mixin display-grid { - display: -ms-grid; - display: grid; -} - -// -// @grid-item-spans -// -// Mixin to render cssGrid column spans in all modern browsers, including IE11. -// -// Style guide: Mixins.Layout.grid-item-spans -// - -@mixin grid-item-spans($col-start, $col-end, $row-start, $row-end) { - -ms-grid-column: $col-start; - -ms-grid-column-span: $col-end - $col-start; - -ms-grid-row: $row-start; - -ms-grid-row-span: $row-end - $row-start; - grid-column: #{$col-start} / #{$col-end}; - grid-row: #{$row-start} / #{$row-end}; -} - -// -// @grid-columns -// -// Mixin to render cssGrid template columns in all modern browsers, including IE11. -// -// Style guide: Mixins.Layout.grid-columns -// - -@mixin grid-columns($columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) { - -ms-grid-columns: $columns; - grid-template-columns: $columns; -} - -// -// @grid-rows -// -// Mixin to render cssGrid in IE11 browsers. -// -// Style guide: Mixins.Layout.grid-rows -// - -@mixin grid-rows($rows) { - -ms-grid-rows: $rows; - grid-template-rows: $rows; -} - -// -// @grid-column-gap -// -// Mixin to render cssGrid column gaps in all modern browsers, including IE11. -// -// Style guide: Mixins.Layout.grid-column-gap -// - -@mixin grid-column-gap($gap: 30px) { - - > * { - margin-left: $gap / 2; - margin-right: $gap / 2; - } - - @supports (grid-column-gap: 20px) { - grid-column-gap: $gap; - - > * { - margin-left: 0; - margin-right: 0; - } - } -} diff --git a/core/scss/utilities/mixins/layout/four-column/_molive.scss b/core/scss/utilities/mixins/layout/four-column/_molive.scss new file mode 100644 index 000000000..ec555ca19 --- /dev/null +++ b/core/scss/utilities/mixins/layout/four-column/_molive.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +// +// Layout - Molive +// +// A four column collapsible layout with a centered header and footer. +// +// Markup: ../../../../../templates/layout/four-column/molive/molive.twig +// + +.layout--molive { + + // A centered column that spans the max-width of the breakpoint. + > header { + @include centered-column; + } + + // A centered column broken in to four equal parts. + // Collapses to 2 columns by 2 columns ad the breakpoint-md + // Collapses to 1 column at mobile screens. + > section { + @include responsive-grid-columns($responsive-columns-four); + } + + // A centered column that spans the max-width of the breakpoint. + > footer { + @include centered-column; + } +} diff --git a/core/scss/utilities/mixins/layout/four-column/index.scss b/core/scss/utilities/mixins/layout/four-column/index.scss new file mode 100644 index 000000000..fadae25b1 --- /dev/null +++ b/core/scss/utilities/mixins/layout/four-column/index.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +// Roll er up. +@import + 'molive'; diff --git a/core/scss/utilities/mixins/layout/index.scss b/core/scss/utilities/mixins/layout/index.scss index 6b50611d5..119ffe10c 100644 --- a/core/scss/utilities/mixins/layout/index.scss +++ b/core/scss/utilities/mixins/layout/index.scss @@ -9,12 +9,5 @@ // @import - 'centered-grid-container', - 'grid-media', - 'grid-media-only', - 'ms-grid', - 'page-layout--global', - 'page-layout--single-column', - 'page-layout--left-sidebar', - 'page-layout--right-sidebar', - 'page-layout--three-column'; + 'pages/index', + 'four-column/index'; diff --git a/core/scss/utilities/mixins/layout/_page-layout--global.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--global.scss similarity index 100% rename from core/scss/utilities/mixins/layout/_page-layout--global.scss rename to core/scss/utilities/mixins/layout/pages/_page-layout--global.scss diff --git a/core/scss/utilities/mixins/layout/_page-layout--left-sidebar.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss similarity index 100% rename from core/scss/utilities/mixins/layout/_page-layout--left-sidebar.scss rename to core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss diff --git a/core/scss/utilities/mixins/layout/_page-layout--right-sidebar.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss similarity index 100% rename from core/scss/utilities/mixins/layout/_page-layout--right-sidebar.scss rename to core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss diff --git a/core/scss/utilities/mixins/layout/_page-layout--single-column.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss similarity index 100% rename from core/scss/utilities/mixins/layout/_page-layout--single-column.scss rename to core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss diff --git a/core/scss/utilities/mixins/layout/_page-layout--three-column.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss similarity index 100% rename from core/scss/utilities/mixins/layout/_page-layout--three-column.scss rename to core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss diff --git a/core/scss/utilities/mixins/layout/pages/index.scss b/core/scss/utilities/mixins/layout/pages/index.scss new file mode 100644 index 000000000..32c118ba8 --- /dev/null +++ b/core/scss/utilities/mixins/layout/pages/index.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +@import + 'page-layout--global', + 'page-layout--single-column', + 'page-layout--left-sidebar', + 'page-layout--right-sidebar', + 'page-layout--three-column'; diff --git a/core/templates/layout/centered-container/centered-container.json b/core/templates/layout/centered-container/centered-container.json new file mode 100644 index 000000000..fd754da53 --- /dev/null +++ b/core/templates/layout/centered-container/centered-container.json @@ -0,0 +1,3 @@ +{ + "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/centered-container/centered-container.twig b/core/templates/layout/centered-container/centered-container.twig index d0b61c466..b984e31b1 100644 --- a/core/templates/layout/centered-container/centered-container.twig +++ b/core/templates/layout/centered-container/centered-container.twig @@ -1,8 +1,25 @@ - +{# +/** + * @file + * Centered container + * + * An example of how to center a container in the page. + * + * Available modifiers + * - None so far + * + * Available Variables + * - attributes: A series of tag attributes for the wrapper + * - modifier_class: Modifier css classes for this component. + * - body: A block element that is expected to be replaced with your content. + * - content: Your content + * + */ +#} +}
    {% block body %} -

    My Centered Content

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    + {{ content }} {% endblock %}
    diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/four-column/molive/molive.json new file mode 100644 index 000000000..05f6ae801 --- /dev/null +++ b/core/templates/layout/four-column/molive/molive.json @@ -0,0 +1,9 @@ +{ + "modifier_class": "layout--molive", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "header": "

    Header Column

    ", + "footer": "

    Footer Column

    ", +} diff --git a/core/templates/layout/four-column/molive/molive.png b/core/templates/layout/four-column/molive/molive.png new file mode 100644 index 0000000000000000000000000000000000000000..454a33eb5c79c5ff8577eeec738e924b2b0a48ed GIT binary patch literal 4294 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 CHuaPM literal 0 HcmV?d00001 diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/four-column/molive/molive.twig new file mode 100644 index 000000000..5eaa11d9c --- /dev/null +++ b/core/templates/layout/four-column/molive/molive.twig @@ -0,0 +1,51 @@ +{# +/** + * @file + * Template for a 4 column panel layout. + * + * This template provides a four column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['left']: Content in the left column. + * - $content['right']: Content in the right column. + */ +#} + + + {# A centered max-width header region #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Because of the responsive behaviour each column is required. #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + + {# Centered max-width footer region #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} +
    diff --git a/core/templates/layout/full-width/bricks/bricks.html.twig b/core/templates/layout/full-width/bricks/bricks.html.twig new file mode 100644 index 000000000..4518cc4cb --- /dev/null +++ b/core/templates/layout/full-width/bricks/bricks.html.twig @@ -0,0 +1,47 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['left']: Content in the left column. + * - $content['right']: Content in the right column. + */ +#} +
    + {{ content.hero }} +
    + +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second}} +
    +
    +
    + +
    + {{ content.full }} +
    + +
    +
    +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    +
    +
    diff --git a/core/templates/layout/full-width/bricks/bricks.png b/core/templates/layout/full-width/bricks/bricks.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/full-width/bricks/css/bricks.css b/core/templates/layout/full-width/bricks/css/bricks.css new file mode 100644 index 000000000..905678e9f --- /dev/null +++ b/core/templates/layout/full-width/bricks/css/bricks.css @@ -0,0 +1,189 @@ +.full-width { + clear: both; +} + +.full-width::after { + clear: both; + content: ""; + display: block; +} + +.layout--bricks { + clear: both; +} + +@media only screen and (max-width: 575px) { + .layout--bricks { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--bricks { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--bricks { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--bricks { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--bricks { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--bricks { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--bricks::after { + clear: both; + content: ""; + display: block; + } +} + +.layout--bricks::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--bricks .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--bricks .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--bricks .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--bricks .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--bricks .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--bricks .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--bricks .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--bricks .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--bricks .column { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--bricks .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--bricks .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--bricks .column { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--bricks .column { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=bricks.css.map */ \ No newline at end of file diff --git a/core/templates/layout/full-width/bricks/scss/bricks.scss b/core/templates/layout/full-width/bricks/scss/bricks.scss new file mode 100644 index 000000000..e3cfa69e1 --- /dev/null +++ b/core/templates/layout/full-width/bricks/scss/bricks.scss @@ -0,0 +1,38 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.full-width { + @include clearfix; + clear: both; +} + +.layout--bricks { + @include responsive-container($default-container); + @include clearfix; + clear: both; + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column { + @include responsive-grid-column($column, $default-container); + } + +} diff --git a/core/templates/layout/full-width/ibeam/css/ibeam.css b/core/templates/layout/full-width/ibeam/css/ibeam.css new file mode 100644 index 000000000..53f04ba38 --- /dev/null +++ b/core/templates/layout/full-width/ibeam/css/ibeam.css @@ -0,0 +1,141 @@ +.layout--ibeam .full-width { + clear: both; +} + +.layout--ibeam .full-width::after { + clear: both; + content: ""; + display: block; +} + +.layout--ibeam .ibeam-centered { + clear: both; +} + +@media only screen and (max-width: 575px) { + .layout--ibeam .ibeam-centered { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--ibeam .ibeam-centered { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--ibeam .ibeam-centered { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--ibeam .ibeam-centered { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--ibeam .ibeam-centered { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--ibeam .ibeam-centered { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; + } +} + +.layout--ibeam .ibeam-centered::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--ibeam .ibeam-centered .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--ibeam .ibeam-centered .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +/*# sourceMappingURL=ibeam.css.map */ \ No newline at end of file diff --git a/core/templates/layout/full-width/ibeam/ibeam.html.twig b/core/templates/layout/full-width/ibeam/ibeam.html.twig new file mode 100644 index 000000000..4c3f13a75 --- /dev/null +++ b/core/templates/layout/full-width/ibeam/ibeam.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['left']: Content in the left column. + * - $content['right']: Content in the right column. + */ +#} +
    +
    + {{ content.hero }} +
    + +
    + {{ content.first }} +
    + +
    + {{ content.full }} +
    + +
    + {{ content.second }} +
    +
    diff --git a/core/templates/layout/full-width/ibeam/ibeam.png b/core/templates/layout/full-width/ibeam/ibeam.png new file mode 100644 index 0000000000000000000000000000000000000000..989f5e4cb95f7bb1e6bc80acb392f1002a5947ac GIT binary patch literal 1978 zcmV;r2SxaaP)Ml-MPQIj2FW0q z43cSDWmo^HLdDCMFWG;+Pbfg5w-Q>l)FA?zRdjb+eE7i!?Cw4o4XG?jo__h1zyA3j zTpWT_ZBRglwbF$;aUKnh9kpeS>s?JBwm;1^ra9*<`52!jDv&(lA$3l9|H*gx&2N7- z9#V>M_HE?gKP4AO37?Yv(pRnI5C_2*w5TYK(|C6$$&vMT=$t&nm4PhF7WieGB~6v) zq^@c%zC-)uJ$%(24+-jeNJ5T_g7eF5R}5}(*0gnuIOy3V)AJ?Xsp7C=&6_sbMbaA8e9LDO(=XmQeg3TCZed_yslS<*eTB&(C| zK%Hdn&fJ}88Sc(xb&|>AB#VwJsc(=6A! z{H}uFK%i=!Q*J@ZiV2Xs;@>OCzkg0@Ib7+-I7=JSHG4j9rU@qH8+vn`;b=Z5jcl)rbGyPPR5CS2Dq2s?y ztE`t4aYCNwc<)C;GFdQdGD!DV+1-x=_5bnUFjp^wtr(TjzO9Y&A zh!dQb%YBi%2P|8(uu@7Kzd2hUps1vzBqFMcr~?%)dKEDwVi^$;d{#GY#nr&FJi}#z z&pgfv;#Lo8`<*U%J6rfiv9KjoMc@y={|hOucEXtm^iE2S_b(`W5uZcWc67R3yyk>5 zQWb&N&xiMdI4H|N2vrTVZ&mHBobBB1iYtj` z2kt8+K?88%`vG=MPUNsYPV3&rYr*HW&XOzV%@o&;;1%aq6U{pB_~Ms8ZbqFXB2=fI zP|g}|$%HMC`v2?IV`LDkgAO1Lxwa0!o}v(h7#xTaCwBJBm^_a@#(9TEngI!2Aeju3K{6R6 zlR+{_ra6?gyg_QRL|}WTvy_oZ25Cil@{>orv%6)M)MPF5sk~dX47^o4LVilWVNjCR+xSoIYnpe*ct>Iw7?6iiYjGlL5YKptll`NNF zS|X&B%!->1`%bNw^_IJ9L@=xUm1K<1@WMGe>MbQiS;*ZvCw%g= zk3iwo^EVtFoKY2l6fJmC;P~L26cf%Z*2-JkS`{fKP7Zr~^RL&u`uc#wZ%;UWb58H1 zq&P3B%0Q?RDI{V{{r7z9l^5XZMg!mKyPfv=heB} z9Rt@ORb}AC*DrbX-+f|;){C&NfXV?bvc1#g@skhP``&}mkjkRs*;n82_dh+QyeM(b zyx}?^i380m-haGHx7!^LNt4oh6F7QNQ1mLY%=cGrzHL#qg6Zt}9GNCcBGA@Ad8!lY zBo(B}kzN;nk>hf|K(QI7>C)=YQW@c>itKFkmPcq^#0%28gG%>a@=;F>*<7jog?4l&NELwb@XS0#p%W3 zBnxIuYl385;&%X&g|FuBOiP1g=Cm1!S<*eTBx^lvMrxL14F{7!GDs$aWHLww$<#zh z79!mNNY*2CSKOVE+JIz6Napi4z-aVvh3qDr7!p+(31z$-c{!TAjTV|MpCd*KsZxf5 zG880@;~|L?I@>LF9&Aw+0iXNLG8$Dz4EY{&Fkr+v#xWn}opcV5rq`{g2#)RD7FpYk zht%q1{OG5T*?F){3<>9#Tsi3&*Q;~Xh08wQBKM>ds+LjtQBYB03T(aG=HcVrA)fHY zOurNrO}dhb>Ao|PxsIv#l=_te&daSa_% + {{ content.content }} + diff --git a/core/templates/layout/one-column/basic/basic.png b/core/templates/layout/one-column/basic/basic.png new file mode 100644 index 0000000000000000000000000000000000000000..4bdf0e752d6106494f92c786cca9fc85cb1748b8 GIT binary patch literal 1488 zcmeAS@N?(olHy`uVBq!ia0vp^89>~|!3HD^gU$y7DaPU;cPEB*=VV?2*>f{PB1$5B zeXNr6bM+Ea@{>~aDsl^esu&n-Dy)Fa+|-gpg^Jvqyke^gTP3gxD1^l#~=$>Fbx5m+O@q>*W`v z>l<2HTIw4Z=^Gj80#)c1SLT%@R_NvxD?a#8ycO zWDy)d+?iUDiLfcJ80syc2lYWR`i6Q2`f#&>T5Uk0Rsoq6sW}lYnYpQX#Xvjk3=K?d z!0It%5H=#|j6~9DjG_}s2CCCWALIcf4?#i;ED8)RJ1!f2c+lH%xwFYSFfcGb^mK6y zsbGA2?V{i10*2O)^}7{MFj)mAb6k&;n16`<`zd#WW9$xkhH428+pcY6isGy4CE~PhXtfyy^d=k7u)c8ur!y z4z$~6uQ%U*&XjGx8>`-_KR6pCEcYeae0AD^NS*D*0h{wq-F)f#v#Ln%LW@HA{9Wu( z5vh8vY5BNXP?Eb3L*S@X!GX2gO?F^G^A?0oUt8cDQE@% z8Xb7rZ#XTm;8hmrcqkCfA+kJ?g~?DRiM#QUNsog5X zmAje#Dg3RppYg7noS<08|8C_eo1Hb84&G;FI@nmpWNX^Qb!MKY45;k&boFyt=akR{ E07!N;KmY&$ literal 0 HcmV?d00001 diff --git a/core/templates/layout/one-column/basic/css/basic.css b/core/templates/layout/one-column/basic/css/basic.css new file mode 100644 index 000000000..3f1db6b84 --- /dev/null +++ b/core/templates/layout/one-column/basic/css/basic.css @@ -0,0 +1,67 @@ +@media only screen and (max-width: 575px) { + .layout--basic { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--basic { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--basic { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--basic { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--basic { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--basic { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--basic::after { + clear: both; + content: ""; + display: block; + } +} + +/*# sourceMappingURL=basic.css.map */ \ No newline at end of file diff --git a/core/templates/layout/one-column/basic/scss/basic.scss b/core/templates/layout/one-column/basic/scss/basic.scss new file mode 100644 index 000000000..250ec8e06 --- /dev/null +++ b/core/templates/layout/one-column/basic/scss/basic.scss @@ -0,0 +1,11 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +.layout--basic { + @include responsive-container($default-container); +} diff --git a/core/templates/layout/page-layout--single-column/page-layout--single-column.json b/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json similarity index 100% rename from core/templates/layout/page-layout--single-column/page-layout--single-column.json rename to core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json diff --git a/core/templates/layout/page-layout--single-column/page-layout--single-column.twig b/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig similarity index 100% rename from core/templates/layout/page-layout--single-column/page-layout--single-column.twig rename to core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig diff --git a/core/templates/layout/three-column/bars/bars.html.twig b/core/templates/layout/three-column/bars/bars.html.twig new file mode 100644 index 000000000..9001772a4 --- /dev/null +++ b/core/templates/layout/three-column/bars/bars.html.twig @@ -0,0 +1,31 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    +
    diff --git a/core/templates/layout/three-column/bars/bars.png b/core/templates/layout/three-column/bars/bars.png new file mode 100644 index 0000000000000000000000000000000000000000..8419c65111c5bf5109ecb781eff8b7eaf4eb41a7 GIT binary patch literal 3298 zcmZ`+3pmqj7?+AHqg-m1mXvadZHAbQNE1z&R&Eh<-7sT|F zG>#Oxr4+ejqR^5y9d!Pp%Q@#cd!Ft8UEcToe!t)Qe(&?&Dcil4U=S1}CME{9+HGM6 zJSo68W`zXs%M7gY0v=1~c9!O1CC$ns!1xlG=)iEW!J|C_19aRy14&*w%m5l-B_@Vp zqJd$67sFkJ8Q@Q)qnTLM?-poaJiiQARrzkh@WZM)*x0J<3=H;C(bv(_L8zL5R8&+j z!Jgh|I}6;RJ21nl`Z5?aG#nlp8mbeD(g_Uqfg_EKjNk}exUQ}?V4+P9qcYr?+En_c zg&;rTSa{Jrg2^-nIgqL{AJ?4}c!YsfRh>WR=Vt+@7nA(!Br1K87C;a_zXM0=AmBe^ z1Fo3)RkSUc>E-WWK@RYu(t$HfkO%|Jcl-bB{5tVBPsiUpQM$i-{Itl zTHjXzxlBM9_)qCgK$p5XZDL}eNh=F8B6G=@)1FY}J8~r>SpuyPlKj9rl_fGsOZ^>g z_J6xgs+Eu#)?sdA#;|IQYR^6@#iFoz9BlklM#LIq&@nD9nw`Qaq1C8Ve5?7< zoQUVHk(4o|HBnBH$WC{YfW8k5(9;LGWJux@?Qtx71a{dY4^_Gt@;msD=$x2K5@Xlsm`^uw|wmieoiHVy2 z!KG6bvNtM&>{oU^SxcMwyj*!USi1V#=dCkGKAWfKk76IO+MczyN-OaD`e7I*Ll#!W z+7KeFn0hhNsE{=mB7J=3>sIC22_=q+X?$zmLGL3Rs~yX>OX$3A*s%WL*6eEVtNWQ3 z@1b$IW^W<{n=sRJ8tm;9?RWV~Sa}=n?gOcELt-YP53Bvh@owK}U6B0xEK}pi!_}ry z6IEY#P1f|p$|es+i;sN>csQ7}p~nB~n%AtO!iRz8lNp{ z*T?hmE#Rc|t3|X>A5kBbx7=vI!%3^-_U`P#+jQR0ka+W9O&G#{+ei4AWa<0THdiJ7 zNi#Rj`dCXmwpJJy7V2p@U54~ksFHsshLI=&GXon0v$5I!##bqB*Abd;^9(nZ&mQ_{ zd%wD*9&zwEQ_j#cAgD!)q=XgCg*B&SJ?f&Odp<2q*23{tyrGt*jc(It6U3kBEsNhd zskgT{a-_K0!;M6-+kfbb2V3sNduUW$ZWy%SVD0DUZ;%M2evw98qMQS|)(bBnbDWm9 z8}E)a=U+At!UVk}Sf{Lez{Om+(2)Z|7+bp~Nw%y@*f-eWl-_Hmsi3=6F=6nO5_ef| zM(t$WK>LfyWtDbULeGN6vd@Eff=6sZ*5h+fVkD^}=Tk#83MZvpU%PfGuOMh9ns*=r zh)_n@tEtc+|7)joSSmapKcS-7ZMqm6ld7g)C=T#pVVJ$P5zvC?k3Y-U<(@SvvQ^&q z1fq7cA$l0hEBHT0UZL4glB5q?&X64qmjIxPBu`({tBfZ4aydlxGh4mcpNQYd;iMku zM+edt$!RM}G+i0f*H1ioj7?aL3iOhqmm|qmQVE1}6k&}fZfe!OU<%UOZVcuCK#RW> z*GKcss>fz^7dKk3s#lN9-oBu=@VHw=^kO0oo$w506B@r>#GO)5$EnHbhGvq8 z)L8i`_~ImmiPrWEl8d-mtv`3KfdtodA z1j52Ff$AoS`~AGaC5vqT{C84*R1BqfzA8ZJzq|jcs~@TRpX4fVB~ndc4x!dh2oiVf{+vDCmD8cj1>NU0+N=N zQ6AQI5~-fnx^FmfF%_Nj!v1wc>5<*d zt|rBoD4^)}?A}Q;)C2Bf_+sX_=<~cx>kIL|`D2ek3fzMi_J)v<)(0n2TLFZ<8MzlL zCQZYJ-;(BaCe!V54YSgKBZ`$GqW4EYSy?&uk3Un35Do?bH!2bKne$hR5!IA7(9XOQ z|JEnHcY#%EU|K*7(%NmrcZEzmA7~en?as#=Y94i5zH;}&d`U8Xw4JD*ZAW_Dk5Gnp zK=bV(_K8*O0CV6LH$~mcGVEaeF3r2_k+ysR?}J4oP$uTd!Qaun{73tc_31cKoii}x znEkk)onSISM^nPz^lgwA*U~6FPP0An`m33A1^2o6>G2yT-kGn;DrIVB4^xTuLEc+Y zBjX=9LY}&%i+2-(>_g$Nt5+{l+Z-!@O|>rGsv*RN03g2;bD2iUCy5XvFG@59AyN*>kqau-`3AfR_LB9nJ#nZkZDxG5t z@(!&1CWN9sba>wbqB-&G3_0Nv)n2W*X6ejwdmmdqP!g1p-TgEYbmqdYbw((l6I?P& z2gpR`a~JL)g@B(}lbfi#`KN=#gPccN2o9mvBSxmpaITi>JVe9w7^tC4_aQZJ*A#WH z<=Sba|M8DW3k|pYn~k|7nd6wKPc;Rc5BC7r{jPg@Q`iK%0RV#LzabP2;z058?R^#7 zy8ldfZ~rnX{rEKk*LY%W3Uhe^LEr>-YJ{jAf$Zt0LD&5YeNmmme_Yw?A-gLS z(^;V<9i*R}lGWwnUM?d^zJB`Y#qk^bjrIA*n$Wx&+76wB_>wVFa+X$X!Uhx7Pqktr zA*N7g*-esD+ee8nU#;4HT`KXKdyn(^Qt*Aem@@b5i-_Ku2!r_KZa?m|RXW1^y6wIK zOQ>Z7bDuZ4O|#1v7T1(VGB8Q6ur5Td@~P5`T2;Em5q8^gX)3hZeDZ*=Z)FgP%QPgN zrJf-ehgS5p#>={S_=!*5jcQfLYU`1RiG6dKq5XH_SvM;yq&np!1?A)ZHMRY)2h(#$ z)BHO!FwciYdNy3a++_2T*Q{9?yn(Y({dp+xR@DDdV8XeC?;jFq6;j?NXRXwUyIRs$ z%VnLoTh+3=m~;9Fcca-6hEJx znejy16nl7c-`nYQes0Uw(5u5Gr|Wv|heh0Sk}CVd +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    + +
    + {{ content.sixth }} +
    + +
    + {{ content.seventh }} +
    + +
    + {{ content.eighth }} +
    +
    + diff --git a/core/templates/layout/three-column/battleship/battleship.png b/core/templates/layout/three-column/battleship/battleship.png new file mode 100644 index 0000000000000000000000000000000000000000..3162b44ebcafc00d42301a2e562146fb030f4662 GIT binary patch literal 4710 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 ZX<{SA2I_bBfyZBjklMytRT@r_{{t&ty2k(j literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/battleship/css/battleship.css b/core/templates/layout/three-column/battleship/css/battleship.css new file mode 100644 index 000000000..b4fe21560 --- /dev/null +++ b/core/templates/layout/three-column/battleship/css/battleship.css @@ -0,0 +1,275 @@ +@media only screen and (max-width: 575px) { + .layout--battleship { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--battleship { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--battleship { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--battleship { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--battleship { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--battleship { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--battleship::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--battleship .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--battleship .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--battleship .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--battleship .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--battleship .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--battleship .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--battleship .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--battleship .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--battleship .column { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--battleship .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--battleship .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--battleship .column { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--battleship .column { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--battleship .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--battleship .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--battleship .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--battleship .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--battleship .column--first { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--battleship .column--first { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--battleship .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--battleship .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--battleship .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--battleship .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--battleship .column--second { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--battleship .column--second { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +.layout--battleship .column--third { + clear: both; +} + +.layout--battleship .column--third::after { + clear: both; + content: ""; + display: block; +} + +/*# sourceMappingURL=battleship.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/battleship/scss/battleship.scss b/core/templates/layout/three-column/battleship/scss/battleship.scss new file mode 100644 index 000000000..80e154253 --- /dev/null +++ b/core/templates/layout/three-column/battleship/scss/battleship.scss @@ -0,0 +1,64 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +// Responsive grid patterns for the column. +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +.layout--battleship { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column { + @include responsive-grid-column($column, $default-container); + } + + .column--first { + @include responsive-grid-column($column-first, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + + .column--third { + @include clearfix; + clear: both; + } + +} diff --git a/core/templates/layout/three-column/blastila/left/blastila-left.html.twig b/core/templates/layout/three-column/blastila/left/blastila-left.html.twig new file mode 100644 index 000000000..4484d9b23 --- /dev/null +++ b/core/templates/layout/three-column/blastila/left/blastila-left.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    + +
    + {{ content.header }} +
    + +
    + + +
    +
    +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    + +
    +
    +
    +
    diff --git a/core/templates/layout/three-column/blastila/left/blastila-left.png b/core/templates/layout/three-column/blastila/left/blastila-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a31ac6d8cf5cbdf438d737703de4ece3423224c3 GIT binary patch literal 3864 zcmZWs2UJt(5)M^Bs-V)OgpPCsA#?~OfT6P#4FrfJ(n2#JMWl!{vs3{ALFru)k=_kO zK>`wy9=dd7gK+_0)P4Ir=iPJe{pZfiH|@XkpScN^P-7M*UM2tlzydJ=TT@mP<&I^b zr##ag=x$OLsz7UFeL(F9{|1H5N7*_AIb1Ubx%>IZ!9D!k5ON_tXo?m9pcw+9kUoeY zxKN0Xw{IXQL<{&+14N;Ju;qb5KUIRfw15uREQJjG0uVwfa#!ROfZ9w#LPDAW9ydYO zV55KFls7FPGAIZQl9$I|Fmf1WIlll;c|~<~b$JCPc_k%TiiT`psBaKFMAkP@2E z+5sa1-2+hQAe5i4&=0$CH^1N@EgaNb#YqsGy?xQ~&=Y|MU18((yN>veNI!-z5JaHRXRK@LNK^ zs`ZmgDVH{rru@I9*Jg717!XR?O(_Ui&o+c=`-XEMzxsLYS*?p$+>zPjZT-p@9$xo= zt+php%5oxI0U5`|rnyC9tLJkeaf^oa3Eo#xPW!z-qJeOmKD3g)j3bbOqsLt)O(3jPiW5t=mIzp@VpK%*ev& z=uX!v>HdvkWOmo!7pk_?Bc35nEI2@`f*&mFk_q1g%0O1R&2-jC%@ zH|T4Je57W~^b;K#J$xJ&n|yw;4ybQ=*j0j6Af)2SiIMbLdTYBiw@Jd0?y-3pz`WQS zX{K1hw``jFtgGCE-*MEa>pDn0&9o@I`OvqFi+;;nIn`8eA$epViW6l-T{W-+u8dyc z8Ab!&nYf;x$}#zz2PIcVJ>NonoVp3DXkcD(zD-?K-kI+sZhb!LI?uS$0ysD8IWJx# z^_Eb?Cm;m?C=DOa4caL4>>5$!gk0*%@cRb5@esvR-|!BcJNeqog^mVVEbUP6oLK^& zOlzMyn_x>ften*iw)W&1y6Vm-_ctx`$ElI_CBRqiM|sBBz&C&I-o)Fu2kMd=(^5fGmx$?#gDq6>B;B^I@srcs5~ z?}XYZjAri>p$*g2@tpNZIEhnDQxm`)WaYL6p-Swd8jNWEpqJev*&%s-RW|X_;u4OU)!*8NfW)Nz$}~~CGnhi9l^ZNtoxp+@WZW? z_KaN43MJjz!U}Fz0>ow|IN`EeSAs3aSOeD*I5)06@c@)64ZM@(7C?YlarG|D0!H_M zd5MZijs~z7@j5ztMIT5-vp#yQF%69Vi7c2agl_=~vEBV*1t_9eS6E~zWa54E6@UCD zrr)t(1OhEiZz|hcx4rX;(nsFW3+#ava3C zx4h}O_ciHmSHC|4yNLM|ayj$fOc_6yxL2iLoQf=L=S$6CX~7#V`QeFie@X%4H(w*v z3L?YQzGSMAmoEx-ukN%Yb4=%%>_X4%y}M|!xM}?T+#fv^$Zn)={hz~E`&pmr*9Rdk zx!id_|G8%jtLk5XWDaY({SGK5rFr)oy+FiiN_OZv&c|B;8M`A3gO7P#=2>!Pw7EYV z(NPi-(DF`3^l!h!&JppI404cjHS_Z%{-ylA4yqnT8wRN~-&C3tM*KPppf3n5(~VPE-wUi=y%?U=vZ!>Pt#5oO@<<_QcnYtg){ zJ#U(%bbaUXD?-WQe)zmcdVIt(0oCBCy0eRG6U-UCX^ z38He}2(97&z1q(iEHl8<)efnb$ z-Z5%lRh!caq$~MT2)1=ce4;sH_d6?RMJ`hkoGad1G55lG$Wwenjo3NJOZU0#RC@8W zTXREy^bxlfNewt@_P4NjvO_%~GojeSwu9W2J!g8tP>Ks5=O?u&rDi-G!i-1X=otLf zxii&fj+bc6ML%q3)PWR+ozo~s0R8~~azF(Glzjmb@rH^@SkrJL0boKp<-Bw)q+<8l zhD?TGScK}NA2cRhDo z#bSp5R&Xs>)tq+od5g*1$Zf9aWbLJz*rY;4O^G{^gNgxG& zq6}N!_P(|Tuey`kGq;i^>eU8gXnEw1 zR&IYPMM~RzQu4V*3g%P7O64azzqdh08+!&xogi_rGp6w1j9D-X9o~PeH<;bLL1REN z|JzxaE2^VW&)8$Y4_7zvG4&6Q&LPx%9WAUSGc3$*q&|YRMw}dT!y=F9T@K0^X;uk- zp3x$(wmvZqd+OK0Va9m}fdK=j3*ij%r(c+$SpTV5ZbvCNFO#~r+-qs{;m@AUUy$h6pG4M@$vAc!N$a+`+-)QEgPcVhO?-Afyc-uv8 zskZxD%{?aa@LjpSaY{^wlp#*GEn;cWZ%&rJ>=rz8|1^J|V+AckX_vbhSkH=^F3I9< z$7L}nb>#X;1NXPu&5{QO=8XNzJZWTN5xwrHG!mLUm}78F%8a4G{|WwHzI{!PltM|1 z7rDc_)RtRysWB1k+1L+FR*u6Z62redd>);Lfg6QU`f3vr;Hvnv_R8L;T6<8gli`b_ zV*I8yoXTu2UEBk;k^bRR`d07kQ{>Y9Rzs_vX!pT*4MMt%k3mvp@au83T3y^dC&K_w z%mu{DawkLle;GK@Bqb-?8X!t7kI)mvIjBGK6#PLtO~XICnrDKtiqD#e1_#%Kr}MNx zDpwDSUrg0c*ELGaf`^dq`8z~)U+x%kjd`_$aPd=K%u%J)u&m6d7N z@)_PXk@oa@%@t{zPZDZoHfSvgy!0S9p>497(X9bl{R6_9xA+wIEQSy@8l=sJN z<2WOHQ6nV0oFSSc0r(thx zESZ*E~7(ahIizn(SS@INR}C8LK?zXVgXx zD7w4e^z|)sbn{)5u_a|zTl4rY9D29gXOCrg-)x~dx|TY}I897%_(b*9Y$Nw=Hr1le zS3^pOR=tJZc0ob7A4!;3RA16jc+54q*`e@Wa#h>2*W3i+PVE`=S})B~)8PQ|o4ug+ z$qEjAbjnf8A*Yp}EG@bzmh@pb9sX_doJIQ?omT*jcs>W1#i-b^0IPq-4YdQr{DZ<3 z?BLklMK) qYY#OkBetgC+2%E{lZoR&;VB#T + +
    + {{ content.header }} +
    + +
    + +
    +
    +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    +
    +
    + + + +
    + diff --git a/core/templates/layout/three-column/blastila/right/blastila-right.png b/core/templates/layout/three-column/blastila/right/blastila-right.png new file mode 100644 index 0000000000000000000000000000000000000000..53fb6da161b168f90bf90cba24e1aeec561475a9 GIT binary patch literal 3735 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/blastila/right/css/blastila-right.css b/core/templates/layout/three-column/blastila/right/css/blastila-right.css new file mode 100644 index 000000000..2f9542c30 --- /dev/null +++ b/core/templates/layout/three-column/blastila/right/css/blastila-right.css @@ -0,0 +1,319 @@ +@media only screen and (max-width: 575px) { + .layout--blastila--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--blastila--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--blastila--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--blastila--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--blastila--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--blastila--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--blastila--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right .column--second { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--blastila--right .column--second { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--blastila--right .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right .column--third { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right .column--third { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right .column--third { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--blastila--right .column--third { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--blastila--right .column--third--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right .column--third--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right .column--third--first { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right .column--third--first { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right .column--third--first { + width: calc(100% - 120px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--blastila--right .column--third--first { + width: calc(100% - 0.5in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--blastila--right .column--third-second, + .layout--blastila--right .column--third-third { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=blastila-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss b/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss new file mode 100644 index 000000000..685789d56 --- /dev/null +++ b/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss @@ -0,0 +1,71 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +$column-third: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +$column-one: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 1, + 'lg': 1 of 1, + 'xl': 1 of 1, + 'print': 1 of 1 +); + +$column-fifty: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + + +.layout--blastila--right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--second { + @include responsive-grid-column($column, $default-container); + } + + .column--third { + @include responsive-grid-column($column-third, $default-container); + } + + .column--third--first { + @include responsive-grid-column($column-one, $default-container); + } + + .column--third-second, + .column--third-third { + @include responsive-grid-column($column-fifty, $default-container); + } + +} diff --git a/core/templates/layout/three-column/chess/chess.html.twig b/core/templates/layout/three-column/chess/chess.html.twig new file mode 100644 index 000000000..d2e05fa72 --- /dev/null +++ b/core/templates/layout/three-column/chess/chess.html.twig @@ -0,0 +1,52 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    + +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    + +
    + {{ content.sixth }} +
    +
    + +
    + {{ content.footer }} +
    +
    diff --git a/core/templates/layout/three-column/chess/chess.png b/core/templates/layout/three-column/chess/chess.png new file mode 100644 index 0000000000000000000000000000000000000000..b4ffd94c7f0682ac68f8b9a59a2a185158f1c4cd GIT binary patch literal 5046 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 SD8hgLVS{Sus~4+14Ei57f_^gq literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/chess/css/chess.css b/core/templates/layout/three-column/chess/css/chess.css new file mode 100644 index 000000000..7fbd78975 --- /dev/null +++ b/core/templates/layout/three-column/chess/css/chess.css @@ -0,0 +1,173 @@ +@media only screen and (max-width: 575px) { + .layout--chess { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--chess { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--chess { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--chess { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--chess { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--chess { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--chess::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--chess .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--chess .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--chess .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--chess .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--chess .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--chess .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--chess .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--chess .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--chess .column { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--chess .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--chess .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--chess .column { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--chess .column { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +.layout--chess .column--fifth { + clear: left; +} + +/*# sourceMappingURL=chess.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/chess/scss/chess.scss b/core/templates/layout/three-column/chess/scss/chess.scss new file mode 100644 index 000000000..40dca78eb --- /dev/null +++ b/core/templates/layout/three-column/chess/scss/chess.scss @@ -0,0 +1,34 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +.layout--chess { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column { + @include responsive-grid-column($column, $default-container); + } + + .column--fifth { + clear: left; + } +} diff --git a/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css b/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css new file mode 100644 index 000000000..5718d9040 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css @@ -0,0 +1,271 @@ +@media only screen and (max-width: 575px) { + .layout--cuttoner-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--cuttoner-left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--cuttoner-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--cuttoner-left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--cuttoner-left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-left .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-left .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-left .column--second { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-left .column--second { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-left .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-left .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-left .column--first { + width: calc(75% - 105px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-left .column--first { + width: calc(75% - 0.4375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (min-width: 768px) { + .layout--cuttoner-left .column--first { + order: 10; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-left .column--first .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-left .column--first .column { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-left .column--first .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-left .column--first .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-left .column--first .column { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-left .column--first .column { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=cuttoner-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig b/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig new file mode 100644 index 000000000..9a3b209e7 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + {{ content.footer }} +
    +
    + + +
    +
    diff --git a/core/templates/layout/three-column/cuttoner/left/cuttoner-left.png b/core/templates/layout/three-column/cuttoner/left/cuttoner-left.png new file mode 100644 index 0000000000000000000000000000000000000000..32a3e249b2e96273e3b339f2a0d4ed6cc69e3ae0 GIT binary patch literal 3940 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 LtPHD8oQ?lKmkt?a literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss b/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss new file mode 100644 index 000000000..01cb5593e --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss @@ -0,0 +1,63 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. + +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 3 of 4, + 'lg': 3 of 4, + 'xl': 3 of 4, + 'print': 3 of 4 +); + +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +$column-first-column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--cuttoner-left { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + + .column--first { + + @include responsive-grid-column($column-first, $default-container); + @include grid-media($media-md) { + order: 10; + } + + .column { + @include responsive-grid-column($column-first-column, $default-container); + } + + } + +} diff --git a/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css b/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css new file mode 100644 index 000000000..ce23e0069 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css @@ -0,0 +1,265 @@ +@media only screen and (max-width: 575px) { + .layout--cuttoner-right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--cuttoner-right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--cuttoner-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--cuttoner-right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--cuttoner-right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-right .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-right .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-right .column--second { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-right .column--second { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-right .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-right .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-right .column--first { + width: calc(75% - 105px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-right .column--first { + width: calc(75% - 0.4375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--cuttoner-right .column--first .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--cuttoner-right .column--first .column { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--cuttoner-right .column--first .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--cuttoner-right .column--first .column { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--cuttoner-right .column--first .column { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--cuttoner-right .column--first .column { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=cuttoner-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig b/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig new file mode 100644 index 000000000..2a7660771 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + {{ content.footer }} +
    +
    + +
    +
    diff --git a/core/templates/layout/three-column/cuttoner/right/cuttoner-right.png b/core/templates/layout/three-column/cuttoner/right/cuttoner-right.png new file mode 100644 index 0000000000000000000000000000000000000000..584eb1b24dc3ae84064718672b6c698d96bc7c10 GIT binary patch literal 3851 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss b/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss new file mode 100644 index 000000000..e6be4f6d4 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss @@ -0,0 +1,57 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 3 of 4, + 'lg': 3 of 4, + 'xl': 3 of 4, + 'print': 3 of 4 +); + +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +$column-first-column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--cuttoner-right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + + .column--first { + @include responsive-grid-column($column-first, $default-container); + + .column { + @include responsive-grid-column($column-first-column, $default-container); + } + + } + +} diff --git a/core/templates/layout/page-layout--three-column/page-layout--three-column.json b/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json similarity index 100% rename from core/templates/layout/page-layout--three-column/page-layout--three-column.json rename to core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json diff --git a/core/templates/layout/page-layout--three-column/page-layout--three-column.twig b/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig similarity index 100% rename from core/templates/layout/page-layout--three-column/page-layout--three-column.twig rename to core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig diff --git a/core/templates/layout/three-column/percles/left/css/percles-left.css b/core/templates/layout/three-column/percles/left/css/percles-left.css new file mode 100644 index 000000000..6831910c1 --- /dev/null +++ b/core/templates/layout/three-column/percles/left/css/percles-left.css @@ -0,0 +1,221 @@ +@media only screen and (max-width: 575px) { + .layout--percles-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--percles-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--percles-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--percles-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--percles-left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--percles-left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--percles-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--percles-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--percles-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--percles-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--percles-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--percles-left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--percles-left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--percles-left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--percles-left .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--percles-left .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--percles-left .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--percles-left .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--percles-left .column { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--percles-left .column { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--percles-left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--percles-left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--percles-left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--percles-left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--percles-left .column--second { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--percles-left .column--second { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +.layout--percles-left .column--third { + clear: both; +} + +/*# sourceMappingURL=percles-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/percles/left/percles-left.html.twig b/core/templates/layout/three-column/percles/left/percles-left.html.twig new file mode 100644 index 000000000..bb0c02f1f --- /dev/null +++ b/core/templates/layout/three-column/percles/left/percles-left.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    +
    +
    diff --git a/core/templates/layout/three-column/percles/left/percles-left.png b/core/templates/layout/three-column/percles/left/percles-left.png new file mode 100644 index 0000000000000000000000000000000000000000..c596c36b075f730774b9473185dbdbc8fcec72dd GIT binary patch literal 3783 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 +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    +
    + diff --git a/core/templates/layout/three-column/percles/right/percles-right.png b/core/templates/layout/three-column/percles/right/percles-right.png new file mode 100644 index 0000000000000000000000000000000000000000..fb0e4f2c138f2308893376f69b5da7c013b85935 GIT binary patch literal 3745 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 + +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    + + diff --git a/core/templates/layout/three-column/robot/robot.png b/core/templates/layout/three-column/robot/robot.png new file mode 100644 index 0000000000000000000000000000000000000000..2bde12efd1ecb0570b8ff9e323bec027e5c30189 GIT binary patch literal 3304 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/robot/scss/robot.scss b/core/templates/layout/three-column/robot/scss/robot.scss new file mode 100644 index 000000000..73951f5d3 --- /dev/null +++ b/core/templates/layout/three-column/robot/scss/robot.scss @@ -0,0 +1,46 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +// Responsive grid patterns for the column. +$column-f3: ( + 'xs': 1 of 1, + 'sm': 1 of 4, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--robot { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--second { + @include responsive-grid-column($column, $default-container); + } + + .column--first, + .column--third { + @include responsive-grid-column($column-f3, $default-container); + } + +} diff --git a/core/templates/layout/three-column/space-invader/css/space-invader.css b/core/templates/layout/three-column/space-invader/css/space-invader.css new file mode 100644 index 000000000..495aa77d0 --- /dev/null +++ b/core/templates/layout/three-column/space-invader/css/space-invader.css @@ -0,0 +1,181 @@ +@media only screen and (max-width: 575px) { + .layout--space-invader { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--space-invader { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--space-invader { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--space-invader { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--space-invader { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--space-invader { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--space-invader::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--space-invader .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--space-invader .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--space-invader .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--space-invader .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--space-invader .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--space-invader .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--space-invader .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--space-invader .column--first, + .layout--space-invader .column--second, + .layout--space-invader .column--third { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=space-invader.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/space-invader/scss/space-invader.scss b/core/templates/layout/three-column/space-invader/scss/space-invader.scss new file mode 100644 index 000000000..53bc68c5b --- /dev/null +++ b/core/templates/layout/three-column/space-invader/scss/space-invader.scss @@ -0,0 +1,33 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-ft: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +.layout--space-invader { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first, + .column--second, + .column--third { + @include responsive-grid-column($column-ft, $default-container); + } + +} diff --git a/core/templates/layout/three-column/space-invader/space-invader.html.twig b/core/templates/layout/three-column/space-invader/space-invader.html.twig new file mode 100644 index 000000000..c662be1ff --- /dev/null +++ b/core/templates/layout/three-column/space-invader/space-invader.html.twig @@ -0,0 +1,36 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    + +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    +
    diff --git a/core/templates/layout/three-column/space-invader/space-invader.png b/core/templates/layout/three-column/space-invader/space-invader.png new file mode 100644 index 0000000000000000000000000000000000000000..4c14d6a4eec8421c4b85164ee210294e14bd3ff2 GIT binary patch literal 3469 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 + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    + + diff --git a/core/templates/layout/three-column/strigges/strigges.png b/core/templates/layout/three-column/strigges/strigges.png new file mode 100644 index 0000000000000000000000000000000000000000..0f683d976e1b5ea7aae8cb356ff1437e05487942 GIT binary patch literal 3254 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 c1?S%63qnUa2 div > section::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--left > div > section { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--left > div > section { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--left > div > section { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--left > div > section { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--left > div > section { + width: calc(75% - 105px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--left > div > section { + width: calc(75% - 0.4375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 120px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--left > div > section .column--header { + width: calc(100% - 0.5in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--left > div > section .column--first, + .layout--sunset-delorean--left > div > section .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--left > div > aside { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--left > div > aside { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--left > div > aside { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--left > div > aside { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--left > div > aside { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--left > div > aside { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=sunset-delorean-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss b/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss new file mode 100644 index 000000000..7e0918f1a --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss @@ -0,0 +1,73 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 3 of 4, + 'lg': 3 of 4, + 'xl': 3 of 4, + 'print': 3 of 4 +); + +$column-header: ( + 'md': 1 of 1, + 'lg': 1 of 1, + 'xl': 1 of 1, + 'print': 1 of 1 +); + +$column-fs: ( + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +$column-aside: ( + 'sm': 1 of 1, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--sunset-delorean--left { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + // Main Content. + > div > section { + @include clearfix; + @include responsive-grid-column($column, $default-container); + + // Gotta do better than this. + .column--header { + @include responsive-grid-column($column-header, $default-container); + } + + // Two columns in right content region. + .column--first, + .column--second { + @include responsive-grid-column($column-fs, $default-container); + } + + } + + // Sidebar + > div > aside { + @include responsive-grid-column($column-aside, $default-container); + } + +} diff --git a/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig b/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig new file mode 100644 index 000000000..a109267d8 --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    +
    +
    + {{ content.header }} +
    + +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + + + +
    +
    diff --git a/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.png b/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.png new file mode 100644 index 0000000000000000000000000000000000000000..c3387947e87a70f8841628f321d6046310484703 GIT binary patch literal 3140 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css b/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css new file mode 100644 index 000000000..ec0988d80 --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css @@ -0,0 +1,348 @@ +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--sunset-delorean--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--sunset-delorean--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) { + .layout--sunset-delorean--right > div { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: flex-start; + align-content: center; + box-sizing: border-box; + } + .layout--sunset-delorean--right > div > * { + flex: 0 0 auto; + box-sizing: inherit; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--sunset-delorean--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--sunset-delorean--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +.layout--sunset-delorean--right > div > section { + order: 10; +} + +.layout--sunset-delorean--right > div > section::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right > div > section { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right > div > section { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right > div > section { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right > div > section { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right > div > section { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--right > div > section { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 80px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 120px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--right > div > section .column--header { + width: calc(100% - 0.5in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--right > div > section .column--first, + .layout--sunset-delorean--right > div > section .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +.layout--sunset-delorean--right > div > aside { + order: 1; +} + +@media only screen and (max-width: 575px) { + .layout--sunset-delorean--right > div > aside { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--sunset-delorean--right > div > aside { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--sunset-delorean--right > div > aside { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--sunset-delorean--right > div > aside { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--sunset-delorean--right > div > aside { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--sunset-delorean--right > div > aside { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=sunset-delorean-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss b/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss new file mode 100644 index 000000000..040a5090e --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-section: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +$column-header: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 1, + 'lg': 1 of 1, + 'xl': 1 of 1, + 'print': 1 of 1 +); + +$column-fs: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +$column-aside: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +.layout--sunset-delorean--right { + @include responsive-container($default-container); + + > div { + @include grid-media($media-md) { + @include flex-container(); + } + } + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + // Main Content. + > div > section { + order: 10; + @include clearfix; + @include responsive-grid-column($column-section, $default-container); + + // Gotta do better than this. + .column--header { + @include responsive-grid-column($column-header, $default-container); + } + + // Two columns in right content region. + .column--first, + .column--second { + @include responsive-grid-column($column-fs, $default-container); + } + + } + + // Sidebar + > div > aside { + order: 1; + @include responsive-grid-column($column-aside, $default-container); + } + +} diff --git a/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig b/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig new file mode 100644 index 000000000..21e0b7fa2 --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    +
    +
    + {{ content.header }} +
    + +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + + + +
    +
    diff --git a/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.png b/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.png new file mode 100644 index 0000000000000000000000000000000000000000..bee639a65677c85cbf5fb40194ffcdb6094a49c5 GIT binary patch literal 3054 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 kNHyWUgX&k literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css b/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css new file mode 100644 index 000000000..fabedeac1 --- /dev/null +++ b/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css @@ -0,0 +1,227 @@ +@media only screen and (max-width: 575px) { + .layout--thions-bottom { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-bottom { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-bottom { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-bottom { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-bottom { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--thions-bottom { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--thions-bottom::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--thions-bottom .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-bottom .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-bottom .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-bottom .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-bottom .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--thions-bottom .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--thions-bottom .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--thions-bottom .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-bottom .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-bottom .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-bottom .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-bottom .column { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--thions-bottom .column { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--thions-bottom .column--fourth, + .layout--thions-bottom .column--fifth { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +.layout--thions-bottom .column--fourth { + clear: both; +} + +/*# sourceMappingURL=thions-bottom.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss b/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss new file mode 100644 index 000000000..a33badc85 --- /dev/null +++ b/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss @@ -0,0 +1,50 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +$column-ff: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + + +.layout--thions-bottom { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column { + @include responsive-grid-column($column, $default-container); + } + + .column--fourth, + .column--fifth { + @include responsive-grid-column($column-ff, $default-container); + } + + .column--fourth { + clear: both; + } + +} diff --git a/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig b/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig new file mode 100644 index 000000000..daf1521ef --- /dev/null +++ b/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    +
    +
    diff --git a/core/templates/layout/three-column/thions/bottom/thions-bottom.png b/core/templates/layout/three-column/thions/bottom/thions-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..10a2192feb1606066702004417364ab0f99729b3 GIT binary patch literal 3564 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/thions/top/css/thions-top.css b/core/templates/layout/three-column/thions/top/css/thions-top.css new file mode 100644 index 000000000..a0dd4ec4c --- /dev/null +++ b/core/templates/layout/three-column/thions/top/css/thions-top.css @@ -0,0 +1,227 @@ +@media only screen and (max-width: 575px) { + .layout--thions-top { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-top { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-top { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-top { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-top { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--thions-top { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--thions-top::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--thions-top .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-top .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-top .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-top .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-top .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--thions-top .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--thions-top .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--thions-top .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-top .column { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-top .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-top .column { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-top .column { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--thions-top .column { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--thions-top .column--first, + .layout--thions-top .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +.layout--thions-top .column--third { + clear: both; +} + +/*# sourceMappingURL=thions-top.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/thions/top/scss/thions-top.scss b/core/templates/layout/three-column/thions/top/scss/thions-top.scss new file mode 100644 index 000000000..8fac11040 --- /dev/null +++ b/core/templates/layout/three-column/thions/top/scss/thions-top.scss @@ -0,0 +1,49 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +$column-fs: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--thions-top { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column { + @include responsive-grid-column($column, $default-container); + } + + .column--first, + .column--second { + @include responsive-grid-column($column-fs, $default-container); + } + + .column--third { + clear: both; + } + +} diff --git a/core/templates/layout/three-column/thions/top/thions-top.html.twig b/core/templates/layout/three-column/thions/top/thions-top.html.twig new file mode 100644 index 000000000..3696b6db9 --- /dev/null +++ b/core/templates/layout/three-column/thions/top/thions-top.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    + +
    + {{ content.fifth }} +
    +
    +
    diff --git a/core/templates/layout/three-column/thions/top/thions-top.png b/core/templates/layout/three-column/thions/top/thions-top.png new file mode 100644 index 0000000000000000000000000000000000000000..992a04e44c6cad6e0fb48f7273aed2a74edb10f2 GIT binary patch literal 3628 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 b!TbE|9?4q{CE+)Y{_C{Wud9`-+@kykW7>S# literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/valmer/left/css/valmer-left.css b/core/templates/layout/three-column/valmer/left/css/valmer-left.css new file mode 100644 index 000000000..5287a6e4c --- /dev/null +++ b/core/templates/layout/three-column/valmer/left/css/valmer-left.css @@ -0,0 +1,223 @@ +@media only screen and (max-width: 575px) { + .layout--valmer-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--valmer-left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--valmer-left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--valmer-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--valmer-left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--valmer-left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--valmer-left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-left .column--first { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-left .column--first { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-left .column--first { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--valmer-left .column--first { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--valmer-left .column--second, + .layout--valmer-left .column--third { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=valmer-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss b/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss new file mode 100644 index 000000000..f234a390a --- /dev/null +++ b/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss @@ -0,0 +1,45 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +$column-st: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--valmer-left { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column-first, $default-container); + } + + .column--second, + .column--third { + @include responsive-grid-column($column-st, $default-container); + } + +} diff --git a/core/templates/layout/three-column/valmer/left/valmer-left.html.twig b/core/templates/layout/three-column/valmer/left/valmer-left.html.twig new file mode 100644 index 000000000..210f98530 --- /dev/null +++ b/core/templates/layout/three-column/valmer/left/valmer-left.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    + +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    + +
    + {{ content.footer }} +
    + +
    diff --git a/core/templates/layout/three-column/valmer/left/valmer-left.png b/core/templates/layout/three-column/valmer/left/valmer-left.png new file mode 100644 index 0000000000000000000000000000000000000000..eef03107c0fba63e1f330b6f429a6cc99df7055e GIT binary patch literal 4009 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 E01YcmKL7v# literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/valmer/right/css/valmer-right.css b/core/templates/layout/three-column/valmer/right/css/valmer-right.css new file mode 100644 index 000000000..ed2c17836 --- /dev/null +++ b/core/templates/layout/three-column/valmer/right/css/valmer-right.css @@ -0,0 +1,243 @@ +@media only screen and (max-width: 575px) { + .layout--valmer-right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--valmer-right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--valmer-right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--valmer-right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--valmer-right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--valmer-right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (min-width: 576px) { + .layout--valmer-right section { + display: flex; + flex-flow: row wrap; + justify-content: "flex-start"; + align-items: flex-start; + align-content: center; + box-sizing: border-box; + } + .layout--valmer-right section > * { + flex: 0 0 auto; + box-sizing: inherit; + } +} + +@media only screen and (max-width: 575px) { + .layout--valmer-right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-right .column--first { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-right .column--first { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-right .column--first { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--valmer-right .column--first { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +.layout--valmer-right .column--second, +.layout--valmer-right .column--third { + order: 1; +} + +@media only screen and (max-width: 575px) { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--valmer-right .column--second, + .layout--valmer-right .column--third { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=valmer-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss b/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss new file mode 100644 index 000000000..f22de0dea --- /dev/null +++ b/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss @@ -0,0 +1,52 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +$column-st: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--valmer-right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + section { + @include grid-media($media-sm) { + @include flex-container(('justify-content': 'flex-start')); + } + } + + .column--first { + @include responsive-grid-column($column-first, $default-container); + } + + .column--second, + .column--third { + order: 1; + @include responsive-grid-column($column-st, $default-container); + } + +} diff --git a/core/templates/layout/three-column/valmer/right/valmer-right.html.twig b/core/templates/layout/three-column/valmer/right/valmer-right.html.twig new file mode 100644 index 000000000..bfaa15bcb --- /dev/null +++ b/core/templates/layout/three-column/valmer/right/valmer-right.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    + +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    + +
    + {{ content.third }} +
    +
    + +
    + {{ content.footer }} +
    + +
    diff --git a/core/templates/layout/three-column/valmer/right/valmer-right.png b/core/templates/layout/three-column/valmer/right/valmer-right.png new file mode 100644 index 0000000000000000000000000000000000000000..a00f3100c248bd208ee2fa1d973a25fa6f5c9d92 GIT binary patch literal 3725 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 +
    + {{ content.header }} +
    +
    + +
    +
    + {{ content.first }} +
    +
    + +
    + {{ content.second }} +
    + +
    + diff --git a/core/templates/layout/two-column/aiur/aiur.png b/core/templates/layout/two-column/aiur/aiur.png new file mode 100644 index 0000000000000000000000000000000000000000..f54b9b5c1fd01b2c2bb8465b3fd9f1bdcd65d29d GIT binary patch literal 1074 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq*&4&eH|GXHuiJ>Nn{1`6_P!I zd>I(3)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4FdxcQ)Wm+NrbPDRdRl= zUSdjqQmS4>ZUImS1A|S46_A;mT9T+xk(-lOY*k^a1Xf`MWP^nDl@!2AO0sR0B76fB zob!uP6-@O^^bC~jxD*r=Y>HCStb$zJpxS{vTcwPWk^(Dz{qpj1y>er{{GxPyLrY6b zeFGzXBO_g)3fgm48uYDlmvZ0byroqmLm5Rd1sY3MHga zgG32f6c{IVTsHdf__gB-*WzBnz`(fP)5S3)gZ1sq^WIE>0>_`{?q0g)X_}`}W770P zb$6Vctja!ItG|B#;=$&2KF3EZ^+X%nxt4efimLuSbgK2p^FEfxPj0tXD!e(f@8`Mc z=d0KK3W>L8RI4Ge>T- VI-u}JzXX(BJzf1=);T3K0RSjLi_QQ5 literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/aiur/css/aiur.css b/core/templates/layout/two-column/aiur/css/aiur.css new file mode 100644 index 000000000..1401b8ebc --- /dev/null +++ b/core/templates/layout/two-column/aiur/css/aiur.css @@ -0,0 +1,94 @@ +.layout--aiur .with-floating_sidebar { + position: relative; + min-height: 600px; +} + +@media only screen and (max-width: 575px) { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--aiur #floating_sidebar__wrapper { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--aiur #floating_sidebar__wrapper::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) { + .layout--aiur #floating_sidebar__wrapper { + height: 1px; + max-height: 1px; + } +} + +.layout--aiur #floating_sidebar { + background: rgba(238, 238, 238, 0.9); + height: 100%; + min-height: 100%; +} + +@media only screen and (min-width: 768px) { + .layout--aiur #floating_sidebar { + width: grid-columns(1 of 12); + position: absolute; + top: 0px; + z-index: 50; + } +} + +/*# sourceMappingURL=aiur.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/aiur/scss/aiur.scss b/core/templates/layout/two-column/aiur/scss/aiur.scss new file mode 100644 index 000000000..b05443b01 --- /dev/null +++ b/core/templates/layout/two-column/aiur/scss/aiur.scss @@ -0,0 +1,36 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +.layout--aiur { + + .with-floating_sidebar { + position: relative; + min-height: 600px; + } + + #floating_sidebar__wrapper { + @include responsive-container($default-container); + @include grid-media($media-md) { + height: 1px; + max-height: 1px; + } + } + + #floating_sidebar { + background: rgba(238, 238, 238, 0.9); + height: 100%; + min-height: 100%; + + @include grid-media($media-md) { + width: grid-columns(1 of 12); + position: absolute; + top: 0px; + z-index: 50; + } + } +} diff --git a/core/templates/layout/two-column/donies/css/donies.css b/core/templates/layout/two-column/donies/css/donies.css new file mode 100644 index 000000000..2064a4f3f --- /dev/null +++ b/core/templates/layout/two-column/donies/css/donies.css @@ -0,0 +1,175 @@ +@media only screen and (max-width: 575px) { + .layout--donies { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--donies { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--donies { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--donies { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--donies { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--donies { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--donies::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--donies .column--first, + .layout--donies .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--donies .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--donies .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--donies .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--donies .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--donies .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--donies .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--donies .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +/*# sourceMappingURL=donies.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/donies/donies.html.twig b/core/templates/layout/two-column/donies/donies.html.twig new file mode 100644 index 000000000..93cef8dc2 --- /dev/null +++ b/core/templates/layout/two-column/donies/donies.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + {{ content.footer }} +
    +
    diff --git a/core/templates/layout/two-column/donies/donies.png b/core/templates/layout/two-column/donies/donies.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/donies/scss/donies.scss b/core/templates/layout/two-column/donies/scss/donies.scss new file mode 100644 index 000000000..c8ad0e77b --- /dev/null +++ b/core/templates/layout/two-column/donies/scss/donies.scss @@ -0,0 +1,32 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--donies { + @include responsive-container($default-container); + + .column--first, + .column--second { + @include responsive-grid-column($column, $default-container); + } + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + +} diff --git a/core/templates/layout/two-column/frogger/css/frogger.css b/core/templates/layout/two-column/frogger/css/frogger.css new file mode 100644 index 000000000..636a47a0f --- /dev/null +++ b/core/templates/layout/two-column/frogger/css/frogger.css @@ -0,0 +1,175 @@ +@media only screen and (max-width: 575px) { + .layout--frogger { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--frogger { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--frogger { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--frogger { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--frogger { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--frogger { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--frogger::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--frogger .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--frogger .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--frogger .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--frogger .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--frogger .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--frogger .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--frogger .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--frogger .column--first, + .layout--frogger .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=frogger.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/frogger/frogger.html.twig b/core/templates/layout/two-column/frogger/frogger.html.twig new file mode 100644 index 000000000..83202c5a2 --- /dev/null +++ b/core/templates/layout/two-column/frogger/frogger.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + {{ content.middle }} +
    +
    +
    + {{ content.third }} +
    + +
    + {{ content.fourth }} +
    +
    +
    + {{ content.footer }} +
    +
    diff --git a/core/templates/layout/two-column/frogger/frogger.png b/core/templates/layout/two-column/frogger/frogger.png new file mode 100644 index 0000000000000000000000000000000000000000..b5e85d7a1966761d32d5b2ff17e696cda335f99a GIT binary patch literal 4654 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 O9d%_Lr3yux$o~N;ZleYO literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/frogger/scss/frogger.scss b/core/templates/layout/two-column/frogger/scss/frogger.scss new file mode 100644 index 000000000..03bfbee38 --- /dev/null +++ b/core/templates/layout/two-column/frogger/scss/frogger.scss @@ -0,0 +1,32 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--frogger { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first, + .column--second { + @include responsive-grid-column($column, $default-container); + } + +} diff --git a/core/templates/layout/two-column/pacman/left/css/pacman-left.css b/core/templates/layout/two-column/pacman/left/css/pacman-left.css new file mode 100644 index 000000000..4182a3c3c --- /dev/null +++ b/core/templates/layout/two-column/pacman/left/css/pacman-left.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--pacman--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--pacman--left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--pacman--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--pacman--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--pacman--left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--pacman--left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--pacman--left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--left .column--first { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--left .column--first { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--pacman--left .column--first { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--pacman--left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--left .column--second { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--left .column--second { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--pacman--left .column--second { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=pacman-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/pacman/left/pacman-left.html.twig b/core/templates/layout/two-column/pacman/left/pacman-left.html.twig new file mode 100644 index 000000000..a78fddac2 --- /dev/null +++ b/core/templates/layout/two-column/pacman/left/pacman-left.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    + {{ content.footer }} +
    +
    diff --git a/core/templates/layout/two-column/pacman/left/pacman-left.png b/core/templates/layout/two-column/pacman/left/pacman-left.png new file mode 100644 index 0000000000000000000000000000000000000000..cfa76eeabebbcbce5fb6e1b9c69b88e4a8db97b6 GIT binary patch literal 3272 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss b/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss new file mode 100644 index 000000000..085f5f9d6 --- /dev/null +++ b/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss @@ -0,0 +1,44 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +.layout--pacman--left { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } +} diff --git a/core/templates/layout/two-column/pacman/right/css/pacman-right.css b/core/templates/layout/two-column/pacman/right/css/pacman-right.css new file mode 100644 index 000000000..9c2ddff06 --- /dev/null +++ b/core/templates/layout/two-column/pacman/right/css/pacman-right.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--pacman--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--pacman--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--pacman--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--pacman--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--pacman--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--pacman--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--pacman--right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--right .column--first { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--right .column--first { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--pacman--right .column--first { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--pacman--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--pacman--right .column--second { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--pacman--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--pacman--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--pacman--right .column--second { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--pacman--right .column--second { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=pacman-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/pacman/right/pacman-right.html.twig b/core/templates/layout/two-column/pacman/right/pacman-right.html.twig new file mode 100644 index 000000000..b93aa2cfc --- /dev/null +++ b/core/templates/layout/two-column/pacman/right/pacman-right.html.twig @@ -0,0 +1,36 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    + +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    + +
    + {{ content.footer }} +
    + +
    diff --git a/core/templates/layout/two-column/pacman/right/pacman-right.png b/core/templates/layout/two-column/pacman/right/pacman-right.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6ee0a871e5aab86f09db57cde1965b12c4f758 GIT binary patch literal 3278 zcmZWs2{_bU7avQ=5-LkEj8P&nV?xcuD8>?IWSNFac9|HXSRzt z0sUm_$EbiVq_i32AL^0P+lXV80D$znqo^ZpbdfpFlc~E7C?U-w3yOmSX~P~m(4$gm z*190A4|2t;ss$rYDF4V}sRaPtDLDErxth0OM(rPh*?{-zd-1LzF!8RW_Sp^}!{rP1qg%!m7D zN>$BcQW)2 zP^lgtnZ+K46@5e0`51oOxsP`&yo#=>=Snt$Y%~4YS3i7FIF`GA1*njA^fSRg%q|l- z!sB%YyLfTADk8K3^>N^JPMPs8m{5*wO^oj!4V7x(@@fx!yLNS7#!K%JFkH=wQ4KX| z*qEEjkGY5-#jk~nx7={P&69%2s_i^}h+UNNk`XqdWNnWr9L%>35jHy=F^g>Fi&+fy zP1fp2zL}!vyea(LczKe#z)#@?wlYUrYM3YW#34xS=?w*iu!o(BiMTQ(>X4|YP}7pD z%aV+xEX#!-GEg4og_nN0zUYZS;Z3GMs%gu)o`y z&q8GTxM~rnA|4+?$}?zazlysZ)AARVdjFd`J=JQ5#hm`w-9jE+U%c<_1`B3Mg!F1Bw<6WL}ztzT>xx@1#D8?#qF*&q!G34TUW7#M+ z=MQ+j{T{W~pBd(p{6IwUxuhOL{7_)AN$}um7rQE}X(aepxgMDNOM>*B2>tZjdjMC^ z8T&LowbilR^~6-^tCXYlnoRlf`K0e-S*>BlphvlRM(AD^%-7tcdQ#K!_^g`j={MCcXZhQ8lZc-_PuFNrS5{VhJu+yw3bs1&`c=8rmR9w=~*(y@Jfs8!Thy0!q_Tp@kQ+*wLd~Um~C+3|Q zGiAAVDyFlO*~!mprmtD7ty$a)>V-JCS9jYTYzSWpD;eGJD`8;18mOG*jg^h(^fljU ziC!tsAGr`2v6(;=1<@ndUuj0!d|W7;)UYut1o2k)K&HJkBcnE+ntc;XaYjr))>92J zQ}2h)pcY=|>XWX=Pb5Cf`R2LDJUmFBS#rwCxN2#;us}?PeicYB8erDp9K5fcQ4!KM za%rug`+ipw-P;4_n7CfZ5bW2#Vm)TFZS^#ALtJ==lP40V!XEZT7d}LsqbJ`FT9YWw z?K&*oyzxiEW~RG(+MmV+Xj7ThwYyRJNNvaHvZ!m`-cqa((v?I)b@2dE%4f}rA1t1N z3Jb{G)^pN$yQoNkx(_`eY+#p~)Jx3@FKu_nIQ@b`@6nq#6oi|G>?LK3u8D=N-#9B* zl%pCu)}~X6+9(J@~GR;ud~Yier$cGKAdK<_0($txTJej zr(1z(;nrdUl@-UC!do9%TWKlSbt-nqjQc$y3?w<)GoW*XgVhCZ*Ru+rZMoGmI1lgex<$rCgOXs8Q$kmw-VDC)VcO$satR1t$I0yUB|7q8e8Yfdw zn6~AlpMxNpWJt!uCJ*{u&fFj_nRhqU2d@lp!289j1 z@3_n}R*jXQ88Fl#aJiMOC%jZ1O@&lhB1i+csmNktF7o6TV2 zP>*%aI82(xPs_i$cON{t8Yo~|K>mj+LcRFUyjUF(|3QxuXbD=~|*lGXZ|<8fh*rB+hPadjj6@R*6Ozh8)qDM zq}oLE+~z%$ZFtb2L^GY>+tAEz4gZ-60D>mkJg8Ko z$YQ>VYz5sj3aa}=?d)=wrp7&c1LngCU&a57Y;)yHm3fJ@5;%EkBqccAuYt33QF9{- zlMu{k+{Kc<>~EC;nK)Ba-#wg!nYkp=4vCxt&V4BW-NW0s@WuiFLv7Lg*A6BZPSMoW z2);%j(UqGixFwk=f+mAu(0!#)FIsVJxxH_is2O!LR0=X17u-$$c70UzGXy5zmpahV zx-glimp4eSI=}w@O0mU%6Lli2Be>DskHxPK!kqA`sw>W%f`#@*mM#f|P1)+jWmIxM zV>DeiNxk{p7fW6B(pM#pm7pcypybNczB{=DRSU_(hkfKaoIAKF@5obHR zlNHm1W<2)hbKb&Ig{QUXrIQj^{-V5+=3R|9+YZR zv06XRd1a=;_gmLQ#l_zcNYW$i6*G#-Jh#-<7aH1d2P-Vcm)$DXg#7rZRqiC|V;GCx&;hoUIWSLLcMmMr$_COm8#eSSLq5;~sv{YzHVa;aAt`NnXQvg@kU z*j2qP3XeW#iXoyXY2@6(kO{rHe5bm%r=2pMxWemnb!9}<)gLR`4%vLA(<}B3hz(y` m!~qn#VTzr4GOq#Q8}g^OXedof4g?DSJdRppP%KODxc>oGoeBT| literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss b/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss new file mode 100644 index 000000000..585a87e9a --- /dev/null +++ b/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss @@ -0,0 +1,46 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + + +.layout--pacman--right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + +} diff --git a/core/templates/layout/page-layout--left-sidebar/page-layout--left-sidebar.json b/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json similarity index 100% rename from core/templates/layout/page-layout--left-sidebar/page-layout--left-sidebar.json rename to core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json diff --git a/core/templates/layout/page-layout--left-sidebar/page-layout--left-sidebar.twig b/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig similarity index 100% rename from core/templates/layout/page-layout--left-sidebar/page-layout--left-sidebar.twig rename to core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig diff --git a/core/templates/layout/page-layout--right-sidebar/page-layout--right-sidebar.json b/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json similarity index 100% rename from core/templates/layout/page-layout--right-sidebar/page-layout--right-sidebar.json rename to core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json diff --git a/core/templates/layout/page-layout--right-sidebar/page-layout--right-sidebar.twig b/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig similarity index 100% rename from core/templates/layout/page-layout--right-sidebar/page-layout--right-sidebar.twig rename to core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig diff --git a/core/templates/layout/two-column/plakes/left/css/plakes-left.css b/core/templates/layout/two-column/plakes/left/css/plakes-left.css new file mode 100644 index 000000000..84e000e2c --- /dev/null +++ b/core/templates/layout/two-column/plakes/left/css/plakes-left.css @@ -0,0 +1,251 @@ +@media only screen and (max-width: 575px) { + .layout--plakes--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--plakes--left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--plakes--left::after { + clear: both; + content: ""; + display: block; + } +} + +.layout--plakes--left section { + display: flex; + flex-flow: row wrap; + justify-content: "flex-start"; + align-items: flex-start; + align-content: center; + box-sizing: border-box; +} + +.layout--plakes--left section > * { + flex: 0 0 auto; + box-sizing: inherit; +} + +@media only screen and (max-width: 575px) { + .layout--plakes--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--plakes--left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--plakes--left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +.layout--plakes--left .column--first { + order: 10; +} + +@media only screen and (max-width: 575px) { + .layout--plakes--left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--left .column--first { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--left .column--first { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--plakes--left .column--first { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (min-width: 576px) { + .layout--plakes--left .column--first { + order: 1; + } +} + +.layout--plakes--left .column--second { + order: 1; +} + +@media only screen and (max-width: 575px) { + .layout--plakes--left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--left .column--second { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--left .column--second { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--plakes--left .column--second { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (min-width: 576px) { + .layout--plakes--left .column--second { + order: 10; + } +} + +/*# sourceMappingURL=plakes-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/plakes/left/plakes-left.html.twig b/core/templates/layout/two-column/plakes/left/plakes-left.html.twig new file mode 100644 index 000000000..1e46f6845 --- /dev/null +++ b/core/templates/layout/two-column/plakes/left/plakes-left.html.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/plakes/left/plakes-left.png b/core/templates/layout/two-column/plakes/left/plakes-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a0f6171e77ebf9373aa6c92a9d2f557d1428b6cf GIT binary patch literal 952 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq!^2X+?^QKos)S9WY5kFi71Ki z^|4CM&(%vz$xlkvtH>8? ztx|+t?VyL%(9@GcP=o{)8=)=thYPA80S_NcQq~=7pWag&k6$9>0F0*7o-U3d z8LV$-Mtd_Q3bdv7r)AAr*(uSMDmeE*_qsi=#lPe?FW9Zrv7)=nYvCg1g%>ZXnCgf! z6|$G4hfQn!>2O2#`P|CdZ@2ULwf4Vdl#^ZMUR$2qUAet)-tv>LCAMDPn_W>?b9`Ts z>b5Nt8(*GTveZ25U&VHg^xx*wQnoV*Uu4L-clom0ncb#yTlP#)7nqRg-0-Y}Wv|E4 z%Yrjv{j4q>=u|q`A+NhQ;rr+OsaiGlrU8!m0fAHAy;~vAd1xcUkLG>%uHDU@vS*dn zg`Yf9yB0QDra7#QVlQ|&lg+e#OEGKt^rw#Z6iwxu|2$)o$%{Xb{Zlx~er=~!BZ^o6`A3l9yTsoP3#r0W#HT&MI7ul2{`zJC7uXi_Y&u(huGi&vT=dnOOLPAF)gAxVwK!Aj&w86}vIZQ8pEtgKS>S3Q1}vr^A-Rosc-lZB;D^Smdl68{uZ6f<`MPNnxQKe_n*vvGIl z!h|Kog$A`!J?%9H+vhc97@15tmlvecx8KhF|Kv^4ch=VU`_Hy#5%O$VB^6)-%443c KelF{r5}E*HnssOZ literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss b/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss new file mode 100644 index 000000000..21de56739 --- /dev/null +++ b/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss @@ -0,0 +1,57 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-first: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +.layout--plakes--left { + @include responsive-container($default-container); + + section { + @include flex-container(('justify-content': 'flex-start')); + } + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first { + order: 10; + @include responsive-grid-column($column-first, $default-container); + @include grid-media($media-sm) { + order: 1; + } + } + + .column--second { + order: 1; + @include responsive-grid-column($column-second, $default-container); + @include grid-media($media-sm) { + order: 10; + } + } + +} diff --git a/core/templates/layout/two-column/plakes/right/css/plakes-right.css b/core/templates/layout/two-column/plakes/right/css/plakes-right.css new file mode 100644 index 000000000..c26a66723 --- /dev/null +++ b/core/templates/layout/two-column/plakes/right/css/plakes-right.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--plakes--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--plakes--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--plakes--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--plakes--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--plakes--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--plakes--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--plakes--right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--right .column--first { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--right .column--first { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--plakes--right .column--first { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--plakes--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--plakes--right .column--second { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--plakes--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--plakes--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--plakes--right .column--second { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--plakes--right .column--second { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=plakes-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/plakes/right/plakes-right.html.twig b/core/templates/layout/two-column/plakes/right/plakes-right.html.twig new file mode 100644 index 000000000..a67a925d2 --- /dev/null +++ b/core/templates/layout/two-column/plakes/right/plakes-right.html.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    + {{ content.header }} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/plakes/right/plakes-right.png b/core/templates/layout/two-column/plakes/right/plakes-right.png new file mode 100644 index 0000000000000000000000000000000000000000..a3c84b67fd158ce1dc1d91d4772d852d9514fa25 GIT binary patch literal 2827 zcmai0c{r478=p~@FgQ6hGt`+ZCoyI$DZ9uLiV#Mq8B8-`hRk5fzD|}n4C7eJ$x>v> zmK52V3QehLLMe{5?8cHM%J-_ibGokYkMF&%_r0Ixci;E(`(4j-KX1|rJ1dANToeQX zL9CCOI|9}ZcoRf~fUn2A&{x2KDUMcVpxa&Y6F~cl?@0_5bNraTcK`{6^9k_6qiCc+ z00jaW()58Q2~Wi#Xe56!MW1G*@C~64w6})Q3W#qIs-KYp=J*N3k$@mPLI-sKrJ-Of zia;O?gM7~FJDOYma0hxu3PdV3P#=vB4Gl$wYNG;z2xv_`Jw3FB7FtV79YCm4E|94> znmU=H_&vyfBRNnwHVk<7rD0IOKWG62(OWZU zO_T=upV)w_;nt}B311rCA7k!I!jmaL4r5J?Lx$h*|1{5fbY07I|r=M@XHM_jL{MDr2 zS}RjJ2|}wi1NSB)^*S*z*X`)Ehw}xzPAAg+ZG*bQh0m_X2Y)FSt~_(KZHz9*wdvQ8 zrc2tM0PXAeiWA-w847Z5oJlIP!R(p~80*`dgk17CeLcyz zT^K_TTk727egD0Eh3$G*9--m#9o~#jRFG|svNCV;@!dDZR}A{b8IL5{BBQ$>@e0#% zbAg0|m>82-&SnFD{%Lo4nmjo9Kupo(nV@4A(&|{r^iF{ zi&fy?{cF6UUTqO3tP|0=Ke+}K?w>3G$K09Dz}q~X%BKtUd=~Xu=+LPepQR%i^lH`n zG8MOC>Qv+EN%D_(?M}r1Vh=$o9AjD(pW>d>sUprO`B}(R5ixL#>}Bj_M?6Nh?JUN! zO|^Mk16hof`MXOKF!Rr}M6J$i8P+C$sxD*Zm?q*g1T0IR_9BY|k(uJ?xRf$iiaP|^ zptiT-!?T{6Mz6Z>k=47k&%JzFpFi5@hl9q3zq7;)*WLFTw!GXi?8Be=ea$9s(%C{8 zxpo!1q1tCD4TtQD*YQ}&gfEvNqQw>=5IruNZ?QdLqILj07xt4`W#$9ENR-vuZ(#nlv zw((YBjWR8MO-+sa&t^{x$DPezJfACS9<(N%A758JF=l2k40-w9S9^MmZ~b6yU`}F0 zI@V!~T2TVB_76FTof`-thwR67x~ajuMqX$`33GQ&awS((qgZUC&pzqZ9SJ6z$Bbk3L=)8pdraTU1ZpZOVkMTu8y#XHk@ zf1ZfO9q+&`$1IRFL@}U65 z>8rM1kbk@6L9BoGvX6*w8Xn=Q#1COrzJ`lzfQAj~Gv_kL_@j&2^+RnvA#(8NPs~xk zPR`lIpI!?H4EekV`+EDnQ_pumB?QZ=z_(_Ergu{Z=NSQmtE)%X4)@J14}I!%*NvbE zeI(=z!>G`xM%lu{(wW0CS$hs$a4C6l;0|}6UaiM`!Rw_w{va2;!RJZ8>7TqLsHt(BT~=T2`wIO3$tR&Gi**;a2r4z|gtrS<6bUc49+ zkBTB^Min=|G~Be-EW>ra!C%qhEqdIhLkXj4kE|zBtPj5WsIc+=`YQCa%E9wz9PZi) z&cCiIn4eHynIE|W@O4mp0=qwaGOfL0PexXoOb&T1XCpo1wdG7B(KlR6#mkSp*uh{~ zI1MhRsQwjGN5qiNBmmWbnyp-sJgfJ?P?U&$E*%>& z9^RI6`=pQhYso_>Q!s?JQ-N~nl?)bBYTIzMbvQT`r(Q&wAf?PnL0u+dU3dL~bG|{E z$bh*_WV-zS4p4rEQdzIoKSWc2by=8%{h>qf328|Xczn(e%MDkUl8vA+^kh_A+_$BO zFmwnl)2ADNb(gNN!M4CT$VPa1?uEK|+T^^HWUHD!YB1AaHDsZ#{g&t)dnq{KWoyxT zM9rj4(mHoP5Z&I@XTmJ-f+s+>yW40*J6%BBZ%-X_np4FT$6lR<^%$OWo^=nW1JIRd zALpz4Lp8=4T_MPx=jMV3s)+iTc(2b>*$knci%D1x5yn(6F~2IFf^#d0wkTf!Dxb^z zj68eGIH_-$^IGB+n8G~2fI9J4RHcd!4|=~9JZ*qT9di<;xgm zQwE(i#FJ`yH-%(9%R5dv2qNK3A=&5qYLM{mRDKc*lxEJ zDw{-b`U^vXu-=;0x;6nya{H`Znv%{3TmU3mNb{%(-;xTrEY>=2hY11q&1y#7tfP9= z1{}k&Pu1>FYpq(ygStPg`e3S9xx@AW>ibSxOg(22Q3|!oPQIjl4H537?Dwms)T*LL zqM}H@R6*h;#0wP|k*O{AC9raG`&3}M@mp_X&bn`~@850P)oiEUDe&0;v+S83>E z1&80vq*4)ZArQNS)WF%{{vp}j#Xw&8b1Ef!o~^Rogm0?VLAJphuLK*cyH`cM0rv*C zo!2~fcTH8^N<+kR{Jme>6XuO8y2mSb7=-HcAGhrmd8ZDpaL^Sa7pEG!DY3dv%fU}a zaw(5sj3cy&fjC$6K-*)wU&aHF^Tg|x=T%SrrQ1{%uGMu%kF>80Rak{GGzks&?oU3< zXE?1ceT5grfOK|xF~cRS1hNYH*69ZPPb(|9uzI76gq=)}NhS85MH@FpOMchV7)R)# zKgDI+Iu#}J%WZc3a;WP_bzV6Rri8d*COW#y@}@UOLlDZu9Zr6Q!&pp0UD~U}w>f5Y ZZC(>oEmpO%XxaL0wYIP`zioz%{SRqU7=!=- literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss b/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss new file mode 100644 index 000000000..bf8141ca8 --- /dev/null +++ b/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss @@ -0,0 +1,45 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +.layout--plakes--right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + +} diff --git a/core/templates/layout/two-column/toucan/css/toucan.css b/core/templates/layout/two-column/toucan/css/toucan.css new file mode 100644 index 000000000..86a42a2f8 --- /dev/null +++ b/core/templates/layout/two-column/toucan/css/toucan.css @@ -0,0 +1,175 @@ +@media only screen and (max-width: 575px) { + .layout--toucan { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--toucan { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--toucan { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--toucan { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--toucan { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--toucan { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--toucan::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--toucan .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--toucan .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--toucan .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--toucan .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--toucan .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--toucan .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--toucan .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(50% - 30px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(50% - 60px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(50% - 90px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--toucan .column--first, + .layout--toucan .column--second { + width: calc(50% - 0.375in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=toucan.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/toucan/scss/toucan.scss b/core/templates/layout/two-column/toucan/scss/toucan.scss new file mode 100644 index 000000000..de3e3b51d --- /dev/null +++ b/core/templates/layout/two-column/toucan/scss/toucan.scss @@ -0,0 +1,32 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 2, + 'md': 1 of 2, + 'lg': 1 of 2, + 'xl': 1 of 2, + 'print': 1 of 2 +); + +.layout--toucan { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse($default-container); + @include clearfix; + } + + .column--first, + .column--second { + @include responsive-grid-column($column, $default-container); + } + +} diff --git a/core/templates/layout/two-column/toucan/toucan.html.twig b/core/templates/layout/two-column/toucan/toucan.html.twig new file mode 100644 index 000000000..ba310d7f5 --- /dev/null +++ b/core/templates/layout/two-column/toucan/toucan.html.twig @@ -0,0 +1,11 @@ +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/toucan/toucan.png b/core/templates/layout/two-column/toucan/toucan.png new file mode 100644 index 0000000000000000000000000000000000000000..3258a9ca4ce3c3b40e9aa1e14fda30d1e0238141 GIT binary patch literal 2090 zcmZWqeLRzU8{Z_&>sG0Ul4ew1j*aDQx;Go6c_|}rDPdl+*rshVh1SlgG4hf~PE3mQ zDC@{e_~az2BVrvd=U{b0hLpnjP!i8Qb*kri?$77`{jU3WUElBby1u_Z?o{gD-I{8f z)F2RurYnW)4en9k`y)&RTtmf&UVs~v;D;uwQMu9R@2@u+}3RHPG&9f7n)TcIsb z1T`cQ39!Q>?Y+q^U*O;u9u>vq#@b^r@$vEK_?>7L`!L25hr?kkuox`X9IPkdqc zoG!iaw^S_s^_lx|Ivii-{IrDRRZR+8<5z-V?{pVwIkR=u{mS>VVSm0v&xg$=MMnBp z#VHEK1Y8F8} zGBaacmV@i5TGLw4=hM%v%e`8Y+vos0%ELa4l?C4(Q;{}K>Lz~}ieFslb|-sj+-z@l z9+4eC8^^dE-=FlPq`-05_VTF#@$icqLRL}Gi|HK6WkJ=9M71-sOFS}~wp=Wka>AUk zsw(_tVW21Pl~-T%Y*=JhKR%k?{uFzEqJM4ErzO=+adO^Ww<%kG-Yjf+aoXX~q6dHD zT5cv#$z!bBzoK>5F7rwZjg3$rj}nYbLOZu6xt`lsf1gp7qr0^Dh85TqJRVepI`}8W z5cl|p?tYu<2cg5qbcr$-ZD zl(}LhCzB~}DBO^urP|2Vx!73D7q0aQAho9{rQkx~&^D8dde1h4Q@CR0#j#M)dg9^+ zN|nsCw+0wV&>?Xtlup%(7RUB34Sgk3|pc*aHy+junPWLY`oXK7T7ubIQm}c+q@0$ECjVTAhSb& zvXM|(PS|z=@tIwF2fv{dGTZB>tcsMYS=f4_C=g43etp6^l2S^&Qpb}V*gE2%AF(NI zu(m{e447X&kT{UAdDF8NZU6UGJ)f30YP#MzOP8g+Lr86urw?mDTQB88))6~4gfNT9 zSzzlB&a9C@8Nped|MQNuM*MuUdomyu32i+HmCHewX2w+HgkJMmAiem$cynNLh3`pb zmi8mrj%|YcRp($dEea}S#or;5y8leI_mBv;${136d(SLi;1^O0d!x6vAOVD@8O4OoFm7E*? z)(kQgY@s2dNO;W-+GD;tU(yHGJ1KF*ie=@>KvUnF5eKRMl~T#+vT%=>5L%T?n*6dM zT_CbTL>qtf2-19??b~Ns1)sY%Jfo2nbP8`2Ks;)`6`|oAtE8Sfesxj;4K&!h&-c1- zZ|x{VxAn-W(gFk2eEOUF<8FYYLDIcM+v<-C7UK`kKW=W*`gmwwb0KU`ys6JF{qr`` zE3hNLBUey6FQyBJ0>fmD1*!4G##F z>?T4&S@7c_giXzU<0~VC4E^UVv9d1D`nenP{1d@C8p}Z;3nD#ML0Nr`i=J8mw)y$4 z@*L-t0x5Bq0rel-0$6g=Omrd=m_t7be0_-*q zHBTgoj0c+%&pvblns`4=FTuLqXS^G??;d2oRf$$okIKmDf*<82QVRlf8)6t9xTJ++ z86VP(t9ZiKPs$@MW~L*eLu+CUlOzROk>)Q6y=6l`MH`HYFMkZ zkmz_@{-&KS+XpDn55*1H2cOt(BtD65dYY~jWmsRpTGUse@EO}+s literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/trunks/left/css/trunks-left.css b/core/templates/layout/two-column/trunks/left/css/trunks-left.css new file mode 100644 index 000000000..aaa05435b --- /dev/null +++ b/core/templates/layout/two-column/trunks/left/css/trunks-left.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--trunks--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--trunks--left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--trunks--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--trunks--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--trunks--left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--trunks--left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--trunks--left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--left .column--first { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--left .column--first { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--left .column--first { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--trunks--left .column--first { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--trunks--left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--left .column--second { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--left .column--second { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--left .column--second { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--trunks--left .column--second { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=trunks-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss b/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss new file mode 100644 index 000000000..11eb10e16 --- /dev/null +++ b/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss @@ -0,0 +1,45 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +.layout--trunks--left { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + +} diff --git a/core/templates/layout/two-column/trunks/left/trunks-left.html.twig b/core/templates/layout/two-column/trunks/left/trunks-left.html.twig new file mode 100644 index 000000000..76ee55847 --- /dev/null +++ b/core/templates/layout/two-column/trunks/left/trunks-left.html.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/trunks/left/trunks-left.png b/core/templates/layout/two-column/trunks/left/trunks-left.png new file mode 100644 index 0000000000000000000000000000000000000000..b052303f5f1525daa9637eb56701f253ef9588eb GIT binary patch literal 2467 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/trunks/right/css/trunks-right.css b/core/templates/layout/two-column/trunks/right/css/trunks-right.css new file mode 100644 index 000000000..db9e1faf0 --- /dev/null +++ b/core/templates/layout/two-column/trunks/right/css/trunks-right.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--trunks--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--trunks--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--trunks--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--trunks--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--trunks--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--trunks--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--trunks--right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--right .column--first { + width: calc(66.66667% - 33.33333px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--right .column--first { + width: calc(66.66667% - 66.66667px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--right .column--first { + width: calc(66.66667% - 100px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--trunks--right .column--first { + width: calc(66.66667% - 0.41667in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--trunks--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--trunks--right .column--second { + width: calc(33.33333% - 26.66667px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--trunks--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--trunks--right .column--second { + width: calc(33.33333% - 53.33333px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--trunks--right .column--second { + width: calc(33.33333% - 80px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--trunks--right .column--second { + width: calc(33.33333% - 0.33333in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=trunks-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss b/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss new file mode 100644 index 000000000..7b181ff8e --- /dev/null +++ b/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss @@ -0,0 +1,43 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column-first: ( + 'xs': 1 of 1, + 'sm': 2 of 3, + 'md': 2 of 3, + 'lg': 2 of 3, + 'xl': 2 of 3, + 'print': 2 of 3 +); + +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 3, + 'md': 1 of 3, + 'lg': 1 of 3, + 'xl': 1 of 3, + 'print': 1 of 3 +); +.layout--trunks--right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column-first, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } + +} diff --git a/core/templates/layout/two-column/trunks/right/trunks-right.html.twig b/core/templates/layout/two-column/trunks/right/trunks-right.html.twig new file mode 100644 index 000000000..8a2ad483b --- /dev/null +++ b/core/templates/layout/two-column/trunks/right/trunks-right.html.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/trunks/right/trunks-right.png b/core/templates/layout/two-column/trunks/right/trunks-right.png new file mode 100644 index 0000000000000000000000000000000000000000..f44bb6857bfdd09caabe4350092c215be3c553e1 GIT binary patch literal 2280 zcmZWr3p|ti8z0tYE^BmA%xT6^Ct;$RwW(#rDob*WzuYEs+t}F3EhCr8oKop%lITda z(EOt?jN*_>Iw6edDCL$_n%k-KPM6dF^M5~|_x(M;=l*=3=l8yEx+BF-Q%zS51OjQ2 z?MY6+dK9?1su1Am+1%X>EJ{o#yIr6=?Z`I(olA3eXSqA<$NAI4%zOjrepE9~7z5A( zf$$t0K!#CSz9>#uXgCwcA)uEuZ~(1fo1;-nDy$F!+TFnsWlN8wqPCb>nPJd2YA6&6 z9~lscb0Y2eY7XoO=pYu0fipK}v)N{BOEY@pQF9AxYio1NX7kOPO#uy4=CN>=FUK^T zY52v-H$NmQ(?62NVA1H|D1~2NKYA34fJQ3zVI!P4UgOH0g;mOn_oTH?(W1^iIZ z7qphR09-a|c=PYj+o-vzXz77KkU27m=*&@?JkF zoh=pcLc{TyU5at?Xd1OD8K?Jv+KSMKReou46GS>C@fuQDV#I=_u!l`N@&oiRQ= zqdh#}E|!b0z$% zH9QHeHFv0~13uj5mRI+@H7h74nHfV!8cLXjiWcVGnuP;xr3Y`9w=LrbRn{ynYW$Rk ztQ&?dlnTdFG8%0Ck^Fto(ad#2V)@V_q$j%~{NqP#bOnpSt)89ug_j!_`-;|(lt$Q} zTi#Gbf}V5%e=|1=66XfS(mu(VdcBz3*KqBWugx9k+j?A0{ zmsOS1GI|RAU;e6-piRQk)T@p48O@DG#KXpAZ0{^MHo)&3sxRwa9RSCA!TS*T9ToT= zx<>B(m2F!`02CB>Y#o>Nx%~xfg!gDPy|E=;*MoI2qhICM2(((nbPlU7UDZ{mE8ajF zwH7(3qh%LWXYfld7>xqGANn~Tqt8f21)11Fk&(4O6FqBjH#>lkMTysGdEJ~uNYjGf zfsjRTS%C?%^uk{mW##w$QtYvzG}Bef-UZwK4|G5R-iG!FkHVT!MNk8eB(N5xF9u#h zhVs*Vs?>1OUvCqY4aybmRwZ`2rqs)LF3Z7-8sQ;hzmJWdu$`(fO0#hVIQQL)g~~%E zaBS{xeUm4Fbf2FBOCI#kjwwLWy=-*rTK(CFNjEI8jc|`dpi91K;9WtAm|EPc0u2Di z1_bQdk&iC8!%vur0h-z*gRk_a)c}1j^4cmVb$q3BaMS=(x2m9hif9T?)BTrU$9#+~1atycMTL&BUYZ=!VTcb@HT9#@Br#T%VE z1{9=dqY?Mu+lz`>k(@S7*W~#)E{$B>KA{|0e`bPUhe4)yO2PH0UqnbSS*2#SvGJB-cqBLwUgXAOKy=G}(GSb%XM5EKpdMW2fSG?y_jnr6u1Esfn-`W8%xWbRg))U{ZnT0DbndYVK2xfo{ zfdgI0(pDulD2}#*N^A(xT@l5UmmitUGpXn+JszjbXd2TAb1E7Pv=$W+c+iTu7MU|0 z%Ms1rf6yD4TefNZX13dFlE-_o+=HB9s>2vaN9WmISv8g2q}K1fVJ|k^>)1gDeE81x z{NM@e5#b`i%qz=5zo9rWK6^fR#Rl=(1AC^2?G8wvWq0IuDyI~ro|U!im-6wSKdgjj z%9Wa|*UVCfqp|IhBz?~O3s`k56SB?Ca!tkpasha~D|Oh|q$Cv(#Ie$gk@qic-sW#M z=q-Nv@Pg-HxJwf?<7D4)!)z({+s9%d>W*GtbwWms-F60RUX_vg3c3@kRaCLIx~kGF z0h@HIEHxxKt};3l!4hlp7 literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/wedge/left/css/wedge-left.css b/core/templates/layout/two-column/wedge/left/css/wedge-left.css new file mode 100644 index 000000000..4d34b61ec --- /dev/null +++ b/core/templates/layout/two-column/wedge/left/css/wedge-left.css @@ -0,0 +1,240 @@ +@media only screen and (max-width: 575px) { + .layout--wedge--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--left { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--left { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--left { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--wedge--left { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--wedge--left::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) { + .layout--wedge--left { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: flex-start; + align-content: center; + box-sizing: border-box; + } + .layout--wedge--left > * { + flex: 0 0 auto; + box-sizing: inherit; + } +} + +@media only screen and (max-width: 575px) { + .layout--wedge--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--left .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--left .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--left .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--wedge--left .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--wedge--left .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +.layout--wedge--left .column--first { + order: 10; +} + +@media only screen and (max-width: 575px) { + .layout--wedge--left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--left .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--left .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--left .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--left .column--first { + width: calc(75% - 105px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--wedge--left .column--first { + width: calc(75% - 0.4375in); + float: left; + margin-left: 0.25in; + } +} + +.layout--wedge--left .column--second { + order: 1; +} + +@media only screen and (max-width: 575px) { + .layout--wedge--left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--left .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--left .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--left .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--left .column--second { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--wedge--left .column--second { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=wedge-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss b/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss new file mode 100644 index 000000000..73f7cfa26 --- /dev/null +++ b/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss @@ -0,0 +1,51 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 3 of 4, + 'lg': 3 of 4, + 'xl': 3 of 4, + 'print': 3 of 4 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--wedge--left { + @include responsive-container($default-container); + + @include grid-media($media-md) { + @include flex-container(); + } + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--first { + order: 10; + @include responsive-grid-column($column, $default-container); + } + + .column--second { + order: 1; + @include responsive-grid-column($column-second, $default-container); + } + +} diff --git a/core/templates/layout/two-column/wedge/left/wedge-left.html.twig b/core/templates/layout/two-column/wedge/left/wedge-left.html.twig new file mode 100644 index 000000000..1d99d3ca0 --- /dev/null +++ b/core/templates/layout/two-column/wedge/left/wedge-left.html.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{content.second}} +
    +
    +
    diff --git a/core/templates/layout/two-column/wedge/left/wedge-left.png b/core/templates/layout/two-column/wedge/left/wedge-left.png new file mode 100644 index 0000000000000000000000000000000000000000..aec0b65d9aea2e01fb76f264b3725be4651a110e GIT binary patch literal 2084 zcma)7c{E%39=}NwOB`NDEoT(HB8Vj}N)d^s!AP{!Xsba{>uVkoA_#qE@;dajC@Dp2 zE1jq@gHEG%+S490IF43$wxQZ-X=>LHN~w3z>6r8WdH0-qzsv9Q`EKX;``xRa9yF0RV|dgw?1pZVqrjoY3L{BC!ERx~Oj0$7L!Z{o*Eo?|T`2Sh?Gvgkn&mQJstG&!UE1#GoXuE+u z4ed^A#|w|k5krDLkKPgEJIqN00681F^Rd%B#M~`+_SljAmt6znl@Iz?R2MsCuk>aW zVbnGe_A;Z@L(9F#PogoxeC;A+oJP!$%ypJ$5M}q<0JU%ahnsn7P1D_VXI1TszI^yM zdKc$`MXKi|Z%~EkfIDj}h>v63*hi?kg10*KaRhIen!2|5Z0pCLwZ(Tq0#zIuiJKcYGY#c$%p081VYjZ4DiY4FT9aFZBZUzrN+E~XhK`23 zRtsLnZSt+&TDHf91u#PS9(ro-Q2z2#)+6!SPfBi98a4IRCwc!^N{mgj9W7WHjY_{G z#9f>EX`!Td_2@s{M*@8PU9Y|i!IQ@%+;q2!sd=lO*i}DL;V20?b@1W%o1B?OGaD1>oxYc&nt^>?{q&>4wGTx# z5ZPxloW?BZ?U~hyX%(3beYBrUWlGiyyB!K{k=_@TWj3j;abArVSS~#k6RLCDk7qWN zL>?`(K7P=&a&+!RU`LUs#yxM77rE0uby8*?J5qYyqDVgfzEfI`0dBmlnX~x5gY1%+ zqK`)kpU&3Xc|Lqr-FEL}Gh$k1pv85_Soh^yPg^dGy+qLpZ6QDX*B!HUt1|k~McLWx zN;TzXov)G!6fN1!1XeWv!M;uuZJssEi|&1fL1edFM9k9%!6}`xe>4_FRLYD-qiDnPaz^3h?vG0$hiUuu_kLF?N|i(i|-0 zQ8Zq(!qs9xaaE|pSMy5ibYal<8{*J_F;0tW&c`Vn@Uj6@ot-+-0#p$7M>(P3ftF9Iy3JGN@o z*K;liiWJ*ojt8ffrNPRyfY2c{8dn?;P=)A9pKUHh;x>wfIpXR%K=E6nrd)rCKVKM& zjA+0B*?!5@Jb9d{RdXDY#*)>&^5>^iIG9fRa$@G?7skgq$;-F zYQP?}j-aaZ?VuvqG%%EwKoMcT_cP*8cn6w}Bf8QuSjF&cd^@XWi3@P`F}+=H2YvYy zNARsPaE$HZ(6mOQ#40D9{|Oz<^DYt!uxFNFKLjtu^g^dbDahl)Dmmj^0Wn@ zOHhL>cpEpY`@U15d53amocSs8@(rSy)(ZC}m!{HEna6tA2R~lfPyzy?h~J^pw{;^6n@}Zw^cj?SGT_JkGB; zbaeLA?WOyNwJklOB7!xRL|Xb0BJqpiIxy^maq`BLUb6IkNw(Qt{HvyA2(Km^0s6uU*kC))kMPC}x@|dIYwK2AF=p8-PM#qx6!jx59n&xzAp>Kfs&!{%eT~{W;@O?4(Pt_ z>Q^LR{KoBryiY_Uf!6vTxA0$w&rOM>{!O-~aihW2cdxAlpQ>njAY9~$dqYQ4BAui+ sji}w2jElAT9c`xw@MX~mFy+By;9O*G#+aQ--uC~T?&9HGLp^`#zh7gD=>Px# literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/wedge/right/css/wedge-right.css b/core/templates/layout/two-column/wedge/right/css/wedge-right.css new file mode 100644 index 000000000..ae484094e --- /dev/null +++ b/core/templates/layout/two-column/wedge/right/css/wedge-right.css @@ -0,0 +1,217 @@ +@media only screen and (max-width: 575px) { + .layout--wedge--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--right { + padding: 1em calc(((50% /12) * 0) + 20px); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--right { + padding: 1em calc(((50% /12) * 0) + 40px); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--right { + padding: 1em calc(50% - (750px - 60px)); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only print { + .layout--wedge--right { + padding: 1em calc(((50% /12) * 0) + 0.25in); + } + .layout--wedge--right::after { + clear: both; + content: ""; + display: block; + } +} + +@media only screen and (max-width: 575px) { + .layout--wedge--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--right .grid-collapse { + margin-left: -20px; + margin-right: -20px; + width: calc(100% + 40px); + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--right .grid-collapse { + margin-left: -40px; + margin-right: -40px; + width: calc(100% + 80px); + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--right .grid-collapse { + margin-left: -60px; + margin-right: -60px; + width: calc(100% + 120px); + } +} + +@media only print { + .layout--wedge--right .grid-collapse { + margin-left: -0.25in; + margin-right: -0.25in; + width: calc(100% + 0.5in); + } +} + +.layout--wedge--right .grid-collapse::after { + clear: both; + content: ""; + display: block; +} + +@media only screen and (max-width: 575px) { + .layout--wedge--right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--right .column--first { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--right .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--right .column--first { + width: calc(75% - 70px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--right .column--first { + width: calc(75% - 105px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--wedge--right .column--first { + width: calc(75% - 0.4375in); + float: left; + margin-left: 0.25in; + } +} + +@media only screen and (max-width: 575px) { + .layout--wedge--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .layout--wedge--right .column--second { + width: calc(100% - 40px); + float: left; + margin-left: 20px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .layout--wedge--right .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1024px) and (max-width: 1499px) { + .layout--wedge--right .column--second { + width: calc(25% - 50px); + float: left; + margin-left: 40px; + } +} + +@media only screen and (min-width: 1500px) { + .layout--wedge--right .column--second { + width: calc(25% - 75px); + float: left; + margin-left: 60px; + } +} + +@media only print { + .layout--wedge--right .column--second { + width: calc(25% - 0.3125in); + float: left; + margin-left: 0.25in; + } +} + +/*# sourceMappingURL=wedge-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss b/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss new file mode 100644 index 000000000..8db8015f8 --- /dev/null +++ b/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss @@ -0,0 +1,44 @@ +@charset 'UTF-8'; + +// My grids +@import "config/grid-system"; + +// Decant. +@import "decanter/core/utilities/decanter-utilities"; + +// Responsive grid patterns for the column. +$column: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 3 of 4, + 'lg': 3 of 4, + 'xl': 3 of 4, + 'print': 3 of 4 +); + +// Responsive grid patterns for the column. +$column-second: ( + 'xs': 1 of 1, + 'sm': 1 of 1, + 'md': 1 of 4, + 'lg': 1 of 4, + 'xl': 1 of 4, + 'print': 1 of 4 +); + +.layout--wedge--right { + @include responsive-container($default-container); + + .grid-collapse { + @include responsive-grid-collapse; + @include clearfix; + } + + .column--first { + @include responsive-grid-column($column, $default-container); + } + + .column--second { + @include responsive-grid-column($column-second, $default-container); + } +} diff --git a/core/templates/layout/two-column/wedge/right/wedge-right.html.twig b/core/templates/layout/two-column/wedge/right/wedge-right.html.twig new file mode 100644 index 000000000..72dc403e1 --- /dev/null +++ b/core/templates/layout/two-column/wedge/right/wedge-right.html.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} +
    +
    +
    + {{ content.first }} +
    + +
    + {{ content.second }} +
    +
    +
    diff --git a/core/templates/layout/two-column/wedge/right/wedge-right.png b/core/templates/layout/two-column/wedge/right/wedge-right.png new file mode 100644 index 0000000000000000000000000000000000000000..b84f814a0614d0790455e0c69886c61d6f887b97 GIT binary patch literal 2188 zcmZWr3pkVeA0HjJxm8lp>okj}q+J-Axkavtv?In@hsDfJjkPUJn}mkMOyssDLU&Sb zm5$0BVkkL>$e|^ZOGD};<8)rtzti*l-{<+gzwht+{eHfe&-4Ag&wI+x*Fzg>2!%i( z+FqWncyOnHD@k1yd<$|^XyB&A#Cy0vD!YJjP(DZXC$I=UyK!OBG$biJ`T!ZprqMw! z2*jR^14SB{MS`(uhoYD`wgddL2M&~%)hIaZvkU8>1DxRF2iqCVAj7PYR!B755ekFB z>>1$^IJ~R-S2%cbfJd@ebQ}tG^ypFKQ4BJgK|xvA+S;PfmMBY01n7Za#zwJ7Y(x}u z)0ZIsi{naWhB2sg7BxBwwj7sqAo>W)0S;eI^zHdlCz(zCFH;orYg=H0sAUVv0*OX_ ziw#2Um$f)QDw}+W;7X;DqnKb0M+-E@{adBUpl3_QCv-N-IWUvft7Jfw13Zws;$V0$D$Qb*^VS8IlT_#{Ts(*s^A zH;VjWF;C57c5M}`#icH4Sf09|-h6(*yEms2dV0qADi;6X4<9&nfKkhql4^pHe~*y)smHrpc)n{`0e= zft%6m^*xJkbC#Z~EY2@^vlU~eW#S*2kFCb|*OyM%jiLwkJ#W_uc;5baRKYlZms7JZ z?`_3kNUeGNlYss!$0xU|zj$?eCwuk{hK<9eumm|TUeV)XHSafaRh*V)G>Ph-UWO9& zX^)2ucki6#y>;#kc~ASRh-|BsY<6#6X2y**$ZUywu<>fkjlih{`_ zLxY;y@Kq>e6Co$(*NVKuX$zU7M%UCQNKpRU6`1P6!lhwijrp##8!AX+s%!WS$78l? zwZqD*uB-8SuKZwM;Hv~pk$c>29IBgaYL20nVyv!1cwubIz~p*jg`s4niKu0QU{glt z2H}(4b{dqe$$ei;-_}PE7jFNt=!2*Q&pYUe*-SJNrQ3UA8~vwYQo_*K1`1U`$1)9X zWXiQ|nRol{9mS{y^>Rzrn*c*hZcveq!XR9R?MS-qE}dtj8yg?`RII7@ygZ|euDDV^ z;VhlUr`JOdbHZ|*caeg0p%ex7-V`ZluBC7Y%|3+o5z>K%nr?%-cRTyeHO-Q} z#xMNZ&$sk6+cxPetw`GCQ68@cm#^FMobND4pAzT27z z7V3D?`j;KfO|zqedSIL0eYcFoH?=~0-Z?i(9Vk6#ss>v)d@@9Majc`ij6Z7QglS!O zLtE_jnFRH>J3{l{Bx&ziE_UO##f1bvRWlyhVT<-dW}P5;9_?1=nmPn4f%5do>@Wk|@RQPLra66n*+L>nBdq0Jx&(c) zLWwrASpr1^5{Qk@W4g_iusa!2f@&4@SaP+Ok%YE}FIPK3rZf~5#gDPd-|5WFOpAv(#Ps6Oj13NKj)=4vU7^@|Heyc;(pw|Y>;${$GV zLfg31%N`bB(IiW-;#}|=a}qm%zovn}T)cozTop3rA)qgAJJ|TDA*zi!aD;UCx&Y|}LSowY!x8Vhd8ghyb*B&vdzulvumh?;GASxsfRMD=E~(9A>es=unmbp4 z!=GrnNer_~3$n`)a=;Pnz1o|llvm3?`FE^ga4(l%meQD_>G4P9zPTrEwe_YCAcFF!)ADh9YpJ?VzdDD`(33+$G z{`PuC{GXMJ&OehcEtHhbt_~2ZTzCJ8V0z~fjO2ey{4=+{BiAJxSX-?X;Br2*68spg zD(tJx8$KNaIHkdD1N+s0izhHZ`ONDchy39PfzI!@CMJ0=%e+(nrqEfA32hG{XRNZ6 zuLyVn0uzn&5AHLs!*v--W=8qlCLyl`&^Mda!cq^E#m4K?yNUpD->^f9@R~uhhT&eZ z0$DVyf!z!L#~=c23p9=QYfKsOjeV!h?VASd48_@F=f#`VHsud>OrPYieF7xqPwbMb zTU*h2IG_1OmH}L0MTr%l{2tZoaOSE}@D40vVLy2mk;8 literal 0 HcmV?d00001 diff --git a/package-lock.json b/package-lock.json index 3c73a490e..286652b65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,15 +11,15 @@ "dev": true }, "ajv": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", - "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz", + "integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==", "dev": true, "requires": { - "co": "4.6.0", - "fast-deep-equal": "1.1.0", - "fast-json-stable-stringify": "2.0.0", - "json-schema-traverse": "0.3.1" + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, "align-text": { @@ -28,9 +28,9 @@ "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, "requires": { - "kind-of": "3.2.2", - "longest": "1.0.1", - "repeat-string": "1.6.1" + "kind-of": "^3.0.2", + "longest": "^1.0.1", + "repeat-string": "^1.5.2" } }, "amdefine": { @@ -57,8 +57,8 @@ "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", "dev": true, "requires": { - "micromatch": "3.1.10", - "normalize-path": "2.1.1" + "micromatch": "^3.1.4", + "normalize-path": "^2.1.1" } }, "aproba": { @@ -73,8 +73,8 @@ "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.3" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "argparse": { @@ -83,7 +83,7 @@ "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", "dev": true, "requires": { - "sprintf-js": "1.0.3" + "sprintf-js": "~1.0.2" }, "dependencies": { "sprintf-js": { @@ -124,7 +124,7 @@ "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", "dev": true, "requires": { - "array-uniq": "1.0.3" + "array-uniq": "^1.0.1" } }, "array-uniq": { @@ -151,7 +151,7 @@ "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", "dev": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": "~2.1.0" } }, "assert-plus": { @@ -202,12 +202,12 @@ "integrity": "sha512-YqUclCBDXUT9Y7aQ8Xv+ja8yhTZYJoMsOD7WS++gZIJLCpCu+gPcKGDlhk6S3WxhLkTcNVdaMZAWys2nzZCH7g==", "dev": true, "requires": { - "browserslist": "3.2.6", - "caniuse-lite": "1.0.30000836", - "normalize-range": "0.1.2", - "num2fraction": "1.2.2", - "postcss": "6.0.22", - "postcss-value-parser": "3.3.0" + "browserslist": "^3.2.6", + "caniuse-lite": "^1.0.30000832", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "postcss": "^6.0.22", + "postcss-value-parser": "^3.2.3" } }, "aws-sign2": { @@ -234,13 +234,13 @@ "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", "dev": true, "requires": { - "cache-base": "1.0.1", - "class-utils": "0.3.6", - "component-emitter": "1.2.1", - "define-property": "1.0.0", - "isobject": "3.0.1", - "mixin-deep": "1.3.1", - "pascalcase": "0.1.1" + "cache-base": "^1.0.1", + "class-utils": "^0.3.5", + "component-emitter": "^1.2.1", + "define-property": "^1.0.0", + "isobject": "^3.0.1", + "mixin-deep": "^1.2.0", + "pascalcase": "^0.1.1" }, "dependencies": { "define-property": { @@ -249,7 +249,7 @@ "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "is-accessor-descriptor": { @@ -258,7 +258,7 @@ "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { @@ -267,7 +267,7 @@ "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { @@ -276,9 +276,9 @@ "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } }, "kind-of": { @@ -294,9 +294,8 @@ "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", "dev": true, - "optional": true, "requires": { - "tweetnacl": "0.14.5" + "tweetnacl": "^0.14.3" } }, "binary-extensions": { @@ -311,7 +310,7 @@ "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", "dev": true, "requires": { - "inherits": "2.0.3" + "inherits": "~2.0.0" } }, "bluebird": { @@ -326,10 +325,10 @@ "integrity": "sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=", "dev": true, "requires": { - "continuable-cache": "0.3.1", - "error": "7.0.2", - "raw-body": "1.1.7", - "safe-json-parse": "1.0.1" + "continuable-cache": "^0.3.1", + "error": "^7.0.0", + "raw-body": "~1.1.0", + "safe-json-parse": "~1.0.1" } }, "bourbon": { @@ -343,7 +342,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -353,16 +352,16 @@ "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", "dev": true, "requires": { - "arr-flatten": "1.1.0", - "array-unique": "0.3.2", - "extend-shallow": "2.0.1", - "fill-range": "4.0.0", - "isobject": "3.0.1", - "repeat-element": "1.1.2", - "snapdragon": "0.8.2", - "snapdragon-node": "2.1.1", - "split-string": "3.1.0", - "to-regex": "3.0.2" + "arr-flatten": "^1.1.0", + "array-unique": "^0.3.2", + "extend-shallow": "^2.0.1", + "fill-range": "^4.0.0", + "isobject": "^3.0.1", + "repeat-element": "^1.1.2", + "snapdragon": "^0.8.1", + "snapdragon-node": "^2.0.1", + "split-string": "^3.0.2", + "to-regex": "^3.0.1" }, "dependencies": { "extend-shallow": { @@ -371,7 +370,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -382,7 +381,7 @@ "integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=", "dev": true, "requires": { - "pako": "0.2.9" + "pako": "~0.2.0" } }, "browserslist": { @@ -391,8 +390,8 @@ "integrity": "sha512-XCsMSg9V4S1VRdcp265dJ+8kBRjfuFXcavbisY7G6T9QI0H1Z24PP53vvs0WDYWqm38Mco1ILDtafcS8ZR4xiw==", "dev": true, "requires": { - "caniuse-lite": "1.0.30000836", - "electron-to-chromium": "1.3.45" + "caniuse-lite": "^1.0.30000830", + "electron-to-chromium": "^1.3.42" } }, "builtin-modules": { @@ -413,15 +412,15 @@ "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", "dev": true, "requires": { - "collection-visit": "1.0.0", - "component-emitter": "1.2.1", - "get-value": "2.0.6", - "has-value": "1.0.0", - "isobject": "3.0.1", - "set-value": "2.0.0", - "to-object-path": "0.3.0", - "union-value": "1.0.0", - "unset-value": "1.0.0" + "collection-visit": "^1.0.0", + "component-emitter": "^1.2.1", + "get-value": "^2.0.6", + "has-value": "^1.0.0", + "isobject": "^3.0.1", + "set-value": "^2.0.0", + "to-object-path": "^0.3.0", + "union-value": "^1.0.0", + "unset-value": "^1.0.0" } }, "camelcase": { @@ -437,8 +436,8 @@ "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { - "camelcase": "2.1.1", - "map-obj": "1.0.1" + "camelcase": "^2.0.0", + "map-obj": "^1.0.0" }, "dependencies": { "camelcase": { @@ -468,8 +467,8 @@ "dev": true, "optional": true, "requires": { - "align-text": "0.1.4", - "lazy-cache": "1.0.4" + "align-text": "^0.1.3", + "lazy-cache": "^1.0.3" } }, "chalk": { @@ -478,11 +477,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "chokidar": { @@ -491,18 +490,18 @@ "integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==", "dev": true, "requires": { - "anymatch": "2.0.0", - "async-each": "1.0.1", - "braces": "2.3.2", - "fsevents": "1.2.3", - "glob-parent": "3.1.0", - "inherits": "2.0.3", - "is-binary-path": "1.0.1", - "is-glob": "4.0.0", - "normalize-path": "2.1.1", - "path-is-absolute": "1.0.1", - "readdirp": "2.1.0", - "upath": "1.0.5" + "anymatch": "^2.0.0", + "async-each": "^1.0.0", + "braces": "^2.3.0", + "fsevents": "^1.1.2", + "glob-parent": "^3.1.0", + "inherits": "^2.0.1", + "is-binary-path": "^1.0.0", + "is-glob": "^4.0.0", + "normalize-path": "^2.1.1", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.0.0", + "upath": "^1.0.0" } }, "class-utils": { @@ -511,10 +510,10 @@ "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", "dev": true, "requires": { - "arr-union": "3.1.0", - "define-property": "0.2.5", - "isobject": "3.0.1", - "static-extend": "0.1.2" + "arr-union": "^3.1.0", + "define-property": "^0.2.5", + "isobject": "^3.0.0", + "static-extend": "^0.1.1" }, "dependencies": { "define-property": { @@ -523,7 +522,7 @@ "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } } } @@ -535,8 +534,8 @@ "dev": true, "optional": true, "requires": { - "center-align": "0.1.3", - "right-align": "0.1.3", + "center-align": "^0.1.1", + "right-align": "^0.1.1", "wordwrap": "0.0.2" }, "dependencies": { @@ -549,12 +548,6 @@ } } }, - "co": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true - }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -573,8 +566,8 @@ "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", "dev": true, "requires": { - "map-visit": "1.0.0", - "object-visit": "1.0.1" + "map-visit": "^1.0.0", + "object-visit": "^1.0.0" } }, "color-convert": { @@ -583,7 +576,7 @@ "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", "dev": true, "requires": { - "color-name": "1.1.3" + "color-name": "^1.1.1" } }, "color-name": { @@ -599,12 +592,12 @@ "dev": true }, "combined-stream": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", - "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz", + "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==", "dev": true, "requires": { - "delayed-stream": "1.0.0" + "delayed-stream": "~1.0.0" } }, "commander": { @@ -631,9 +624,9 @@ "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=", "dev": true, "requires": { - "inherits": "2.0.3", - "readable-stream": "2.3.3", - "typedarray": "0.0.6" + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" } }, "console-control-strings": { @@ -666,13 +659,13 @@ "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==", "dev": true, "requires": { - "is-directory": "0.3.1", - "js-yaml": "3.5.5", - "minimist": "1.2.0", - "object-assign": "4.1.1", - "os-homedir": "1.0.2", - "parse-json": "2.2.0", - "require-from-string": "1.2.1" + "is-directory": "^0.3.1", + "js-yaml": "^3.4.3", + "minimist": "^1.2.0", + "object-assign": "^4.1.0", + "os-homedir": "^1.0.1", + "parse-json": "^2.2.0", + "require-from-string": "^1.1.0" }, "dependencies": { "minimist": { @@ -689,8 +682,8 @@ "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "which": "1.2.14" + "lru-cache": "^4.0.1", + "which": "^1.2.9" } }, "currently-unhandled": { @@ -699,7 +692,7 @@ "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", "dev": true, "requires": { - "array-find-index": "1.0.2" + "array-find-index": "^1.0.1" } }, "dashdash": { @@ -708,7 +701,7 @@ "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" } }, "dateformat": { @@ -717,8 +710,8 @@ "integrity": "sha1-nxJLZ1lMk3/3BpMuSmQsyo27/uk=", "dev": true, "requires": { - "get-stdin": "4.0.1", - "meow": "3.7.0" + "get-stdin": "^4.0.1", + "meow": "^3.3.0" } }, "debug": { @@ -755,8 +748,8 @@ "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", "dev": true, "requires": { - "is-descriptor": "1.0.2", - "isobject": "3.0.1" + "is-descriptor": "^1.0.2", + "isobject": "^3.0.1" }, "dependencies": { "is-accessor-descriptor": { @@ -765,7 +758,7 @@ "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { @@ -774,7 +767,7 @@ "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { @@ -783,9 +776,9 @@ "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } }, "kind-of": { @@ -826,8 +819,8 @@ "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==", "dev": true, "requires": { - "arrify": "1.0.1", - "path-type": "3.0.0" + "arrify": "^1.0.1", + "path-type": "^3.0.0" }, "dependencies": { "path-type": { @@ -836,7 +829,7 @@ "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", "dev": true, "requires": { - "pify": "3.0.0" + "pify": "^3.0.0" } }, "pify": { @@ -847,25 +840,14 @@ } } }, - "each-async": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/each-async/-/each-async-1.1.1.tgz", - "integrity": "sha1-3uUim98KtrogEqOV4bhpq/iBNHM=", - "dev": true, - "requires": { - "onetime": "1.1.0", - "set-immediate-shim": "1.0.1" - } - }, "ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", "dev": true, - "optional": true, "requires": { - "jsbn": "0.1.1", - "safer-buffer": "2.1.2" + "jsbn": "~0.1.0", + "safer-buffer": "^2.1.0" } }, "electron-to-chromium": { @@ -880,8 +862,8 @@ "integrity": "sha1-pfdf/02ZJhJt2sDqXcOOaJFTywI=", "dev": true, "requires": { - "string-template": "0.2.1", - "xtend": "4.0.1" + "string-template": "~0.2.1", + "xtend": "~4.0.0" } }, "error-ex": { @@ -890,7 +872,7 @@ "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=", "dev": true, "requires": { - "is-arrayish": "0.2.1" + "is-arrayish": "^0.2.1" } }, "escape-string-regexp": { @@ -917,13 +899,13 @@ "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { - "cross-spawn": "5.1.0", - "get-stream": "3.0.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" }, "dependencies": { "cross-spawn": { @@ -932,9 +914,9 @@ "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "shebang-command": "1.2.0", - "which": "1.2.14" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } } } @@ -951,13 +933,13 @@ "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", "dev": true, "requires": { - "debug": "2.6.9", - "define-property": "0.2.5", - "extend-shallow": "2.0.1", - "posix-character-classes": "0.1.1", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "debug": "^2.3.3", + "define-property": "^0.2.5", + "extend-shallow": "^2.0.1", + "posix-character-classes": "^0.1.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" }, "dependencies": { "define-property": { @@ -966,7 +948,7 @@ "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } }, "extend-shallow": { @@ -975,7 +957,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -992,8 +974,8 @@ "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=", "dev": true, "requires": { - "assign-symbols": "1.0.0", - "is-extendable": "1.0.1" + "assign-symbols": "^1.0.0", + "is-extendable": "^1.0.1" }, "dependencies": { "is-extendable": { @@ -1002,7 +984,7 @@ "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", "dev": true, "requires": { - "is-plain-object": "2.0.4" + "is-plain-object": "^2.0.4" } } } @@ -1013,14 +995,14 @@ "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", "dev": true, "requires": { - "array-unique": "0.3.2", - "define-property": "1.0.0", - "expand-brackets": "2.1.4", - "extend-shallow": "2.0.1", - "fragment-cache": "0.2.1", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "array-unique": "^0.3.2", + "define-property": "^1.0.0", + "expand-brackets": "^2.1.4", + "extend-shallow": "^2.0.1", + "fragment-cache": "^0.2.1", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" }, "dependencies": { "define-property": { @@ -1029,7 +1011,7 @@ "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "extend-shallow": { @@ -1038,7 +1020,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } }, "is-accessor-descriptor": { @@ -1047,7 +1029,7 @@ "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { @@ -1056,7 +1038,7 @@ "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { @@ -1065,9 +1047,9 @@ "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } }, "kind-of": { @@ -1085,9 +1067,9 @@ "dev": true }, "fast-deep-equal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", "dev": true }, "fast-json-stable-stringify": { @@ -1102,7 +1084,7 @@ "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=", "dev": true, "requires": { - "websocket-driver": "0.7.0" + "websocket-driver": ">=0.5.1" } }, "figures": { @@ -1111,8 +1093,8 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" } }, "file-sync-cmp": { @@ -1127,10 +1109,10 @@ "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-number": "3.0.0", - "repeat-string": "1.6.1", - "to-regex-range": "2.1.1" + "extend-shallow": "^2.0.1", + "is-number": "^3.0.0", + "repeat-string": "^1.6.1", + "to-regex-range": "^2.1.0" }, "dependencies": { "extend-shallow": { @@ -1139,7 +1121,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -1150,8 +1132,8 @@ "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "dev": true, "requires": { - "path-exists": "2.1.0", - "pinkie-promise": "2.0.1" + "path-exists": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "findup-sync": { @@ -1160,7 +1142,7 @@ "integrity": "sha1-N5MKpdgWt3fANEXhlmzGeQpMCxY=", "dev": true, "requires": { - "glob": "5.0.15" + "glob": "~5.0.0" }, "dependencies": { "glob": { @@ -1169,11 +1151,11 @@ "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=", "dev": true, "requires": { - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "2 || 3", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } } } @@ -1197,14 +1179,14 @@ "dev": true }, "form-data": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", - "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", + "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==", "dev": true, "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.6", - "mime-types": "2.1.20" + "asynckit": "^0.4.0", + "combined-stream": "^1.0.6", + "mime-types": "^2.1.12" } }, "fragment-cache": { @@ -1213,7 +1195,7 @@ "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=", "dev": true, "requires": { - "map-cache": "0.2.2" + "map-cache": "^0.2.2" } }, "fs-extra": { @@ -1222,8 +1204,8 @@ "integrity": "sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "2.4.0" + "graceful-fs": "^4.1.2", + "jsonfile": "^2.1.0" } }, "fs.realpath": { @@ -1239,8 +1221,8 @@ "dev": true, "optional": true, "requires": { - "nan": "2.10.0", - "node-pre-gyp": "0.9.1" + "nan": "^2.9.2", + "node-pre-gyp": "^0.9.0" }, "dependencies": { "abbrev": { @@ -1790,10 +1772,10 @@ "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "inherits": "2.0.3", - "mkdirp": "0.5.1", - "rimraf": "2.6.2" + "graceful-fs": "^4.1.2", + "inherits": "~2.0.0", + "mkdirp": ">=0.5 0", + "rimraf": "2" } }, "gauge": { @@ -1802,14 +1784,14 @@ "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.3" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "gaze": { @@ -1818,7 +1800,7 @@ "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=", "dev": true, "requires": { - "globule": "1.2.0" + "globule": "^1.0.0" } }, "get-caller-file": { @@ -1857,7 +1839,7 @@ "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" } }, "glob": { @@ -1866,12 +1848,12 @@ "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "glob-parent": { @@ -1880,8 +1862,8 @@ "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", "dev": true, "requires": { - "is-glob": "3.1.0", - "path-dirname": "1.0.2" + "is-glob": "^3.1.0", + "path-dirname": "^1.0.0" }, "dependencies": { "is-glob": { @@ -1890,7 +1872,7 @@ "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", "dev": true, "requires": { - "is-extglob": "2.1.1" + "is-extglob": "^2.1.0" } } } @@ -1901,12 +1883,12 @@ "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=", "dev": true, "requires": { - "array-union": "1.0.2", - "dir-glob": "2.0.0", - "glob": "7.1.2", - "ignore": "3.3.8", - "pify": "3.0.0", - "slash": "1.0.0" + "array-union": "^1.0.1", + "dir-glob": "^2.0.0", + "glob": "^7.1.2", + "ignore": "^3.3.5", + "pify": "^3.0.0", + "slash": "^1.0.0" }, "dependencies": { "pify": { @@ -1923,9 +1905,9 @@ "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", "dev": true, "requires": { - "glob": "7.1.2", - "lodash": "4.17.5", - "minimatch": "3.0.4" + "glob": "~7.1.1", + "lodash": "~4.17.4", + "minimatch": "~3.0.2" } }, "graceful-fs": { @@ -1940,23 +1922,23 @@ "integrity": "sha512-/JzmZNPfKorlCrrmxWqQO4JVodO+DVd5XX4DkocL/1WlLlKVLE9+SdEIempOAxDhWPysLle6afvn/hg7Ck2k9g==", "dev": true, "requires": { - "coffeescript": "1.10.0", - "dateformat": "1.0.12", - "eventemitter2": "0.4.14", - "exit": "0.1.2", - "findup-sync": "0.3.0", - "glob": "7.0.6", - "grunt-cli": "1.2.0", - "grunt-known-options": "1.1.0", - "grunt-legacy-log": "2.0.0", - "grunt-legacy-util": "1.1.1", - "iconv-lite": "0.4.21", - "js-yaml": "3.5.5", - "minimatch": "3.0.4", - "mkdirp": "0.5.1", - "nopt": "3.0.6", - "path-is-absolute": "1.0.1", - "rimraf": "2.6.2" + "coffeescript": "~1.10.0", + "dateformat": "~1.0.12", + "eventemitter2": "~0.4.13", + "exit": "~0.1.1", + "findup-sync": "~0.3.0", + "glob": "~7.0.0", + "grunt-cli": "~1.2.0", + "grunt-known-options": "~1.1.0", + "grunt-legacy-log": "~2.0.0", + "grunt-legacy-util": "~1.1.1", + "iconv-lite": "~0.4.13", + "js-yaml": "~3.5.2", + "minimatch": "~3.0.2", + "mkdirp": "~0.5.1", + "nopt": "~3.0.6", + "path-is-absolute": "~1.0.0", + "rimraf": "~2.6.2" }, "dependencies": { "ansi-styles": { @@ -1965,7 +1947,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -1974,9 +1956,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "glob": { @@ -1985,12 +1967,12 @@ "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.2", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "grunt-cli": { @@ -1999,10 +1981,10 @@ "integrity": "sha1-VisRnrsGndtGSs4oRVAb6Xs1tqg=", "dev": true, "requires": { - "findup-sync": "0.3.0", - "grunt-known-options": "1.1.0", - "nopt": "3.0.6", - "resolve": "1.1.7" + "findup-sync": "~0.3.0", + "grunt-known-options": "~1.1.0", + "nopt": "~3.0.6", + "resolve": "~1.1.0" } }, "grunt-legacy-log": { @@ -2011,10 +1993,10 @@ "integrity": "sha512-1m3+5QvDYfR1ltr8hjiaiNjddxGdQWcH0rw1iKKiQnF0+xtgTazirSTGu68RchPyh1OBng1bBUjLmX8q9NpoCw==", "dev": true, "requires": { - "colors": "1.1.2", - "grunt-legacy-log-utils": "2.0.1", - "hooker": "0.2.3", - "lodash": "4.17.5" + "colors": "~1.1.2", + "grunt-legacy-log-utils": "~2.0.0", + "hooker": "~0.2.3", + "lodash": "~4.17.5" } }, "grunt-legacy-log-utils": { @@ -2023,8 +2005,8 @@ "integrity": "sha512-o7uHyO/J+i2tXG8r2bZNlVk20vlIFJ9IEYyHMCQGfWYru8Jv3wTqKZzvV30YW9rWEjq0eP3cflQ1qWojIe9VFA==", "dev": true, "requires": { - "chalk": "2.4.1", - "lodash": "4.17.10" + "chalk": "~2.4.1", + "lodash": "~4.17.10" }, "dependencies": { "lodash": { @@ -2041,13 +2023,13 @@ "integrity": "sha512-9zyA29w/fBe6BIfjGENndwoe1Uy31BIXxTH3s8mga0Z5Bz2Sp4UCjkeyv2tI449ymkx3x26B+46FV4fXEddl5A==", "dev": true, "requires": { - "async": "1.5.2", - "exit": "0.1.2", - "getobject": "0.1.0", - "hooker": "0.2.3", - "lodash": "4.17.10", - "underscore.string": "3.3.4", - "which": "1.3.1" + "async": "~1.5.2", + "exit": "~0.1.1", + "getobject": "~0.1.0", + "hooker": "~0.2.3", + "lodash": "~4.17.10", + "underscore.string": "~3.3.4", + "which": "~1.3.0" }, "dependencies": { "lodash": { @@ -2064,7 +2046,7 @@ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "requires": { - "glob": "7.0.6" + "glob": "^7.0.5" } }, "supports-color": { @@ -2073,7 +2055,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } }, "which": { @@ -2082,7 +2064,7 @@ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, "requires": { - "isexe": "2.0.0" + "isexe": "^2.0.0" } } } @@ -2093,8 +2075,8 @@ "integrity": "sha1-Vkq/LQN4qYOhW54/MO51tzjEBjg=", "dev": true, "requires": { - "async": "1.5.2", - "rimraf": "2.6.2" + "async": "^1.5.2", + "rimraf": "^2.5.1" }, "dependencies": { "rimraf": { @@ -2103,7 +2085,7 @@ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } } } @@ -2114,8 +2096,8 @@ "integrity": "sha1-cGDGWB6QS4qw0A8HbgqPbj58NXM=", "dev": true, "requires": { - "chalk": "1.1.3", - "file-sync-cmp": "0.1.1" + "chalk": "^1.1.1", + "file-sync-cmp": "^0.1.0" } }, "grunt-contrib-uglify": { @@ -2124,10 +2106,10 @@ "integrity": "sha512-W9O7lJE3PlD8VCc5fyaf98QV7f5wEDiU4PBIh0+/6UBbk2LhgzEFS0/p+taH5UD3+PlEn7QPN0o06Z0To6SqXw==", "dev": true, "requires": { - "chalk": "1.1.3", - "maxmin": "1.1.0", - "uglify-js": "3.3.7", - "uri-path": "1.0.0" + "chalk": "^1.0.0", + "maxmin": "^1.1.0", + "uglify-js": "~3.3.0", + "uri-path": "^1.0.0" }, "dependencies": { "source-map": { @@ -2142,8 +2124,8 @@ "integrity": "sha512-esJIpNQIC44EFSrbeFPhiXHy2HJ+dTcnn0Zdkn+5meuLsvoV0mFJffKlyezNIIHNfhF0NpgbifygCfEyAogIhQ==", "dev": true, "requires": { - "commander": "2.13.0", - "source-map": "0.6.1" + "commander": "~2.13.0", + "source-map": "~0.6.1" } } } @@ -2154,10 +2136,10 @@ "integrity": "sha512-yGweN+0DW5yM+oo58fRu/XIRrPcn3r4tQx+nL7eMRwjpvk+rQY6R8o94BPK0i2UhTg9FN21hS+m8vR8v9vXfeg==", "dev": true, "requires": { - "async": "2.6.1", - "gaze": "1.1.2", - "lodash": "4.17.10", - "tiny-lr": "1.1.1" + "async": "^2.6.0", + "gaze": "^1.1.0", + "lodash": "^4.17.10", + "tiny-lr": "^1.1.1" }, "dependencies": { "async": { @@ -2166,7 +2148,7 @@ "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", "dev": true, "requires": { - "lodash": "4.17.10" + "lodash": "^4.17.10" } }, "lodash": { @@ -2184,7 +2166,7 @@ "dev": true, "requires": { "open": "0.0.5", - "q": "1.5.1" + "q": "^1.4.0" } }, "grunt-known-options": { @@ -2199,9 +2181,9 @@ "integrity": "sha512-lglLcVaoOIqH0sFv7RqwUKkEFGQwnlqyAKbatxZderwZGV1nDyKHN7gZS9LUiTx1t5GOvRBx0BEalHMyVwFAIA==", "dev": true, "requires": { - "chalk": "2.4.1", - "diff": "3.5.0", - "postcss": "6.0.22" + "chalk": "^2.1.0", + "diff": "^3.0.0", + "postcss": "^6.0.11" }, "dependencies": { "ansi-styles": { @@ -2210,7 +2192,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -2219,9 +2201,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "supports-color": { @@ -2230,7 +2212,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -2241,19 +2223,14 @@ "integrity": "sha512-yW2uTYBGvkDUK6+lWfXObE5gm8Kbjs7RrUh4NFqR0pOZ+YU/fR7rZPgTIn1f6hYpKXc/pCJSgGCtZIipLXVedw==", "dev": true, "requires": { - "strip-ansi": "3.0.1" + "strip-ansi": "^3.0.0" } }, "grunt-sass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/grunt-sass/-/grunt-sass-2.1.0.tgz", - "integrity": "sha512-XkexnQt/9rhReNd+Y7T0n/2g5FqYOQKfi2iSlpwDqvgs7EgEaGTxNhnWzHnbW5oNRvzL9AHopBG3AgRxL0d+DA==", - "dev": true, - "requires": { - "each-async": "1.1.1", - "node-sass": "4.9.3", - "object-assign": "4.1.1" - } + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/grunt-sass/-/grunt-sass-3.0.2.tgz", + "integrity": "sha512-Ogq4cWqBre71gZIkgxIxevgzZHSIIsrKu/5yvPDl4Mvib0A4TRTJEQUdpQ0YV1iai0DPjayz02vDJE6KUVHQ2w==", + "dev": true }, "grunt-sass-lint": { "version": "0.2.4", @@ -2261,7 +2238,7 @@ "integrity": "sha1-Bvd2Na2KUEiWjqM8VYS0ChgoHjU=", "dev": true, "requires": { - "sass-lint": "1.12.1" + "sass-lint": "^1.12.0" }, "dependencies": { "lodash": { @@ -2276,20 +2253,20 @@ "integrity": "sha1-Yw9pwhaqIGuCMvsqqQe98zNrbYM=", "dev": true, "requires": { - "commander": "2.12.2", - "eslint": "2.13.1", + "commander": "^2.8.1", + "eslint": "^2.7.0", "front-matter": "2.1.2", - "fs-extra": "3.0.1", - "glob": "7.1.2", - "globule": "1.2.0", - "gonzales-pe-sl": "4.2.3", - "js-yaml": "3.10.0", - "known-css-properties": "0.3.0", - "lodash.capitalize": "4.2.1", - "lodash.kebabcase": "4.1.1", - "merge": "1.2.0", - "path-is-absolute": "1.0.1", - "util": "0.10.3" + "fs-extra": "^3.0.1", + "glob": "^7.0.0", + "globule": "^1.0.0", + "gonzales-pe-sl": "^4.2.3", + "js-yaml": "^3.5.4", + "known-css-properties": "^0.3.0", + "lodash.capitalize": "^4.1.0", + "lodash.kebabcase": "^4.0.0", + "merge": "^1.2.0", + "path-is-absolute": "^1.0.0", + "util": "^0.10.3" }, "dependencies": { "commander": { @@ -2304,39 +2281,39 @@ "integrity": "sha1-5MyPoPAJ+4KaquI4VaKTYL4fbBE=", "dev": true, "requires": { - "chalk": "1.1.3", - "concat-stream": "1.6.0", - "debug": "2.6.9", - "doctrine": "1.5.0", - "es6-map": "0.1.5", - "escope": "3.6.0", - "espree": "3.5.2", - "estraverse": "4.2.0", - "esutils": "2.0.2", - "file-entry-cache": "1.3.1", - "glob": "7.1.2", - "globals": "9.18.0", - "ignore": "3.3.7", - "imurmurhash": "0.1.4", - "inquirer": "0.12.0", - "is-my-json-valid": "2.16.1", - "is-resolvable": "1.0.1", - "js-yaml": "3.10.0", - "json-stable-stringify": "1.0.1", - "levn": "0.3.0", - "lodash": "4.17.10", - "mkdirp": "0.5.1", - "optionator": "0.8.2", - "path-is-absolute": "1.0.1", - "path-is-inside": "1.0.2", - "pluralize": "1.2.1", - "progress": "1.1.8", - "require-uncached": "1.0.3", - "shelljs": "0.6.1", - "strip-json-comments": "1.0.4", - "table": "3.8.3", - "text-table": "0.2.0", - "user-home": "2.0.0" + "chalk": "^1.1.3", + "concat-stream": "^1.4.6", + "debug": "^2.1.1", + "doctrine": "^1.2.2", + "es6-map": "^0.1.3", + "escope": "^3.6.0", + "espree": "^3.1.6", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "file-entry-cache": "^1.1.1", + "glob": "^7.0.3", + "globals": "^9.2.0", + "ignore": "^3.1.2", + "imurmurhash": "^0.1.4", + "inquirer": "^0.12.0", + "is-my-json-valid": "^2.10.0", + "is-resolvable": "^1.0.0", + "js-yaml": "^3.5.1", + "json-stable-stringify": "^1.0.0", + "levn": "^0.3.0", + "lodash": "^4.0.0", + "mkdirp": "^0.5.0", + "optionator": "^0.8.1", + "path-is-absolute": "^1.0.0", + "path-is-inside": "^1.0.1", + "pluralize": "^1.2.1", + "progress": "^1.1.8", + "require-uncached": "^1.0.2", + "shelljs": "^0.6.0", + "strip-json-comments": "~1.0.1", + "table": "^3.7.8", + "text-table": "~0.2.0", + "user-home": "^2.0.0" }, "dependencies": { "chalk": { @@ -2345,11 +2322,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" }, "dependencies": { "ansi-styles": { @@ -2370,7 +2347,7 @@ "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" }, "dependencies": { "ansi-regex": { @@ -2387,7 +2364,7 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" }, "dependencies": { "ansi-regex": { @@ -2412,9 +2389,9 @@ "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=", "dev": true, "requires": { - "inherits": "2.0.3", - "readable-stream": "2.3.3", - "typedarray": "0.0.6" + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" }, "dependencies": { "inherits": { @@ -2429,13 +2406,13 @@ "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "safe-buffer": "5.1.1", - "string_decoder": "1.0.3", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~1.0.6", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.0.3", + "util-deprecate": "~1.0.1" }, "dependencies": { "core-util-is": { @@ -2468,7 +2445,7 @@ "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "~5.1.0" } }, "util-deprecate": { @@ -2510,8 +2487,8 @@ "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "dev": true, "requires": { - "esutils": "2.0.2", - "isarray": "1.0.0" + "esutils": "^2.0.2", + "isarray": "^1.0.0" }, "dependencies": { "isarray": { @@ -2528,12 +2505,12 @@ "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37", - "es6-iterator": "2.0.3", - "es6-set": "0.1.5", - "es6-symbol": "3.1.1", - "event-emitter": "0.3.5" + "d": "1", + "es5-ext": "~0.10.14", + "es6-iterator": "~2.0.1", + "es6-set": "~0.1.5", + "es6-symbol": "~3.1.1", + "event-emitter": "~0.3.5" }, "dependencies": { "d": { @@ -2542,7 +2519,7 @@ "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { - "es5-ext": "0.10.37" + "es5-ext": "^0.10.9" } }, "es5-ext": { @@ -2551,8 +2528,8 @@ "integrity": "sha1-DudB0Ui4AGm6J9AgOTdWryV978M=", "dev": true, "requires": { - "es6-iterator": "2.0.3", - "es6-symbol": "3.1.1" + "es6-iterator": "~2.0.1", + "es6-symbol": "~3.1.1" } }, "es6-iterator": { @@ -2561,9 +2538,9 @@ "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37", - "es6-symbol": "3.1.1" + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" } }, "es6-set": { @@ -2572,11 +2549,11 @@ "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37", - "es6-iterator": "2.0.3", + "d": "1", + "es5-ext": "~0.10.14", + "es6-iterator": "~2.0.1", "es6-symbol": "3.1.1", - "event-emitter": "0.3.5" + "event-emitter": "~0.3.5" } }, "es6-symbol": { @@ -2585,8 +2562,8 @@ "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37" + "d": "1", + "es5-ext": "~0.10.14" } }, "event-emitter": { @@ -2595,8 +2572,8 @@ "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37" + "d": "1", + "es5-ext": "~0.10.14" } } } @@ -2607,10 +2584,10 @@ "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=", "dev": true, "requires": { - "es6-map": "0.1.5", - "es6-weak-map": "2.0.2", - "esrecurse": "4.2.0", - "estraverse": "4.2.0" + "es6-map": "^0.1.3", + "es6-weak-map": "^2.0.1", + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" }, "dependencies": { "es6-weak-map": { @@ -2619,10 +2596,10 @@ "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37", - "es6-iterator": "2.0.3", - "es6-symbol": "3.1.1" + "d": "1", + "es5-ext": "^0.10.14", + "es6-iterator": "^2.0.1", + "es6-symbol": "^3.1.1" }, "dependencies": { "d": { @@ -2631,7 +2608,7 @@ "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { - "es5-ext": "0.10.37" + "es5-ext": "^0.10.9" } }, "es5-ext": { @@ -2640,8 +2617,8 @@ "integrity": "sha1-DudB0Ui4AGm6J9AgOTdWryV978M=", "dev": true, "requires": { - "es6-iterator": "2.0.3", - "es6-symbol": "3.1.1" + "es6-iterator": "~2.0.1", + "es6-symbol": "~3.1.1" } }, "es6-iterator": { @@ -2650,9 +2627,9 @@ "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37", - "es6-symbol": "3.1.1" + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" } }, "es6-symbol": { @@ -2661,8 +2638,8 @@ "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.37" + "d": "1", + "es5-ext": "~0.10.14" } } } @@ -2673,8 +2650,8 @@ "integrity": "sha1-+pVo2Y04I/mkHZHpAtyrnqblsWM=", "dev": true, "requires": { - "estraverse": "4.2.0", - "object-assign": "4.1.1" + "estraverse": "^4.1.0", + "object-assign": "^4.0.1" }, "dependencies": { "object-assign": { @@ -2693,8 +2670,8 @@ "integrity": "sha1-dWrai5eenc/NswqtjRqTBKkF4co=", "dev": true, "requires": { - "acorn": "5.2.1", - "acorn-jsx": "3.0.1" + "acorn": "^5.2.1", + "acorn-jsx": "^3.0.0" }, "dependencies": { "acorn": { @@ -2709,7 +2686,7 @@ "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", "dev": true, "requires": { - "acorn": "3.3.0" + "acorn": "^3.0.4" }, "dependencies": { "acorn": { @@ -2740,8 +2717,8 @@ "integrity": "sha1-RMYepgeuS+nBQC9B9EJwy/4zT/g=", "dev": true, "requires": { - "flat-cache": "1.3.0", - "object-assign": "4.1.1" + "flat-cache": "^1.2.1", + "object-assign": "^4.0.1" }, "dependencies": { "flat-cache": { @@ -2750,10 +2727,10 @@ "integrity": "sha1-0wMLMrOBVPTjt+nHCfSQ9++XxIE=", "dev": true, "requires": { - "circular-json": "0.3.3", - "del": "2.2.2", - "graceful-fs": "4.1.11", - "write": "0.2.1" + "circular-json": "^0.3.1", + "del": "^2.0.2", + "graceful-fs": "^4.1.2", + "write": "^0.2.1" }, "dependencies": { "circular-json": { @@ -2768,13 +2745,13 @@ "integrity": "sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=", "dev": true, "requires": { - "globby": "5.0.0", - "is-path-cwd": "1.0.0", - "is-path-in-cwd": "1.0.0", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1", - "rimraf": "2.6.2" + "globby": "^5.0.0", + "is-path-cwd": "^1.0.0", + "is-path-in-cwd": "^1.0.0", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0", + "rimraf": "^2.2.8" }, "dependencies": { "globby": { @@ -2783,12 +2760,12 @@ "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=", "dev": true, "requires": { - "array-union": "1.0.2", - "arrify": "1.0.1", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "arrify": "^1.0.0", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" }, "dependencies": { "array-union": { @@ -2797,7 +2774,7 @@ "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", "dev": true, "requires": { - "array-uniq": "1.0.3" + "array-uniq": "^1.0.1" }, "dependencies": { "array-uniq": { @@ -2828,7 +2805,7 @@ "integrity": "sha1-ZHdYK4IU1gI0YJRWcAO+ip6sBNw=", "dev": true, "requires": { - "is-path-inside": "1.0.1" + "is-path-inside": "^1.0.0" }, "dependencies": { "is-path-inside": { @@ -2837,7 +2814,7 @@ "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=", "dev": true, "requires": { - "path-is-inside": "1.0.2" + "path-is-inside": "^1.0.1" } } } @@ -2854,7 +2831,7 @@ "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", "dev": true, "requires": { - "pinkie": "2.0.4" + "pinkie": "^2.0.0" }, "dependencies": { "pinkie": { @@ -2871,7 +2848,7 @@ "integrity": "sha1-LtgVDSShbqhlHm1u8PR8QVjOejY=", "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } } } @@ -2888,7 +2865,7 @@ "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=", "dev": true, "requires": { - "mkdirp": "0.5.1" + "mkdirp": "^0.5.1" } } } @@ -2925,19 +2902,19 @@ "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=", "dev": true, "requires": { - "ansi-escapes": "1.4.0", - "ansi-regex": "2.1.1", - "chalk": "1.1.3", - "cli-cursor": "1.0.2", - "cli-width": "2.2.0", - "figures": "1.7.0", - "lodash": "4.17.10", - "readline2": "1.0.1", - "run-async": "0.1.0", - "rx-lite": "3.1.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "through": "2.3.8" + "ansi-escapes": "^1.1.0", + "ansi-regex": "^2.0.0", + "chalk": "^1.0.0", + "cli-cursor": "^1.0.1", + "cli-width": "^2.0.0", + "figures": "^1.3.5", + "lodash": "^4.3.0", + "readline2": "^1.0.1", + "run-async": "^0.1.0", + "rx-lite": "^3.1.2", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.0", + "through": "^2.3.6" }, "dependencies": { "ansi-escapes": { @@ -2958,7 +2935,7 @@ "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=", "dev": true, "requires": { - "restore-cursor": "1.0.1" + "restore-cursor": "^1.0.1" }, "dependencies": { "restore-cursor": { @@ -2967,8 +2944,8 @@ "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=", "dev": true, "requires": { - "exit-hook": "1.1.1", - "onetime": "1.1.0" + "exit-hook": "^1.0.0", + "onetime": "^1.0.0" }, "dependencies": { "exit-hook": { @@ -2999,8 +2976,8 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" }, "dependencies": { "escape-string-regexp": { @@ -3023,8 +3000,8 @@ "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", "mute-stream": "0.0.5" }, "dependencies": { @@ -3040,7 +3017,7 @@ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" }, "dependencies": { "number-is-nan": { @@ -3065,7 +3042,7 @@ "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=", "dev": true, "requires": { - "once": "1.4.0" + "once": "^1.3.0" }, "dependencies": { "once": { @@ -3074,7 +3051,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" }, "dependencies": { "wrappy": { @@ -3099,9 +3076,9 @@ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" }, "dependencies": { "code-point-at": { @@ -3116,7 +3093,7 @@ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" }, "dependencies": { "number-is-nan": { @@ -3135,7 +3112,7 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "through": { @@ -3152,10 +3129,10 @@ "integrity": "sha1-WoRnd+LCYg0eaRBOXToDsfYIjxE=", "dev": true, "requires": { - "generate-function": "2.0.0", - "generate-object-property": "1.2.0", - "jsonpointer": "4.0.1", - "xtend": "4.0.1" + "generate-function": "^2.0.0", + "generate-object-property": "^1.1.0", + "jsonpointer": "^4.0.0", + "xtend": "^4.0.0" }, "dependencies": { "generate-function": { @@ -3170,7 +3147,7 @@ "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=", "dev": true, "requires": { - "is-property": "1.0.2" + "is-property": "^1.0.0" }, "dependencies": { "is-property": { @@ -3207,7 +3184,7 @@ "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, "requires": { - "jsonify": "0.0.0" + "jsonify": "~0.0.0" }, "dependencies": { "jsonify": { @@ -3224,8 +3201,8 @@ "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", "dev": true, "requires": { - "prelude-ls": "1.1.2", - "type-check": "0.3.2" + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" }, "dependencies": { "prelude-ls": { @@ -3240,7 +3217,7 @@ "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, "requires": { - "prelude-ls": "1.1.2" + "prelude-ls": "~1.1.2" } } } @@ -3268,12 +3245,12 @@ "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=", "dev": true, "requires": { - "deep-is": "0.1.3", - "fast-levenshtein": "2.0.6", - "levn": "0.3.0", - "prelude-ls": "1.1.2", - "type-check": "0.3.2", - "wordwrap": "1.0.0" + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.4", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "wordwrap": "~1.0.0" }, "dependencies": { "deep-is": { @@ -3300,7 +3277,7 @@ "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, "requires": { - "prelude-ls": "1.1.2" + "prelude-ls": "~1.1.2" } }, "wordwrap": { @@ -3335,8 +3312,8 @@ "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", "dev": true, "requires": { - "caller-path": "0.1.0", - "resolve-from": "1.0.1" + "caller-path": "^0.1.0", + "resolve-from": "^1.0.0" }, "dependencies": { "caller-path": { @@ -3345,7 +3322,7 @@ "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=", "dev": true, "requires": { - "callsites": "0.2.0" + "callsites": "^0.2.0" }, "dependencies": { "callsites": { @@ -3382,12 +3359,12 @@ "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=", "dev": true, "requires": { - "ajv": "4.11.8", - "ajv-keywords": "1.5.1", - "chalk": "1.1.3", - "lodash": "4.17.10", + "ajv": "^4.7.0", + "ajv-keywords": "^1.0.0", + "chalk": "^1.1.1", + "lodash": "^4.0.0", "slice-ansi": "0.0.4", - "string-width": "2.1.1" + "string-width": "^2.0.0" }, "dependencies": { "ajv": { @@ -3396,8 +3373,8 @@ "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", "dev": true, "requires": { - "co": "4.6.0", - "json-stable-stringify": "1.0.1" + "co": "^4.6.0", + "json-stable-stringify": "^1.0.1" }, "dependencies": { "co": { @@ -3426,8 +3403,8 @@ "integrity": "sha1-q5Pyeo3BPSjKyBXEYhQ6bZASrp4=", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" }, "dependencies": { "is-fullwidth-code-point": { @@ -3442,7 +3419,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" }, "dependencies": { "ansi-regex": { @@ -3469,7 +3446,7 @@ "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=", "dev": true, "requires": { - "os-homedir": "1.0.2" + "os-homedir": "^1.0.0" }, "dependencies": { "os-homedir": { @@ -3488,7 +3465,7 @@ "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=", "dev": true, "requires": { - "js-yaml": "3.10.0" + "js-yaml": "^3.4.6" } }, "fs-extra": { @@ -3497,9 +3474,9 @@ "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "3.0.1", - "universalify": "0.1.1" + "graceful-fs": "^4.1.2", + "jsonfile": "^3.0.0", + "universalify": "^0.1.0" }, "dependencies": { "graceful-fs": { @@ -3514,7 +3491,7 @@ "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", "dev": true, "requires": { - "graceful-fs": "4.1.11" + "graceful-fs": "^4.1.6" } }, "universalify": { @@ -3531,12 +3508,12 @@ "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" }, "dependencies": { "fs.realpath": { @@ -3551,8 +3528,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" }, "dependencies": { "wrappy": { @@ -3575,7 +3552,7 @@ "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" }, "dependencies": { "brace-expansion": { @@ -3584,7 +3561,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" }, "dependencies": { @@ -3610,7 +3587,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" }, "dependencies": { "wrappy": { @@ -3629,9 +3606,9 @@ "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", "dev": true, "requires": { - "glob": "7.1.2", - "lodash": "4.17.10", - "minimatch": "3.0.4" + "glob": "~7.1.1", + "lodash": "~4.17.4", + "minimatch": "~3.0.2" }, "dependencies": { "lodash": { @@ -3646,7 +3623,7 @@ "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" }, "dependencies": { "brace-expansion": { @@ -3655,7 +3632,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" }, "dependencies": { @@ -3683,7 +3660,7 @@ "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=", "dev": true, "requires": { - "minimist": "1.1.3" + "minimist": "1.1.x" }, "dependencies": { "minimist": { @@ -3700,8 +3677,8 @@ "integrity": "sha1-LnhEFka9RoLpY/IrbpKCPDCcYtw=", "dev": true, "requires": { - "argparse": "1.0.9", - "esprima": "4.0.0" + "argparse": "^1.0.7", + "esprima": "^4.0.0" }, "dependencies": { "argparse": { @@ -3710,7 +3687,7 @@ "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=", "dev": true, "requires": { - "sprintf-js": "1.0.3" + "sprintf-js": "~1.0.2" }, "dependencies": { "sprintf-js": { @@ -3786,8 +3763,8 @@ "integrity": "sha1-Zs+LEBBHInuVus5uodoMF37Vwi8=", "dev": true, "requires": { - "browserify-zlib": "0.1.4", - "concat-stream": "1.6.0" + "browserify-zlib": "^0.1.4", + "concat-stream": "^1.4.1" } }, "handlebars": { @@ -3796,10 +3773,10 @@ "integrity": "sha1-Ywo13+ApS8KB7a5v/F0yn8eYLcw=", "dev": true, "requires": { - "async": "1.5.2", - "optimist": "0.6.1", - "source-map": "0.4.4", - "uglify-js": "2.8.29" + "async": "^1.4.0", + "optimist": "^0.6.1", + "source-map": "^0.4.4", + "uglify-js": "^2.6" } }, "har-schema": { @@ -3809,13 +3786,13 @@ "dev": true }, "har-validator": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz", - "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.2.tgz", + "integrity": "sha512-OFxb5MZXCUMx43X7O8LK4FKggEQx6yC5QPmOcBnYbJ9UjxEcMcrMbaR0af5HZpqeFopw2GwQRQi34ZXI7YLM5w==", "dev": true, "requires": { - "ajv": "5.5.2", - "har-schema": "2.0.0" + "ajv": "^6.5.5", + "har-schema": "^2.0.0" } }, "has-ansi": { @@ -3824,7 +3801,7 @@ "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "has-flag": { @@ -3845,9 +3822,9 @@ "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=", "dev": true, "requires": { - "get-value": "2.0.6", - "has-values": "1.0.0", - "isobject": "3.0.1" + "get-value": "^2.0.6", + "has-values": "^1.0.0", + "isobject": "^3.0.0" } }, "has-values": { @@ -3856,8 +3833,8 @@ "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=", "dev": true, "requires": { - "is-number": "3.0.0", - "kind-of": "4.0.0" + "is-number": "^3.0.0", + "kind-of": "^4.0.0" }, "dependencies": { "kind-of": { @@ -3866,7 +3843,7 @@ "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -3895,9 +3872,9 @@ "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", "dev": true, "requires": { - "assert-plus": "1.0.0", - "jsprim": "1.4.1", - "sshpk": "1.14.2" + "assert-plus": "^1.0.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" } }, "iconv-lite": { @@ -3906,7 +3883,7 @@ "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", "dev": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": "^2.1.0" } }, "ignore": { @@ -3927,7 +3904,7 @@ "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", "dev": true, "requires": { - "repeating": "2.0.1" + "repeating": "^2.0.0" } }, "inflight": { @@ -3936,8 +3913,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -3965,7 +3942,7 @@ "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "is-arrayish": { @@ -3980,7 +3957,7 @@ "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", "dev": true, "requires": { - "binary-extensions": "1.11.0" + "binary-extensions": "^1.0.0" } }, "is-buffer": { @@ -3995,7 +3972,7 @@ "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "dev": true, "requires": { - "builtin-modules": "1.1.1" + "builtin-modules": "^1.0.0" } }, "is-data-descriptor": { @@ -4004,7 +3981,7 @@ "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "is-descriptor": { @@ -4013,9 +3990,9 @@ "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", "dev": true, "requires": { - "is-accessor-descriptor": "0.1.6", - "is-data-descriptor": "0.1.4", - "kind-of": "5.1.0" + "is-accessor-descriptor": "^0.1.6", + "is-data-descriptor": "^0.1.4", + "kind-of": "^5.0.0" }, "dependencies": { "kind-of": { @@ -4050,7 +4027,7 @@ "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-fullwidth-code-point": { @@ -4059,7 +4036,7 @@ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-glob": { @@ -4068,7 +4045,7 @@ "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", "dev": true, "requires": { - "is-extglob": "2.1.1" + "is-extglob": "^2.1.1" } }, "is-number": { @@ -4077,7 +4054,7 @@ "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "is-odd": { @@ -4086,7 +4063,7 @@ "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==", "dev": true, "requires": { - "is-number": "4.0.0" + "is-number": "^4.0.0" }, "dependencies": { "is-number": { @@ -4103,7 +4080,7 @@ "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.1" } }, "is-stream": { @@ -4172,16 +4149,15 @@ "integrity": "sha1-A3fDgBfKvHMisNH7zSWkkWQfL74=", "dev": true, "requires": { - "argparse": "1.0.10", - "esprima": "2.7.3" + "argparse": "^1.0.2", + "esprima": "^2.6.0" } }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", - "dev": true, - "optional": true + "dev": true }, "json-schema": { "version": "0.2.3", @@ -4190,9 +4166,9 @@ "dev": true }, "json-schema-traverse": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, "json-stringify-safe": { @@ -4207,7 +4183,7 @@ "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", "dev": true, "requires": { - "graceful-fs": "4.1.11" + "graceful-fs": "^4.1.6" } }, "jsprim": { @@ -4228,7 +4204,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "kss": { @@ -4237,13 +4213,13 @@ "integrity": "sha1-gyojvaTKvs9UJrk4ksG2GNt+ok4=", "dev": true, "requires": { - "bluebird": "3.5.1", - "fs-extra": "2.1.2", - "glob": "7.1.2", - "handlebars": "4.0.11", - "marked": "0.3.12", - "twig": "0.10.3", - "yargs": "6.6.0" + "bluebird": "^3.3.3", + "fs-extra": "^2.0.0", + "glob": "^7.0.3", + "handlebars": "^4.0.0", + "marked": "^0.3.6", + "twig": "^0.10.2", + "yargs": "^6.0.0" } }, "lazy-cache": { @@ -4259,7 +4235,7 @@ "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", "dev": true, "requires": { - "invert-kv": "1.0.0" + "invert-kv": "^1.0.0" } }, "livereload-js": { @@ -4274,11 +4250,11 @@ "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "parse-json": "2.2.0", - "pify": "2.3.0", - "pinkie-promise": "2.0.1", - "strip-bom": "2.0.0" + "graceful-fs": "^4.1.2", + "parse-json": "^2.2.0", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0", + "strip-bom": "^2.0.0" } }, "locate-path": { @@ -4287,8 +4263,8 @@ "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", "dev": true, "requires": { - "p-locate": "2.0.0", - "path-exists": "3.0.0" + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" }, "dependencies": { "path-exists": { @@ -4335,7 +4311,7 @@ "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", "dev": true, "requires": { - "chalk": "2.4.1" + "chalk": "^2.0.1" }, "dependencies": { "ansi-styles": { @@ -4344,7 +4320,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -4353,9 +4329,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "supports-color": { @@ -4364,7 +4340,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -4381,8 +4357,8 @@ "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", "dev": true, "requires": { - "currently-unhandled": "0.4.1", - "signal-exit": "3.0.2" + "currently-unhandled": "^0.4.1", + "signal-exit": "^3.0.0" } }, "lru-cache": { @@ -4391,8 +4367,8 @@ "integrity": "sha512-wgeVXhrDwAWnIF/yZARsFnMBtdFXOg1b8RIrhilp+0iDYN4mdQcNZElDZ0e4B64BhaxeQ5zN7PMyvu7we1kPeQ==", "dev": true, "requires": { - "pseudomap": "1.0.2", - "yallist": "2.1.2" + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" } }, "map-cache": { @@ -4413,7 +4389,7 @@ "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=", "dev": true, "requires": { - "object-visit": "1.0.1" + "object-visit": "^1.0.0" } }, "marked": { @@ -4428,10 +4404,10 @@ "integrity": "sha1-cTZehKmd2Piz99X94vANHn9zvmE=", "dev": true, "requires": { - "chalk": "1.1.3", - "figures": "1.7.0", - "gzip-size": "1.0.0", - "pretty-bytes": "1.0.4" + "chalk": "^1.0.0", + "figures": "^1.0.1", + "gzip-size": "^1.0.0", + "pretty-bytes": "^1.0.0" } }, "mem": { @@ -4440,7 +4416,7 @@ "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=", "dev": true, "requires": { - "mimic-fn": "1.2.0" + "mimic-fn": "^1.0.0" } }, "meow": { @@ -4449,16 +4425,16 @@ "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { - "camelcase-keys": "2.1.0", - "decamelize": "1.2.0", - "loud-rejection": "1.6.0", - "map-obj": "1.0.1", - "minimist": "1.2.0", - "normalize-package-data": "2.4.0", - "object-assign": "4.1.1", - "read-pkg-up": "1.0.1", - "redent": "1.0.0", - "trim-newlines": "1.0.0" + "camelcase-keys": "^2.0.0", + "decamelize": "^1.1.2", + "loud-rejection": "^1.0.0", + "map-obj": "^1.0.1", + "minimist": "^1.1.3", + "normalize-package-data": "^2.3.4", + "object-assign": "^4.0.1", + "read-pkg-up": "^1.0.1", + "redent": "^1.0.0", + "trim-newlines": "^1.0.0" }, "dependencies": { "minimist": { @@ -4475,19 +4451,19 @@ "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", "dev": true, "requires": { - "arr-diff": "4.0.0", - "array-unique": "0.3.2", - "braces": "2.3.2", - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "extglob": "2.0.4", - "fragment-cache": "0.2.1", - "kind-of": "6.0.2", - "nanomatch": "1.2.9", - "object.pick": "1.3.0", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" }, "dependencies": { "kind-of": { @@ -4499,18 +4475,18 @@ } }, "mime-db": { - "version": "1.36.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz", - "integrity": "sha512-L+xvyD9MkoYMXb1jAmzI/lWYAxAMCPvIBSWur0PZ5nOf5euahRLVqH//FKW9mWp2lkqUgYiXPgkzfMUFi4zVDw==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", + "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", "dev": true }, "mime-types": { - "version": "2.1.20", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz", - "integrity": "sha512-HrkrPaP9vGuWbLK1B1FfgAkbqNjIuy4eHlIYnFi7kamZyLLrGlo2mpcx0bBmNpKqBtYtAfGbodDddIgddSJC2A==", + "version": "2.1.21", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", + "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", "dev": true, "requires": { - "mime-db": "1.36.0" + "mime-db": "~1.37.0" } }, "mimic-fn": { @@ -4525,7 +4501,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -4540,8 +4516,8 @@ "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", "dev": true, "requires": { - "for-in": "1.0.2", - "is-extendable": "1.0.1" + "for-in": "^1.0.2", + "is-extendable": "^1.0.1" }, "dependencies": { "is-extendable": { @@ -4550,7 +4526,7 @@ "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", "dev": true, "requires": { - "is-plain-object": "2.0.4" + "is-plain-object": "^2.0.4" } } } @@ -4590,18 +4566,18 @@ "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==", "dev": true, "requires": { - "arr-diff": "4.0.0", - "array-unique": "0.3.2", - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "fragment-cache": "0.2.1", - "is-odd": "2.0.0", - "is-windows": "1.0.2", - "kind-of": "6.0.2", - "object.pick": "1.3.0", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "fragment-cache": "^0.2.1", + "is-odd": "^2.0.0", + "is-windows": "^1.0.2", + "kind-of": "^6.0.2", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" }, "dependencies": { "kind-of": { @@ -4618,53 +4594,53 @@ "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==", "dev": true, "requires": { - "fstream": "1.0.11", - "glob": "7.1.2", - "graceful-fs": "4.1.11", - "mkdirp": "0.5.1", - "nopt": "3.0.6", - "npmlog": "4.1.2", - "osenv": "0.1.5", - "request": "2.87.0", - "rimraf": "2.6.2", - "semver": "5.3.0", - "tar": "2.2.1", - "which": "1.2.14" + "fstream": "^1.0.0", + "glob": "^7.0.3", + "graceful-fs": "^4.1.2", + "mkdirp": "^0.5.0", + "nopt": "2 || 3", + "npmlog": "0 || 1 || 2 || 3 || 4", + "osenv": "0", + "request": "^2.87.0", + "rimraf": "2", + "semver": "~5.3.0", + "tar": "^2.0.0", + "which": "1" }, "dependencies": { "semver": { "version": "5.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true } } }, "node-sass": { - "version": "4.9.3", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.3.tgz", - "integrity": "sha512-XzXyGjO+84wxyH7fV6IwBOTrEBe2f0a6SBze9QWWYR/cL74AcQUks2AsqcCZenl/Fp/JVbuEaLpgrLtocwBUww==", - "dev": true, - "requires": { - "async-foreach": "0.1.3", - "chalk": "1.1.3", - "cross-spawn": "3.0.1", - "gaze": "1.1.2", - "get-stdin": "4.0.1", - "glob": "7.1.2", - "in-publish": "2.0.0", - "lodash.assign": "4.2.0", - "lodash.clonedeep": "4.5.0", - "lodash.mergewith": "4.6.1", - "meow": "3.7.0", - "mkdirp": "0.5.1", - "nan": "2.10.0", - "node-gyp": "3.8.0", - "npmlog": "4.1.2", - "request": "2.87.0", - "sass-graph": "2.2.4", - "stdout-stream": "1.4.1", - "true-case-path": "1.0.3" + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.10.0.tgz", + "integrity": "sha512-fDQJfXszw6vek63Fe/ldkYXmRYK/QS6NbvM3i5oEo9ntPDy4XX7BcKZyTKv+/kSSxRtXXc7l+MSwEmYc0CSy6Q==", + "dev": true, + "requires": { + "async-foreach": "^0.1.3", + "chalk": "^1.1.1", + "cross-spawn": "^3.0.0", + "gaze": "^1.0.0", + "get-stdin": "^4.0.1", + "glob": "^7.0.3", + "in-publish": "^2.0.0", + "lodash.assign": "^4.2.0", + "lodash.clonedeep": "^4.3.2", + "lodash.mergewith": "^4.6.0", + "meow": "^3.7.0", + "mkdirp": "^0.5.1", + "nan": "^2.10.0", + "node-gyp": "^3.8.0", + "npmlog": "^4.0.0", + "request": "^2.88.0", + "sass-graph": "^2.2.4", + "stdout-stream": "^1.4.0", + "true-case-path": "^1.0.2" } }, "nopt": { @@ -4673,7 +4649,7 @@ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", "dev": true, "requires": { - "abbrev": "1.1.1" + "abbrev": "1" } }, "normalize-package-data": { @@ -4682,10 +4658,10 @@ "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", "dev": true, "requires": { - "hosted-git-info": "2.5.0", - "is-builtin-module": "1.0.0", - "semver": "5.4.1", - "validate-npm-package-license": "3.0.1" + "hosted-git-info": "^2.1.4", + "is-builtin-module": "^1.0.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" } }, "normalize-path": { @@ -4694,7 +4670,7 @@ "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { - "remove-trailing-separator": "1.1.0" + "remove-trailing-separator": "^1.0.1" } }, "normalize-range": { @@ -4709,7 +4685,7 @@ "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", "dev": true, "requires": { - "path-key": "2.0.1" + "path-key": "^2.0.0" } }, "npmlog": { @@ -4718,10 +4694,10 @@ "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "requires": { - "are-we-there-yet": "1.1.5", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "num2fraction": { @@ -4737,9 +4713,9 @@ "dev": true }, "oauth-sign": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", - "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", + "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", "dev": true }, "object-assign": { @@ -4754,9 +4730,9 @@ "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=", "dev": true, "requires": { - "copy-descriptor": "0.1.1", - "define-property": "0.2.5", - "kind-of": "3.2.2" + "copy-descriptor": "^0.1.0", + "define-property": "^0.2.5", + "kind-of": "^3.0.3" }, "dependencies": { "define-property": { @@ -4765,7 +4741,7 @@ "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } } } @@ -4776,7 +4752,7 @@ "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=", "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.0" } }, "object.pick": { @@ -4785,7 +4761,7 @@ "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=", "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.1" } }, "once": { @@ -4794,15 +4770,9 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, - "onetime": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", - "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", - "dev": true - }, "open": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz", @@ -4815,8 +4785,8 @@ "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", "dev": true, "requires": { - "minimist": "0.0.10", - "wordwrap": "0.0.3" + "minimist": "~0.0.1", + "wordwrap": "~0.0.2" } }, "os-homedir": { @@ -4831,12 +4801,12 @@ "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "dev": true, "requires": { - "lcid": "1.0.0" + "lcid": "^1.0.0" } }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -4846,8 +4816,8 @@ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "p-finally": { @@ -4862,7 +4832,7 @@ "integrity": "sha512-Y/OtIaXtUPr4/YpMv1pCL5L5ed0rumAaAeBSj12F+bSlMdys7i8oQF/GUJmfpTS/QoaRrS/k6pma29haJpsMng==", "dev": true, "requires": { - "p-try": "1.0.0" + "p-try": "^1.0.0" } }, "p-locate": { @@ -4871,7 +4841,7 @@ "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", "dev": true, "requires": { - "p-limit": "1.2.0" + "p-limit": "^1.1.0" } }, "p-try": { @@ -4892,7 +4862,7 @@ "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", "dev": true, "requires": { - "error-ex": "1.3.1" + "error-ex": "^1.2.0" } }, "pascalcase": { @@ -4913,7 +4883,7 @@ "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "dev": true, "requires": { - "pinkie-promise": "2.0.1" + "pinkie-promise": "^2.0.0" } }, "path-is-absolute": { @@ -4934,9 +4904,9 @@ "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "graceful-fs": "^4.1.2", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "performance-now": { @@ -4963,7 +4933,7 @@ "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", "dev": true, "requires": { - "pinkie": "2.0.4" + "pinkie": "^2.0.0" } }, "posix-character-classes": { @@ -4978,9 +4948,9 @@ "integrity": "sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA==", "dev": true, "requires": { - "chalk": "2.4.1", - "source-map": "0.6.1", - "supports-color": "5.4.0" + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" }, "dependencies": { "ansi-styles": { @@ -4989,7 +4959,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -4998,9 +4968,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "source-map": { @@ -5015,7 +4985,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -5026,18 +4996,18 @@ "integrity": "sha512-LbSZQUu1fh7hiIU/JCitSWd+V3MO60DWi9ETUKiO7i9fDZN/9XqI3ACbAOnymd9a+8v5x5XI5SjeEv4/R+l/Ow==", "dev": true, "requires": { - "chalk": "2.4.1", - "chokidar": "2.0.3", - "dependency-graph": "0.7.0", - "fs-extra": "5.0.0", - "get-stdin": "5.0.1", - "globby": "7.1.1", - "postcss": "6.0.22", - "postcss-load-config": "1.2.0", - "postcss-reporter": "5.0.0", - "pretty-hrtime": "1.0.3", - "read-cache": "1.0.0", - "yargs": "11.0.0" + "chalk": "^2.1.0", + "chokidar": "^2.0.0", + "dependency-graph": "^0.7.0", + "fs-extra": "^5.0.0", + "get-stdin": "^5.0.1", + "globby": "^7.1.1", + "postcss": "^6.0.1", + "postcss-load-config": "^1.1.0", + "postcss-reporter": "^5.0.0", + "pretty-hrtime": "^1.0.3", + "read-cache": "^1.0.0", + "yargs": "^11.0.0" }, "dependencies": { "ansi-regex": { @@ -5052,7 +5022,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "camelcase": { @@ -5067,9 +5037,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "cliui": { @@ -5078,9 +5048,9 @@ "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", "dev": true, "requires": { - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "wrap-ansi": "2.1.0" + "string-width": "^2.1.1", + "strip-ansi": "^4.0.0", + "wrap-ansi": "^2.0.0" } }, "find-up": { @@ -5089,7 +5059,7 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } }, "fs-extra": { @@ -5098,9 +5068,9 @@ "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "4.0.0", - "universalify": "0.1.1" + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" } }, "get-stdin": { @@ -5121,7 +5091,7 @@ "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, "requires": { - "graceful-fs": "4.1.11" + "graceful-fs": "^4.1.6" } }, "os-locale": { @@ -5130,9 +5100,9 @@ "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "dev": true, "requires": { - "execa": "0.7.0", - "lcid": "1.0.0", - "mem": "1.1.0" + "execa": "^0.7.0", + "lcid": "^1.0.0", + "mem": "^1.1.0" } }, "string-width": { @@ -5141,8 +5111,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -5151,7 +5121,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } }, "supports-color": { @@ -5160,7 +5130,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } }, "which-module": { @@ -5175,18 +5145,18 @@ "integrity": "sha512-Rjp+lMYQOWtgqojx1dEWorjCofi1YN7AoFvYV7b1gx/7dAAeuI4kN5SZiEvr0ZmsZTOpDRcCqrpI10L31tFkBw==", "dev": true, "requires": { - "cliui": "4.1.0", - "decamelize": "1.2.0", - "find-up": "2.1.0", - "get-caller-file": "1.0.2", - "os-locale": "2.1.0", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "2.1.1", - "which-module": "2.0.0", - "y18n": "3.2.1", - "yargs-parser": "9.0.2" + "cliui": "^4.0.0", + "decamelize": "^1.1.1", + "find-up": "^2.1.0", + "get-caller-file": "^1.0.1", + "os-locale": "^2.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^9.0.2" } }, "yargs-parser": { @@ -5195,7 +5165,7 @@ "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=", "dev": true, "requires": { - "camelcase": "4.1.0" + "camelcase": "^4.1.0" } } } @@ -5206,10 +5176,10 @@ "integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=", "dev": true, "requires": { - "cosmiconfig": "2.2.2", - "object-assign": "4.1.1", - "postcss-load-options": "1.2.0", - "postcss-load-plugins": "2.3.0" + "cosmiconfig": "^2.1.0", + "object-assign": "^4.1.0", + "postcss-load-options": "^1.2.0", + "postcss-load-plugins": "^2.3.0" } }, "postcss-load-options": { @@ -5218,8 +5188,8 @@ "integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=", "dev": true, "requires": { - "cosmiconfig": "2.2.2", - "object-assign": "4.1.1" + "cosmiconfig": "^2.1.0", + "object-assign": "^4.1.0" } }, "postcss-load-plugins": { @@ -5228,8 +5198,8 @@ "integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=", "dev": true, "requires": { - "cosmiconfig": "2.2.2", - "object-assign": "4.1.1" + "cosmiconfig": "^2.1.1", + "object-assign": "^4.1.0" } }, "postcss-reporter": { @@ -5238,10 +5208,10 @@ "integrity": "sha512-rBkDbaHAu5uywbCR2XE8a25tats3xSOsGNx6mppK6Q9kSFGKc/FyAzfci+fWM2l+K402p1D0pNcfDGxeje5IKg==", "dev": true, "requires": { - "chalk": "2.4.1", - "lodash": "4.17.5", - "log-symbols": "2.2.0", - "postcss": "6.0.22" + "chalk": "^2.0.1", + "lodash": "^4.17.4", + "log-symbols": "^2.0.0", + "postcss": "^6.0.8" }, "dependencies": { "ansi-styles": { @@ -5250,7 +5220,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -5259,9 +5229,9 @@ "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "supports-color": { @@ -5270,7 +5240,7 @@ "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -5287,8 +5257,8 @@ "integrity": "sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=", "dev": true, "requires": { - "get-stdin": "4.0.1", - "meow": "3.7.0" + "get-stdin": "^4.0.1", + "meow": "^3.1.0" } }, "pretty-hrtime": { @@ -5309,10 +5279,16 @@ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", "dev": true }, + "psl": { + "version": "1.1.29", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz", + "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==", + "dev": true + }, "punycode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", "dev": true }, "q": { @@ -5333,8 +5309,8 @@ "integrity": "sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=", "dev": true, "requires": { - "bytes": "1.0.0", - "string_decoder": "0.10.31" + "bytes": "1", + "string_decoder": "0.10" }, "dependencies": { "string_decoder": { @@ -5352,10 +5328,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "0.6.0", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -5373,7 +5349,7 @@ "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", "dev": true, "requires": { - "pify": "2.3.0" + "pify": "^2.3.0" } }, "read-pkg": { @@ -5382,9 +5358,9 @@ "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", "dev": true, "requires": { - "load-json-file": "1.1.0", - "normalize-package-data": "2.4.0", - "path-type": "1.1.0" + "load-json-file": "^1.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^1.0.0" } }, "read-pkg-up": { @@ -5393,8 +5369,8 @@ "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", "dev": true, "requires": { - "find-up": "1.1.2", - "read-pkg": "1.1.0" + "find-up": "^1.0.0", + "read-pkg": "^1.0.0" } }, "readable-stream": { @@ -5403,13 +5379,13 @@ "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "safe-buffer": "5.1.1", - "string_decoder": "1.0.3", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~1.0.6", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.0.3", + "util-deprecate": "~1.0.1" } }, "readdirp": { @@ -5418,10 +5394,10 @@ "integrity": "sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "minimatch": "3.0.4", - "readable-stream": "2.3.3", - "set-immediate-shim": "1.0.1" + "graceful-fs": "^4.1.2", + "minimatch": "^3.0.2", + "readable-stream": "^2.0.2", + "set-immediate-shim": "^1.0.1" } }, "redent": { @@ -5430,8 +5406,8 @@ "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", "dev": true, "requires": { - "indent-string": "2.1.0", - "strip-indent": "1.0.1" + "indent-string": "^2.1.0", + "strip-indent": "^1.0.1" } }, "regex-not": { @@ -5440,8 +5416,8 @@ "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==", "dev": true, "requires": { - "extend-shallow": "3.0.2", - "safe-regex": "1.1.0" + "extend-shallow": "^3.0.2", + "safe-regex": "^1.1.0" } }, "remove-trailing-separator": { @@ -5468,35 +5444,43 @@ "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", "dev": true, "requires": { - "is-finite": "1.0.2" + "is-finite": "^1.0.0" } }, "request": { - "version": "2.87.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", - "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==", - "dev": true, - "requires": { - "aws-sign2": "0.7.0", - "aws4": "1.8.0", - "caseless": "0.12.0", - "combined-stream": "1.0.6", - "extend": "3.0.2", - "forever-agent": "0.6.1", - "form-data": "2.3.2", - "har-validator": "5.0.3", - "http-signature": "1.2.0", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.20", - "oauth-sign": "0.8.2", - "performance-now": "2.1.0", - "qs": "6.5.2", - "safe-buffer": "5.1.1", - "tough-cookie": "2.3.4", - "tunnel-agent": "0.6.0", - "uuid": "3.3.2" + "version": "2.88.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", + "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", + "dev": true, + "requires": { + "aws-sign2": "~0.7.0", + "aws4": "^1.8.0", + "caseless": "~0.12.0", + "combined-stream": "~1.0.6", + "extend": "~3.0.2", + "forever-agent": "~0.6.1", + "form-data": "~2.3.2", + "har-validator": "~5.1.0", + "http-signature": "~1.2.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.19", + "oauth-sign": "~0.9.0", + "performance-now": "^2.1.0", + "qs": "~6.5.2", + "safe-buffer": "^5.1.2", + "tough-cookie": "~2.4.3", + "tunnel-agent": "^0.6.0", + "uuid": "^3.3.2" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + } } }, "require-directory": { @@ -5542,7 +5526,7 @@ "dev": true, "optional": true, "requires": { - "align-text": "0.1.4" + "align-text": "^0.1.1" } }, "rimraf": { @@ -5551,7 +5535,7 @@ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } }, "safe-buffer": { @@ -5572,7 +5556,7 @@ "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { - "ret": "0.1.15" + "ret": "~0.1.10" } }, "safer-buffer": { @@ -5587,10 +5571,10 @@ "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", "dev": true, "requires": { - "glob": "7.1.2", - "lodash": "4.17.5", - "scss-tokenizer": "0.2.3", - "yargs": "7.1.0" + "glob": "^7.0.0", + "lodash": "^4.0.0", + "scss-tokenizer": "^0.2.3", + "yargs": "^7.0.0" }, "dependencies": { "camelcase": { @@ -5605,9 +5589,9 @@ "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wrap-ansi": "2.1.0" + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wrap-ansi": "^2.0.0" } }, "yargs": { @@ -5616,19 +5600,19 @@ "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", "dev": true, "requires": { - "camelcase": "3.0.0", - "cliui": "3.2.0", - "decamelize": "1.2.0", - "get-caller-file": "1.0.2", - "os-locale": "1.4.0", - "read-pkg-up": "1.0.1", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "1.0.2", - "which-module": "1.0.0", - "y18n": "3.2.1", - "yargs-parser": "5.0.0" + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^5.0.0" } }, "yargs-parser": { @@ -5637,7 +5621,7 @@ "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", "dev": true, "requires": { - "camelcase": "3.0.0" + "camelcase": "^3.0.0" } } } @@ -5648,8 +5632,8 @@ "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", "dev": true, "requires": { - "js-base64": "2.4.9", - "source-map": "0.4.4" + "js-base64": "^2.1.8", + "source-map": "^0.4.2" } }, "semver": { @@ -5676,10 +5660,10 @@ "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-extendable": "0.1.1", - "is-plain-object": "2.0.4", - "split-string": "3.1.0" + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.3", + "split-string": "^3.0.1" }, "dependencies": { "extend-shallow": { @@ -5688,7 +5672,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -5699,7 +5683,7 @@ "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", "dev": true, "requires": { - "shebang-regex": "1.0.0" + "shebang-regex": "^1.0.0" } }, "shebang-regex": { @@ -5726,14 +5710,14 @@ "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==", "dev": true, "requires": { - "base": "0.11.2", - "debug": "2.6.9", - "define-property": "0.2.5", - "extend-shallow": "2.0.1", - "map-cache": "0.2.2", - "source-map": "0.5.7", - "source-map-resolve": "0.5.1", - "use": "3.1.0" + "base": "^0.11.1", + "debug": "^2.2.0", + "define-property": "^0.2.5", + "extend-shallow": "^2.0.1", + "map-cache": "^0.2.2", + "source-map": "^0.5.6", + "source-map-resolve": "^0.5.0", + "use": "^3.1.0" }, "dependencies": { "define-property": { @@ -5742,7 +5726,7 @@ "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } }, "extend-shallow": { @@ -5751,7 +5735,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } }, "source-map": { @@ -5768,9 +5752,9 @@ "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==", "dev": true, "requires": { - "define-property": "1.0.0", - "isobject": "3.0.1", - "snapdragon-util": "3.0.1" + "define-property": "^1.0.0", + "isobject": "^3.0.0", + "snapdragon-util": "^3.0.1" }, "dependencies": { "define-property": { @@ -5779,7 +5763,7 @@ "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "is-accessor-descriptor": { @@ -5788,7 +5772,7 @@ "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { @@ -5797,7 +5781,7 @@ "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { @@ -5806,9 +5790,9 @@ "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } }, "kind-of": { @@ -5825,7 +5809,7 @@ "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.2.0" } }, "source-map": { @@ -5834,7 +5818,7 @@ "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, "requires": { - "amdefine": "1.0.1" + "amdefine": ">=0.0.4" } }, "source-map-resolve": { @@ -5843,11 +5827,11 @@ "integrity": "sha512-0KW2wvzfxm8NCTb30z0LMNyPqWCdDGE2viwzUaucqJdkTRXtZiSY3I+2A6nVAjmdOy0I4gU8DwnVVGsk9jvP2A==", "dev": true, "requires": { - "atob": "2.1.1", - "decode-uri-component": "0.2.0", - "resolve-url": "0.2.1", - "source-map-url": "0.4.0", - "urix": "0.1.0" + "atob": "^2.0.0", + "decode-uri-component": "^0.2.0", + "resolve-url": "^0.2.1", + "source-map-url": "^0.4.0", + "urix": "^0.1.0" } }, "source-map-url": { @@ -5862,7 +5846,7 @@ "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=", "dev": true, "requires": { - "spdx-license-ids": "1.2.2" + "spdx-license-ids": "^1.0.2" } }, "spdx-expression-parse": { @@ -5883,7 +5867,7 @@ "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", "dev": true, "requires": { - "extend-shallow": "3.0.2" + "extend-shallow": "^3.0.0" } }, "sprintf-js": { @@ -5893,20 +5877,20 @@ "dev": true }, "sshpk": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", - "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz", + "integrity": "sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==", "dev": true, "requires": { - "asn1": "0.2.4", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.2", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.2", - "getpass": "0.1.7", - "jsbn": "0.1.1", - "safer-buffer": "2.1.2", - "tweetnacl": "0.14.5" + "asn1": "~0.2.3", + "assert-plus": "^1.0.0", + "bcrypt-pbkdf": "^1.0.0", + "dashdash": "^1.12.0", + "ecc-jsbn": "~0.1.1", + "getpass": "^0.1.1", + "jsbn": "~0.1.0", + "safer-buffer": "^2.0.2", + "tweetnacl": "~0.14.0" } }, "static-extend": { @@ -5915,8 +5899,8 @@ "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=", "dev": true, "requires": { - "define-property": "0.2.5", - "object-copy": "0.1.0" + "define-property": "^0.2.5", + "object-copy": "^0.1.0" }, "dependencies": { "define-property": { @@ -5925,7 +5909,7 @@ "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } } } @@ -5936,7 +5920,7 @@ "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==", "dev": true, "requires": { - "readable-stream": "2.3.3" + "readable-stream": "^2.0.1" } }, "string-template": { @@ -5951,9 +5935,9 @@ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -5962,7 +5946,7 @@ "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -5971,7 +5955,7 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-bom": { @@ -5980,7 +5964,7 @@ "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", "dev": true, "requires": { - "is-utf8": "0.2.1" + "is-utf8": "^0.2.0" } }, "strip-eof": { @@ -5995,7 +5979,7 @@ "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=", "dev": true, "requires": { - "get-stdin": "4.0.1" + "get-stdin": "^4.0.1" } }, "strip-json-comments": { @@ -6013,13 +5997,13 @@ }, "tar": { "version": "2.2.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, "requires": { - "block-stream": "0.0.9", - "fstream": "1.0.11", - "inherits": "2.0.3" + "block-stream": "*", + "fstream": "^1.0.2", + "inherits": "2" } }, "tiny-lr": { @@ -6028,12 +6012,12 @@ "integrity": "sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==", "dev": true, "requires": { - "body": "5.1.0", - "debug": "3.1.0", - "faye-websocket": "0.10.0", - "livereload-js": "2.3.0", - "object-assign": "4.1.1", - "qs": "6.5.2" + "body": "^5.1.0", + "debug": "^3.1.0", + "faye-websocket": "~0.10.0", + "livereload-js": "^2.3.0", + "object-assign": "^4.1.0", + "qs": "^6.4.0" }, "dependencies": { "debug": { @@ -6059,7 +6043,7 @@ "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "to-regex": { @@ -6068,10 +6052,10 @@ "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==", "dev": true, "requires": { - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "regex-not": "1.0.2", - "safe-regex": "1.1.0" + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "regex-not": "^1.0.2", + "safe-regex": "^1.1.0" } }, "to-regex-range": { @@ -6080,17 +6064,26 @@ "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", "dev": true, "requires": { - "is-number": "3.0.0", - "repeat-string": "1.6.1" + "is-number": "^3.0.0", + "repeat-string": "^1.6.1" } }, "tough-cookie": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", - "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", + "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", "dev": true, "requires": { - "punycode": "1.4.1" + "psl": "^1.1.24", + "punycode": "^1.4.1" + }, + "dependencies": { + "punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "dev": true + } } }, "trim-newlines": { @@ -6105,7 +6098,7 @@ "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==", "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.1.2" } }, "tunnel-agent": { @@ -6114,15 +6107,14 @@ "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "^5.0.1" } }, "tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true, - "optional": true + "dev": true }, "twig": { "version": "0.10.3", @@ -6130,9 +6122,9 @@ "integrity": "sha1-Z2BOCOGSDr8vr4CpAeJWGJyKPGc=", "dev": true, "requires": { - "locutus": "2.0.9", - "minimatch": "3.0.4", - "walk": "2.3.9" + "locutus": "^2.0.5", + "minimatch": "3.0.x", + "walk": "2.3.x" } }, "typedarray": { @@ -6148,9 +6140,9 @@ "dev": true, "optional": true, "requires": { - "source-map": "0.5.7", - "uglify-to-browserify": "1.0.2", - "yargs": "3.10.0" + "source-map": "~0.5.1", + "uglify-to-browserify": "~1.0.0", + "yargs": "~3.10.0" }, "dependencies": { "source-map": { @@ -6167,9 +6159,9 @@ "dev": true, "optional": true, "requires": { - "camelcase": "1.2.1", - "cliui": "2.1.0", - "decamelize": "1.2.0", + "camelcase": "^1.0.2", + "cliui": "^2.1.0", + "decamelize": "^1.0.0", "window-size": "0.1.0" } } @@ -6188,8 +6180,8 @@ "integrity": "sha1-LCo/n4PmR2L9xF5s6sZRQoZCE9s=", "dev": true, "requires": { - "sprintf-js": "1.1.1", - "util-deprecate": "1.0.2" + "sprintf-js": "^1.0.3", + "util-deprecate": "^1.0.2" } }, "union-value": { @@ -6198,10 +6190,10 @@ "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", "dev": true, "requires": { - "arr-union": "3.1.0", - "get-value": "2.0.6", - "is-extendable": "0.1.1", - "set-value": "0.4.3" + "arr-union": "^3.1.0", + "get-value": "^2.0.6", + "is-extendable": "^0.1.1", + "set-value": "^0.4.3" }, "dependencies": { "extend-shallow": { @@ -6210,7 +6202,7 @@ "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } }, "set-value": { @@ -6219,10 +6211,10 @@ "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-extendable": "0.1.1", - "is-plain-object": "2.0.4", - "to-object-path": "0.3.0" + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.1", + "to-object-path": "^0.3.0" } } } @@ -6239,8 +6231,8 @@ "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=", "dev": true, "requires": { - "has-value": "0.3.1", - "isobject": "3.0.1" + "has-value": "^0.3.1", + "isobject": "^3.0.0" }, "dependencies": { "has-value": { @@ -6249,9 +6241,9 @@ "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=", "dev": true, "requires": { - "get-value": "2.0.6", - "has-values": "0.1.4", - "isobject": "2.1.0" + "get-value": "^2.0.3", + "has-values": "^0.1.4", + "isobject": "^2.0.0" }, "dependencies": { "isobject": { @@ -6279,6 +6271,15 @@ "integrity": "sha512-qbKn90aDQ0YEwvXoLqj0oiuUYroLX2lVHZ+b+xwjozFasAOC4GneDq5+OaIG5Zj+jFmbz/uO+f7a9qxjktJQww==", "dev": true }, + "uri-js": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", + "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + }, "uri-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz", @@ -6297,7 +6298,7 @@ "integrity": "sha512-6UJEQM/L+mzC3ZJNM56Q4DFGLX/evKGRg15UJHGB9X5j5Z3AFbgZvjUh2yq/UJUY4U5dh7Fal++XbNg1uzpRAw==", "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.2" }, "dependencies": { "kind-of": { @@ -6326,8 +6327,8 @@ "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=", "dev": true, "requires": { - "spdx-correct": "1.0.2", - "spdx-expression-parse": "1.0.4" + "spdx-correct": "~1.0.0", + "spdx-expression-parse": "~1.0.0" } }, "verror": { @@ -6336,9 +6337,9 @@ "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", "dev": true, "requires": { - "assert-plus": "1.0.0", + "assert-plus": "^1.0.0", "core-util-is": "1.0.2", - "extsprintf": "1.3.0" + "extsprintf": "^1.2.0" } }, "walk": { @@ -6347,7 +6348,7 @@ "integrity": "sha1-MbTbZnjyrgHDnqn7hyWpAx5Vins=", "dev": true, "requires": { - "foreachasync": "3.0.0" + "foreachasync": "^3.0.0" } }, "websocket-driver": { @@ -6356,8 +6357,8 @@ "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=", "dev": true, "requires": { - "http-parser-js": "0.4.13", - "websocket-extensions": "0.1.3" + "http-parser-js": ">=0.4.0", + "websocket-extensions": ">=0.1.1" } }, "websocket-extensions": { @@ -6372,7 +6373,7 @@ "integrity": "sha1-mofEN48D6CfOyvGs31bHNsAcFOU=", "dev": true, "requires": { - "isexe": "2.0.0" + "isexe": "^2.0.0" } }, "which-module": { @@ -6387,7 +6388,7 @@ "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2 || 2" } }, "window-size": { @@ -6409,8 +6410,8 @@ "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1" + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1" } }, "wrappy": { @@ -6443,19 +6444,19 @@ "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=", "dev": true, "requires": { - "camelcase": "3.0.0", - "cliui": "3.2.0", - "decamelize": "1.2.0", - "get-caller-file": "1.0.2", - "os-locale": "1.4.0", - "read-pkg-up": "1.0.1", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "1.0.2", - "which-module": "1.0.0", - "y18n": "3.2.1", - "yargs-parser": "4.2.1" + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^4.2.0" }, "dependencies": { "camelcase": { @@ -6470,9 +6471,9 @@ "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wrap-ansi": "2.1.0" + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wrap-ansi": "^2.0.0" } } } @@ -6483,7 +6484,7 @@ "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=", "dev": true, "requires": { - "camelcase": "3.0.0" + "camelcase": "^3.0.0" }, "dependencies": { "camelcase": { diff --git a/package.json b/package.json index 47fbff3ee..47efa7633 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "grunt-deploy-site": "^0.1.3", "grunt-postcss": "^0.9.0", "grunt-run": "^0.8.0", - "grunt-sass": "^2.1.0", + "grunt-sass": "^3.0.0", + "node-sass": "^4.10.0", "grunt-sass-lint": "^0.2.4", "jquery": "^3.3.1", "kss": "~3.0.0-beta.18", From b5ccbb8c38120bdd9116b0a2aaa412027463319d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 15:40:24 -0800 Subject: [PATCH 015/123] Sort of refactored. --- core/css/decanter-grid.css | 2 +- core/css/decanter.css | 821 ++---------------- .../components/card/_card--horizontal.scss | 12 +- .../global-footer/_global-footer.scss | 15 +- core/scss/core/grid/_grid.scss | 4 +- .../layout/_page-layout--left-sidebar.scss | 25 - .../layout/_page-layout--right-sidebar.scss | 25 - .../layout/_page-layout--single-column.scss | 21 - .../layout/_page-layout--three-column.scss | 29 - .../layout/four-column/_molive.scss | 7 +- core/scss/layout/four-column/index.scss | 11 + core/scss/layout/index.scss | 9 +- .../{ => one-column}/_centered-container.scss | 0 core/scss/layout/one-column/index.scss | 11 + core/scss/layout/three-column/index.scss | 11 + core/scss/layout/two-column/index.scss | 11 + .../mixins/grid/_centered-column.scss | 17 + .../mixins/grid/_grid-media-only.scss | 12 + .../utilities/mixins/grid/_grid-media.scss | 12 + .../mixins/grid/_responsive-grid-columns.scss | 34 +- core/scss/utilities/mixins/grid/index.scss | 12 +- core/scss/utilities/mixins/index.scss | 2 +- .../mixins/layout/four-column/index.scss | 5 - core/scss/utilities/mixins/layout/index.scss | 13 - .../layout/pages/_page-layout--global.scss | 55 -- .../pages/_page-layout--left-sidebar.scss | 73 -- .../pages/_page-layout--right-sidebar.scss | 73 -- .../pages/_page-layout--single-column.scss | 43 - .../pages/_page-layout--three-column.scss | 103 --- .../utilities/mixins/layout/pages/index.scss | 8 - core/scss/utilities/variables/core/_grid.scss | 78 ++ core/scss/utilities/variables/core/index.scss | 1 + core/templates/core/grid/grid.twig | 90 +- .../layout/four-column/molive/molive.json | 2 +- .../layout/four-column/molive/molive.twig | 14 +- kss/builder/decanter/kss-assets/css/kss.css | 107 +-- .../decanter/scss/_class-based-grid.scss | 2 +- kss/builder/decanter/scss/_home.scss | 10 +- 38 files changed, 369 insertions(+), 1411 deletions(-) delete mode 100644 core/scss/layout/_page-layout--left-sidebar.scss delete mode 100644 core/scss/layout/_page-layout--right-sidebar.scss delete mode 100644 core/scss/layout/_page-layout--single-column.scss delete mode 100644 core/scss/layout/_page-layout--three-column.scss rename core/scss/{utilities/mixins => }/layout/four-column/_molive.scss (84%) create mode 100644 core/scss/layout/four-column/index.scss rename core/scss/layout/{ => one-column}/_centered-container.scss (100%) create mode 100644 core/scss/layout/one-column/index.scss create mode 100644 core/scss/layout/three-column/index.scss create mode 100644 core/scss/layout/two-column/index.scss create mode 100644 core/scss/utilities/mixins/grid/_centered-column.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-media-only.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-media.scss delete mode 100644 core/scss/utilities/mixins/layout/four-column/index.scss delete mode 100644 core/scss/utilities/mixins/layout/index.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/_page-layout--global.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss delete mode 100644 core/scss/utilities/mixins/layout/pages/index.scss create mode 100644 core/scss/utilities/variables/core/_grid.scss diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 9fea74954..8766a80e9 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -13,7 +13,7 @@ padding-left: 3rem; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { - .grid--item:last-child:nth-child(odd) { + .flex-item:last-child:nth-child(odd) { width: calc(1 / 1 * 100% - (0px)); } } .grid--3-of-12 { diff --git a/core/css/decanter.css b/core/css/decanter.css index 8194470e2..a648d14c6 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -377,7 +377,7 @@ template { padding-left: 3rem; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { - .grid--item:last-child:nth-child(odd) { + .flex-item:last-child:nth-child(odd) { width: calc(1 / 1 * 100% - (0px)); } } .grid--3-of-12 { @@ -927,713 +927,162 @@ dfn { font-style: italic; margin-top: 0; } -.centered-container { +.layout--molive > header { display: -ms-grid; display: grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; } - .centered-container > :first-child { + .layout--molive > header > :first-child { grid-column: 2; } @media only screen and (min-width: 576px) { - .centered-container { + .layout--molive > header { -ms-grid-columns: auto 576px auto; grid-template-columns: auto 576px auto; } } @media only screen and (min-width: 768px) { - .centered-container { + .layout--molive > header { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } @media only screen and (min-width: 1024px) { - .centered-container { + .layout--molive > header { -ms-grid-columns: auto 1024px auto; grid-template-columns: auto 1024px auto; } } @media only screen and (min-width: 1500px) { - .centered-container { + .layout--molive > header { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } -.page-layout--three-column { +.layout--molive > section { + margin: 0 auto; display: -ms-grid; - display: grid; - max-width: 1220px; - margin: 0 auto; } + display: grid; } @media only screen and (min-width: 0) { - .page-layout--three-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--three-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--three-column { - grid-column-gap: 20px; } - .page-layout--three-column > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > section { + max-width: 100%; } } @media only screen and (min-width: 576px) { - .page-layout--three-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--three-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--three-column { - grid-column-gap: 20px; } - .page-layout--three-column > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > section { + max-width: 576px; } } @media only screen and (min-width: 768px) { - .page-layout--three-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--three-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--three-column { - grid-column-gap: 20px; } - .page-layout--three-column > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > section { + max-width: 768px; } } @media only screen and (min-width: 1024px) { - .page-layout--three-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--three-column > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--three-column { - grid-column-gap: 30px; } - .page-layout--three-column > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > section { + max-width: 1024px; } } @media only screen and (min-width: 1500px) { - .page-layout--three-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--three-column > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--three-column { - grid-column-gap: 30px; } - .page-layout--three-column > * { - margin-left: 0; - margin-right: 0; } } } - -@media only screen and (min-width: 0) { - .page-layout--three-column--content { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 576px) { - .page-layout--three-column--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 768px) { - .page-layout--three-column--content { - -ms-grid-column: 1; - -ms-grid-column-span: 8; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 1 / 9; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 1024px) { - .page-layout--three-column--content { - -ms-grid-column: 4; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 4 / 10; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--three-column--content { - -ms-grid-column: 4; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 4 / 10; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 0) { - .page-layout--three-column--sidebar-first { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 576px) { - .page-layout--three-column--sidebar-first { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 768px) { - .page-layout--three-column--sidebar-first { - -ms-grid-column: 1; - -ms-grid-column-span: 12; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--three-column--sidebar-first { - -ms-grid-column: 1; - -ms-grid-column-span: 3; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 4; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--three-column--sidebar-first { - -ms-grid-column: 1; - -ms-grid-column-span: 3; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 4; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 0) { - .page-layout--three-column--sidebar-second { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 4; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 4 / 5; } } - -@media only screen and (min-width: 576px) { - .page-layout--three-column--sidebar-second { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 4; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 4 / 5; } } - -@media only screen and (min-width: 768px) { - .page-layout--three-column--sidebar-second { - -ms-grid-column: 9; - -ms-grid-column-span: 4; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 9 / 13; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 1024px) { - .page-layout--three-column--sidebar-second { - -ms-grid-column: 10; - -ms-grid-column-span: 3; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 10 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--three-column--sidebar-second { - -ms-grid-column: 10; - -ms-grid-column-span: 3; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 10 / 13; - grid-row: 2 / 3; } } - -.page-layout--left-sidebar { - display: -ms-grid; - display: grid; - max-width: 1220px; - margin: 0 auto; } + .layout--molive > section { + max-width: 1500px; } } @media only screen and (min-width: 0) { - .page-layout--left-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--molive > section > * { margin-left: 10px; margin-right: 10px; } @supports (grid-column-gap: 20px) { - .page-layout--left-sidebar { + .layout--molive > section { grid-column-gap: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section > * { margin-left: 0; margin-right: 0; } } } @media only screen and (min-width: 576px) { - .page-layout--left-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--molive > section > * { margin-left: 10px; margin-right: 10px; } @supports (grid-column-gap: 20px) { - .page-layout--left-sidebar { + .layout--molive > section { grid-column-gap: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section > * { margin-left: 0; margin-right: 0; } } } @media only screen and (min-width: 768px) { - .page-layout--left-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--molive > section > * { margin-left: 10px; margin-right: 10px; } @supports (grid-column-gap: 20px) { - .page-layout--left-sidebar { + .layout--molive > section { grid-column-gap: 20px; } - .page-layout--left-sidebar > * { + .layout--molive > section > * { margin-left: 0; margin-right: 0; } } } @media only screen and (min-width: 1024px) { - .page-layout--left-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--left-sidebar > * { + .layout--molive > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout--molive > section > * { margin-left: 15px; margin-right: 15px; } @supports (grid-column-gap: 20px) { - .page-layout--left-sidebar { + .layout--molive > section { grid-column-gap: 30px; } - .page-layout--left-sidebar > * { + .layout--molive > section > * { margin-left: 0; margin-right: 0; } } } @media only screen and (min-width: 1500px) { - .page-layout--left-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--left-sidebar > * { + .layout--molive > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout--molive > section > * { margin-left: 15px; margin-right: 15px; } @supports (grid-column-gap: 20px) { - .page-layout--left-sidebar { + .layout--molive > section { grid-column-gap: 30px; } - .page-layout--left-sidebar > * { + .layout--molive > section > * { margin-left: 0; margin-right: 0; } } } -@media only screen and (min-width: 0) { - .page-layout--left-sidebar--content { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 576px) { - .page-layout--left-sidebar--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 768px) { - .page-layout--left-sidebar--content { - -ms-grid-column: 5; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 5 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--left-sidebar--content { - -ms-grid-column: 5; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 5 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--left-sidebar--content { - -ms-grid-column: 5; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 5 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 0) { - .page-layout--left-sidebar--sidebar { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 576px) { - .page-layout--left-sidebar--sidebar { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 768px) { - .page-layout--left-sidebar--sidebar { - -ms-grid-column: 1; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 5; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--left-sidebar--sidebar { - -ms-grid-column: 1; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 5; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--left-sidebar--sidebar { - -ms-grid-column: 1; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 5; - grid-row: 2 / 3; } } - -.page-layout--right-sidebar { +.layout--molive > footer { display: -ms-grid; display: grid; - max-width: 1220px; - margin: 0 auto; } - @media only screen and (min-width: 0) { - .page-layout--right-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--right-sidebar > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--right-sidebar { - grid-column-gap: 20px; } - .page-layout--right-sidebar > * { - margin-left: 0; - margin-right: 0; } } } + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; } + .layout--molive > footer > :first-child { + grid-column: 2; } @media only screen and (min-width: 576px) { - .page-layout--right-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--right-sidebar > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--right-sidebar { - grid-column-gap: 20px; } - .page-layout--right-sidebar > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > footer { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } @media only screen and (min-width: 768px) { - .page-layout--right-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--right-sidebar > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--right-sidebar { - grid-column-gap: 20px; } - .page-layout--right-sidebar > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > footer { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } @media only screen and (min-width: 1024px) { - .page-layout--right-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--right-sidebar > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--right-sidebar { - grid-column-gap: 30px; } - .page-layout--right-sidebar > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > footer { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } @media only screen and (min-width: 1500px) { - .page-layout--right-sidebar { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--right-sidebar > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--right-sidebar { - grid-column-gap: 30px; } - .page-layout--right-sidebar > * { - margin-left: 0; - margin-right: 0; } } } + .layout--molive > footer { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } -@media only screen and (min-width: 0) { - .page-layout--right-sidebar--content { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 576px) { - .page-layout--right-sidebar--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 768px) { - .page-layout--right-sidebar--content { - -ms-grid-column: 1; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 9; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--right-sidebar--content { - -ms-grid-column: 1; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 9; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--right-sidebar--content { - -ms-grid-column: 1; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 9; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 0) { - .page-layout--right-sidebar--sidebar { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 576px) { - .page-layout--right-sidebar--sidebar { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 3 / 4; } } - -@media only screen and (min-width: 768px) { - .page-layout--right-sidebar--sidebar { - -ms-grid-column: 9; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 9 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--right-sidebar--sidebar { - -ms-grid-column: 9; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 9 / 13; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--right-sidebar--sidebar { - -ms-grid-column: 9; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 9 / 13; - grid-row: 2 / 3; } } - -.page-layout--single-column { +.centered-container { display: -ms-grid; display: grid; - max-width: 1220px; - margin: 0 auto; } - @media only screen and (min-width: 0) { - .page-layout--single-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--single-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--single-column { - grid-column-gap: 20px; } - .page-layout--single-column > * { - margin-left: 0; - margin-right: 0; } } } + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; } + .centered-container > :first-child { + grid-column: 2; } @media only screen and (min-width: 576px) { - .page-layout--single-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--single-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--single-column { - grid-column-gap: 20px; } - .page-layout--single-column > * { - margin-left: 0; - margin-right: 0; } } } + .centered-container { + -ms-grid-columns: auto 576px auto; + grid-template-columns: auto 576px auto; } } @media only screen and (min-width: 768px) { - .page-layout--single-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; } - .page-layout--single-column > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .page-layout--single-column { - grid-column-gap: 20px; } - .page-layout--single-column > * { - margin-left: 0; - margin-right: 0; } } } + .centered-container { + -ms-grid-columns: auto 768px auto; + grid-template-columns: auto 768px auto; } } @media only screen and (min-width: 1024px) { - .page-layout--single-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--single-column > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--single-column { - grid-column-gap: 30px; } - .page-layout--single-column > * { - margin-left: 0; - margin-right: 0; } } } + .centered-container { + -ms-grid-columns: auto 1024px auto; + grid-template-columns: auto 1024px auto; } } @media only screen and (min-width: 1500px) { - .page-layout--single-column { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; } - .page-layout--single-column > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - .page-layout--single-column { - grid-column-gap: 30px; } - .page-layout--single-column > * { - margin-left: 0; - margin-right: 0; } } } - -@media only screen and (min-width: 0) { - .page-layout--single-column--content { - -ms-grid-column: 1; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / 7; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 576px) { - .page-layout--single-column--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 768px) { - .page-layout--single-column--content { - -ms-grid-column: 3; - -ms-grid-column-span: 8; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 3 / 11; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1024px) { - .page-layout--single-column--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } - -@media only screen and (min-width: 1500px) { - .page-layout--single-column--content { - -ms-grid-column: 2; - -ms-grid-column-span: 10; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 2 / 12; - grid-row: 2 / 3; } } + .centered-container { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } .su-alert { padding: 2rem; @@ -1946,48 +1395,15 @@ button, @media only screen and (min-width: 0) { .su-card--horizontal { -ms-grid-columns: 100%; - grid-template-columns: 100%; - padding-left: 20px; - padding-right: 20px; } - .su-card--horizontal > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .su-card--horizontal { - grid-column-gap: 20px; } - .su-card--horizontal > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: 100%; } } @media only screen and (min-width: 576px) { .su-card--horizontal { -ms-grid-columns: 1fr 2fr; - grid-template-columns: 1fr 2fr; - padding-left: 32px; - padding-right: 32px; } - .su-card--horizontal > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .su-card--horizontal { - grid-column-gap: 20px; } - .su-card--horizontal > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: 1fr 2fr; } } @media only screen and (min-width: 768px) { .su-card--horizontal { -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; - padding-left: 36px; - padding-right: 36px; } - .su-card--horizontal > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .su-card--horizontal { - grid-column-gap: 20px; } - .su-card--horizontal > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: 1fr 1fr; } } .su-card--horizontal > img { margin: 32px 0; } @media only screen and (min-width: 576px) { @@ -2131,52 +1547,19 @@ button, .global-footer .global-footer__container { -ms-grid-columns: 100%; grid-template-columns: 100%; - padding-left: 20px; - padding-right: 20px; -ms-grid-rows: auto auto; grid-template-rows: auto auto; - justify-items: center; } - .global-footer .global-footer__container > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .global-footer .global-footer__container { - grid-column-gap: 20px; } - .global-footer .global-footer__container > * { - margin-left: 0; - margin-right: 0; } } } + justify-items: center; } } @media only screen and (min-width: 576px) { .global-footer .global-footer__container { -ms-grid-columns: 15rem auto; grid-template-columns: 15rem auto; - padding-left: 20px; - padding-right: 20px; - justify-items: left; } - .global-footer .global-footer__container > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .global-footer .global-footer__container { - grid-column-gap: 20px; } - .global-footer .global-footer__container > * { - margin-left: 0; - margin-right: 0; } } } + justify-items: left; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { -ms-grid-columns: 11rem auto; grid-template-columns: 11rem auto; - padding-left: 20px; - padding-right: 20px; justify-items: left; } - .global-footer .global-footer__container > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .global-footer .global-footer__container { - grid-column-gap: 20px; } - .global-footer .global-footer__container > * { - margin-left: 0; - margin-right: 0; } } @supports (grid-column-gap: 20px) { .global-footer .global-footer__container { grid-column-gap: 50px; } } } @@ -2211,37 +1594,19 @@ button, @media only screen and (min-width: 0) and (max-width: 575px) { .global-footer .global-footer__brand a { font-size: 3.2rem; } } - @media only screen and (min-width: 0) and (max-width: 575px) { + @media only screen and (min-width: 0) { .global-footer nav { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; display: -ms-grid; - display: grid; } - .global-footer nav > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .global-footer nav { - grid-column-gap: 20px; } - .global-footer nav > * { - margin-left: 0; - margin-right: 0; } } } - @media only screen and (min-width: 576px) and (max-width: 767px) { + display: grid; } } + @media only screen and (min-width: 576px) { .global-footer nav { -ms-grid-columns: max-content auto; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; display: -ms-grid; - display: grid; } - .global-footer nav > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - .global-footer nav { - grid-column-gap: 20px; } - .global-footer nav > * { - margin-left: 0; - margin-right: 0; } } } + display: grid; } } @media only screen and (min-width: 768px) { .global-footer nav { margin-bottom: 0.75rem; } } diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 0cdd36f45..9d3495303 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -8,13 +8,19 @@ @include display-grid; // One column on smallest screen sizes. - @include grid-media("xs", 100%); + @include grid-media("xs") { + @include grid-columns(100%); + } // 33/66 for small. - @include grid-media("sm", 1fr 2fr, _modular-spacing-get-value('sm')); + @include grid-media("sm") { + @include grid-columns(1fr 2fr); + } // 50/50 side by side on all screen sizes above small. - @include grid-media("md", 1fr 1fr, _modular-spacing-get-value('md')); + @include grid-media("md") { + @include grid-columns(1fr 1fr); + } // Modular padding on images too. > img { diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index 3fb701955..2a28b0aaa 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -32,17 +32,20 @@ .global-footer__container { @include display-grid; - @include grid-media("xs", 100%) { + @include grid-media("xs") { + @include grid-columns(100%); @include grid-rows(auto auto); justify-items: center; } - @include grid-media("sm", 15rem auto) { + @include grid-media("sm") { + @include grid-columns(15rem auto); justify-items: left; } - @include grid-media("md", 11rem auto) { + @include grid-media("md") { + @include grid-columns(11rem auto); justify-items: left; @supports (grid-column-gap: 20px) { @@ -78,11 +81,13 @@ // Grid settings for footer nav region; passing 0 for no outer gutters. nav { - @include grid-media-only('xs', 1fr 1fr, 0) { + @media #{$breakpoint-xs} { + @include grid-columns(1fr 1fr); @include display-grid; } - @include grid-media-only('sm', max-content auto, 0) { + @media #{$breakpoint-sm} { + @include grid-columns(max-content auto); @include display-grid; } diff --git a/core/scss/core/grid/_grid.scss b/core/scss/core/grid/_grid.scss index 25451c3cf..4b78b183d 100644 --- a/core/scss/core/grid/_grid.scss +++ b/core/scss/core/grid/_grid.scss @@ -11,8 +11,8 @@ @include flex-container; } -.grid--item { - @include grid--item; +.flex-item { + @include flex-item; } // Got classes if you want them. diff --git a/core/scss/layout/_page-layout--left-sidebar.scss b/core/scss/layout/_page-layout--left-sidebar.scss deleted file mode 100644 index d8f70143a..000000000 --- a/core/scss/layout/_page-layout--left-sidebar.scss +++ /dev/null @@ -1,25 +0,0 @@ -@charset "UTF-8"; - -// -// Page Layout: Left sidebar -// -// A basic, responsive 2-column (with left sidebar) page layout. -// -// Markup: ../../templates/layout/page-layout--left-sidebar/page-layout--left-sidebar.twig -// -// Weight: 2 -// -// Style guide: Layout.Page Layout: Left sidebar -// - -.page-layout--left-sidebar { - @include page-layout--left-sidebar; -} - -.page-layout--left-sidebar--content { - @include page-layout--left-sidebar--content; -} - -.page-layout--left-sidebar--sidebar { - @include page-layout--left-sidebar--sidebar; -} diff --git a/core/scss/layout/_page-layout--right-sidebar.scss b/core/scss/layout/_page-layout--right-sidebar.scss deleted file mode 100644 index 7b88cf364..000000000 --- a/core/scss/layout/_page-layout--right-sidebar.scss +++ /dev/null @@ -1,25 +0,0 @@ -@charset "UTF-8"; - -// -// Page Layout: Right sidebar -// -// A basic, responsive 2-column (with right sidebar) page layout. -// -// Markup: ../../templates/layout/page-layout--right-sidebar/page-layout--right-sidebar.twig -// -// Weight: 3 -// -// Style guide: Layout.Page Layout: Right sidebar -// - -.page-layout--right-sidebar { - @include page-layout--right-sidebar; -} - -.page-layout--right-sidebar--content { - @include page-layout--right-sidebar--content; -} - -.page-layout--right-sidebar--sidebar { - @include page-layout--right-sidebar--sidebar; -} diff --git a/core/scss/layout/_page-layout--single-column.scss b/core/scss/layout/_page-layout--single-column.scss deleted file mode 100644 index db8aa876f..000000000 --- a/core/scss/layout/_page-layout--single-column.scss +++ /dev/null @@ -1,21 +0,0 @@ -@charset "UTF-8"; - -// -// Page Layout: Single column -// -// A basic, responsive single column page layout. -// -// Markup: ../../templates/layout/page-layout--single-column/page-layout--single-column.twig -// -// Weight: 1 -// -// Style guide: Layout.Page Layout: Single column -// - -.page-layout--single-column { - @include page-layout--single-column; -} - -.page-layout--single-column--content { - @include page-layout--single-column--content; -} diff --git a/core/scss/layout/_page-layout--three-column.scss b/core/scss/layout/_page-layout--three-column.scss deleted file mode 100644 index f52194ab9..000000000 --- a/core/scss/layout/_page-layout--three-column.scss +++ /dev/null @@ -1,29 +0,0 @@ -@charset "UTF-8"; - -// -// Page Layout: Three column -// -// A basic, responsive three-column page layout. -// -// Markup: ../../templates/layout/page-layout--three-column/page-layout--three-column.twig -// -// Weight: 4 -// -// Style guide: Layout.Page Layout: three-column -// - -.page-layout--three-column { - @include page-layout--three-column; -} - -.page-layout--three-column--content { - @include page-layout--three-column--content; -} - -.page-layout--three-column--sidebar-first { - @include page-layout--three-column--sidebar-first; -} - -.page-layout--three-column--sidebar-second { - @include page-layout--three-column--sidebar-second; -} diff --git a/core/scss/utilities/mixins/layout/four-column/_molive.scss b/core/scss/layout/four-column/_molive.scss similarity index 84% rename from core/scss/utilities/mixins/layout/four-column/_molive.scss rename to core/scss/layout/four-column/_molive.scss index ec555ca19..18b933bd1 100644 --- a/core/scss/utilities/mixins/layout/four-column/_molive.scss +++ b/core/scss/layout/four-column/_molive.scss @@ -7,23 +7,26 @@ // // Markup: ../../../../../templates/layout/four-column/molive/molive.twig // +// Style guide: Layout.4Column.Molive +// .layout--molive { // A centered column that spans the max-width of the breakpoint. > header { - @include centered-column; + @include centered-grid-container; } // A centered column broken in to four equal parts. // Collapses to 2 columns by 2 columns ad the breakpoint-md // Collapses to 1 column at mobile screens. > section { + @include centered-column; @include responsive-grid-columns($responsive-columns-four); } // A centered column that spans the max-width of the breakpoint. > footer { - @include centered-column; + @include centered-grid-container; } } diff --git a/core/scss/layout/four-column/index.scss b/core/scss/layout/four-column/index.scss new file mode 100644 index 000000000..714c1ba55 --- /dev/null +++ b/core/scss/layout/four-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Layout - 4 Columns +// +// Four column layouts +// +// Style guide: Layout.4Column +// +@import + 'molive'; diff --git a/core/scss/layout/index.scss b/core/scss/layout/index.scss index e30521e8b..ead79b3b4 100644 --- a/core/scss/layout/index.scss +++ b/core/scss/layout/index.scss @@ -8,8 +8,7 @@ // Style guide: Layout @import - 'centered-container', - 'page-layout--three-column', - 'page-layout--left-sidebar', - 'page-layout--right-sidebar', - 'page-layout--single-column'; + 'four-column/index', + 'three-column/index', + 'two-column/index', + 'one-column/index'; diff --git a/core/scss/layout/_centered-container.scss b/core/scss/layout/one-column/_centered-container.scss similarity index 100% rename from core/scss/layout/_centered-container.scss rename to core/scss/layout/one-column/_centered-container.scss diff --git a/core/scss/layout/one-column/index.scss b/core/scss/layout/one-column/index.scss new file mode 100644 index 000000000..512d27142 --- /dev/null +++ b/core/scss/layout/one-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Layout - 1 Columns +// +// One column layouts +// +// Style guide: Layout.1Column +// +@import + 'centered-container'; diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss new file mode 100644 index 000000000..5b12ce926 --- /dev/null +++ b/core/scss/layout/three-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Layout - 3 Columns +// +// Three column layouts +// +// Style guide: Layout.3Column +// +// @import +// 'molive'; diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss new file mode 100644 index 000000000..5b8b28dfa --- /dev/null +++ b/core/scss/layout/two-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Layout - 2 Columns +// +// Two column layouts +// +// Style guide: Layout.2Column +// +// @import +// 'centered'; diff --git a/core/scss/utilities/mixins/grid/_centered-column.scss b/core/scss/utilities/mixins/grid/_centered-column.scss new file mode 100644 index 000000000..ad4d7f4ce --- /dev/null +++ b/core/scss/utilities/mixins/grid/_centered-column.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// centered-column($grid: $grid-media, $screens: $grid-screens) +// +// Centers a single cellin a container based on max width in breakpoints. +// +@mixin centered-column($grid: $grid-media, $screens: $grid-screens) { + @include margin(0 auto); + @each $code, $breakpoint in $grid { + $max-width: map-get($screens, $code); + @media #{$breakpoint} { + max-width: $max-width; + } + } + +} diff --git a/core/scss/utilities/mixins/grid/_grid-media-only.scss b/core/scss/utilities/mixins/grid/_grid-media-only.scss new file mode 100644 index 000000000..53a0ef572 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-media-only.scss @@ -0,0 +1,12 @@ +@charset 'UTF-8'; + +// +// grid-media($breakpoint: 'xs') +// +// A helper to quickly generate a media query +// +@mixin grid-media-only($breakpoint: 'xs') { + @media #{map-get($grid-media-only, $breakpoint)} { + @content; + } +} diff --git a/core/scss/utilities/mixins/grid/_grid-media.scss b/core/scss/utilities/mixins/grid/_grid-media.scss new file mode 100644 index 000000000..afaac7074 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-media.scss @@ -0,0 +1,12 @@ +@charset 'UTF-8'; + +// +// grid-media($breakpoint: 'xs') +// +// A helper to quickly generate a media query +// +@mixin grid-media($breakpoint: 'xs') { + @media #{map-get($grid-media, $breakpoint)} { + @content; + } +} diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss index 1a81877b9..b1bfa622f 100644 --- a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss @@ -1,37 +1,5 @@ @charset "UTF-8"; -$responsive-columns-default: ( - $breakpoint-xs: 1fr, - $breakpoint-sm: 1fr 1fr, - $breakpoint-md: 1fr 1fr, - $breakpoint-lg: 1fr 1fr, - $breakpoint-xl: 1fr 1fr -); - -$responsive-columns-three: ( - $breakpoint-xs: 1fr, - $breakpoint-sm: 1fr 1fr, - $breakpoint-md: 1fr 1fr, - $breakpoint-lg: 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr -); - -$responsive-columns-four: ( - $breakpoint-xs: 1fr, - $breakpoint-sm: 1fr 1fr, - $breakpoint-md: 1fr 1fr, - $breakpoint-lg: 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr -); - -$responsive-gutters-default:( - $breakpoint-xs: $gutter-xs, - $breakpoint-sm: $gutter-sm, - $breakpoint-md: $gutter-md, - $breakpoint-lg: $gutter-lg, - $breakpoint-xl: $gutter-xl -); - // // responsive-grid-columns($grid-map) // @@ -47,7 +15,7 @@ $responsive-gutters-default:( @each $breakpoint, $columns in $grid-map { @media #{$breakpoint} { // Todo: Add breakpoint sized gap. - @include grid-column-gap(map-get($breakpoint, $responsive-gutters-default)); + @include grid-column-gap(map-get($responsive-gutters-default, $breakpoint)); @include grid-columns($columns); } } diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index af4fcab52..496184dfb 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -9,14 +9,14 @@ // @import + 'centered-column', 'centered-grid-container', - 'display-grid' - 'grid-classes' + 'display-grid', + 'grid-classes', 'grid-column-gap', 'grid-columns', - 'grid-container', 'grid-item-spans', - 'grid-item', - 'grid-media-only', 'grid-media', - 'grid-rows'; + 'grid-media-only', + 'grid-rows', + 'responsive-grid-columns'; diff --git a/core/scss/utilities/mixins/index.scss b/core/scss/utilities/mixins/index.scss index 26d3db9a1..8b03e4945 100644 --- a/core/scss/utilities/mixins/index.scss +++ b/core/scss/utilities/mixins/index.scss @@ -9,10 +9,10 @@ 'button/index', 'cta/index', 'display/index', + 'flex/index', 'grid/index', 'icons-logos/index', 'image/index', - 'layout/index', 'link/index', 'list/index', 'modular-scale/index', diff --git a/core/scss/utilities/mixins/layout/four-column/index.scss b/core/scss/utilities/mixins/layout/four-column/index.scss deleted file mode 100644 index fadae25b1..000000000 --- a/core/scss/utilities/mixins/layout/four-column/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@charset "UTF-8"; - -// Roll er up. -@import - 'molive'; diff --git a/core/scss/utilities/mixins/layout/index.scss b/core/scss/utilities/mixins/layout/index.scss deleted file mode 100644 index 119ffe10c..000000000 --- a/core/scss/utilities/mixins/layout/index.scss +++ /dev/null @@ -1,13 +0,0 @@ -@charset "UTF-8"; - -// -// Layout -// -// Mixins for Layout -// -// Style guide: Mixins.Layout -// - -@import - 'pages/index', - 'four-column/index'; diff --git a/core/scss/utilities/mixins/layout/pages/_page-layout--global.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--global.scss deleted file mode 100644 index 75b4a1b2e..000000000 --- a/core/scss/utilities/mixins/layout/pages/_page-layout--global.scss +++ /dev/null @@ -1,55 +0,0 @@ -@charset "UTF-8"; - -// -// @page-layout -// -// Mixin to apply to the wrapper of all layouts. Note: Is included in all column-specific mixins. -// -// Style guide: Mixins.Layout.page-layout -// - -@mixin page-layout { - @include display-grid; - max-width: $site-max-width; - margin: 0 auto; - - @media #{$breakpoint-xs} { - @include grid-columns(1fr 1fr 1fr 1fr 1fr 1fr); // Can't use repeat() function in IE - padding-left: $gutter-xs; - padding-right: $gutter-xs; - - @include grid-column-gap($gutter-xs); - } - - @media #{$breakpoint-sm} { - @include grid-columns(1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr); // Can't use repeat() function in IE - padding-left: $gutter-sm; - padding-right: $gutter-sm; - - @include grid-column-gap($gutter-sm); - } - - @media #{$breakpoint-md} { - @include grid-columns(1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr); // Can't use repeat() function in IE - padding-left: $gutter-md; - padding-right: $gutter-md; - - @include grid-column-gap($gutter-md); - } - - @media #{$breakpoint-lg} { - @include grid-columns(1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr); // Can't use repeat() function in IE - padding-left: $gutter-lg; - padding-right: $gutter-lg; - - @include grid-column-gap($gutter-lg); - } - - @media #{$breakpoint-xl} { - @include grid-columns(1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr); // Can't use repeat() function in IE - padding-left: $gutter-xl; - padding-right: $gutter-xl; - - @include grid-column-gap($gutter-xl); - } -} diff --git a/core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss deleted file mode 100644 index 6e7cc433f..000000000 --- a/core/scss/utilities/mixins/layout/pages/_page-layout--left-sidebar.scss +++ /dev/null @@ -1,73 +0,0 @@ -@charset "UTF-8"; - -// -// @page-layout--left-sidebar -// -// Mixin to apply to the wrapper of a left-sidebar layout. Note: Includes global mixin @page-layout. -// -// Style guide: Mixins.Layout.page-layout--left-sidebar -// - -@mixin page-layout--left-sidebar { - @include page-layout; -} - -// -// @page-layout--left-sidebar--content -// -// Mixin to apply to the content region in a left-sidebar layout. -// -// Style guide: Mixins.Layout.page-layout--left-sidebar--content -// - -@mixin page-layout--left-sidebar--content { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 3, 4); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 3, 4); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(5, 13, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(5, 13, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(5, 13, 2, 3); - } -} - -// -// @page-layout--left-sidebar--sidebar -// -// Mixin to apply to the sidebar in a left-sidebar layout. -// -// Style guide: Mixins.Layout.page-layout--left-sidebar--sidebar -// - -@mixin page-layout--left-sidebar--sidebar { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 2, 3); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 2, 3); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(1, 5, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(1, 5, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(1, 5, 2, 3); - } -} diff --git a/core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss deleted file mode 100644 index 636169e75..000000000 --- a/core/scss/utilities/mixins/layout/pages/_page-layout--right-sidebar.scss +++ /dev/null @@ -1,73 +0,0 @@ -@charset "UTF-8"; - -// -// @page-layout--right-sidebar -// -// Mixin to apply to the wrapper of a right-sidebar layout. -// -// Style guide: Mixins.Layout.page-layout--right-sidebar -// - -@mixin page-layout--right-sidebar { - @include page-layout; -} - -// -// @page-layout--right-sidebar--content -// -// Mixin to apply to the content region in a left-sidebar layout. -// -// Style guide: Mixins.Layout.page-layout--right-sidebar--content -// - -@mixin page-layout--right-sidebar--content { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 2, 3); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 2, 3); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(1, 9, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(1, 9, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(1, 9, 2, 3); - } -} - -// -// @page-layout--right-sidebar--sidebar -// -// Mixin to apply to the sidebar in a right-sidebar layout. -// -// Style guide: Mixins.Layout.page-layout--right-sidebar--sidebar -// - -@mixin page-layout--right-sidebar--sidebar { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 3, 4); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 3, 4); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(9, 13, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(9, 13, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(9, 13, 2, 3); - } -} diff --git a/core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss deleted file mode 100644 index 74d08bc66..000000000 --- a/core/scss/utilities/mixins/layout/pages/_page-layout--single-column.scss +++ /dev/null @@ -1,43 +0,0 @@ -@charset "UTF-8"; - -// -// @page-layout--single-column -// -// Mixin to apply to the wrapper of a single column layout. -// -// Style guide: Mixins.Layout.page-layout--single-column -// - -@mixin page-layout--single-column { - @include page-layout; -} - -// -// @page-layout--single-column--content -// -// Mixin to apply to the content region in a single column layout. -// -// Style guide: Mixins.Layout.page-layout--single-column--content -// - -@mixin page-layout--single-column--content { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 2, 3); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 2, 3); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(3, 11, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(2, 12, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(2, 12, 2, 3); - } -} diff --git a/core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss b/core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss deleted file mode 100644 index d5843fb9d..000000000 --- a/core/scss/utilities/mixins/layout/pages/_page-layout--three-column.scss +++ /dev/null @@ -1,103 +0,0 @@ -@charset "UTF-8"; - -// -// @page-layout--three-column -// -// Mixin to apply to the wrapper of a three-column layout. -// -// Style guide: Mixins.Layout.page-layout--three-column -// - -@mixin page-layout--three-column { - @include page-layout; -} - -// -// @page-layout--three-column--content -// -// Mixin to apply to the content region in a three-column layout. -// -// Style guide: Mixins.Layout.page-layout--three-column--content -// - -@mixin page-layout--three-column--content { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 2, 3); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 2, 3); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(1, 9, 3, 4); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(4, 10, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(4, 10, 2, 3); - } -} - -// -// @page-layout--three-column--sidebar-first -// -// Mixin to apply to the first sidebar in a three-column layout. -// -// Style guide: Mixins.Layout.page-layout--three-column--sidebar-first -// - -@mixin page-layout--three-column--sidebar-first { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 3, 4); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 3, 4); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(1, 13, 2, 3); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(1, 4, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(1, 4, 2, 3); - } -} - -// -// @page-layout--three-column--sidebar-second -// -// Mixin to apply to the second sidebar in a three-column layout. -// -// Style guide: Mixins.Layout.page-layout--three-column--sidebar-second -// - -@mixin page-layout--three-column--sidebar-second { - @media #{$breakpoint-xs} { - @include grid-item-spans(1, 7, 4, 5); - } - - @media #{$breakpoint-sm} { - @include grid-item-spans(2, 12, 4, 5); - } - - @media #{$breakpoint-md} { - @include grid-item-spans(9, 13, 3, 4); - } - - @media #{$breakpoint-lg} { - @include grid-item-spans(10, 13, 2, 3); - } - - @media #{$breakpoint-xl} { - @include grid-item-spans(10, 13, 2, 3); - } -} diff --git a/core/scss/utilities/mixins/layout/pages/index.scss b/core/scss/utilities/mixins/layout/pages/index.scss deleted file mode 100644 index 32c118ba8..000000000 --- a/core/scss/utilities/mixins/layout/pages/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -@import - 'page-layout--global', - 'page-layout--single-column', - 'page-layout--left-sidebar', - 'page-layout--right-sidebar', - 'page-layout--three-column'; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss new file mode 100644 index 000000000..dd6c911fe --- /dev/null +++ b/core/scss/utilities/variables/core/_grid.scss @@ -0,0 +1,78 @@ +@charset "UTF-8"; + +// +// +// +$grid-screens: ( + 'xs': 100%, + 'sm': $screen-sm, + 'md': $screen-md, + 'lg': $screen-lg, + 'xl': $screen-xl +); + +// +// +// +$grid-media: ( + 'xs': $breakpoint-xs, + 'sm': $breakpoint-sm, + 'md': $breakpoint-md, + 'lg': $breakpoint-lg, + 'xl': $breakpoint-xl +); + +// +// +// +$grid-media-only: ( + 'xs': $breakpoint-xs-only, + 'sm': $breakpoint-sm-only, + 'md': $breakpoint-md-only, + 'lg': $breakpoint-lg-only, + 'xl': $breakpoint-xl +); + +// +// +// +$responsive-columns-default: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr, + $breakpoint-xl: 1fr 1fr +); + +// +// +// +$responsive-columns-three: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr +); + +// +// +// +$responsive-columns-four: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr, + $breakpoint-md: 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr +); + +// +// +// +$responsive-gutters-default:( + $breakpoint-xs: $gutter-xs, + $breakpoint-sm: $gutter-sm, + $breakpoint-md: $gutter-md, + $breakpoint-lg: $gutter-lg, + $breakpoint-xl: $gutter-xl +); diff --git a/core/scss/utilities/variables/core/index.scss b/core/scss/utilities/variables/core/index.scss index 15f18cd72..030fe4f87 100644 --- a/core/scss/utilities/variables/core/index.scss +++ b/core/scss/utilities/variables/core/index.scss @@ -13,6 +13,7 @@ 'box-shadow', 'colors', 'file-paths', + 'grid', 'magic-numbers', 'modular-spacing', 'modular-typography', diff --git a/core/templates/core/grid/grid.twig b/core/templates/core/grid/grid.twig index d0517fe83..e5083a933 100644 --- a/core/templates/core/grid/grid.twig +++ b/core/templates/core/grid/grid.twig @@ -1,91 +1,91 @@

    Whole & Halves

    -
    12/12
    +
    12/12
    -
    6/12
    -
    6/12
    +
    6/12
    +
    6/12

    Thirds

    -
    4/12
    -
    4/12
    -
    4/12
    +
    4/12
    +
    4/12
    +
    4/12
    -
    4/12
    -
    8/12
    +
    4/12
    +
    8/12

    Fourths & Halves

    -
    3/12
    -
    3/12
    -
    3/12
    -
    3/12
    +
    3/12
    +
    3/12
    +
    3/12
    +
    3/12
    -
    3/12
    -
    9/12
    +
    3/12
    +
    9/12
    -
    3/12
    -
    9/12
    -
    3/12
    +
    3/12
    +
    9/12
    +
    3/12

    Sixths, Halves, and Thirds

    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    -
    2/12
    -
    6/12
    -
    4/12
    +
    2/12
    +
    6/12
    +
    4/12
    -
    2/12
    -
    8/12
    -
    2/12
    +
    2/12
    +
    8/12
    +
    2/12
    -
    2/12
    -
    10/12
    +
    2/12
    +
    10/12

    Twelfths

    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    -
    5/12
    -
    7/12
    +
    5/12
    +
    7/12
    diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/four-column/molive/molive.json index 05f6ae801..9b5cf9072 100644 --- a/core/templates/layout/four-column/molive/molive.json +++ b/core/templates/layout/four-column/molive/molive.json @@ -5,5 +5,5 @@ "third": "

    Third Column

    ", "fourth": "

    Fourth Column

    ", "header": "

    Header Column

    ", - "footer": "

    Footer Column

    ", + "footer": "

    Footer Column

    " } diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/four-column/molive/molive.twig index 5eaa11d9c..ba14c9bae 100644 --- a/core/templates/layout/four-column/molive/molive.twig +++ b/core/templates/layout/four-column/molive/molive.twig @@ -19,25 +19,27 @@ {# A centered max-width header region #} {% if header is not empty %}
    +
    {{ header }} +
    {% endif %} {# Because of the responsive behaviour each column is required. #} -
    -
    +
    +
    {{ first }}
    -
    +
    {{ second }}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    @@ -45,7 +47,9 @@ {# Centered max-width footer region #} {% if footer is not empty %}
    +
    {{ footer }} +
    {% endif %}
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 5ed038bce..c71f678be 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -925,11 +925,11 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .grid--container { margin-bottom: 20px; } -.grid--item { +.flex-item { padding: 10px; overflow: hidden; background-color: rgba(0, 0, 0, 0.125); } - .grid--item:nth-child(even) { + .flex-item:nth-child(even) { background-color: rgba(0, 0, 0, 0.25); } .kss-colors-container { @@ -1057,25 +1057,12 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { -ms-grid-columns: 1fr 11fr; grid-template-columns: 1fr 11fr; align-items: center; } - @media only screen and (min-width: 0) and (max-width: 575px) { + @media only screen and (min-width: 0) { #kss-node.kss-home header div { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } - #kss-node.kss-home header div > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home header div { - grid-column-gap: 20px; } - #kss-node.kss-home header div > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-rows: auto auto; } } #kss-node.kss-home header h1 { font-size: 2.5rem; color: #ffffff; @@ -1099,20 +1086,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { text-align: center; } @media only screen and (min-width: 576px) { #kss-node.kss-home .main-nav { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; - text-align: right; } - #kss-node.kss-home .main-nav > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .main-nav { - grid-column-gap: 20px; } - #kss-node.kss-home .main-nav > * { - margin-left: 0; - margin-right: 0; } } } + text-align: right; } } #kss-node.kss-home .main-nav li { padding: 0; display: inline-block; } @@ -1255,72 +1229,20 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { margin-right: 0; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; -ms-grid-columns: auto 268px 268px auto; - grid-template-columns: auto 268px 268px auto; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--dev-resources { - grid-column-gap: 20px; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: auto 268px 268px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 20px; - padding-right: 20px; -ms-grid-columns: auto 364px 364px auto; - grid-template-columns: auto 364px 364px auto; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 10px; - margin-right: 10px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--dev-resources { - grid-column-gap: 20px; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: auto 364px 364px auto; } } @media only screen and (min-width: 1024px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; -ms-grid-columns: auto 226px 226px auto; - grid-template-columns: auto 226px 226px auto; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--dev-resources { - grid-column-gap: 30px; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: auto 226px 226px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-left: 30px; - padding-right: 30px; -ms-grid-columns: auto 345px 345px auto; - grid-template-columns: auto 345px 345px auto; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--dev-resources { - grid-column-gap: 30px; } - #kss-node.kss-home .section--dev-resources > * { - margin-left: 0; - margin-right: 0; } } } + grid-template-columns: auto 345px 345px auto; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources h2 { grid-column-start: 2; } } @@ -1374,16 +1296,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; padding-left: 200px; - padding-right: 200px; } - #kss-node.kss-home .section--more-info ul > * { - margin-left: 15px; - margin-right: 15px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--more-info ul { - grid-column-gap: 30px; } - #kss-node.kss-home .section--more-info ul > * { - margin-left: 0; - margin-right: 0; } } } + padding-right: 200px; } } #kss-node.kss-home .section--more-info li { list-style: none; list-style-type: none; } diff --git a/kss/builder/decanter/scss/_class-based-grid.scss b/kss/builder/decanter/scss/_class-based-grid.scss index 5617ff638..b25d00cb3 100644 --- a/kss/builder/decanter/scss/_class-based-grid.scss +++ b/kss/builder/decanter/scss/_class-based-grid.scss @@ -6,7 +6,7 @@ } // Colors to distinguish odd vs. even cells. -.grid--item { +.flex-item { padding: 10px; overflow: hidden; background-color: rgba(black, .125); diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 8f61a2382..8a66a0e15 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -37,7 +37,7 @@ @include grid-columns(1fr 11fr); align-items: center; - @include grid-media-only("xs") { + @media #{$breakpoint-xs} { @include grid-columns(1fr); @include grid-rows(auto auto); } @@ -57,7 +57,7 @@ @include padding(0); text-align: center; - @include grid-media("sm") { + @media #{$breakpoint-sm} { text-align: right; } @@ -217,7 +217,11 @@ ul { @include display-grid; - @include grid-media("lg", 1fr 1fr 1fr, 200px); + @include grid-media("lg") { + @include grid-columns(1fr 1fr 1fr); + padding-left: 200px; + padding-right: 200px; + }; } li { From 0b97f4b57492dfc07bfba37ea0d38bc3c3e4470b Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 16:14:03 -0800 Subject: [PATCH 016/123] Layout - Bricks --- core/css/decanter.css | 85 ++++++++ core/scss/layout/full-width/_bricks.scss | 23 +++ core/scss/layout/full-width/index.scss | 11 + core/scss/layout/index.scss | 1 + core/scss/layout/three-column/index.scss | 2 +- core/scss/utilities/variables/core/_grid.scss | 3 + .../layout/full-width/bricks/bricks.html.twig | 47 ----- .../layout/full-width/bricks/bricks.json | 9 + .../layout/full-width/bricks/bricks.twig | 60 ++++++ .../layout/full-width/bricks/css/bricks.css | 189 ------------------ .../layout/full-width/bricks/scss/bricks.scss | 38 ---- kss/builder/decanter/index.twig | 9 - 12 files changed, 193 insertions(+), 284 deletions(-) create mode 100644 core/scss/layout/full-width/_bricks.scss create mode 100644 core/scss/layout/full-width/index.scss delete mode 100644 core/templates/layout/full-width/bricks/bricks.html.twig create mode 100644 core/templates/layout/full-width/bricks/bricks.json create mode 100644 core/templates/layout/full-width/bricks/bricks.twig delete mode 100644 core/templates/layout/full-width/bricks/css/bricks.css delete mode 100644 core/templates/layout/full-width/bricks/scss/bricks.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index a648d14c6..ccfee24ae 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -927,6 +927,91 @@ dfn { font-style: italic; margin-top: 0; } +.layout--bricks .layout__columns { + margin: 0 auto; + display: -ms-grid; + display: grid; } + @media only screen and (min-width: 0) { + .layout--bricks .layout__columns { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--bricks .layout__columns { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--bricks .layout__columns { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--bricks .layout__columns { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--bricks .layout__columns { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--bricks .layout__columns > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 576px) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bricks .layout__columns > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 768px) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bricks .layout__columns > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bricks .layout__columns > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 30px; } + .layout--bricks .layout__columns > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bricks .layout__columns > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 30px; } + .layout--bricks .layout__columns > * { + margin-left: 0; + margin-right: 0; } } } + .layout--molive > header { display: -ms-grid; display: grid; diff --git a/core/scss/layout/full-width/_bricks.scss b/core/scss/layout/full-width/_bricks.scss new file mode 100644 index 000000000..0685d72ae --- /dev/null +++ b/core/scss/layout/full-width/_bricks.scss @@ -0,0 +1,23 @@ +@charset "UTF-8"; + +// +// Layout - Bricks +// +// A Full width by 2 column collapsible layout that repeats. +// +// Markup: ../../../../../templates/layout/full-width/bricks/bricks.twig +// +// Style guide: Layout.FullWidth.Bricks +// + +.layout--bricks { + + // A centered column broken in to four equal parts. + // Collapses to 2 columns by 2 columns ad the breakpoint-md + // Collapses to 1 column at mobile screens. + .layout__columns { + @include centered-column; + @include responsive-grid-columns($responsive-columns-two); + } + +} diff --git a/core/scss/layout/full-width/index.scss b/core/scss/layout/full-width/index.scss new file mode 100644 index 000000000..473c0d903 --- /dev/null +++ b/core/scss/layout/full-width/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Layout - Full Width +// +// Full Window Width layouts +// +// Style guide: Layout.FullWidth +// +@import + 'bricks'; diff --git a/core/scss/layout/index.scss b/core/scss/layout/index.scss index ead79b3b4..9f5766569 100644 --- a/core/scss/layout/index.scss +++ b/core/scss/layout/index.scss @@ -8,6 +8,7 @@ // Style guide: Layout @import + 'full-width/index', 'four-column/index', 'three-column/index', 'two-column/index', diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 5b12ce926..9ec7d44c2 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -8,4 +8,4 @@ // Style guide: Layout.3Column // // @import -// 'molive'; + // 'bricks'; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index dd6c911fe..04f0d542e 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -44,6 +44,9 @@ $responsive-columns-default: ( $breakpoint-xl: 1fr 1fr ); +// Helper for those like me that forget. +$responsive-columns-two: $responsive-columns-default; + // // // diff --git a/core/templates/layout/full-width/bricks/bricks.html.twig b/core/templates/layout/full-width/bricks/bricks.html.twig deleted file mode 100644 index 4518cc4cb..000000000 --- a/core/templates/layout/full-width/bricks/bricks.html.twig +++ /dev/null @@ -1,47 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['left']: Content in the left column. - * - $content['right']: Content in the right column. - */ -#} -
    - {{ content.hero }} -
    - -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second}} -
    -
    -
    - -
    - {{ content.full }} -
    - -
    -
    -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    -
    -
    diff --git a/core/templates/layout/full-width/bricks/bricks.json b/core/templates/layout/full-width/bricks/bricks.json new file mode 100644 index 000000000..1fc123393 --- /dev/null +++ b/core/templates/layout/full-width/bricks/bricks.json @@ -0,0 +1,9 @@ +{ + "modifier_class": "layout--bricks", + "hero": "

    Full Width Hero Column 1

    ", + "hero2": "

    Full Width Hero Column 2

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    " +} diff --git a/core/templates/layout/full-width/bricks/bricks.twig b/core/templates/layout/full-width/bricks/bricks.twig new file mode 100644 index 000000000..57b4d7392 --- /dev/null +++ b/core/templates/layout/full-width/bricks/bricks.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - attributes + * - modifier_class + * - hero + * - first + * - second + * - hero2 + * - third + * - fourth + */ +#} + + + {# Full width region #} + {% if hero is not empty %} +
    + {{ hero }} +
    + {% endif %} + + {# Required two equal column centered content area. #} +
    +
    + {{ first }} +
    + +
    + {{ second}} +
    +
    + + {# Full width region #} + {% if hero2 is not empty %} +
    + {{ hero2 }} +
    + {% endif %} + + {# Optional two equal column centered content area. #} + {% if third is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + + diff --git a/core/templates/layout/full-width/bricks/css/bricks.css b/core/templates/layout/full-width/bricks/css/bricks.css deleted file mode 100644 index 905678e9f..000000000 --- a/core/templates/layout/full-width/bricks/css/bricks.css +++ /dev/null @@ -1,189 +0,0 @@ -.full-width { - clear: both; -} - -.full-width::after { - clear: both; - content: ""; - display: block; -} - -.layout--bricks { - clear: both; -} - -@media only screen and (max-width: 575px) { - .layout--bricks { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bricks { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bricks { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bricks { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--bricks { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--bricks { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--bricks::after { - clear: both; - content: ""; - display: block; - } -} - -.layout--bricks::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--bricks .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bricks .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bricks .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bricks .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--bricks .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--bricks .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--bricks .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--bricks .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bricks .column { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bricks .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bricks .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--bricks .column { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--bricks .column { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=bricks.css.map */ \ No newline at end of file diff --git a/core/templates/layout/full-width/bricks/scss/bricks.scss b/core/templates/layout/full-width/bricks/scss/bricks.scss deleted file mode 100644 index e3cfa69e1..000000000 --- a/core/templates/layout/full-width/bricks/scss/bricks.scss +++ /dev/null @@ -1,38 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.full-width { - @include clearfix; - clear: both; -} - -.layout--bricks { - @include responsive-container($default-container); - @include clearfix; - clear: both; - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - -} diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 16070b153..2b58b2362 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -256,14 +256,5 @@ }); {{ scripts|raw }} -{# This will only be included in the demo page. #} -{% if options.demo %} -
    - - Fork me on GitHub -
    -{% endif %} - - From 20c3e0b8b24b2825a909d2456d64e93bdc84ddee Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 16:23:48 -0800 Subject: [PATCH 017/123] Layout - Basic --- core/css/decanter.css | 30 ++++ core/scss/layout/one-column/basic.scss | 22 +++ core/scss/layout/one-column/index.scss | 1 + .../layout/full-width/ibeam/css/ibeam.css | 141 ------------------ .../layout/full-width/ibeam/scss/ibeam.scss | 27 ---- .../layout/one-column/basic/basic.html.twig | 19 --- .../layout/one-column/basic/basic.json | 6 + .../layout/one-column/basic/basic.twig | 35 +++++ .../layout/one-column/basic/css/basic.css | 67 --------- .../layout/one-column/basic/scss/basic.scss | 11 -- .../page-layout--single-column.json | 11 -- .../page-layout--single-column.twig | 13 -- 12 files changed, 94 insertions(+), 289 deletions(-) create mode 100644 core/scss/layout/one-column/basic.scss delete mode 100644 core/templates/layout/full-width/ibeam/css/ibeam.css delete mode 100644 core/templates/layout/full-width/ibeam/scss/ibeam.scss delete mode 100644 core/templates/layout/one-column/basic/basic.html.twig create mode 100644 core/templates/layout/one-column/basic/basic.json create mode 100644 core/templates/layout/one-column/basic/basic.twig delete mode 100644 core/templates/layout/one-column/basic/css/basic.css delete mode 100644 core/templates/layout/one-column/basic/scss/basic.scss delete mode 100644 core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json delete mode 100644 core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig diff --git a/core/css/decanter.css b/core/css/decanter.css index ccfee24ae..331ba02ea 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1145,6 +1145,36 @@ dfn { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } +.layout--basic > header, +.layout--basic > section, +.layout--basic > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 1500px; } } + .centered-container { display: -ms-grid; display: grid; diff --git a/core/scss/layout/one-column/basic.scss b/core/scss/layout/one-column/basic.scss new file mode 100644 index 000000000..9043edbfc --- /dev/null +++ b/core/scss/layout/one-column/basic.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +// +// Layout - Basic +// +// A single column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/one-column/basic/basic.twig +// +// Style guide: Layout.1Column.Basic +// + +.layout--basic { + + > header, + > section, + > footer { + @include centered-column; + } + +} diff --git a/core/scss/layout/one-column/index.scss b/core/scss/layout/one-column/index.scss index 512d27142..c4e04e6b2 100644 --- a/core/scss/layout/one-column/index.scss +++ b/core/scss/layout/one-column/index.scss @@ -8,4 +8,5 @@ // Style guide: Layout.1Column // @import + 'basic', 'centered-container'; diff --git a/core/templates/layout/full-width/ibeam/css/ibeam.css b/core/templates/layout/full-width/ibeam/css/ibeam.css deleted file mode 100644 index 53f04ba38..000000000 --- a/core/templates/layout/full-width/ibeam/css/ibeam.css +++ /dev/null @@ -1,141 +0,0 @@ -.layout--ibeam .full-width { - clear: both; -} - -.layout--ibeam .full-width::after { - clear: both; - content: ""; - display: block; -} - -.layout--ibeam .ibeam-centered { - clear: both; -} - -@media only screen and (max-width: 575px) { - .layout--ibeam .ibeam-centered { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--ibeam .ibeam-centered { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--ibeam .ibeam-centered { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--ibeam .ibeam-centered { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--ibeam .ibeam-centered { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--ibeam .ibeam-centered { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; - } -} - -.layout--ibeam .ibeam-centered::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--ibeam .ibeam-centered .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--ibeam .ibeam-centered .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -/*# sourceMappingURL=ibeam.css.map */ \ No newline at end of file diff --git a/core/templates/layout/full-width/ibeam/scss/ibeam.scss b/core/templates/layout/full-width/ibeam/scss/ibeam.scss deleted file mode 100644 index ca27be2b0..000000000 --- a/core/templates/layout/full-width/ibeam/scss/ibeam.scss +++ /dev/null @@ -1,27 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -.layout--ibeam { - - .full-width { - @include clearfix; - clear: both; - } - - .ibeam-centered { - @include responsive-container($default-container); - @include clearfix; - clear: both; - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - } -} diff --git a/core/templates/layout/one-column/basic/basic.html.twig b/core/templates/layout/one-column/basic/basic.html.twig deleted file mode 100644 index 9cc66e1e4..000000000 --- a/core/templates/layout/one-column/basic/basic.html.twig +++ /dev/null @@ -1,19 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['left']: Content in the left column. - * - $content['right']: Content in the right column. - */ -#} -
    - {{ content.content }} -
    diff --git a/core/templates/layout/one-column/basic/basic.json b/core/templates/layout/one-column/basic/basic.json new file mode 100644 index 000000000..98ad39da0 --- /dev/null +++ b/core/templates/layout/one-column/basic/basic.json @@ -0,0 +1,6 @@ +{ + "modifier_class": "layout--basic", + "header": "

    Header

    ", + "footer": "
    This is the footer
    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/one-column/basic/basic.twig b/core/templates/layout/one-column/basic/basic.twig new file mode 100644 index 000000000..c0836e2a6 --- /dev/null +++ b/core/templates/layout/one-column/basic/basic.twig @@ -0,0 +1,35 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - attributes + * - modifier_class + * - header + * - footer + * - content + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    + {{ content}} +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + + diff --git a/core/templates/layout/one-column/basic/css/basic.css b/core/templates/layout/one-column/basic/css/basic.css deleted file mode 100644 index 3f1db6b84..000000000 --- a/core/templates/layout/one-column/basic/css/basic.css +++ /dev/null @@ -1,67 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--basic { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--basic { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--basic { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--basic { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--basic { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--basic { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--basic::after { - clear: both; - content: ""; - display: block; - } -} - -/*# sourceMappingURL=basic.css.map */ \ No newline at end of file diff --git a/core/templates/layout/one-column/basic/scss/basic.scss b/core/templates/layout/one-column/basic/scss/basic.scss deleted file mode 100644 index 250ec8e06..000000000 --- a/core/templates/layout/one-column/basic/scss/basic.scss +++ /dev/null @@ -1,11 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -.layout--basic { - @include responsive-container($default-container); -} diff --git a/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json b/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json deleted file mode 100644 index 745fc1c66..000000000 --- a/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "header_content": - "Site Header

    This is the site header.

    ", - - "main_content": - "Main Content

    This is the main content area.

    ", - - "footer_content": - "Site Footer

    This is the site footer.

    " -} - diff --git a/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig b/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig deleted file mode 100644 index 6505ccca0..000000000 --- a/core/templates/layout/one-column/page-layout--single-column/page-layout--single-column.twig +++ /dev/null @@ -1,13 +0,0 @@ -
    - {{ header_content }} -
    - -
    -
    - {{ main_content }} -
    -
    - -
    - {{ footer_content }} -
    From 6879fcc44deee9cd07b1ffd561ab7951b6a8fc7f Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 17:17:59 -0800 Subject: [PATCH 018/123] Layout - Battleship. --- core/css/decanter.css | 192 ++++++++++++ core/scss/layout/full-width/_ibeam.scss | 17 ++ core/scss/layout/full-width/index.scss | 1 + core/scss/layout/three-column/_bars.scss | 19 ++ .../scss/layout/three-column/_battleship.scss | 23 ++ core/scss/layout/three-column/index.scss | 5 +- .../mixins/grid/_grid-item-spans.scss | 27 +- .../layout/full-width/ibeam/ibeam.html.twig | 33 --- .../layout/full-width/ibeam/ibeam.json | 7 + .../layout/full-width/ibeam/ibeam.twig | 41 +++ .../layout/three-column/bars/bars.html.twig | 31 -- .../layout/three-column/bars/bars.json | 6 + .../layout/three-column/bars/bars.twig | 30 ++ .../layout/three-column/bars/css/bars.css | 169 ----------- .../layout/three-column/bars/scss/bars.scss | 31 -- .../battleship/battleship.html.twig | 51 ---- .../three-column/battleship/battleship.json | 11 + .../three-column/battleship/battleship.twig | 63 ++++ .../battleship/css/battleship.css | 275 ------------------ .../battleship/scss/battleship.scss | 64 ---- kss/builder/decanter/index.twig | 1 - 21 files changed, 433 insertions(+), 664 deletions(-) create mode 100644 core/scss/layout/full-width/_ibeam.scss create mode 100644 core/scss/layout/three-column/_bars.scss create mode 100644 core/scss/layout/three-column/_battleship.scss delete mode 100644 core/templates/layout/full-width/ibeam/ibeam.html.twig create mode 100644 core/templates/layout/full-width/ibeam/ibeam.json create mode 100644 core/templates/layout/full-width/ibeam/ibeam.twig delete mode 100644 core/templates/layout/three-column/bars/bars.html.twig create mode 100644 core/templates/layout/three-column/bars/bars.json create mode 100644 core/templates/layout/three-column/bars/bars.twig delete mode 100644 core/templates/layout/three-column/bars/css/bars.css delete mode 100644 core/templates/layout/three-column/bars/scss/bars.scss delete mode 100644 core/templates/layout/three-column/battleship/battleship.html.twig create mode 100644 core/templates/layout/three-column/battleship/battleship.json create mode 100644 core/templates/layout/three-column/battleship/battleship.twig delete mode 100644 core/templates/layout/three-column/battleship/css/battleship.css delete mode 100644 core/templates/layout/three-column/battleship/scss/battleship.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 331ba02ea..9fd216c16 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -927,6 +927,24 @@ dfn { font-style: italic; margin-top: 0; } +.layout--ibeam > section { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--ibeam > section { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--ibeam > section { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--ibeam > section { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--ibeam > section { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--ibeam > section { + max-width: 1500px; } } + .layout--bricks .layout__columns { margin: 0 auto; display: -ms-grid; @@ -1145,6 +1163,180 @@ dfn { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } +.layout--bars > div { + margin: 0 auto; + display: -ms-grid; + display: grid; } + @media only screen and (min-width: 0) { + .layout--bars > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--bars > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--bars > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--bars > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--bars > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--bars > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--bars > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 20px; } + .layout--bars > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 576px) { + .layout--bars > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bars > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 20px; } + .layout--bars > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 768px) { + .layout--bars > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bars > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 20px; } + .layout--bars > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--bars > div > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 30px; } + .layout--bars > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--bars > div > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 30px; } + .layout--bars > div > * { + margin-left: 0; + margin-right: 0; } } } + +.layout--battleship > div { + margin: 0 auto; + display: -ms-grid; + display: grid; } + @media only screen and (min-width: 0) { + .layout--battleship > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--battleship > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--battleship > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--battleship > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--battleship > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--battleship > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--battleship > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 20px; } + .layout--battleship > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 576px) { + .layout--battleship > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--battleship > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 20px; } + .layout--battleship > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 768px) { + .layout--battleship > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--battleship > div > * { + margin-left: 10px; + margin-right: 10px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 20px; } + .layout--battleship > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--battleship > div > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 30px; } + .layout--battleship > div > * { + margin-left: 0; + margin-right: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--battleship > div > * { + margin-left: 15px; + margin-right: 15px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 30px; } + .layout--battleship > div > * { + margin-left: 0; + margin-right: 0; } } } + .layout--battleship > div :first-child { + -ms-grid-column: 1; + -ms-grid-column-span: span 2-1; + grid-column: 1 / span 2; } + .layout--basic > header, .layout--basic > section, .layout--basic > footer { diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss new file mode 100644 index 000000000..8a0406128 --- /dev/null +++ b/core/scss/layout/full-width/_ibeam.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// Layout - I-Beam +// +// A Full width by 1 column collapsible layout that repeats. +// +// Markup: ../../../../../templates/layout/full-width/ibeam/ibeam.twig +// +// Style guide: Layout.FullWidth.IBeam +// + +.layout--ibeam { + > section { + @include centered-column; + } +} diff --git a/core/scss/layout/full-width/index.scss b/core/scss/layout/full-width/index.scss index 473c0d903..e6e19f252 100644 --- a/core/scss/layout/full-width/index.scss +++ b/core/scss/layout/full-width/index.scss @@ -8,4 +8,5 @@ // Style guide: Layout.FullWidth // @import + 'ibeam', 'bricks'; diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/three-column/_bars.scss new file mode 100644 index 000000000..b4050260d --- /dev/null +++ b/core/scss/layout/three-column/_bars.scss @@ -0,0 +1,19 @@ +@charset "UTF-8"; + +// +// Layout - Bars +// +// A three column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/three-column/bars/bars.twig +// +// Style guide: Layout.3Column.Bars +// + +.layout--bars { + > div { + @include centered-column; + @include responsive-grid-columns($responsive-columns-three); + } +} diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/three-column/_battleship.scss new file mode 100644 index 000000000..086c2e4a5 --- /dev/null +++ b/core/scss/layout/three-column/_battleship.scss @@ -0,0 +1,23 @@ +@charset "UTF-8"; + +// +// Layout - Battleship +// +// A three column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/three-column/battleship/battleship.twig +// +// Style guide: Layout.3Column.Battleship +// + +.layout--battleship { + > div { + @include centered-column; + @include responsive-grid-columns($responsive-columns-three); + + :first-child { + @include grid-item-spans(1, span 2); + } + } +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 9ec7d44c2..b7afd963d 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -7,5 +7,6 @@ // // Style guide: Layout.3Column // -// @import - // 'bricks'; +@import + 'bars', + 'battleship'; diff --git a/core/scss/utilities/mixins/grid/_grid-item-spans.scss b/core/scss/utilities/mixins/grid/_grid-item-spans.scss index 14079b1c1..665970d14 100644 --- a/core/scss/utilities/mixins/grid/_grid-item-spans.scss +++ b/core/scss/utilities/mixins/grid/_grid-item-spans.scss @@ -7,11 +7,24 @@ // // Style guide: Mixins.Grid.grid-item-spans // -@mixin grid-item-spans($col-start, $col-end, $row-start, $row-end) { - -ms-grid-column: $col-start; - -ms-grid-column-span: $col-end - $col-start; - -ms-grid-row: $row-start; - -ms-grid-row-span: $row-end - $row-start; - grid-column: #{$col-start} / #{$col-end}; - grid-row: #{$row-start} / #{$row-end}; +@mixin grid-item-spans($col-start: null, $col-end: null, $row-start: null, $row-end: null) { + + @if ($col-start != null) { + -ms-grid-column: $col-start; + } + + @if ($col-end != null and $col-start != null) { + -ms-grid-column-span: $col-end - $col-start; + grid-column: #{$col-start} / #{$col-end}; + } + + @if ($row-start != null) { + -ms-grid-row: $row-start; + } + + @if ($row-end != null and $row-start != null) { + -ms-grid-row-span: $row-end - $row-start; + grid-row: #{$row-start} / #{$row-end}; + } + } diff --git a/core/templates/layout/full-width/ibeam/ibeam.html.twig b/core/templates/layout/full-width/ibeam/ibeam.html.twig deleted file mode 100644 index 4c3f13a75..000000000 --- a/core/templates/layout/full-width/ibeam/ibeam.html.twig +++ /dev/null @@ -1,33 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['left']: Content in the left column. - * - $content['right']: Content in the right column. - */ -#} -
    -
    - {{ content.hero }} -
    - -
    - {{ content.first }} -
    - -
    - {{ content.full }} -
    - -
    - {{ content.second }} -
    -
    diff --git a/core/templates/layout/full-width/ibeam/ibeam.json b/core/templates/layout/full-width/ibeam/ibeam.json new file mode 100644 index 000000000..1fa310c4c --- /dev/null +++ b/core/templates/layout/full-width/ibeam/ibeam.json @@ -0,0 +1,7 @@ +{ + "modifier_class": "layout--ibeam", + "full_width": "

    Full width region

    ", + "full_width2": "

    Full width region

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content2": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/full-width/ibeam/ibeam.twig b/core/templates/layout/full-width/ibeam/ibeam.twig new file mode 100644 index 000000000..96bae54a0 --- /dev/null +++ b/core/templates/layout/full-width/ibeam/ibeam.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * - + * - + * - + */ +#} + + + {% if full_width is not empty %} +
    + {{ full_width }} +
    + {% endif %} + +
    + {{ content }} +
    + + {% if full_width2 is not empty %} +
    + {{ full_width2 }} +
    + {% endif %} + + {% if content2 is not empty %} +
    + {{ content2 }} +
    + {% endif %} + + diff --git a/core/templates/layout/three-column/bars/bars.html.twig b/core/templates/layout/three-column/bars/bars.html.twig deleted file mode 100644 index 9001772a4..000000000 --- a/core/templates/layout/three-column/bars/bars.html.twig +++ /dev/null @@ -1,31 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    -
    -
    diff --git a/core/templates/layout/three-column/bars/bars.json b/core/templates/layout/three-column/bars/bars.json new file mode 100644 index 000000000..e0ba0d59f --- /dev/null +++ b/core/templates/layout/three-column/bars/bars.json @@ -0,0 +1,6 @@ +{ + "modifier_class": "layout--bars", + "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/bars/bars.twig b/core/templates/layout/three-column/bars/bars.twig new file mode 100644 index 000000000..93216d9e9 --- /dev/null +++ b/core/templates/layout/three-column/bars/bars.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * - + * - + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    +
    + diff --git a/core/templates/layout/three-column/bars/css/bars.css b/core/templates/layout/three-column/bars/css/bars.css deleted file mode 100644 index 2d36d79bb..000000000 --- a/core/templates/layout/three-column/bars/css/bars.css +++ /dev/null @@ -1,169 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--bars { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bars { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bars { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bars { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--bars { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--bars { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--bars::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--bars .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bars .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bars .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bars .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--bars .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--bars .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--bars .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--bars .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--bars .column { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--bars .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--bars .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--bars .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--bars .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=bars.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/bars/scss/bars.scss b/core/templates/layout/three-column/bars/scss/bars.scss deleted file mode 100644 index 933232eab..000000000 --- a/core/templates/layout/three-column/bars/scss/bars.scss +++ /dev/null @@ -1,31 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--bars { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - -} diff --git a/core/templates/layout/three-column/battleship/battleship.html.twig b/core/templates/layout/three-column/battleship/battleship.html.twig deleted file mode 100644 index a54802e6a..000000000 --- a/core/templates/layout/three-column/battleship/battleship.html.twig +++ /dev/null @@ -1,51 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    - -
    - {{ content.sixth }} -
    - -
    - {{ content.seventh }} -
    - -
    - {{ content.eighth }} -
    -
    -
    diff --git a/core/templates/layout/three-column/battleship/battleship.json b/core/templates/layout/three-column/battleship/battleship.json new file mode 100644 index 000000000..e26660c5b --- /dev/null +++ b/core/templates/layout/three-column/battleship/battleship.json @@ -0,0 +1,11 @@ +{ + "modifier_class": "layout--battleship", + "first": "

    Heading goes here

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "Example Image", + "third": "Example Image", + "fourth": "Example Image", + "fifth": "Example Image", + "sixth": "Example Image", + "seventh": "Example Image", + "eighth": "Example Image" +} diff --git a/core/templates/layout/three-column/battleship/battleship.twig b/core/templates/layout/three-column/battleship/battleship.twig new file mode 100644 index 000000000..f54376353 --- /dev/null +++ b/core/templates/layout/three-column/battleship/battleship.twig @@ -0,0 +1,63 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + + {% if fourth is not empty %} +
    + {{ fourth }} +
    + {% endif %} + + {% if fifth is not empty %} +
    + {{ fifth }} +
    + {% endif %} + + {% if sixth is not empty %} +
    + {{ sixth }} +
    + {% endif %} + + {% if seventh is not empty %} +
    + {{ seventh }} +
    + {% endif %} + + {% if eighth is not empty %} +
    + {{ eighth }} +
    + {% endif %} +
    + diff --git a/core/templates/layout/three-column/battleship/css/battleship.css b/core/templates/layout/three-column/battleship/css/battleship.css deleted file mode 100644 index b4fe21560..000000000 --- a/core/templates/layout/three-column/battleship/css/battleship.css +++ /dev/null @@ -1,275 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--battleship { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--battleship { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--battleship { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--battleship { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--battleship { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--battleship { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--battleship::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--battleship .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--battleship .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--battleship .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--battleship .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--battleship .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--battleship .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--battleship .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--battleship .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--battleship .column { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--battleship .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--battleship .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--battleship .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--battleship .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--battleship .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--battleship .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--battleship .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--battleship .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--battleship .column--first { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--battleship .column--first { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--battleship .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--battleship .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--battleship .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--battleship .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--battleship .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--battleship .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -.layout--battleship .column--third { - clear: both; -} - -.layout--battleship .column--third::after { - clear: both; - content: ""; - display: block; -} - -/*# sourceMappingURL=battleship.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/battleship/scss/battleship.scss b/core/templates/layout/three-column/battleship/scss/battleship.scss deleted file mode 100644 index 80e154253..000000000 --- a/core/templates/layout/three-column/battleship/scss/battleship.scss +++ /dev/null @@ -1,64 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the column. -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--battleship { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - - .column--third { - @include clearfix; - clear: both; - } - -} diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 2b58b2362..4e1254ba7 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -225,7 +225,6 @@ {% endfor %} {% endif %} -{% include "@decanter/components/global-footer/global-footer.twig" with {} only %}
    From 5f5afac29e6f1a6ce469a2536be22e6b0178c8dc Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 22:30:28 -0800 Subject: [PATCH 019/123] Layout - Blastila. --- core/css/decanter.css | 700 +++++++++++++++--- core/scss/layout/four-column/_molive.scss | 2 +- core/scss/layout/four-column/index.scss | 2 +- core/scss/layout/full-width/_bricks.scss | 2 +- core/scss/layout/full-width/_ibeam.scss | 2 +- core/scss/layout/full-width/index.scss | 2 +- core/scss/layout/one-column/basic.scss | 2 +- core/scss/layout/one-column/index.scss | 2 +- core/scss/layout/three-column/_bars.scss | 2 +- .../scss/layout/three-column/_battleship.scss | 2 +- .../layout/three-column/_blastila-left.scss | 57 ++ .../layout/three-column/_blastila-right.scss | 54 ++ core/scss/layout/three-column/index.scss | 6 +- core/scss/layout/two-column/_donies.scss | 25 + core/scss/layout/two-column/index.scss | 6 +- .../utilities/mixins/grid/_display-grid.scss | 2 +- .../mixins/grid/_grid-column-gap.scss | 7 +- .../scss/utilities/mixins/grid/_grid-gap.scss | 13 + .../mixins/grid/_grid-item-spans.scss | 4 +- .../utilities/mixins/grid/_grid-row-gap.scss | 24 + .../mixins/grid/_responsive-grid-columns.scss | 13 +- core/scss/utilities/mixins/grid/index.scss | 2 + .../centered-container.twig | 2 +- .../blastila/{left => }/blastila-left.png | Bin .../blastila/{right => }/blastila-right.png | Bin .../three-column/blastila/blastila.json | 7 + .../three-column/blastila/blastila.twig | 50 ++ .../blastila/left/blastila-left.html.twig | 45 -- .../blastila/left/css/blastila-left.css | 285 ------- .../blastila/left/scss/blastila-left.scss | 75 -- .../blastila/right/blastila-right.html.twig | 46 -- .../blastila/right/css/blastila-right.css | 319 -------- .../blastila/right/scss/blastila-right.scss | 71 -- .../layout/two-column/aiur/aiur.html.twig | 34 - .../templates/layout/two-column/aiur/aiur.png | Bin 1074 -> 0 bytes .../layout/two-column/aiur/css/aiur.css | 94 --- .../layout/two-column/aiur/scss/aiur.scss | 36 - .../layout/two-column/donies/css/donies.css | 175 ----- .../layout/two-column/donies/donies.html.twig | 33 - .../layout/two-column/donies/donies.json | 7 + .../layout/two-column/donies/donies.twig | 42 ++ .../layout/two-column/donies/scss/donies.scss | 32 - kss/builder/decanter/kss-assets/css/kss.css | 73 +- kss/builder/decanter/scss/_builder.scss | 13 + kss/builder/decanter/scss/_layout-colors.scss | 37 +- kss/builder/decanter/scss/_visible-grid.scss | 10 +- 46 files changed, 982 insertions(+), 1435 deletions(-) create mode 100644 core/scss/layout/three-column/_blastila-left.scss create mode 100644 core/scss/layout/three-column/_blastila-right.scss create mode 100644 core/scss/layout/two-column/_donies.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-gap.scss create mode 100644 core/scss/utilities/mixins/grid/_grid-row-gap.scss rename core/templates/layout/three-column/blastila/{left => }/blastila-left.png (100%) rename core/templates/layout/three-column/blastila/{right => }/blastila-right.png (100%) create mode 100644 core/templates/layout/three-column/blastila/blastila.json create mode 100644 core/templates/layout/three-column/blastila/blastila.twig delete mode 100644 core/templates/layout/three-column/blastila/left/blastila-left.html.twig delete mode 100644 core/templates/layout/three-column/blastila/left/css/blastila-left.css delete mode 100644 core/templates/layout/three-column/blastila/left/scss/blastila-left.scss delete mode 100644 core/templates/layout/three-column/blastila/right/blastila-right.html.twig delete mode 100644 core/templates/layout/three-column/blastila/right/css/blastila-right.css delete mode 100644 core/templates/layout/three-column/blastila/right/scss/blastila-right.scss delete mode 100644 core/templates/layout/two-column/aiur/aiur.html.twig delete mode 100644 core/templates/layout/two-column/aiur/aiur.png delete mode 100644 core/templates/layout/two-column/aiur/css/aiur.css delete mode 100644 core/templates/layout/two-column/aiur/scss/aiur.scss delete mode 100644 core/templates/layout/two-column/donies/css/donies.css delete mode 100644 core/templates/layout/two-column/donies/donies.html.twig create mode 100644 core/templates/layout/two-column/donies/donies.json create mode 100644 core/templates/layout/two-column/donies/donies.twig delete mode 100644 core/templates/layout/two-column/donies/scss/donies.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 9fd216c16..e068e64c8 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -947,8 +947,8 @@ dfn { .layout--bricks .layout__columns { margin: 0 auto; - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bricks .layout__columns { max-width: 100%; } } @@ -969,70 +969,115 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--bricks .layout__columns > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { grid-column-gap: 20px; } .layout--bricks .layout__columns > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { grid-column-gap: 20px; } .layout--bricks .layout__columns > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { grid-column-gap: 20px; } .layout--bricks .layout__columns > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 20px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1024px) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { grid-column-gap: 30px; } .layout--bricks .layout__columns > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 30px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { grid-column-gap: 30px; } .layout--bricks .layout__columns > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 30px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } .layout--molive > header { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; } .layout--molive > header > :first-child { @@ -1056,8 +1101,8 @@ dfn { .layout--molive > section { margin: 0 auto; - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .layout--molive > section { max-width: 100%; } } @@ -1078,70 +1123,115 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--molive > section > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--molive > section { grid-column-gap: 20px; } .layout--molive > section > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 20px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--molive > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--molive > section > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--molive > section { grid-column-gap: 20px; } .layout--molive > section > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 20px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--molive > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--molive > section > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--molive > section { grid-column-gap: 20px; } .layout--molive > section > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 20px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1024px) { .layout--molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--molive > section { grid-column-gap: 30px; } .layout--molive > section > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 30px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--molive > section { grid-column-gap: 30px; } .layout--molive > section > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 30px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } .layout--molive > footer { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; } .layout--molive > footer > :first-child { @@ -1165,8 +1255,8 @@ dfn { .layout--bars > div { margin: 0 auto; - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bars > div { max-width: 100%; } } @@ -1187,71 +1277,116 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--bars > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bars > div { grid-column-gap: 20px; } .layout--bars > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 20px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--bars > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bars > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bars > div { grid-column-gap: 20px; } .layout--bars > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 20px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--bars > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bars > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--bars > div { grid-column-gap: 20px; } .layout--bars > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 20px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1024px) { .layout--bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--bars > div { grid-column-gap: 30px; } .layout--bars > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 30px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--bars > div { grid-column-gap: 30px; } .layout--bars > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 30px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } .layout--battleship > div { margin: 0 auto; - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .layout--battleship > div { max-width: 100%; } } @@ -1272,70 +1407,431 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--battleship > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { grid-column-gap: 20px; } .layout--battleship > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 20px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--battleship > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--battleship > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { grid-column-gap: 20px; } .layout--battleship > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 20px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--battleship > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--battleship > div > * { - margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + margin-left: 10px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { grid-column-gap: 20px; } .layout--battleship > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 20px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1024px) { .layout--battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { grid-column-gap: 30px; } .layout--battleship > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 30px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { grid-column-gap: 30px; } .layout--battleship > div > * { - margin-left: 0; - margin-right: 0; } } } + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 30px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } .layout--battleship > div :first-child { -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } + +.layout--blastila-left > header { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--blastila-left > header { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--blastila-left > header { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-left > header { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--blastila-left > header { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--blastila-left > header { + max-width: 1500px; } } + +.layout--blastila-left > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--blastila-left > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--blastila-left > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-left > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--blastila-left > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--blastila-left > div { + max-width: 1500px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-left > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--blastila-left > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--blastila-left > div { + grid-column-gap: 20px; } + .layout--blastila-left > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--blastila-left > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--blastila-left > div { + grid-row-gap: 20px; } + .layout--blastila-left > div > * { + margin-top: 0; + margin-bottom: 0; } } } + .layout--blastila-left > div > aside { + -ms-grid-column: 1; + grid-column: 1 / 1; + -ms-grid-column-span: 0; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: span 2-1; } + .layout--blastila-left > div > section { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; + -ms-grid-row: 2; } + .layout--blastila-left > div > div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: span 1-2; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + .layout--blastila-left > div div ~ div { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout--blastila-right > header { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--blastila-right > header { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--blastila-right > header { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-right > header { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--blastila-right > header { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--blastila-right > header { + max-width: 1500px; } } + +.layout--blastila-right > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--blastila-right > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--blastila-right > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-right > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--blastila-right > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--blastila-right > div { + max-width: 1500px; } } + @media only screen and (min-width: 768px) { + .layout--blastila-right > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--blastila-right > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--blastila-right > div { + grid-column-gap: 20px; } + .layout--blastila-right > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--blastila-right > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--blastila-right > div { + grid-row-gap: 20px; } + .layout--blastila-right > div > * { + margin-top: 0; + margin-bottom: 0; } } } + .layout--blastila-right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / 3; + -ms-grid-column-span: 0; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: span 2-1; } + .layout--blastila-right > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; - grid-column: 1 / span 2; } + -ms-grid-row: 1; } + .layout--blastila-right > div > div { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + .layout--blastila-right > div div ~ div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: span 1-2; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout--donies > section, +.layout--donies > header, +.layout--donies > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 1500px; } } + +.layout--donies > section { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout--donies > section { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--donies > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 20px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 20px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--donies > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--donies > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 20px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 20px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--donies > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--donies > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 20px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 20px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--donies > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--donies > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 30px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 30px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--donies > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--donies > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 30px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 30px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } .layout--basic > header, .layout--basic > section, @@ -1368,8 +1864,8 @@ dfn { max-width: 1500px; } } .centered-container { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; } .centered-container > :first-child { @@ -1444,8 +1940,8 @@ dfn { background-image: url("../img/alert-warning.svg"); } .su-brand-bar { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; width: 100%; @@ -1697,8 +2193,8 @@ button, text-align: center; } .su-card--horizontal { - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .su-card--horizontal { -ms-grid-columns: 100%; @@ -1816,8 +2312,8 @@ button, width: auto; } } .global-footer { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; padding: 2.5rem 0; @@ -1848,8 +2344,8 @@ button, color: #ffffff; text-decoration: underline; } .global-footer .global-footer__container { - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 0) { .global-footer .global-footer__container { -ms-grid-columns: 100%; @@ -1905,15 +2401,15 @@ button, .global-footer nav { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; - display: -ms-grid; - display: grid; } } + display: grid; + display: -ms-grid; } } @media only screen and (min-width: 576px) { .global-footer nav { -ms-grid-columns: max-content auto; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; - display: -ms-grid; - display: grid; } } + display: grid; + display: -ms-grid; } } @media only screen and (min-width: 768px) { .global-footer nav { margin-bottom: 0.75rem; } } diff --git a/core/scss/layout/four-column/_molive.scss b/core/scss/layout/four-column/_molive.scss index 18b933bd1..8eac26cda 100644 --- a/core/scss/layout/four-column/_molive.scss +++ b/core/scss/layout/four-column/_molive.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Molive +// Molive // // A four column collapsible layout with a centered header and footer. // diff --git a/core/scss/layout/four-column/index.scss b/core/scss/layout/four-column/index.scss index 714c1ba55..5f817f8f0 100644 --- a/core/scss/layout/four-column/index.scss +++ b/core/scss/layout/four-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - 4 Columns +// 4 Columns // // Four column layouts // diff --git a/core/scss/layout/full-width/_bricks.scss b/core/scss/layout/full-width/_bricks.scss index 0685d72ae..64da612e8 100644 --- a/core/scss/layout/full-width/_bricks.scss +++ b/core/scss/layout/full-width/_bricks.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Bricks +// Bricks // // A Full width by 2 column collapsible layout that repeats. // diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss index 8a0406128..70b71d0b7 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/full-width/_ibeam.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - I-Beam +// I-Beam // // A Full width by 1 column collapsible layout that repeats. // diff --git a/core/scss/layout/full-width/index.scss b/core/scss/layout/full-width/index.scss index e6e19f252..00e531ead 100644 --- a/core/scss/layout/full-width/index.scss +++ b/core/scss/layout/full-width/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Full Width +// Full Width // // Full Window Width layouts // diff --git a/core/scss/layout/one-column/basic.scss b/core/scss/layout/one-column/basic.scss index 9043edbfc..b939abd48 100644 --- a/core/scss/layout/one-column/basic.scss +++ b/core/scss/layout/one-column/basic.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Basic +// Basic // // A single column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. diff --git a/core/scss/layout/one-column/index.scss b/core/scss/layout/one-column/index.scss index c4e04e6b2..6ec411097 100644 --- a/core/scss/layout/one-column/index.scss +++ b/core/scss/layout/one-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - 1 Columns +// 1 Columns // // One column layouts // diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/three-column/_bars.scss index b4050260d..66e41d4e6 100644 --- a/core/scss/layout/three-column/_bars.scss +++ b/core/scss/layout/three-column/_bars.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Bars +// Bars // // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/three-column/_battleship.scss index 086c2e4a5..ecffd971a 100644 --- a/core/scss/layout/three-column/_battleship.scss +++ b/core/scss/layout/three-column/_battleship.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - Battleship +// Battleship // // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. diff --git a/core/scss/layout/three-column/_blastila-left.scss b/core/scss/layout/three-column/_blastila-left.scss new file mode 100644 index 000000000..d2a4aba13 --- /dev/null +++ b/core/scss/layout/three-column/_blastila-left.scss @@ -0,0 +1,57 @@ +@charset "UTF-8"; + +// +// Blastila +// +// A complext three column layout with a centered max width header a left +// sidebar and a mini two column with header content area. +// +// .layout--blastila-left - Left sidebar version +// .layout--blastila-right - Right sidebar version +// +// Markup: ../../../../../templates/layout/three-column/blastila/blastila.twig +// +// Style guide: Layout.3Column.Blastila +// +.layout--blastila-left { + + > header { + @include centered-column; + } + + > div { + @include centered-column; + + // Enable the grid on md and higher. + // let everything be one column on xs and sm. + @include grid-media('md') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + @include grid-gap($gutter-md); + } + + > aside { + // First column, for 1 column, but down two columns. + @include grid-item-spans(1, 1, 1, span 2); + } + + > section { + // Row 2, column 2 for 2 cells. + @include grid-item-spans(2, span 2, 2); + } + + > div { + // Row 2, column 2 for 1 cell. + @include grid-item-spans(2, span 1, 2, span 1); + } + + div ~ div { + // Row 2, column 3 for 1 cell. + @include grid-item-spans(3, span 1, 2, span 1); + } + } + + + + +} diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/three-column/_blastila-right.scss new file mode 100644 index 000000000..8ff9c12ae --- /dev/null +++ b/core/scss/layout/three-column/_blastila-right.scss @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +// +// Blastila +// +// A complext three column layout with a centered max width header a left +// sidebar and a mini two column with header content area. +// +// .layout--blastila-left - Left sidebar version +// .layout--blastila-right - Right sidebar version +// +// Markup: ../../../../../templates/layout/three-column/blastila/blastila.twig +// +// Style guide: Layout.3Column.Blastila +// +.layout--blastila-right { + + > header { + @include centered-column; + } + + > div { + @include centered-column; + + // Enable the grid on md and higher. + // let everything be one column on xs and sm. + @include grid-media('md') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + @include grid-gap($gutter-md); + } + + > aside { + // First column, for 1 column, but down two columns. + @include grid-item-spans(3, 3, 1, span 2); + } + + > section { + // Row 2, column 2 for 2 cells. + @include grid-item-spans(1, span 2, 1); + } + + > div { + // Row 2, column 2 for 1 cell. + @include grid-item-spans(1, span 1, 2, span 1); + } + + div ~ div { + // Row 2, column 3 for 1 cell. + @include grid-item-spans(2, span 1, 2, span 1); + } + } + +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index b7afd963d..34e2b21dc 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Layout - 3 Columns +// 3 Columns // // Three column layouts // @@ -9,4 +9,6 @@ // @import 'bars', - 'battleship'; + 'battleship', + 'blastila-left', + 'blastila-right'; diff --git a/core/scss/layout/two-column/_donies.scss b/core/scss/layout/two-column/_donies.scss new file mode 100644 index 000000000..ea250e23c --- /dev/null +++ b/core/scss/layout/two-column/_donies.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +// +// Donies +// +// A two column centered 50/50 template with header and footer. +// +// Markup: ../../../../../templates/layout/two-column/donies/donies.twig +// +// Style guide: Layout.2Column.Donies +// + +.layout--donies { + + > section, + > header, + > footer { + @include centered-column; + } + + > section { + @include responsive-grid-columns($responsive-columns-two); + } + +} diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss index 5b8b28dfa..5fe8a9d36 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/two-column/index.scss @@ -1,11 +1,11 @@ @charset "UTF-8"; // -// Layout - 2 Columns +// 2 Columns // // Two column layouts // // Style guide: Layout.2Column // -// @import -// 'centered'; +@import + 'donies'; diff --git a/core/scss/utilities/mixins/grid/_display-grid.scss b/core/scss/utilities/mixins/grid/_display-grid.scss index 5563b0a5c..5eab74ca4 100644 --- a/core/scss/utilities/mixins/grid/_display-grid.scss +++ b/core/scss/utilities/mixins/grid/_display-grid.scss @@ -9,6 +9,6 @@ // @mixin display-grid { - display: -ms-grid; display: grid; + display: -ms-grid; } diff --git a/core/scss/utilities/mixins/grid/_grid-column-gap.scss b/core/scss/utilities/mixins/grid/_grid-column-gap.scss index 17e693f7f..daf1f91b5 100644 --- a/core/scss/utilities/mixins/grid/_grid-column-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-column-gap.scss @@ -10,16 +10,15 @@ @mixin grid-column-gap($gap: 30px) { > * { - margin-left: $gap / 2; - margin-right: $gap / 2; + $hgap: $gap / 2; + @include margin(null $hgap); } @supports (grid-column-gap: 20px) { grid-column-gap: $gap; > * { - margin-left: 0; - margin-right: 0; + @include margin(null 0); } } } diff --git a/core/scss/utilities/mixins/grid/_grid-gap.scss b/core/scss/utilities/mixins/grid/_grid-gap.scss new file mode 100644 index 000000000..500f9bc00 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-gap.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// @grid-gap +// +// Mixin to render cssGrid column gaps in all modern browsers, including IE11. +// +// Style guide: Mixins.Grid.grid-gap +// +@mixin grid-gap($gap: 30px) { + @include grid-column-gap($gap); + @include grid-row-gap($gap); +} diff --git a/core/scss/utilities/mixins/grid/_grid-item-spans.scss b/core/scss/utilities/mixins/grid/_grid-item-spans.scss index 665970d14..91a16c018 100644 --- a/core/scss/utilities/mixins/grid/_grid-item-spans.scss +++ b/core/scss/utilities/mixins/grid/_grid-item-spans.scss @@ -14,8 +14,8 @@ } @if ($col-end != null and $col-start != null) { - -ms-grid-column-span: $col-end - $col-start; grid-column: #{$col-start} / #{$col-end}; + -ms-grid-column-span: $col-end - $col-start; } @if ($row-start != null) { @@ -23,8 +23,8 @@ } @if ($row-end != null and $row-start != null) { - -ms-grid-row-span: $row-end - $row-start; grid-row: #{$row-start} / #{$row-end}; + -ms-grid-row-span: $row-end - $row-start; } } diff --git a/core/scss/utilities/mixins/grid/_grid-row-gap.scss b/core/scss/utilities/mixins/grid/_grid-row-gap.scss new file mode 100644 index 000000000..2d6922f58 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_grid-row-gap.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +// +// @grid-row-gap +// +// Mixin to render cssGrid column gaps in all modern browsers, including IE11. +// +// Style guide: Mixins.Grid.grid-row-gap +// +@mixin grid-row-gap($gap: 30px) { + + > * { + $hgap: $gap / 2; + @include margin($hgap null) + } + + @supports (grid-row-gap: 20px) { + grid-row-gap: $gap; + + > * { + @include margin(0 null); + } + } +} diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss index b1bfa622f..b13e50f54 100644 --- a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss @@ -9,13 +9,20 @@ // // Styleguide: Mixins.Grid.Responsive Grid Columns // -@mixin responsive-grid-columns($grid-map: $responsive-columns-default) { +@mixin responsive-grid-columns($grid-map: $responsive-columns-default, $gutters-map: $responsive-gutters-default) { @include display-grid; + // Loop through each breakpoint generating the media query and grid. @each $breakpoint, $columns in $grid-map { + + // Media Query is passed in. @media #{$breakpoint} { - // Todo: Add breakpoint sized gap. - @include grid-column-gap(map-get($responsive-gutters-default, $breakpoint)); + + // Add column and row gaps based on the responsive breakpoint sizes. + // These gaps increase as screen sizes get larger. + @include grid-gap(map-get($gutters-map, $breakpoint)); + + // Create the grid. @include grid-columns($columns); } } diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index 496184dfb..9f4f2f954 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -15,8 +15,10 @@ 'grid-classes', 'grid-column-gap', 'grid-columns', + 'grid-gap', 'grid-item-spans', 'grid-media', 'grid-media-only', + 'grid-row-gap', 'grid-rows', 'responsive-grid-columns'; diff --git a/core/templates/layout/centered-container/centered-container.twig b/core/templates/layout/centered-container/centered-container.twig index b984e31b1..3add0a7cc 100644 --- a/core/templates/layout/centered-container/centered-container.twig +++ b/core/templates/layout/centered-container/centered-container.twig @@ -16,7 +16,7 @@ * */ #} -} +}
    {% block body %} {{ content }} diff --git a/core/templates/layout/three-column/blastila/left/blastila-left.png b/core/templates/layout/three-column/blastila/blastila-left.png similarity index 100% rename from core/templates/layout/three-column/blastila/left/blastila-left.png rename to core/templates/layout/three-column/blastila/blastila-left.png diff --git a/core/templates/layout/three-column/blastila/right/blastila-right.png b/core/templates/layout/three-column/blastila/blastila-right.png similarity index 100% rename from core/templates/layout/three-column/blastila/right/blastila-right.png rename to core/templates/layout/three-column/blastila/blastila-right.png diff --git a/core/templates/layout/three-column/blastila/blastila.json b/core/templates/layout/three-column/blastila/blastila.json new file mode 100644 index 000000000..f62059bc8 --- /dev/null +++ b/core/templates/layout/three-column/blastila/blastila.json @@ -0,0 +1,7 @@ +{ + "header": "

    This is the full column header.

    ", + "sidebar": "

    Sidebar Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "first": "

    A mini heading area

    ", + "second": "

    Left content column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Right content area

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/blastila/blastila.twig b/core/templates/layout/three-column/blastila/blastila.twig new file mode 100644 index 000000000..29c72554c --- /dev/null +++ b/core/templates/layout/three-column/blastila/blastila.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Div for grid container #} +
    + + {# Sidebar #} + + + {# Mini header area #} +
    + {{ first }} +
    + + {# Left content column #} +
    + {{ second }} +
    + + {# Right content column #} +
    + {{ third }} +
    + +
    {# end grid container #} + +
    diff --git a/core/templates/layout/three-column/blastila/left/blastila-left.html.twig b/core/templates/layout/three-column/blastila/left/blastila-left.html.twig deleted file mode 100644 index 4484d9b23..000000000 --- a/core/templates/layout/three-column/blastila/left/blastila-left.html.twig +++ /dev/null @@ -1,45 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    - - -
    -
    -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    - -
    -
    -
    -
    diff --git a/core/templates/layout/three-column/blastila/left/css/blastila-left.css b/core/templates/layout/three-column/blastila/left/css/blastila-left.css deleted file mode 100644 index 186f4ddaa..000000000 --- a/core/templates/layout/three-column/blastila/left/css/blastila-left.css +++ /dev/null @@ -1,285 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--blastila--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--blastila--left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--blastila--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--blastila--left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--blastila--left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--blastila--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--left .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--left .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--left .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--left .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--left .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--left .column--third { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--left .column--third { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left .column--third { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--left .column--third { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (min-width: 768px) { - .layout--blastila--left .column--third--first { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) { - .layout--blastila--left .column--third--first { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left .column--third--first { - width: calc(100% - 120px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--left .column--third--first { - width: calc(100% - 0.5in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (min-width: 768px) { - .layout--blastila--left .column--third-second, - .layout--blastila--left .column--third-third { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) { - .layout--blastila--left .column--third-second, - .layout--blastila--left .column--third-third { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--left .column--third-second, - .layout--blastila--left .column--third-third { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--left .column--third-second, - .layout--blastila--left .column--third-third { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=blastila-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/blastila/left/scss/blastila-left.scss b/core/templates/layout/three-column/blastila/left/scss/blastila-left.scss deleted file mode 100644 index c3a6bd376..000000000 --- a/core/templates/layout/three-column/blastila/left/scss/blastila-left.scss +++ /dev/null @@ -1,75 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -$column-third: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--blastila--left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - - .column--third { - @include responsive-grid-column($column-third, $default-container); - } - - .column--third--first { - @include grid-media($media-md) { - @include grid-column(1 of 1); - } - @include grid-media($media-lg) { - @include grid-column(1 of 1); - } - @include grid-media($media-xl) { - @include grid-column(1 of 1); - } - @include grid-media($media-print) { - @include grid-column(1 of 1); - } - } - - .column--third-second, - .column--third-third { - @include grid-media($media-md) { - @include grid-column(1 of 2); - } - @include grid-media($media-lg) { - @include grid-column(1 of 2); - } - @include grid-media($media-xl) { - @include grid-column(1 of 2); - } - @include grid-media($media-print) { - @include grid-column(1 of 2); - } - } - -} diff --git a/core/templates/layout/three-column/blastila/right/blastila-right.html.twig b/core/templates/layout/three-column/blastila/right/blastila-right.html.twig deleted file mode 100644 index 7c3198014..000000000 --- a/core/templates/layout/three-column/blastila/right/blastila-right.html.twig +++ /dev/null @@ -1,46 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    - -
    -
    -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    -
    -
    - - - -
    -
    diff --git a/core/templates/layout/three-column/blastila/right/css/blastila-right.css b/core/templates/layout/three-column/blastila/right/css/blastila-right.css deleted file mode 100644 index 2f9542c30..000000000 --- a/core/templates/layout/three-column/blastila/right/css/blastila-right.css +++ /dev/null @@ -1,319 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--blastila--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--blastila--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--blastila--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--blastila--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--blastila--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--blastila--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--right .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--right .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right .column--third { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right .column--third { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right .column--third { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--right .column--third { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--right .column--third--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right .column--third--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right .column--third--first { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right .column--third--first { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right .column--third--first { - width: calc(100% - 120px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--right .column--third--first { - width: calc(100% - 0.5in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--blastila--right .column--third-second, - .layout--blastila--right .column--third-third { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=blastila-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss b/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss deleted file mode 100644 index 685789d56..000000000 --- a/core/templates/layout/three-column/blastila/right/scss/blastila-right.scss +++ /dev/null @@ -1,71 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -$column-third: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -$column-one: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 1, - 'lg': 1 of 1, - 'xl': 1 of 1, - 'print': 1 of 1 -); - -$column-fifty: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - - -.layout--blastila--right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--second { - @include responsive-grid-column($column, $default-container); - } - - .column--third { - @include responsive-grid-column($column-third, $default-container); - } - - .column--third--first { - @include responsive-grid-column($column-one, $default-container); - } - - .column--third-second, - .column--third-third { - @include responsive-grid-column($column-fifty, $default-container); - } - -} diff --git a/core/templates/layout/two-column/aiur/aiur.html.twig b/core/templates/layout/two-column/aiur/aiur.html.twig deleted file mode 100644 index 5d63bed2e..000000000 --- a/core/templates/layout/two-column/aiur/aiur.html.twig +++ /dev/null @@ -1,34 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    -
    - -
    -
    - {{ content.first }} -
    -
    - -
    - {{ content.second }} -
    - -
    -
    diff --git a/core/templates/layout/two-column/aiur/aiur.png b/core/templates/layout/two-column/aiur/aiur.png deleted file mode 100644 index f54b9b5c1fd01b2c2bb8465b3fd9f1bdcd65d29d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1074 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq*&4&eH|GXHuiJ>Nn{1`6_P!I zd>I(3)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4FdxcQ)Wm+NrbPDRdRl= zUSdjqQmS4>ZUImS1A|S46_A;mT9T+xk(-lOY*k^a1Xf`MWP^nDl@!2AO0sR0B76fB zob!uP6-@O^^bC~jxD*r=Y>HCStb$zJpxS{vTcwPWk^(Dz{qpj1y>er{{GxPyLrY6b zeFGzXBO_g)3fgm48uYDlmvZ0byroqmLm5Rd1sY3MHga zgG32f6c{IVTsHdf__gB-*WzBnz`(fP)5S3)gZ1sq^WIE>0>_`{?q0g)X_}`}W770P zb$6Vctja!ItG|B#;=$&2KF3EZ^+X%nxt4efimLuSbgK2p^FEfxPj0tXD!e(f@8`Mc z=d0KK3W>L8RI4Ge>T- VI-u}JzXX(BJzf1=);T3K0RSjLi_QQ5 diff --git a/core/templates/layout/two-column/aiur/css/aiur.css b/core/templates/layout/two-column/aiur/css/aiur.css deleted file mode 100644 index 1401b8ebc..000000000 --- a/core/templates/layout/two-column/aiur/css/aiur.css +++ /dev/null @@ -1,94 +0,0 @@ -.layout--aiur .with-floating_sidebar { - position: relative; - min-height: 600px; -} - -@media only screen and (max-width: 575px) { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--aiur #floating_sidebar__wrapper { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--aiur #floating_sidebar__wrapper::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) { - .layout--aiur #floating_sidebar__wrapper { - height: 1px; - max-height: 1px; - } -} - -.layout--aiur #floating_sidebar { - background: rgba(238, 238, 238, 0.9); - height: 100%; - min-height: 100%; -} - -@media only screen and (min-width: 768px) { - .layout--aiur #floating_sidebar { - width: grid-columns(1 of 12); - position: absolute; - top: 0px; - z-index: 50; - } -} - -/*# sourceMappingURL=aiur.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/aiur/scss/aiur.scss b/core/templates/layout/two-column/aiur/scss/aiur.scss deleted file mode 100644 index b05443b01..000000000 --- a/core/templates/layout/two-column/aiur/scss/aiur.scss +++ /dev/null @@ -1,36 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -.layout--aiur { - - .with-floating_sidebar { - position: relative; - min-height: 600px; - } - - #floating_sidebar__wrapper { - @include responsive-container($default-container); - @include grid-media($media-md) { - height: 1px; - max-height: 1px; - } - } - - #floating_sidebar { - background: rgba(238, 238, 238, 0.9); - height: 100%; - min-height: 100%; - - @include grid-media($media-md) { - width: grid-columns(1 of 12); - position: absolute; - top: 0px; - z-index: 50; - } - } -} diff --git a/core/templates/layout/two-column/donies/css/donies.css b/core/templates/layout/two-column/donies/css/donies.css deleted file mode 100644 index 2064a4f3f..000000000 --- a/core/templates/layout/two-column/donies/css/donies.css +++ /dev/null @@ -1,175 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--donies { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--donies { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--donies { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--donies { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--donies { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--donies { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--donies::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--donies .column--first, - .layout--donies .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--donies .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--donies .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--donies .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--donies .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--donies .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--donies .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--donies .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -/*# sourceMappingURL=donies.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/donies/donies.html.twig b/core/templates/layout/two-column/donies/donies.html.twig deleted file mode 100644 index 93cef8dc2..000000000 --- a/core/templates/layout/two-column/donies/donies.html.twig +++ /dev/null @@ -1,33 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - {{ content.footer }} -
    -
    diff --git a/core/templates/layout/two-column/donies/donies.json b/core/templates/layout/two-column/donies/donies.json new file mode 100644 index 000000000..835045e71 --- /dev/null +++ b/core/templates/layout/two-column/donies/donies.json @@ -0,0 +1,7 @@ +{ + "modifier_class": "layout--donies", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/two-column/donies/donies.twig b/core/templates/layout/two-column/donies/donies.twig new file mode 100644 index 000000000..febd64336 --- /dev/null +++ b/core/templates/layout/two-column/donies/donies.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional header region #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Mandatory content region #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional footer region #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/two-column/donies/scss/donies.scss b/core/templates/layout/two-column/donies/scss/donies.scss deleted file mode 100644 index c8ad0e77b..000000000 --- a/core/templates/layout/two-column/donies/scss/donies.scss +++ /dev/null @@ -1,32 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--donies { - @include responsive-container($default-container); - - .column--first, - .column--second { - @include responsive-grid-column($column, $default-container); - } - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - -} diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index c71f678be..f47964390 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -323,7 +323,6 @@ template { :root { --columns: 6; --gutter: 20px; - --offset: 20px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xs'; } } @@ -332,7 +331,6 @@ template { :root { --columns: 12; --gutter: 20px; - --offset: 20px; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'sm'; } } @@ -341,7 +339,6 @@ template { :root { --columns: 12; --gutter: 20px; - --offset: 20px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'md'; } } @@ -350,7 +347,6 @@ template { :root { --columns: 12; --gutter: 30px; - --offset: 30px; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'lg'; } } @@ -359,7 +355,6 @@ template { :root { --columns: 12; --gutter: 30px; - --offset: 30px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; } } @@ -922,6 +917,11 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } +#kssref-layout-3column-blastila .kss-modifier__heading, +#kssref-layout-3column-blastila .kss-modifier__default-name, +#kssref-layout-3column-blastila .kss-modifier__wrapper .kss-modifier__example:nth-child(3) { + display: none; } + .grid--container { margin-bottom: 20px; } @@ -1028,8 +1028,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header { border: 0; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; padding-top: 15px; } @@ -1052,8 +1052,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } #kss-node.kss-home header div { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: 1fr 11fr; grid-template-columns: 1fr 11fr; align-items: center; } @@ -1107,8 +1107,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section { padding: 60px; } #kss-node.kss-home .section--welcome { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; } #kss-node.kss-home .section--welcome > :first-child { @@ -1162,8 +1162,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--welcome h2 { margin: 0; } #kss-node.kss-home .section--ui-components { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; background: #ffffff; } @@ -1191,12 +1191,12 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--ui-components p { max-width: 55%; } #kss-node.kss-home .section--dev-resources { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; background: #f9f6ef; } @@ -1219,14 +1219,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { -ms-grid-columns: auto 1500px auto; grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--dev-resources > * { - margin-left: 15px; - margin-right: 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (grid-column-gap: 20px) { #kss-node.kss-home .section--dev-resources { grid-column-gap: 30px; } #kss-node.kss-home .section--dev-resources > * { - margin-left: 0; - margin-right: 0; } } + margin-right: 0; + margin-left: 0; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 268px 268px auto; @@ -1263,8 +1263,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources .card-2 { grid-column-start: 3; } } #kss-node.kss-home .section--more-info { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: auto 100% auto; grid-template-columns: auto 100% auto; background: #00b589; } @@ -1289,8 +1289,8 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--more-info h2 { text-align: center; } #kss-node.kss-home .section--more-info ul { - display: -ms-grid; - display: grid; } + display: grid; + display: -ms-grid; } @media only screen and (min-width: 1024px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; @@ -1306,9 +1306,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--more-info a:hover { color: #ffffff; } -.page-layout { - position: relative; } - .page-layout::before { +.layout { + position: relative; + overflow: hidden; } + .layout::before { position: absolute; top: 0; right: 0; @@ -1324,7 +1325,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { background-position: 0 var(--baseline-shift); z-index: -100; pointer-events: none; } - .page-layout::after { + .layout::after { content: var(--media-query); position: absolute; top: 4px; @@ -1338,24 +1339,22 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { border: 1px solid; border-radius: 6px; opacity: .8; } - -.region { - padding: 15px; - font-size: .9em; } - .region p { - padding: 0; - margin: 5px 0 0; } - .region--header { + .layout > * { + border: dashed 1px #2e2d29; } + .layout > header { background-color: rgba(0, 0, 139, 0.15); } - .region--footer { + .layout > footer { background-color: rgba(85, 107, 47, 0.2); } - .region--content { + .layout > section, + .layout > div, + .layout > aside { background-color: rgba(255, 165, 0, 0.25); } - .region--sidebar { + .layout div > div, + .layout div > section, + .layout section > div, + .layout div > aside, + .layout section > aside { + border: dashed 1px #2e2d29; background-color: rgba(128, 0, 0, 0.2); } - .region--sidebar-first { - background-color: rgba(128, 0, 0, 0.2); } - .region--sidebar-second { - background-color: rgba(0, 128, 0, 0.2); } /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index 4939478c0..837d1afb5 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -742,3 +742,16 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } + + +// +// Hide some default variants that aren't intendend to be used. +// + +#kssref-layout-3column-blastila { + .kss-modifier__heading, + .kss-modifier__default-name, + .kss-modifier__wrapper .kss-modifier__example:nth-child(3) { + display: none; + } +} diff --git a/kss/builder/decanter/scss/_layout-colors.scss b/kss/builder/decanter/scss/_layout-colors.scss index 6004fd59f..02c38870b 100644 --- a/kss/builder/decanter/scss/_layout-colors.scss +++ b/kss/builder/decanter/scss/_layout-colors.scss @@ -4,40 +4,35 @@ // Adds background colors to the example layouts. // -.page-layout { +.layout { @include visible-grid; -} - -.region { - padding: 15px; - font-size: .9em; + overflow: hidden; - p { - padding: 0; - margin: 5px 0 0; + > * { + border: dashed 1px $color-black; } - &--header { + > header { background-color: rgba(darkblue, .15); } - &--footer { + > footer { background-color: rgba(darkolivegreen, .2); } - &--content { + > section, + > div, + > aside { background-color: rgba(orange, .25); } - &--sidebar { + div > div, + div > section, + section > div, + div > aside, + section > aside { + border: dashed 1px $color-black; background-color: rgba(maroon, .2); - - &-first { - background-color: rgba(maroon, .2); - } - - &-second { - background-color: rgba(green, .2); - } } + } diff --git a/kss/builder/decanter/scss/_visible-grid.scss b/kss/builder/decanter/scss/_visible-grid.scss index 2235fcb28..2e703cc2c 100644 --- a/kss/builder/decanter/scss/_visible-grid.scss +++ b/kss/builder/decanter/scss/_visible-grid.scss @@ -72,7 +72,7 @@ :root { --columns: #{$columns-xs}; --gutter: #{$gutter-xs}; - --offset: #{$gutter-xs}; + // --offset: #{$gutter-xs}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xs'; @@ -83,7 +83,7 @@ :root { --columns: #{$columns-sm}; --gutter: #{$gutter-sm}; - --offset: #{$gutter-sm}; + // --offset: #{$gutter-sm}; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'sm'; @@ -94,7 +94,7 @@ :root { --columns: #{$columns-md}; --gutter: #{$gutter-md}; - --offset: #{$gutter-md}; + // --offset: #{$gutter-md}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'md'; @@ -105,7 +105,7 @@ :root { --columns: #{$columns-lg}; --gutter: #{$gutter-lg}; - --offset: #{$gutter-lg}; + // --offset: #{$gutter-lg}; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'lg'; @@ -116,7 +116,7 @@ :root { --columns: #{$columns-xl}; --gutter: #{$gutter-xl}; - --offset: #{$gutter-xl}; + // --offset: #{$gutter-xl}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; From 2dc79b0bb74fe616895f23ee1a22f2a243ab212c Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 22:50:25 -0800 Subject: [PATCH 020/123] Layout - Frogger. --- core/css/decanter.css | 310 ++++++++++++------ .../layout/three-column/_blastila-right.scss | 27 +- .../{_blastila-left.scss => _blastila.scss} | 5 +- core/scss/layout/three-column/index.scss | 2 +- core/scss/layout/two-column/_frogger.scss | 26 ++ core/scss/layout/two-column/index.scss | 3 +- .../three-column/blastila/blastila.twig | 2 +- .../layout/two-column/frogger/css/frogger.css | 175 ---------- .../two-column/frogger/frogger.html.twig | 45 --- .../layout/two-column/frogger/frogger.json | 10 + .../layout/two-column/frogger/frogger.twig | 64 ++++ .../two-column/frogger/scss/frogger.scss | 32 -- kss/builder/decanter/kss-assets/css/kss.css | 5 - kss/builder/decanter/scss/_builder.scss | 13 - 14 files changed, 310 insertions(+), 409 deletions(-) rename core/scss/layout/three-column/{_blastila-left.scss => _blastila.scss} (89%) create mode 100644 core/scss/layout/two-column/_frogger.scss delete mode 100644 core/templates/layout/two-column/frogger/css/frogger.css delete mode 100644 core/templates/layout/two-column/frogger/frogger.html.twig create mode 100644 core/templates/layout/two-column/frogger/frogger.json create mode 100644 core/templates/layout/two-column/frogger/frogger.twig delete mode 100644 core/templates/layout/two-column/frogger/scss/frogger.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index e068e64c8..1b440a518 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1517,85 +1517,85 @@ dfn { grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; } -.layout--blastila-left > header { +.layout-blastila > header { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--blastila-left > header { + .layout-blastila > header { max-width: 100%; } } @media only screen and (min-width: 576px) { - .layout--blastila-left > header { + .layout-blastila > header { max-width: 576px; } } @media only screen and (min-width: 768px) { - .layout--blastila-left > header { + .layout-blastila > header { max-width: 768px; } } @media only screen and (min-width: 1024px) { - .layout--blastila-left > header { + .layout-blastila > header { max-width: 1024px; } } @media only screen and (min-width: 1500px) { - .layout--blastila-left > header { + .layout-blastila > header { max-width: 1500px; } } -.layout--blastila-left > div { +.layout-blastila > div { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--blastila-left > div { + .layout-blastila > div { max-width: 100%; } } @media only screen and (min-width: 576px) { - .layout--blastila-left > div { + .layout-blastila > div { max-width: 576px; } } @media only screen and (min-width: 768px) { - .layout--blastila-left > div { + .layout-blastila > div { max-width: 768px; } } @media only screen and (min-width: 1024px) { - .layout--blastila-left > div { + .layout-blastila > div { max-width: 1024px; } } @media only screen and (min-width: 1500px) { - .layout--blastila-left > div { + .layout-blastila > div { max-width: 1500px; } } @media only screen and (min-width: 768px) { - .layout--blastila-left > div { + .layout-blastila > div { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--blastila-left > div > * { + .layout-blastila > div > * { margin-right: 10px; margin-left: 10px; } @supports (grid-column-gap: 20px) { - .layout--blastila-left > div { + .layout-blastila > div { grid-column-gap: 20px; } - .layout--blastila-left > div > * { + .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } - .layout--blastila-left > div > * { + .layout-blastila > div > * { margin-top: 10px; margin-bottom: 10px; } @supports (grid-row-gap: 20px) { - .layout--blastila-left > div { + .layout-blastila > div { grid-row-gap: 20px; } - .layout--blastila-left > div > * { + .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } - .layout--blastila-left > div > aside { + .layout-blastila > div > aside { -ms-grid-column: 1; grid-column: 1 / 1; -ms-grid-column-span: 0; -ms-grid-row: 1; grid-row: 1 / span 2; -ms-grid-row-span: span 2-1; } - .layout--blastila-left > div > section { + .layout-blastila > div > section { -ms-grid-column: 2; grid-column: 2 / span 2; -ms-grid-column-span: span 2-2; -ms-grid-row: 2; } - .layout--blastila-left > div > div { + .layout-blastila > div > div { -ms-grid-column: 2; grid-column: 2 / span 1; -ms-grid-column-span: span 1-2; -ms-grid-row: 2; grid-row: 2 / span 1; -ms-grid-row-span: span 1-2; } - .layout--blastila-left > div div ~ div { + .layout-blastila > div div ~ div { -ms-grid-column: 3; grid-column: 3 / span 1; -ms-grid-column-span: span 1-3; @@ -1603,91 +1603,35 @@ dfn { grid-row: 2 / span 1; -ms-grid-row-span: span 1-2; } -.layout--blastila-right > header { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout--blastila-right > header { - max-width: 100%; } } - @media only screen and (min-width: 576px) { - .layout--blastila-right > header { - max-width: 576px; } } - @media only screen and (min-width: 768px) { - .layout--blastila-right > header { - max-width: 768px; } } - @media only screen and (min-width: 1024px) { - .layout--blastila-right > header { - max-width: 1024px; } } - @media only screen and (min-width: 1500px) { - .layout--blastila-right > header { - max-width: 1500px; } } - -.layout--blastila-right > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout--blastila-right > div { - max-width: 100%; } } - @media only screen and (min-width: 576px) { - .layout--blastila-right > div { - max-width: 576px; } } - @media only screen and (min-width: 768px) { - .layout--blastila-right > div { - max-width: 768px; } } - @media only screen and (min-width: 1024px) { - .layout--blastila-right > div { - max-width: 1024px; } } - @media only screen and (min-width: 1500px) { - .layout--blastila-right > div { - max-width: 1500px; } } - @media only screen and (min-width: 768px) { - .layout--blastila-right > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout--blastila-right > div > * { - margin-right: 10px; - margin-left: 10px; } - @supports (grid-column-gap: 20px) { - .layout--blastila-right > div { - grid-column-gap: 20px; } - .layout--blastila-right > div > * { - margin-right: 0; - margin-left: 0; } } - .layout--blastila-right > div > * { - margin-top: 10px; - margin-bottom: 10px; } - @supports (grid-row-gap: 20px) { - .layout--blastila-right > div { - grid-row-gap: 20px; } - .layout--blastila-right > div > * { - margin-top: 0; - margin-bottom: 0; } } } - .layout--blastila-right > div > aside { - -ms-grid-column: 3; - grid-column: 3 / 3; - -ms-grid-column-span: 0; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: span 2-1; } - .layout--blastila-right > div > section { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; - -ms-grid-row: 1; } - .layout--blastila-right > div > div { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } - .layout--blastila-right > div div ~ div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: span 1-2; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } +.layout-blastila--right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / 3; + -ms-grid-column-span: 0; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: span 2-1; } + +.layout-blastila--right > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; + -ms-grid-row: 1; } + +.layout-blastila--right > div > div { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout-blastila--right > div div ~ div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: span 1-2; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } .layout--donies > section, .layout--donies > header, @@ -1833,6 +1777,156 @@ dfn { margin-top: 0; margin-bottom: 0; } } } +.layout--frogger > div, +.layout--frogger > section, +.layout--frogger > header, +.layout--frogger > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 1500px; } } + +.layout--frogger > section { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout--frogger > section { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--frogger > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 20px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 20px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--frogger > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--frogger > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 20px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 20px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--frogger > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--frogger > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 20px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 20px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--frogger > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--frogger > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 30px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 30px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--frogger > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--frogger > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 30px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 30px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + .layout--basic > header, .layout--basic > section, .layout--basic > footer { diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/three-column/_blastila-right.scss index 8ff9c12ae..ca181547c 100644 --- a/core/scss/layout/three-column/_blastila-right.scss +++ b/core/scss/layout/three-column/_blastila-right.scss @@ -1,34 +1,11 @@ @charset "UTF-8"; // -// Blastila +// Blastila Right - Variant // -// A complext three column layout with a centered max width header a left -// sidebar and a mini two column with header content area. -// -// .layout--blastila-left - Left sidebar version -// .layout--blastila-right - Right sidebar version -// -// Markup: ../../../../../templates/layout/three-column/blastila/blastila.twig -// -// Style guide: Layout.3Column.Blastila -// -.layout--blastila-right { - - > header { - @include centered-column; - } +.layout-blastila--right { > div { - @include centered-column; - - // Enable the grid on md and higher. - // let everything be one column on xs and sm. - @include grid-media('md') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - @include grid-gap($gutter-md); - } > aside { // First column, for 1 column, but down two columns. diff --git a/core/scss/layout/three-column/_blastila-left.scss b/core/scss/layout/three-column/_blastila.scss similarity index 89% rename from core/scss/layout/three-column/_blastila-left.scss rename to core/scss/layout/three-column/_blastila.scss index d2a4aba13..ace66d3b1 100644 --- a/core/scss/layout/three-column/_blastila-left.scss +++ b/core/scss/layout/three-column/_blastila.scss @@ -6,14 +6,13 @@ // A complext three column layout with a centered max width header a left // sidebar and a mini two column with header content area. // -// .layout--blastila-left - Left sidebar version -// .layout--blastila-right - Right sidebar version +// .layout-blastila--right - Right sidebar version // // Markup: ../../../../../templates/layout/three-column/blastila/blastila.twig // // Style guide: Layout.3Column.Blastila // -.layout--blastila-left { +.layout-blastila { > header { @include centered-column; diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 34e2b21dc..a289aa2f9 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -10,5 +10,5 @@ @import 'bars', 'battleship', - 'blastila-left', + 'blastila', 'blastila-right'; diff --git a/core/scss/layout/two-column/_frogger.scss b/core/scss/layout/two-column/_frogger.scss new file mode 100644 index 000000000..663ebd3ee --- /dev/null +++ b/core/scss/layout/two-column/_frogger.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +// +// Frogger +// +// A two column centered 50/50 template with header and footer repeated. +// +// Markup: ../../../../../templates/layout/two-column/frogger/frogger.twig +// +// Style guide: Layout.2Column.Frogger +// + +.layout--frogger { + + > div, + > section, + > header, + > footer { + @include centered-column; + } + + > section { + @include responsive-grid-columns($responsive-columns-two); + } + +} diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss index 5fe8a9d36..7209acc53 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/two-column/index.scss @@ -8,4 +8,5 @@ // Style guide: Layout.2Column // @import - 'donies'; + 'donies', + 'frogger'; diff --git a/core/templates/layout/three-column/blastila/blastila.twig b/core/templates/layout/three-column/blastila/blastila.twig index 29c72554c..6451193b1 100644 --- a/core/templates/layout/three-column/blastila/blastila.twig +++ b/core/templates/layout/three-column/blastila/blastila.twig @@ -14,7 +14,7 @@ * */ #} - + {% if header is not empty %}
    diff --git a/core/templates/layout/two-column/frogger/css/frogger.css b/core/templates/layout/two-column/frogger/css/frogger.css deleted file mode 100644 index 636a47a0f..000000000 --- a/core/templates/layout/two-column/frogger/css/frogger.css +++ /dev/null @@ -1,175 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--frogger { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--frogger { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--frogger { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--frogger { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--frogger { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--frogger { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--frogger::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--frogger .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--frogger .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--frogger .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--frogger .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--frogger .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--frogger .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--frogger .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--frogger .column--first, - .layout--frogger .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=frogger.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/frogger/frogger.html.twig b/core/templates/layout/two-column/frogger/frogger.html.twig deleted file mode 100644 index 83202c5a2..000000000 --- a/core/templates/layout/two-column/frogger/frogger.html.twig +++ /dev/null @@ -1,45 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - {{ content.middle }} -
    -
    -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    -
    -
    - {{ content.footer }} -
    -
    diff --git a/core/templates/layout/two-column/frogger/frogger.json b/core/templates/layout/two-column/frogger/frogger.json new file mode 100644 index 000000000..f60164a06 --- /dev/null +++ b/core/templates/layout/two-column/frogger/frogger.json @@ -0,0 +1,10 @@ +{ + "modifier_class": "layout--frogger", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "middle": "

    Optional Middle content can go here

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/two-column/frogger/frogger.twig b/core/templates/layout/two-column/frogger/frogger.twig new file mode 100644 index 000000000..4bde6471f --- /dev/null +++ b/core/templates/layout/two-column/frogger/frogger.twig @@ -0,0 +1,64 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional centered container #} + {% if middle is not empty %} +
    + {{ middle }} +
    + {% endif %} + + {# Optional third row #} + {% if third is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + +{# end layout wrapper #} diff --git a/core/templates/layout/two-column/frogger/scss/frogger.scss b/core/templates/layout/two-column/frogger/scss/frogger.scss deleted file mode 100644 index 03bfbee38..000000000 --- a/core/templates/layout/two-column/frogger/scss/frogger.scss +++ /dev/null @@ -1,32 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--frogger { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first, - .column--second { - @include responsive-grid-column($column, $default-container); - } - -} diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index f47964390..96181a174 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -917,11 +917,6 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } -#kssref-layout-3column-blastila .kss-modifier__heading, -#kssref-layout-3column-blastila .kss-modifier__default-name, -#kssref-layout-3column-blastila .kss-modifier__wrapper .kss-modifier__example:nth-child(3) { - display: none; } - .grid--container { margin-bottom: 20px; } diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index 837d1afb5..4939478c0 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -742,16 +742,3 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } - - -// -// Hide some default variants that aren't intendend to be used. -// - -#kssref-layout-3column-blastila { - .kss-modifier__heading, - .kss-modifier__default-name, - .kss-modifier__wrapper .kss-modifier__example:nth-child(3) { - display: none; - } -} From 3433c3cc41a9bb4293d1c60639e3813f21be5353 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 23:11:19 -0800 Subject: [PATCH 021/123] Layout - Pacman. --- core/css/decanter.css | 169 ++++++++++++++ core/scss/layout/four-column/index.scss | 2 +- core/scss/layout/one-column/index.scss | 2 +- core/scss/layout/three-column/index.scss | 2 +- .../scss/layout/two-column/_pacman-right.scss | 22 ++ core/scss/layout/two-column/_pacman.scss | 48 ++++ core/scss/layout/two-column/index.scss | 6 +- .../pacman/left/css/pacman-left.css | 217 ------------------ .../pacman/left/pacman-left.html.twig | 33 --- .../pacman/left/scss/pacman-left.scss | 44 ---- .../pacman/{left => }/pacman-left.png | Bin .../pacman/{right => }/pacman-right.png | Bin .../layout/two-column/pacman/pacman.json | 6 + .../layout/two-column/pacman/pacman.twig | 42 ++++ .../pacman/right/css/pacman-right.css | 217 ------------------ .../pacman/right/pacman-right.html.twig | 36 --- .../pacman/right/scss/pacman-right.scss | 46 ---- .../page-layout--left-sidebar.json | 13 -- .../page-layout--left-sidebar.twig | 16 -- .../page-layout--right-sidebar.json | 13 -- .../page-layout--right-sidebar.twig | 16 -- 21 files changed, 294 insertions(+), 656 deletions(-) create mode 100644 core/scss/layout/two-column/_pacman-right.scss create mode 100644 core/scss/layout/two-column/_pacman.scss delete mode 100644 core/templates/layout/two-column/pacman/left/css/pacman-left.css delete mode 100644 core/templates/layout/two-column/pacman/left/pacman-left.html.twig delete mode 100644 core/templates/layout/two-column/pacman/left/scss/pacman-left.scss rename core/templates/layout/two-column/pacman/{left => }/pacman-left.png (100%) rename core/templates/layout/two-column/pacman/{right => }/pacman-right.png (100%) create mode 100644 core/templates/layout/two-column/pacman/pacman.json create mode 100644 core/templates/layout/two-column/pacman/pacman.twig delete mode 100644 core/templates/layout/two-column/pacman/right/css/pacman-right.css delete mode 100644 core/templates/layout/two-column/pacman/right/pacman-right.html.twig delete mode 100644 core/templates/layout/two-column/pacman/right/scss/pacman-right.scss delete mode 100644 core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json delete mode 100644 core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig delete mode 100644 core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json delete mode 100644 core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig diff --git a/core/css/decanter.css b/core/css/decanter.css index 1b440a518..ee24f52e7 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1927,6 +1927,175 @@ dfn { margin-top: 0; margin-bottom: 0; } } } +.layout-pacman > div, +.layout-pacman > header, +.layout-pacman > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 1500px; } } + +.layout-pacman > div { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-pacman > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-pacman > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 20px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 20px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-pacman > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-pacman > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 20px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 20px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-pacman > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-pacman > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 20px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 20px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-pacman > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-pacman > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 30px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 30px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-pacman > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-pacman > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 30px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 30px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-pacman > div aside { + -ms-grid-column: 1; + grid-column: 1 / 1; + -ms-grid-column-span: 0; } } + @media only screen and (min-width: 576px) { + .layout-pacman > div section { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +@media only screen and (min-width: 576px) { + .layout-pacman--right > div aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; } } + +@media only screen and (min-width: 576px) { + .layout-pacman--right > div section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } } + .layout--basic > header, .layout--basic > section, .layout--basic > footer { diff --git a/core/scss/layout/four-column/index.scss b/core/scss/layout/four-column/index.scss index 5f817f8f0..3375b562d 100644 --- a/core/scss/layout/four-column/index.scss +++ b/core/scss/layout/four-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// 4 Columns +// Four Columns // // Four column layouts // diff --git a/core/scss/layout/one-column/index.scss b/core/scss/layout/one-column/index.scss index 6ec411097..19ca274d2 100644 --- a/core/scss/layout/one-column/index.scss +++ b/core/scss/layout/one-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// 1 Columns +// One Columns // // One column layouts // diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index a289aa2f9..5ae8cc55f 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// 3 Columns +// Three Columns // // Three column layouts // diff --git a/core/scss/layout/two-column/_pacman-right.scss b/core/scss/layout/two-column/_pacman-right.scss new file mode 100644 index 000000000..8d440be0f --- /dev/null +++ b/core/scss/layout/two-column/_pacman-right.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +// Right side variant. +.layout-pacman--right { + + > div { + + aside { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + } + + section { + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + } + } + + } + +} diff --git a/core/scss/layout/two-column/_pacman.scss b/core/scss/layout/two-column/_pacman.scss new file mode 100644 index 000000000..40bc61730 --- /dev/null +++ b/core/scss/layout/two-column/_pacman.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +// +// PacMan +// +// A two column centered 33/66 template with header and footer. +// +// .layout-pacman--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/two-column/pacman/pacman.twig +// +// Style guide: Layout.2Column.Pacman +// + +$_layout-pacman-columns: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr +); + +.layout-pacman { + + > div, + > header, + > footer { + @include centered-column; + } + + > div { + @include responsive-grid-columns($_layout-pacman-columns); + + aside { + @include grid-media('sm') { + @include grid-item-spans(1, 1); + } + } + + section { + @include grid-media('sm') { + @include grid-item-spans(2, span 2, 1, 1); + } + } + + } + +} diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss index 7209acc53..026879a7e 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/two-column/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// 2 Columns +// Two Columns // // Two column layouts // @@ -9,4 +9,6 @@ // @import 'donies', - 'frogger'; + 'frogger', + 'pacman', + 'pacman-right'; diff --git a/core/templates/layout/two-column/pacman/left/css/pacman-left.css b/core/templates/layout/two-column/pacman/left/css/pacman-left.css deleted file mode 100644 index 4182a3c3c..000000000 --- a/core/templates/layout/two-column/pacman/left/css/pacman-left.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--pacman--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--pacman--left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--pacman--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--pacman--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--pacman--left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--pacman--left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--pacman--left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--left .column--first { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--left .column--first { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--pacman--left .column--first { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--pacman--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--left .column--second { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--left .column--second { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--pacman--left .column--second { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=pacman-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/pacman/left/pacman-left.html.twig b/core/templates/layout/two-column/pacman/left/pacman-left.html.twig deleted file mode 100644 index a78fddac2..000000000 --- a/core/templates/layout/two-column/pacman/left/pacman-left.html.twig +++ /dev/null @@ -1,33 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - {{ content.footer }} -
    -
    diff --git a/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss b/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss deleted file mode 100644 index 085f5f9d6..000000000 --- a/core/templates/layout/two-column/pacman/left/scss/pacman-left.scss +++ /dev/null @@ -1,44 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--pacman--left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } -} diff --git a/core/templates/layout/two-column/pacman/left/pacman-left.png b/core/templates/layout/two-column/pacman/pacman-left.png similarity index 100% rename from core/templates/layout/two-column/pacman/left/pacman-left.png rename to core/templates/layout/two-column/pacman/pacman-left.png diff --git a/core/templates/layout/two-column/pacman/right/pacman-right.png b/core/templates/layout/two-column/pacman/pacman-right.png similarity index 100% rename from core/templates/layout/two-column/pacman/right/pacman-right.png rename to core/templates/layout/two-column/pacman/pacman-right.png diff --git a/core/templates/layout/two-column/pacman/pacman.json b/core/templates/layout/two-column/pacman/pacman.json new file mode 100644 index 000000000..26477b6e3 --- /dev/null +++ b/core/templates/layout/two-column/pacman/pacman.json @@ -0,0 +1,6 @@ +{ + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/two-column/pacman/pacman.twig b/core/templates/layout/two-column/pacman/pacman.twig new file mode 100644 index 000000000..11fef385e --- /dev/null +++ b/core/templates/layout/two-column/pacman/pacman.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    + + +
    + {{ content }} +
    +
    + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/two-column/pacman/right/css/pacman-right.css b/core/templates/layout/two-column/pacman/right/css/pacman-right.css deleted file mode 100644 index 9c2ddff06..000000000 --- a/core/templates/layout/two-column/pacman/right/css/pacman-right.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--pacman--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--pacman--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--pacman--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--pacman--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--pacman--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--pacman--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--pacman--right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--right .column--first { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--right .column--first { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--pacman--right .column--first { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--pacman--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--pacman--right .column--second { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--pacman--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--pacman--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--pacman--right .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--pacman--right .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=pacman-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/pacman/right/pacman-right.html.twig b/core/templates/layout/two-column/pacman/right/pacman-right.html.twig deleted file mode 100644 index b93aa2cfc..000000000 --- a/core/templates/layout/two-column/pacman/right/pacman-right.html.twig +++ /dev/null @@ -1,36 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    - -
    - {{ content.footer }} -
    - -
    diff --git a/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss b/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss deleted file mode 100644 index 585a87e9a..000000000 --- a/core/templates/layout/two-column/pacman/right/scss/pacman-right.scss +++ /dev/null @@ -1,46 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - - -.layout--pacman--right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - -} diff --git a/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json b/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json deleted file mode 100644 index 5e1e1067f..000000000 --- a/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "header_content": - "Site Header

    This is the site header.

    ", - - "main_content": - "Main Content

    This is the main content area.

    ", - - "first_sidebar_content": - "Sidebar

    This is the only sidebar in a left sidebar layout.", - - "footer_content": - "Site Footer

    This is the site footer.

    " -} diff --git a/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig b/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig deleted file mode 100644 index 3c5e522fd..000000000 --- a/core/templates/layout/two-column/page-layout--left-sidebar/page-layout--left-sidebar.twig +++ /dev/null @@ -1,16 +0,0 @@ -
    - {{ header_content }} -
    - -
    -
    - {{ main_content }} -
    - -
    - -
    - {{ footer_content }} -
    diff --git a/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json b/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json deleted file mode 100644 index e8cae7708..000000000 --- a/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "header_content": - "Site Header

    This is the site header.

    ", - - "main_content": - "Main Content

    This is the main content area.

    ", - - "first_sidebar_content": - "Sidebar

    This is the only sidebar in a right sidebar layout.", - - "footer_content": - "Site Footer

    This is the site footer.

    " -} diff --git a/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig b/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig deleted file mode 100644 index 18dbfa6bb..000000000 --- a/core/templates/layout/two-column/page-layout--right-sidebar/page-layout--right-sidebar.twig +++ /dev/null @@ -1,16 +0,0 @@ -
    - {{ header_content }} -
    - -
    -
    - {{ main_content }} -
    - -
    - -
    - {{ footer_content }} -
    From aa4066e9f2014888cec4e693260ebe3eb81b6f3e Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 8 Nov 2018 23:45:34 -0800 Subject: [PATCH 022/123] Layout - Plakes. --- core/css/decanter.css | 187 +++++++++++++ .../scss/layout/two-column/_plakes-right.scss | 28 ++ core/scss/layout/two-column/_plakes.scss | 48 ++++ core/scss/layout/two-column/index.scss | 4 +- .../centered-container.twig | 2 +- .../plakes/left/css/plakes-left.css | 251 ------------------ .../plakes/left/plakes-left.html.twig | 30 --- .../plakes/left/scss/plakes-left.scss | 57 ---- .../plakes/{left => }/plakes-left.png | Bin .../plakes/{right => }/plakes-right.png | Bin .../layout/two-column/plakes/plakes.json | 5 + .../plakes-right.html.twig => plakes.twig} | 28 +- .../plakes/right/css/plakes-right.css | 217 --------------- .../plakes/right/scss/plakes-right.scss | 45 ---- 14 files changed, 290 insertions(+), 612 deletions(-) create mode 100644 core/scss/layout/two-column/_plakes-right.scss create mode 100644 core/scss/layout/two-column/_plakes.scss delete mode 100644 core/templates/layout/two-column/plakes/left/css/plakes-left.css delete mode 100644 core/templates/layout/two-column/plakes/left/plakes-left.html.twig delete mode 100644 core/templates/layout/two-column/plakes/left/scss/plakes-left.scss rename core/templates/layout/two-column/plakes/{left => }/plakes-left.png (100%) rename core/templates/layout/two-column/plakes/{right => }/plakes-right.png (100%) create mode 100644 core/templates/layout/two-column/plakes/plakes.json rename core/templates/layout/two-column/plakes/{right/plakes-right.html.twig => plakes.twig} (60%) delete mode 100644 core/templates/layout/two-column/plakes/right/css/plakes-right.css delete mode 100644 core/templates/layout/two-column/plakes/right/scss/plakes-right.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index ee24f52e7..0017321a6 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2096,6 +2096,193 @@ dfn { grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; } } +.layout-plakes > div, +.layout-plakes > header, +.layout-plakes > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 1500px; } } + +.layout-plakes > div { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-plakes > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-plakes > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 20px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 20px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-plakes > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-plakes > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 20px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 20px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-plakes > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-plakes > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 20px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 20px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-plakes > div { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-plakes > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 30px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 30px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-plakes > div { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-plakes > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 30px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 30px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-plakes > div aside { + -ms-grid-column: 1; + grid-column: 1 / 1; + -ms-grid-column-span: 0; } } + @media only screen and (min-width: 576px) { + .layout-plakes > div section { + -ms-grid-column: 2; + grid-column: 2 / span 3; + -ms-grid-column-span: span 3-2; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +@media only screen and (min-width: 576px) { + .layout-plakes--right > div aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; } } + +@media only screen and (min-width: 1024px) { + .layout-plakes--right > div aside { + -ms-grid-column: 4; + grid-column: 4 / span 1; + -ms-grid-column-span: span 1-4; } } + +@media only screen and (min-width: 576px) { + .layout-plakes--right > div section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +@media only screen and (min-width: 1024px) { + .layout-plakes--right > div section { + -ms-grid-column: 1; + grid-column: 1 / span 3; + -ms-grid-column-span: span 3-1; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + .layout--basic > header, .layout--basic > section, .layout--basic > footer { diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/two-column/_plakes-right.scss new file mode 100644 index 000000000..981317677 --- /dev/null +++ b/core/scss/layout/two-column/_plakes-right.scss @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +// Right side variant. +.layout-plakes--right { + + > div { + + aside { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + @include grid-media('lg') { + @include grid-item-spans(4, span 1); + } + } + + section { + @include grid-media('sm') { + @include grid-item-spans(1, span 2, 1, 1); + } + @include grid-media('lg') { + @include grid-item-spans(1, span 3, 1, 1); + } + } + + } + +} diff --git a/core/scss/layout/two-column/_plakes.scss b/core/scss/layout/two-column/_plakes.scss new file mode 100644 index 000000000..1248b6bc2 --- /dev/null +++ b/core/scss/layout/two-column/_plakes.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +// +// Plakes +// +// A two column centered 25/75 template with header +// +// .layout-plakes--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/two-column/plakes/plakes.twig +// +// Style guide: Layout.2Column.Plakes +// + +$_layout-plakes-columns: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr +); + +.layout-plakes { + + > div, + > header, + > footer { + @include centered-column; + } + + > div { + @include responsive-grid-columns($_layout-plakes-columns); + + aside { + @include grid-media('sm') { + @include grid-item-spans(1, 1); + } + } + + section { + @include grid-media('sm') { + @include grid-item-spans(2, span 3, 1, 1); + } + } + + } + +} diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss index 026879a7e..be7d9a418 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/two-column/index.scss @@ -11,4 +11,6 @@ 'donies', 'frogger', 'pacman', - 'pacman-right'; + 'pacman-right', + 'plakes', + 'plakes-right'; diff --git a/core/templates/layout/centered-container/centered-container.twig b/core/templates/layout/centered-container/centered-container.twig index 3add0a7cc..d3fd8dca3 100644 --- a/core/templates/layout/centered-container/centered-container.twig +++ b/core/templates/layout/centered-container/centered-container.twig @@ -16,7 +16,7 @@ * */ #} -} +
    {% block body %} {{ content }} diff --git a/core/templates/layout/two-column/plakes/left/css/plakes-left.css b/core/templates/layout/two-column/plakes/left/css/plakes-left.css deleted file mode 100644 index 84e000e2c..000000000 --- a/core/templates/layout/two-column/plakes/left/css/plakes-left.css +++ /dev/null @@ -1,251 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--plakes--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--plakes--left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--plakes--left::after { - clear: both; - content: ""; - display: block; - } -} - -.layout--plakes--left section { - display: flex; - flex-flow: row wrap; - justify-content: "flex-start"; - align-items: flex-start; - align-content: center; - box-sizing: border-box; -} - -.layout--plakes--left section > * { - flex: 0 0 auto; - box-sizing: inherit; -} - -@media only screen and (max-width: 575px) { - .layout--plakes--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--plakes--left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--plakes--left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -.layout--plakes--left .column--first { - order: 10; -} - -@media only screen and (max-width: 575px) { - .layout--plakes--left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--left .column--first { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--left .column--first { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--plakes--left .column--first { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (min-width: 576px) { - .layout--plakes--left .column--first { - order: 1; - } -} - -.layout--plakes--left .column--second { - order: 1; -} - -@media only screen and (max-width: 575px) { - .layout--plakes--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--left .column--second { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--left .column--second { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--plakes--left .column--second { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (min-width: 576px) { - .layout--plakes--left .column--second { - order: 10; - } -} - -/*# sourceMappingURL=plakes-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/plakes/left/plakes-left.html.twig b/core/templates/layout/two-column/plakes/left/plakes-left.html.twig deleted file mode 100644 index 1e46f6845..000000000 --- a/core/templates/layout/two-column/plakes/left/plakes-left.html.twig +++ /dev/null @@ -1,30 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    diff --git a/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss b/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss deleted file mode 100644 index 21de56739..000000000 --- a/core/templates/layout/two-column/plakes/left/scss/plakes-left.scss +++ /dev/null @@ -1,57 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--plakes--left { - @include responsive-container($default-container); - - section { - @include flex-container(('justify-content': 'flex-start')); - } - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first { - order: 10; - @include responsive-grid-column($column-first, $default-container); - @include grid-media($media-sm) { - order: 1; - } - } - - .column--second { - order: 1; - @include responsive-grid-column($column-second, $default-container); - @include grid-media($media-sm) { - order: 10; - } - } - -} diff --git a/core/templates/layout/two-column/plakes/left/plakes-left.png b/core/templates/layout/two-column/plakes/plakes-left.png similarity index 100% rename from core/templates/layout/two-column/plakes/left/plakes-left.png rename to core/templates/layout/two-column/plakes/plakes-left.png diff --git a/core/templates/layout/two-column/plakes/right/plakes-right.png b/core/templates/layout/two-column/plakes/plakes-right.png similarity index 100% rename from core/templates/layout/two-column/plakes/right/plakes-right.png rename to core/templates/layout/two-column/plakes/plakes-right.png diff --git a/core/templates/layout/two-column/plakes/plakes.json b/core/templates/layout/two-column/plakes/plakes.json new file mode 100644 index 000000000..585039eed --- /dev/null +++ b/core/templates/layout/two-column/plakes/plakes.json @@ -0,0 +1,5 @@ +{ + "header": "

    This is the header region

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/plakes/right/plakes-right.html.twig b/core/templates/layout/two-column/plakes/plakes.twig similarity index 60% rename from core/templates/layout/two-column/plakes/right/plakes-right.html.twig rename to core/templates/layout/two-column/plakes/plakes.twig index a67a925d2..e9cf6b817 100644 --- a/core/templates/layout/two-column/plakes/right/plakes-right.html.twig +++ b/core/templates/layout/two-column/plakes/plakes.twig @@ -14,17 +14,25 @@ * - $content['second']: Content in the right column. */ #} -
    + + {# Optional Header #} + {% if header is not empty %}
    - {{ content.header }} + {{ header }}
    -
    -
    - {{ content.first }} -
    + {% endif %} + + {# Grid Container #} +
    + {# Manditory sidebar #} + + + {# Manditory content #} +
    + {{ content }} +
    +
    -
    - {{ content.second }} -
    -
    diff --git a/core/templates/layout/two-column/plakes/right/css/plakes-right.css b/core/templates/layout/two-column/plakes/right/css/plakes-right.css deleted file mode 100644 index c26a66723..000000000 --- a/core/templates/layout/two-column/plakes/right/css/plakes-right.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--plakes--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--plakes--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--plakes--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--plakes--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--plakes--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--plakes--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--plakes--right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--right .column--first { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--right .column--first { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--plakes--right .column--first { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--plakes--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--plakes--right .column--second { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--plakes--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--plakes--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--plakes--right .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--plakes--right .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=plakes-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss b/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss deleted file mode 100644 index bf8141ca8..000000000 --- a/core/templates/layout/two-column/plakes/right/scss/plakes-right.scss +++ /dev/null @@ -1,45 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--plakes--right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - -} From 40dbd8d57680478f5f23ebd0dd04e25dffbad9fb Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 00:21:59 -0800 Subject: [PATCH 023/123] Layout - Wedge. --- core/css/decanter.css | 452 ++++++++++++++++++ core/scss/layout/two-column/_toucan.scss | 18 + .../scss/layout/two-column/_trunks-right.scss | 20 + core/scss/layout/two-column/_trunks.scss | 43 ++ core/scss/layout/two-column/_wedge-right.scss | 26 + core/scss/layout/two-column/_wedge.scss | 43 ++ core/scss/layout/two-column/index.scss | 7 +- .../layout/two-column/plakes/plakes.twig | 10 +- .../layout/two-column/toucan/css/toucan.css | 175 ------- .../layout/two-column/toucan/scss/toucan.scss | 32 -- .../layout/two-column/toucan/toucan.html.twig | 11 - .../layout/two-column/toucan/toucan.json | 5 + .../layout/two-column/toucan/toucan.twig | 23 + .../trunks/left/css/trunks-left.css | 217 --------- .../trunks/left/scss/trunks-left.scss | 45 -- .../trunks/left/trunks-left.html.twig | 27 -- .../trunks/right/css/trunks-right.css | 217 --------- .../trunks/right/scss/trunks-right.scss | 43 -- .../trunks/right/trunks-right.html.twig | 27 -- .../trunks/{left => }/trunks-left.png | Bin .../trunks/{right => }/trunks-right.png | Bin .../layout/two-column/trunks/trunks.json | 4 + .../layout/two-column/trunks/trunks.twig | 27 ++ .../two-column/wedge/left/css/wedge-left.css | 240 ---------- .../wedge/left/scss/wedge-left.scss | 51 -- .../wedge/left/wedge-left.html.twig | 27 -- .../wedge/right/css/wedge-right.css | 217 --------- .../wedge/right/scss/wedge-right.scss | 44 -- .../wedge/right/wedge-right.html.twig | 27 -- .../wedge/{left => }/wedge-left.png | Bin .../wedge/{right => }/wedge-right.png | Bin .../layout/two-column/wedge/wedge.json | 4 + .../layout/two-column/wedge/wedge.twig | 27 ++ 33 files changed, 703 insertions(+), 1406 deletions(-) create mode 100644 core/scss/layout/two-column/_toucan.scss create mode 100644 core/scss/layout/two-column/_trunks-right.scss create mode 100644 core/scss/layout/two-column/_trunks.scss create mode 100644 core/scss/layout/two-column/_wedge-right.scss create mode 100644 core/scss/layout/two-column/_wedge.scss delete mode 100644 core/templates/layout/two-column/toucan/css/toucan.css delete mode 100644 core/templates/layout/two-column/toucan/scss/toucan.scss delete mode 100644 core/templates/layout/two-column/toucan/toucan.html.twig create mode 100644 core/templates/layout/two-column/toucan/toucan.json create mode 100644 core/templates/layout/two-column/toucan/toucan.twig delete mode 100644 core/templates/layout/two-column/trunks/left/css/trunks-left.css delete mode 100644 core/templates/layout/two-column/trunks/left/scss/trunks-left.scss delete mode 100644 core/templates/layout/two-column/trunks/left/trunks-left.html.twig delete mode 100644 core/templates/layout/two-column/trunks/right/css/trunks-right.css delete mode 100644 core/templates/layout/two-column/trunks/right/scss/trunks-right.scss delete mode 100644 core/templates/layout/two-column/trunks/right/trunks-right.html.twig rename core/templates/layout/two-column/trunks/{left => }/trunks-left.png (100%) rename core/templates/layout/two-column/trunks/{right => }/trunks-right.png (100%) create mode 100644 core/templates/layout/two-column/trunks/trunks.json create mode 100644 core/templates/layout/two-column/trunks/trunks.twig delete mode 100644 core/templates/layout/two-column/wedge/left/css/wedge-left.css delete mode 100644 core/templates/layout/two-column/wedge/left/scss/wedge-left.scss delete mode 100644 core/templates/layout/two-column/wedge/left/wedge-left.html.twig delete mode 100644 core/templates/layout/two-column/wedge/right/css/wedge-right.css delete mode 100644 core/templates/layout/two-column/wedge/right/scss/wedge-right.scss delete mode 100644 core/templates/layout/two-column/wedge/right/wedge-right.html.twig rename core/templates/layout/two-column/wedge/{left => }/wedge-left.png (100%) rename core/templates/layout/two-column/wedge/{right => }/wedge-right.png (100%) create mode 100644 core/templates/layout/two-column/wedge/wedge.json create mode 100644 core/templates/layout/two-column/wedge/wedge.twig diff --git a/core/css/decanter.css b/core/css/decanter.css index 0017321a6..d80f65620 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2283,6 +2283,458 @@ dfn { grid-row: 1 / 1; -ms-grid-row-span: 0; } } +.layout--toucan > div { + margin: 0 auto; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout--toucan > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--toucan > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--toucan > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--toucan > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--toucan > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--toucan > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout--toucan > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 20px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 20px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--toucan > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--toucan > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 20px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 20px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--toucan > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--toucan > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 20px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 20px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--toucan > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--toucan > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 30px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 30px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--toucan > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--toucan > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 30px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 30px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + +.layout-trunks > section { + margin: 0 auto; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-trunks > section { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-trunks > section { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-trunks > section { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-trunks > section { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-trunks > section { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-trunks > section { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-trunks > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 20px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 20px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-trunks > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-trunks > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 20px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 20px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-trunks > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-trunks > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 20px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 20px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-trunks > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-trunks > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 30px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 30px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-trunks > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-trunks > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 30px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 30px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-trunks > section div:first-child { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } } + @media only screen and (min-width: 576px) { + .layout-trunks > section div:nth-child(2) { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +@media only screen and (min-width: 576px) { + .layout-trunks--right > section div:first-child { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; } } + +@media only screen and (min-width: 576px) { + .layout-trunks--right > section div:nth-child(2) { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } } + +.layout-wedge > section { + margin: 0 auto; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-wedge > section { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-wedge > section { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-wedge > section { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-wedge > section { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-wedge > section { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-wedge > section { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-wedge > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 20px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 20px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-wedge > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-wedge > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 20px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 20px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-wedge > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-wedge > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 20px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 20px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-wedge > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-wedge > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 30px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 30px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-wedge > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-wedge > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 30px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 30px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-wedge > section div:first-child { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } } + @media only screen and (min-width: 576px) { + .layout-wedge > section div:nth-child(2) { + -ms-grid-column: 2; + grid-column: 2 / span 3; + -ms-grid-column-span: span 3-2; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +@media only screen and (min-width: 576px) { + .layout-wedge--right > section div:first-child { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; } } + +@media only screen and (min-width: 768px) { + .layout-wedge--right > section div:first-child { + -ms-grid-column: 4; + grid-column: 4 / span 1; + -ms-grid-column-span: span 1-4; } } + +@media only screen and (min-width: 576px) { + .layout-wedge--right > section div:nth-child(2) { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } } + +@media only screen and (min-width: 768px) { + .layout-wedge--right > section div:nth-child(2) { + -ms-grid-column: 1; + grid-column: 1 / span 3; + -ms-grid-column-span: span 3-1; } } + .layout--basic > header, .layout--basic > section, .layout--basic > footer { diff --git a/core/scss/layout/two-column/_toucan.scss b/core/scss/layout/two-column/_toucan.scss new file mode 100644 index 000000000..3e4e5853d --- /dev/null +++ b/core/scss/layout/two-column/_toucan.scss @@ -0,0 +1,18 @@ +@charset "UTF-8"; + +// +// Toucan +// +// A two column centered 50/50 template. +// +// Markup: ../../../../../templates/layout/two-column/toucan/toucan.twig +// +// Style guide: Layout.2Column.Toucan +// + +.layout--toucan { + > div { + @include centered-column; + @include responsive-grid-columns($responsive-columns-two); + } +} diff --git a/core/scss/layout/two-column/_trunks-right.scss b/core/scss/layout/two-column/_trunks-right.scss new file mode 100644 index 000000000..4ef492c50 --- /dev/null +++ b/core/scss/layout/two-column/_trunks-right.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// Right sidebar variant of Trunks. +.layout-trunks--right { + > section { + div { + &:first-child { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + } + + &:nth-child(2) { + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + } + } + } + } +} diff --git a/core/scss/layout/two-column/_trunks.scss b/core/scss/layout/two-column/_trunks.scss new file mode 100644 index 000000000..6d9ddde12 --- /dev/null +++ b/core/scss/layout/two-column/_trunks.scss @@ -0,0 +1,43 @@ +@charset "UTF-8"; + +// +// Trunks +// +// A two column centered 33/66 template. +// +// .layout-trunks--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/two-column/trunks/trunks.twig +// +// Style guide: Layout.2Column.Trunks +// + +$_layout-trunks-columns: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr +); + +.layout-trunks { + > section { + @include centered-column; + @include responsive-grid-columns($_layout-trunks-columns); + + div { + &:first-child { + @include grid-media('sm') { + @include grid-item-spans(1, span 1); + } + } + + &:nth-child(2) { + @include grid-media('sm') { + @include grid-item-spans(2, span 2, 1, 1); + } + } + } + + } +} diff --git a/core/scss/layout/two-column/_wedge-right.scss b/core/scss/layout/two-column/_wedge-right.scss new file mode 100644 index 000000000..b9a3ba2e9 --- /dev/null +++ b/core/scss/layout/two-column/_wedge-right.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +// Right sidebar variant of Trunks. +.layout-wedge--right { + > section { + div { + &:first-child { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + @include grid-media('md') { + @include grid-item-spans(4, span 1); + } + } + + &:nth-child(2) { + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + } + @include grid-media('md') { + @include grid-item-spans(1, span 3); + } + } + } + } +} diff --git a/core/scss/layout/two-column/_wedge.scss b/core/scss/layout/two-column/_wedge.scss new file mode 100644 index 000000000..6d3e7327b --- /dev/null +++ b/core/scss/layout/two-column/_wedge.scss @@ -0,0 +1,43 @@ +@charset "UTF-8"; + +// +// Wedge +// +// A two column centered 25/75 template. +// +// .layout-wedge--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/two-column/wedge/wedge.twig +// +// Style guide: Layout.2Column.Wedge +// + +$_layout-wedge-columns: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr +); + +.layout-wedge { + > section { + @include centered-column; + @include responsive-grid-columns($_layout-wedge-columns); + + div { + &:first-child { + @include grid-media('sm') { + @include grid-item-spans(1, span 1); + } + } + + &:nth-child(2) { + @include grid-media('sm') { + @include grid-item-spans(2, span 3, 1, 1); + } + } + } + + } +} diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/two-column/index.scss index be7d9a418..7e3c3c165 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/two-column/index.scss @@ -13,4 +13,9 @@ 'pacman', 'pacman-right', 'plakes', - 'plakes-right'; + 'plakes-right', + 'toucan', + 'trunks', + 'trunks-right', + 'wedge', + 'wedge-right'; diff --git a/core/templates/layout/two-column/plakes/plakes.twig b/core/templates/layout/two-column/plakes/plakes.twig index e9cf6b817..a33f3254a 100644 --- a/core/templates/layout/two-column/plakes/plakes.twig +++ b/core/templates/layout/two-column/plakes/plakes.twig @@ -7,11 +7,11 @@ * each column roughly equal in width. * * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. + * - + * - + * + * + * */ #} diff --git a/core/templates/layout/two-column/toucan/css/toucan.css b/core/templates/layout/two-column/toucan/css/toucan.css deleted file mode 100644 index 86a42a2f8..000000000 --- a/core/templates/layout/two-column/toucan/css/toucan.css +++ /dev/null @@ -1,175 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--toucan { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--toucan { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--toucan { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--toucan { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--toucan { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--toucan { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--toucan::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--toucan .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--toucan .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--toucan .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--toucan .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--toucan .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--toucan .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--toucan .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--toucan .column--first, - .layout--toucan .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=toucan.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/toucan/scss/toucan.scss b/core/templates/layout/two-column/toucan/scss/toucan.scss deleted file mode 100644 index de3e3b51d..000000000 --- a/core/templates/layout/two-column/toucan/scss/toucan.scss +++ /dev/null @@ -1,32 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--toucan { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first, - .column--second { - @include responsive-grid-column($column, $default-container); - } - -} diff --git a/core/templates/layout/two-column/toucan/toucan.html.twig b/core/templates/layout/two-column/toucan/toucan.html.twig deleted file mode 100644 index ba310d7f5..000000000 --- a/core/templates/layout/two-column/toucan/toucan.html.twig +++ /dev/null @@ -1,11 +0,0 @@ -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    diff --git a/core/templates/layout/two-column/toucan/toucan.json b/core/templates/layout/two-column/toucan/toucan.json new file mode 100644 index 000000000..6b28b09a1 --- /dev/null +++ b/core/templates/layout/two-column/toucan/toucan.json @@ -0,0 +1,5 @@ +{ + "modifier_class": "layout--toucan", + "first": "

    First Column

    ", + "second": "

    Second Column

    " +} diff --git a/core/templates/layout/two-column/toucan/toucan.twig b/core/templates/layout/two-column/toucan/toucan.twig new file mode 100644 index 000000000..e1656862f --- /dev/null +++ b/core/templates/layout/two-column/toucan/toucan.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Toucan + * + * + */ +#} + +
    + + {# Required column #} +
    + {{ first }} +
    + + {# Required column #} +
    + {{ second }} +
    + +
    +
    diff --git a/core/templates/layout/two-column/trunks/left/css/trunks-left.css b/core/templates/layout/two-column/trunks/left/css/trunks-left.css deleted file mode 100644 index aaa05435b..000000000 --- a/core/templates/layout/two-column/trunks/left/css/trunks-left.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--trunks--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--trunks--left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--trunks--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--trunks--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--trunks--left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--trunks--left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--trunks--left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--left .column--first { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--left .column--first { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--left .column--first { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--trunks--left .column--first { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--trunks--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--left .column--second { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--left .column--second { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--trunks--left .column--second { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=trunks-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss b/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss deleted file mode 100644 index 11eb10e16..000000000 --- a/core/templates/layout/two-column/trunks/left/scss/trunks-left.scss +++ /dev/null @@ -1,45 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--trunks--left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - -} diff --git a/core/templates/layout/two-column/trunks/left/trunks-left.html.twig b/core/templates/layout/two-column/trunks/left/trunks-left.html.twig deleted file mode 100644 index 76ee55847..000000000 --- a/core/templates/layout/two-column/trunks/left/trunks-left.html.twig +++ /dev/null @@ -1,27 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    diff --git a/core/templates/layout/two-column/trunks/right/css/trunks-right.css b/core/templates/layout/two-column/trunks/right/css/trunks-right.css deleted file mode 100644 index db9e1faf0..000000000 --- a/core/templates/layout/two-column/trunks/right/css/trunks-right.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--trunks--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--trunks--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--trunks--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--trunks--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--trunks--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--trunks--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--trunks--right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--right .column--first { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--right .column--first { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--trunks--right .column--first { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--trunks--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--trunks--right .column--second { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--trunks--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--trunks--right .column--second { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--trunks--right .column--second { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--trunks--right .column--second { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=trunks-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss b/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss deleted file mode 100644 index 7b181ff8e..000000000 --- a/core/templates/layout/two-column/trunks/right/scss/trunks-right.scss +++ /dev/null @@ -1,43 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-first: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); -.layout--trunks--right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - -} diff --git a/core/templates/layout/two-column/trunks/right/trunks-right.html.twig b/core/templates/layout/two-column/trunks/right/trunks-right.html.twig deleted file mode 100644 index 8a2ad483b..000000000 --- a/core/templates/layout/two-column/trunks/right/trunks-right.html.twig +++ /dev/null @@ -1,27 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    diff --git a/core/templates/layout/two-column/trunks/left/trunks-left.png b/core/templates/layout/two-column/trunks/trunks-left.png similarity index 100% rename from core/templates/layout/two-column/trunks/left/trunks-left.png rename to core/templates/layout/two-column/trunks/trunks-left.png diff --git a/core/templates/layout/two-column/trunks/right/trunks-right.png b/core/templates/layout/two-column/trunks/trunks-right.png similarity index 100% rename from core/templates/layout/two-column/trunks/right/trunks-right.png rename to core/templates/layout/two-column/trunks/trunks-right.png diff --git a/core/templates/layout/two-column/trunks/trunks.json b/core/templates/layout/two-column/trunks/trunks.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/two-column/trunks/trunks.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/trunks/trunks.twig b/core/templates/layout/two-column/trunks/trunks.twig new file mode 100644 index 000000000..3a0c4dc18 --- /dev/null +++ b/core/templates/layout/two-column/trunks/trunks.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + diff --git a/core/templates/layout/two-column/wedge/left/css/wedge-left.css b/core/templates/layout/two-column/wedge/left/css/wedge-left.css deleted file mode 100644 index 4d34b61ec..000000000 --- a/core/templates/layout/two-column/wedge/left/css/wedge-left.css +++ /dev/null @@ -1,240 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--wedge--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--wedge--left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--wedge--left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) { - .layout--wedge--left { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: flex-start; - align-content: center; - box-sizing: border-box; - } - .layout--wedge--left > * { - flex: 0 0 auto; - box-sizing: inherit; - } -} - -@media only screen and (max-width: 575px) { - .layout--wedge--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--wedge--left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--wedge--left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -.layout--wedge--left .column--first { - order: 10; -} - -@media only screen and (max-width: 575px) { - .layout--wedge--left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--left .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--left .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--left .column--first { - width: calc(75% - 105px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--wedge--left .column--first { - width: calc(75% - 0.4375in); - float: left; - margin-left: 0.25in; - } -} - -.layout--wedge--left .column--second { - order: 1; -} - -@media only screen and (max-width: 575px) { - .layout--wedge--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--left .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--left .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--left .column--second { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--wedge--left .column--second { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=wedge-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss b/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss deleted file mode 100644 index 73f7cfa26..000000000 --- a/core/templates/layout/two-column/wedge/left/scss/wedge-left.scss +++ /dev/null @@ -1,51 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 3 of 4, - 'lg': 3 of 4, - 'xl': 3 of 4, - 'print': 3 of 4 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--wedge--left { - @include responsive-container($default-container); - - @include grid-media($media-md) { - @include flex-container(); - } - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--first { - order: 10; - @include responsive-grid-column($column, $default-container); - } - - .column--second { - order: 1; - @include responsive-grid-column($column-second, $default-container); - } - -} diff --git a/core/templates/layout/two-column/wedge/left/wedge-left.html.twig b/core/templates/layout/two-column/wedge/left/wedge-left.html.twig deleted file mode 100644 index 1d99d3ca0..000000000 --- a/core/templates/layout/two-column/wedge/left/wedge-left.html.twig +++ /dev/null @@ -1,27 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{content.second}} -
    -
    -
    diff --git a/core/templates/layout/two-column/wedge/right/css/wedge-right.css b/core/templates/layout/two-column/wedge/right/css/wedge-right.css deleted file mode 100644 index ae484094e..000000000 --- a/core/templates/layout/two-column/wedge/right/css/wedge-right.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--wedge--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--wedge--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--wedge--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--wedge--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--wedge--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--wedge--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--wedge--right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--right .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--right .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--right .column--first { - width: calc(75% - 105px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--wedge--right .column--first { - width: calc(75% - 0.4375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--wedge--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--wedge--right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--wedge--right .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--wedge--right .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--wedge--right .column--second { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--wedge--right .column--second { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=wedge-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss b/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss deleted file mode 100644 index 8db8015f8..000000000 --- a/core/templates/layout/two-column/wedge/right/scss/wedge-right.scss +++ /dev/null @@ -1,44 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 3 of 4, - 'lg': 3 of 4, - 'xl': 3 of 4, - 'print': 3 of 4 -); - -// Responsive grid patterns for the column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--wedge--right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } -} diff --git a/core/templates/layout/two-column/wedge/right/wedge-right.html.twig b/core/templates/layout/two-column/wedge/right/wedge-right.html.twig deleted file mode 100644 index 72dc403e1..000000000 --- a/core/templates/layout/two-column/wedge/right/wedge-right.html.twig +++ /dev/null @@ -1,27 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    diff --git a/core/templates/layout/two-column/wedge/left/wedge-left.png b/core/templates/layout/two-column/wedge/wedge-left.png similarity index 100% rename from core/templates/layout/two-column/wedge/left/wedge-left.png rename to core/templates/layout/two-column/wedge/wedge-left.png diff --git a/core/templates/layout/two-column/wedge/right/wedge-right.png b/core/templates/layout/two-column/wedge/wedge-right.png similarity index 100% rename from core/templates/layout/two-column/wedge/right/wedge-right.png rename to core/templates/layout/two-column/wedge/wedge-right.png diff --git a/core/templates/layout/two-column/wedge/wedge.json b/core/templates/layout/two-column/wedge/wedge.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/two-column/wedge/wedge.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/wedge/wedge.twig b/core/templates/layout/two-column/wedge/wedge.twig new file mode 100644 index 000000000..7b8d3f4aa --- /dev/null +++ b/core/templates/layout/two-column/wedge/wedge.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * + * + * + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + From 68ec67111e9935e6d2627115ed6d511fa71456a1 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 09:23:32 -0800 Subject: [PATCH 024/123] Remove three-column layout from Richard. --- .../page-layout--three-column.json | 16 ---------------- .../page-layout--three-column.twig | 19 ------------------- 2 files changed, 35 deletions(-) delete mode 100644 core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json delete mode 100644 core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig diff --git a/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json b/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json deleted file mode 100644 index a540d2c5a..000000000 --- a/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "header_content": - "Site Header

    This is the site header.

    ", - - "main_content": - "Main Content

    This is the main content area.

    ", - - "first_sidebar_content": - "First Sidebar

    This is the first of two sidebars in a three column layout.

    ", - - "second_sidebar_content": - "Second Sidebar

    This is the second of two sidebars in a three column layout.

    ", - - "footer_content": - "Site Footer

    This is the site footer.

    " -} diff --git a/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig b/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig deleted file mode 100644 index 12f6db545..000000000 --- a/core/templates/layout/three-column/page-layout--three-column/page-layout--three-column.twig +++ /dev/null @@ -1,19 +0,0 @@ -
    - {{ header_content }} -
    - -
    -
    - {{ main_content }} -
    - - -
    - -
    - {{ footer_content }} -
    From 77431e580a7ac11bc98994dd159538b04be1e002 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 10:54:34 -0800 Subject: [PATCH 025/123] More 2 column layouts. --- core/css/decanter.css | 919 +++++++++++++++++- core/scss/layout/full-width/_ibeam.scss | 1 + core/scss/layout/three-column/_blastila.scss | 2 +- core/scss/layout/three-column/_chess.scss | 37 + .../layout/three-column/_cuttoner-right.scss | 20 + core/scss/layout/three-column/_cuttoner.scss | 51 + .../layout/three-column/_percles-right.scss | 18 + core/scss/layout/three-column/_percles.scss | 34 + core/scss/layout/three-column/_robot.scss | 32 + .../layout/three-column/_space-invader.scss | 27 + core/scss/layout/three-column/index.scss | 9 +- .../mixins/grid/_responsive-grid-gap.scss | 24 + core/scss/utilities/mixins/grid/index.scss | 1 + .../layout/three-column/chess/chess.html.twig | 52 - .../layout/three-column/chess/chess.json | 11 + .../layout/three-column/chess/chess.twig | 57 ++ .../layout/three-column/chess/css/chess.css | 173 ---- .../layout/three-column/chess/scss/chess.scss | 34 - .../cuttoner/{left => }/cuttoner-left.png | Bin .../cuttoner/{right => }/cuttoner-right.png | Bin .../three-column/cuttoner/cuttoner.json | 7 + .../three-column/cuttoner/cuttoner.twig | 46 + .../cuttoner/left/css/cuttoner-left.css | 271 ------ .../cuttoner/left/cuttoner-left.html.twig | 41 - .../cuttoner/left/scss/cuttoner-left.scss | 63 -- .../cuttoner/right/css/cuttoner-right.css | 265 ----- .../cuttoner/right/cuttoner-right.html.twig | 40 - .../cuttoner/right/scss/cuttoner-right.scss | 57 -- .../percles/left/css/percles-left.css | 221 ----- .../percles/left/percles-left.html.twig | 39 - .../percles/left/scss/percles-left.scss | 48 - .../percles/{left => }/percles-left.png | Bin .../percles/{right => }/percles-right.png | Bin .../layout/three-column/percles/percles.json | 7 + .../layout/three-column/percles/percles.twig | 39 + .../percles/right/css/percles-right.css | 221 ----- .../percles/right/percles-right.html.twig | 39 - .../percles/right/scss/percles-right.scss | 48 - .../layout/three-column/robot/css/robot.css | 223 ----- .../layout/three-column/robot/robot.html.twig | 37 - .../layout/three-column/robot/robot.json | 7 + .../layout/three-column/robot/robot.twig | 39 + .../layout/three-column/robot/scss/robot.scss | 46 - .../space-invader/css/space-invader.css | 181 ---- .../space-invader/scss/space-invader.scss | 33 - .../space-invader/space-invader.html.twig | 36 - .../space-invader/space-invader.json | 7 + .../space-invader/space-invader.twig | 39 + kss/builder/decanter/kss-assets/css/kss.css | 8 +- kss/builder/decanter/scss/_layout-colors.scss | 10 +- 50 files changed, 1426 insertions(+), 2194 deletions(-) create mode 100644 core/scss/layout/three-column/_chess.scss create mode 100644 core/scss/layout/three-column/_cuttoner-right.scss create mode 100644 core/scss/layout/three-column/_cuttoner.scss create mode 100644 core/scss/layout/three-column/_percles-right.scss create mode 100644 core/scss/layout/three-column/_percles.scss create mode 100644 core/scss/layout/three-column/_robot.scss create mode 100644 core/scss/layout/three-column/_space-invader.scss create mode 100644 core/scss/utilities/mixins/grid/_responsive-grid-gap.scss delete mode 100644 core/templates/layout/three-column/chess/chess.html.twig create mode 100644 core/templates/layout/three-column/chess/chess.json create mode 100644 core/templates/layout/three-column/chess/chess.twig delete mode 100644 core/templates/layout/three-column/chess/css/chess.css delete mode 100644 core/templates/layout/three-column/chess/scss/chess.scss rename core/templates/layout/three-column/cuttoner/{left => }/cuttoner-left.png (100%) rename core/templates/layout/three-column/cuttoner/{right => }/cuttoner-right.png (100%) create mode 100644 core/templates/layout/three-column/cuttoner/cuttoner.json create mode 100644 core/templates/layout/three-column/cuttoner/cuttoner.twig delete mode 100644 core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css delete mode 100644 core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig delete mode 100644 core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss delete mode 100644 core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css delete mode 100644 core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig delete mode 100644 core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss delete mode 100644 core/templates/layout/three-column/percles/left/css/percles-left.css delete mode 100644 core/templates/layout/three-column/percles/left/percles-left.html.twig delete mode 100644 core/templates/layout/three-column/percles/left/scss/percles-left.scss rename core/templates/layout/three-column/percles/{left => }/percles-left.png (100%) rename core/templates/layout/three-column/percles/{right => }/percles-right.png (100%) create mode 100644 core/templates/layout/three-column/percles/percles.json create mode 100644 core/templates/layout/three-column/percles/percles.twig delete mode 100644 core/templates/layout/three-column/percles/right/css/percles-right.css delete mode 100644 core/templates/layout/three-column/percles/right/percles-right.html.twig delete mode 100644 core/templates/layout/three-column/percles/right/scss/percles-right.scss delete mode 100644 core/templates/layout/three-column/robot/css/robot.css delete mode 100644 core/templates/layout/three-column/robot/robot.html.twig create mode 100644 core/templates/layout/three-column/robot/robot.json create mode 100644 core/templates/layout/three-column/robot/robot.twig delete mode 100644 core/templates/layout/three-column/robot/scss/robot.scss delete mode 100644 core/templates/layout/three-column/space-invader/css/space-invader.css delete mode 100644 core/templates/layout/three-column/space-invader/scss/space-invader.scss delete mode 100644 core/templates/layout/three-column/space-invader/space-invader.html.twig create mode 100644 core/templates/layout/three-column/space-invader/space-invader.json create mode 100644 core/templates/layout/three-column/space-invader/space-invader.twig diff --git a/core/css/decanter.css b/core/css/decanter.css index d80f65620..f5187a5f2 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -928,7 +928,8 @@ dfn { margin-top: 0; } .layout--ibeam > section { - margin: 0 auto; } + margin: 0 auto; + margin: 32px; } @media only screen and (min-width: 0) { .layout--ibeam > section { max-width: 100%; } } @@ -944,6 +945,18 @@ dfn { @media only screen and (min-width: 1500px) { .layout--ibeam > section { max-width: 1500px; } } + @media only screen and (min-width: 1500px) { + .layout--ibeam > section { + margin: 38px; } } + @media only screen and (min-width: 1024px) { + .layout--ibeam > section { + margin: 36px; } } + @media only screen and (min-width: 768px) { + .layout--ibeam > section { + margin: 36px; } } + @media only screen and (min-width: 576px) { + .layout--ibeam > section { + margin: 32px; } } .layout--bricks .layout__columns { margin: 0 auto; @@ -1552,30 +1565,107 @@ dfn { @media only screen and (min-width: 1500px) { .layout-blastila > div { max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-blastila > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 20px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 20px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-blastila > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 20px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 20px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-blastila > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 20px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 20px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-blastila > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 30px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 30px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-blastila > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 30px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 30px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-blastila > div { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-blastila > div > * { - margin-right: 10px; - margin-left: 10px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 20px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 10px; - margin-bottom: 10px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 20px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } + grid-template-columns: 1fr 1fr 1fr; } } .layout-blastila > div > aside { -ms-grid-column: 1; grid-column: 1 / 1; @@ -1633,6 +1723,795 @@ dfn { grid-row: 2 / span 1; -ms-grid-row-span: span 1-2; } +.layout--chess > header, +.layout--chess > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--chess > header, + .layout--chess > footer { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--chess > header, + .layout--chess > footer { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--chess > header, + .layout--chess > footer { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--chess > header, + .layout--chess > footer { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--chess > header, + .layout--chess > footer { + max-width: 1500px; } } + +.layout--chess > section { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--chess > section { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--chess > section { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--chess > section { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--chess > section { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--chess > section { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--chess > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 20px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 20px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--chess > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 20px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 20px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--chess > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 20px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 20px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--chess > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 30px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 30px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--chess > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 30px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 30px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--chess > section { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } } + @media only screen and (min-width: 1024px) { + .layout--chess > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } + +.layout-cuttoner > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-cuttoner > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-cuttoner > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-cuttoner > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 20px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 20px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 20px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 20px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 20px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 20px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-cuttoner > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 30px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 30px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 30px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 30px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } + @media only screen and (min-width: 0) { + .layout-cuttoner > div > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 20px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-cuttoner > div > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 30px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 30px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 30px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 30px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section > header, + .layout-cuttoner > div > section > footer { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; } } + +@media only screen and (min-width: 576px) { + .layout-cuttoner--right > div > section { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; } } + +@media only screen and (min-width: 576px) { + .layout-cuttoner--right > div > aside { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } } + +.layout-percles > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-percles > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-percles > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-percles > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-percles > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-percles > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-percles > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 20px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 20px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-percles > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 20px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 20px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-percles > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 20px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 20px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-percles > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 30px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 30px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-percles > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 30px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 30px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-percles > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } + > .layout-percles > div:first-child { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } + .layout-percles > div > header { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; } + +> .layout-percles--right > div:first-child { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } + +.layout-percles--right > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } + +.layout--robot > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--robot > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--robot > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--robot > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--robot > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--robot > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--robot > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 20px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 20px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--robot > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 20px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 20px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--robot > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 20px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 20px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--robot > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 30px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 30px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--robot > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 30px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 30px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--robot > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } } + .layout--robot > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: span 4-1; } + .layout--robot > div > div:nth-of-type(2) { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; } + +.layout--space-invader > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--space-invader > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout--space-invader > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout--space-invader > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout--space-invader > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout--space-invader > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout--space-invader > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 20px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 20px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--space-invader > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 20px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 20px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout--space-invader > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 20px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 20px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout--space-invader > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 30px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 30px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout--space-invader > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 30px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 30px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout--space-invader > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } + .layout--space-invader > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 3; + -ms-grid-column-span: span 3-1; } + .layout--donies > section, .layout--donies > header, .layout--donies > footer { diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss index 70b71d0b7..28bf5d87c 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/full-width/_ibeam.scss @@ -13,5 +13,6 @@ .layout--ibeam { > section { @include centered-column; + @include modular-margin; } } diff --git a/core/scss/layout/three-column/_blastila.scss b/core/scss/layout/three-column/_blastila.scss index ace66d3b1..2e2dca92a 100644 --- a/core/scss/layout/three-column/_blastila.scss +++ b/core/scss/layout/three-column/_blastila.scss @@ -20,13 +20,13 @@ > div { @include centered-column; + @include responsive-grid-gap; // Enable the grid on md and higher. // let everything be one column on xs and sm. @include grid-media('md') { @include display-grid; @include grid-columns(1fr 1fr 1fr); - @include grid-gap($gutter-md); } > aside { diff --git a/core/scss/layout/three-column/_chess.scss b/core/scss/layout/three-column/_chess.scss new file mode 100644 index 000000000..b88716093 --- /dev/null +++ b/core/scss/layout/three-column/_chess.scss @@ -0,0 +1,37 @@ +@charset "UTF-8"; + +// +// Chess +// +// A complext three column layout with full width header and footer and a +// 6 cell 3 column 2 row middle. +// +// Markup: ../../../../../templates/layout/three-column/chess/chess.twig +// +// Style guide: Layout.3Column.Chess +// +.layout--chess { + + > header, + > footer { + @include centered-column; + } + + > section { + @include centered-column; + @include responsive-grid-gap; + + // Enable the grid on md and higher. + // let everything be one column on xs and sm. + @include grid-media('md') { + @include display-grid; + @include grid-columns(1fr 1fr); + } + + @include grid-media('lg') { + @include grid-columns(1fr 1fr 1fr); + } + + } + +} diff --git a/core/scss/layout/three-column/_cuttoner-right.scss b/core/scss/layout/three-column/_cuttoner-right.scss new file mode 100644 index 000000000..ac80ff12e --- /dev/null +++ b/core/scss/layout/three-column/_cuttoner-right.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// Right side variant. +.layout-cuttoner--right { + + > div { + > section { + @include grid-media('sm') { + @include grid-item-spans(2, span 2); + } + } + + > aside { + @include grid-media('sm') { + @include grid-item-spans(1, span 1, 1, 1); + } + } + } + +} diff --git a/core/scss/layout/three-column/_cuttoner.scss b/core/scss/layout/three-column/_cuttoner.scss new file mode 100644 index 000000000..4f322468f --- /dev/null +++ b/core/scss/layout/three-column/_cuttoner.scss @@ -0,0 +1,51 @@ +@charset "UTF-8"; + +// +// Cuttoner +// +// A complext three column layout with a sidebar and a 2 column content area +// with header and footer. +// +// .layout-cuttoner--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/three-column/cuttoner/cuttoner.twig +// +// Style guide: Layout.3Column.Cuttoner +// +.layout-cuttoner { + + > div { + @include centered-column; + @include responsive-grid-gap; + + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > section { + @include responsive-grid-gap; + + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + @include display-grid; + @include grid-columns(1fr 1fr); + } + + > header, + > footer { + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + } + } + } + + > aside { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + } + + } + +} diff --git a/core/scss/layout/three-column/_percles-right.scss b/core/scss/layout/three-column/_percles-right.scss new file mode 100644 index 000000000..f1c46b70e --- /dev/null +++ b/core/scss/layout/three-column/_percles-right.scss @@ -0,0 +1,18 @@ +@charset "UTF-8"; + +// +// Right side variant. +// +.layout-percles--right { + + > div { + > &:first-child { + @include grid-item-spans(3, span 1, 1, 1); + } + + > header { + @include grid-item-spans(1, span 2, 1, 1); + } + } + +} diff --git a/core/scss/layout/three-column/_percles.scss b/core/scss/layout/three-column/_percles.scss new file mode 100644 index 000000000..5ad21c26b --- /dev/null +++ b/core/scss/layout/three-column/_percles.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +// +// Percles +// +// A complext three column layout +// +// .layout-percles--right - Right side variant. +// +// Markup: ../../../../../templates/layout/three-column/percles/percles.twig +// +// Style guide: Layout.3Column.Percles +// +.layout-percles { + + > div { + @include centered-column; + @include responsive-grid-gap; + + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > &:first-child { + @include grid-item-spans(1, span 1); + } + + > header { + @include grid-item-spans(2, span 2); + } + } + +} diff --git a/core/scss/layout/three-column/_robot.scss b/core/scss/layout/three-column/_robot.scss new file mode 100644 index 000000000..50274057b --- /dev/null +++ b/core/scss/layout/three-column/_robot.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +// +// Robot +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/three-column/robot/robot.twig +// +// Style guide: Layout.3Column.Robot +// +.layout--robot { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(1, span 4); + } + + > div:nth-of-type(2) { + @include grid-item-spans(2, span 2); + } + + } +} diff --git a/core/scss/layout/three-column/_space-invader.scss b/core/scss/layout/three-column/_space-invader.scss new file mode 100644 index 000000000..a7eaf0ea5 --- /dev/null +++ b/core/scss/layout/three-column/_space-invader.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +// +// Space Invader +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/three-column/space-invader/space-invader.twig +// +// Style guide: Layout.3Column.SpaceInvader +// +.layout--space-invader { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(1, span 3); + } + } +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 5ae8cc55f..2a3a58f56 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -11,4 +11,11 @@ 'bars', 'battleship', 'blastila', - 'blastila-right'; + 'blastila-right', + 'chess', + 'cuttoner', + 'cuttoner-right', + 'percles', + 'percles-right', + 'robot', + 'space-invader'; diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss b/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss new file mode 100644 index 000000000..c1a8452cb --- /dev/null +++ b/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +// +// responsive-grid-gap($grid-map) +// +// A mixin to create a responsive grid layout. +// +// $grid-map: A sass map with the columns per breakpoint. +// +// Styleguide: Mixins.Grid.Responsive Grid Gap +// +@mixin responsive-grid-gap($gutters-map: $responsive-gutters-default) { + + // Loop through each breakpoint generating the media query and grid. + @each $breakpoint, $gutter in $gutters-map { + + // Media Query is passed in. + @media #{$breakpoint} { + // Add column and row gaps based on the responsive breakpoint sizes. + // These gaps increase as screen sizes get larger. + @include grid-gap(map-get($gutters-map, $breakpoint)); + } + } +} diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index 9f4f2f954..828b8eff8 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -21,4 +21,5 @@ 'grid-media-only', 'grid-row-gap', 'grid-rows', + 'responsive-grid-gap', 'responsive-grid-columns'; diff --git a/core/templates/layout/three-column/chess/chess.html.twig b/core/templates/layout/three-column/chess/chess.html.twig deleted file mode 100644 index d2e05fa72..000000000 --- a/core/templates/layout/three-column/chess/chess.html.twig +++ /dev/null @@ -1,52 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    - -
    - {{ content.sixth }} -
    -
    - -
    - {{ content.footer }} -
    -
    diff --git a/core/templates/layout/three-column/chess/chess.json b/core/templates/layout/three-column/chess/chess.json new file mode 100644 index 000000000..6fd43c723 --- /dev/null +++ b/core/templates/layout/three-column/chess/chess.json @@ -0,0 +1,11 @@ +{ + "modifier_class": "layout--chess", + "header": "

    This is the optional full column header.

    ", + "footer": "

    Footer is optional.

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "fifth": "

    Fifth Column

    ", + "sixth": "

    Sixth Column

    " +} diff --git a/core/templates/layout/three-column/chess/chess.twig b/core/templates/layout/three-column/chess/chess.twig new file mode 100644 index 000000000..8145a7b7a --- /dev/null +++ b/core/templates/layout/three-column/chess/chess.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    + +
    + {{ fifth }} +
    + +
    + {{ sixth }} +
    +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + + diff --git a/core/templates/layout/three-column/chess/css/chess.css b/core/templates/layout/three-column/chess/css/chess.css deleted file mode 100644 index 7fbd78975..000000000 --- a/core/templates/layout/three-column/chess/css/chess.css +++ /dev/null @@ -1,173 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--chess { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--chess { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--chess { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--chess { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--chess { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--chess { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--chess::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--chess .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--chess .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--chess .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--chess .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--chess .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--chess .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--chess .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--chess .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--chess .column { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--chess .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--chess .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--chess .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--chess .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -.layout--chess .column--fifth { - clear: left; -} - -/*# sourceMappingURL=chess.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/chess/scss/chess.scss b/core/templates/layout/three-column/chess/scss/chess.scss deleted file mode 100644 index 40dca78eb..000000000 --- a/core/templates/layout/three-column/chess/scss/chess.scss +++ /dev/null @@ -1,34 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--chess { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--fifth { - clear: left; - } -} diff --git a/core/templates/layout/three-column/cuttoner/left/cuttoner-left.png b/core/templates/layout/three-column/cuttoner/cuttoner-left.png similarity index 100% rename from core/templates/layout/three-column/cuttoner/left/cuttoner-left.png rename to core/templates/layout/three-column/cuttoner/cuttoner-left.png diff --git a/core/templates/layout/three-column/cuttoner/right/cuttoner-right.png b/core/templates/layout/three-column/cuttoner/cuttoner-right.png similarity index 100% rename from core/templates/layout/three-column/cuttoner/right/cuttoner-right.png rename to core/templates/layout/three-column/cuttoner/cuttoner-right.png diff --git a/core/templates/layout/three-column/cuttoner/cuttoner.json b/core/templates/layout/three-column/cuttoner/cuttoner.json new file mode 100644 index 000000000..07e982833 --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/cuttoner.json @@ -0,0 +1,7 @@ +{ + "header": "

    This is the optional full column header.

    ", + "footer": "

    Footer is optional.

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/cuttoner/cuttoner.twig b/core/templates/layout/three-column/cuttoner/cuttoner.twig new file mode 100644 index 000000000..4d089427b --- /dev/null +++ b/core/templates/layout/three-column/cuttoner/cuttoner.twig @@ -0,0 +1,46 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    +
    + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    + {{ first }} +
    + +
    + {{ second }} +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + +
    + + +
    + diff --git a/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css b/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css deleted file mode 100644 index 5718d9040..000000000 --- a/core/templates/layout/three-column/cuttoner/left/css/cuttoner-left.css +++ /dev/null @@ -1,271 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--cuttoner-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--cuttoner-left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--cuttoner-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--cuttoner-left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--cuttoner-left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-left .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-left .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-left .column--second { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-left .column--second { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-left .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-left .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-left .column--first { - width: calc(75% - 105px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-left .column--first { - width: calc(75% - 0.4375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (min-width: 768px) { - .layout--cuttoner-left .column--first { - order: 10; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-left .column--first .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-left .column--first .column { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-left .column--first .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-left .column--first .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-left .column--first .column { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-left .column--first .column { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=cuttoner-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig b/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig deleted file mode 100644 index 9a3b209e7..000000000 --- a/core/templates/layout/three-column/cuttoner/left/cuttoner-left.html.twig +++ /dev/null @@ -1,41 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - {{ content.footer }} -
    -
    - - -
    -
    diff --git a/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss b/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss deleted file mode 100644 index 01cb5593e..000000000 --- a/core/templates/layout/three-column/cuttoner/left/scss/cuttoner-left.scss +++ /dev/null @@ -1,63 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. - -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 3 of 4, - 'lg': 3 of 4, - 'xl': 3 of 4, - 'print': 3 of 4 -); - -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -$column-first-column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--cuttoner-left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - - .column--first { - - @include responsive-grid-column($column-first, $default-container); - @include grid-media($media-md) { - order: 10; - } - - .column { - @include responsive-grid-column($column-first-column, $default-container); - } - - } - -} diff --git a/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css b/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css deleted file mode 100644 index ce23e0069..000000000 --- a/core/templates/layout/three-column/cuttoner/right/css/cuttoner-right.css +++ /dev/null @@ -1,265 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--cuttoner-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--cuttoner-right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--cuttoner-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--cuttoner-right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--cuttoner-right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-right .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-right .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-right .column--second { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-right .column--second { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-right .column--second { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-right .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-right .column--first { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-right .column--first { - width: calc(75% - 105px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-right .column--first { - width: calc(75% - 0.4375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--cuttoner-right .column--first .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--cuttoner-right .column--first .column { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--cuttoner-right .column--first .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--cuttoner-right .column--first .column { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--cuttoner-right .column--first .column { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--cuttoner-right .column--first .column { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=cuttoner-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig b/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig deleted file mode 100644 index 2a7660771..000000000 --- a/core/templates/layout/three-column/cuttoner/right/cuttoner-right.html.twig +++ /dev/null @@ -1,40 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    -
    - {{ content.header }} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - {{ content.footer }} -
    -
    - -
    -
    diff --git a/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss b/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss deleted file mode 100644 index e6be4f6d4..000000000 --- a/core/templates/layout/three-column/cuttoner/right/scss/cuttoner-right.scss +++ /dev/null @@ -1,57 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 3 of 4, - 'lg': 3 of 4, - 'xl': 3 of 4, - 'print': 3 of 4 -); - -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -$column-first-column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--cuttoner-right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - - .column { - @include responsive-grid-column($column-first-column, $default-container); - } - - } - -} diff --git a/core/templates/layout/three-column/percles/left/css/percles-left.css b/core/templates/layout/three-column/percles/left/css/percles-left.css deleted file mode 100644 index 6831910c1..000000000 --- a/core/templates/layout/three-column/percles/left/css/percles-left.css +++ /dev/null @@ -1,221 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--percles-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--percles-left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--percles-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--percles-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--percles-left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--percles-left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--percles-left .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-left .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-left .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-left .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-left .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--percles-left .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--percles-left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-left .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-left .column--second { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-left .column--second { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--percles-left .column--second { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -.layout--percles-left .column--third { - clear: both; -} - -/*# sourceMappingURL=percles-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/percles/left/percles-left.html.twig b/core/templates/layout/three-column/percles/left/percles-left.html.twig deleted file mode 100644 index bb0c02f1f..000000000 --- a/core/templates/layout/three-column/percles/left/percles-left.html.twig +++ /dev/null @@ -1,39 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    -
    -
    diff --git a/core/templates/layout/three-column/percles/left/scss/percles-left.scss b/core/templates/layout/three-column/percles/left/scss/percles-left.scss deleted file mode 100644 index 84014782d..000000000 --- a/core/templates/layout/three-column/percles/left/scss/percles-left.scss +++ /dev/null @@ -1,48 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -// Responsive grid patterns for the second column. -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--percles-left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - - .column--third { - clear: both; - } -} diff --git a/core/templates/layout/three-column/percles/left/percles-left.png b/core/templates/layout/three-column/percles/percles-left.png similarity index 100% rename from core/templates/layout/three-column/percles/left/percles-left.png rename to core/templates/layout/three-column/percles/percles-left.png diff --git a/core/templates/layout/three-column/percles/right/percles-right.png b/core/templates/layout/three-column/percles/percles-right.png similarity index 100% rename from core/templates/layout/three-column/percles/right/percles-right.png rename to core/templates/layout/three-column/percles/percles-right.png diff --git a/core/templates/layout/three-column/percles/percles.json b/core/templates/layout/three-column/percles/percles.json new file mode 100644 index 000000000..74ef82b7b --- /dev/null +++ b/core/templates/layout/three-column/percles/percles.json @@ -0,0 +1,7 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fifth": "

    Fifth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/percles/percles.twig b/core/templates/layout/three-column/percles/percles.twig new file mode 100644 index 000000000..c6c4611ed --- /dev/null +++ b/core/templates/layout/three-column/percles/percles.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * + * + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    + +
    + {{ fifth }} +
    +
    + diff --git a/core/templates/layout/three-column/percles/right/css/percles-right.css b/core/templates/layout/three-column/percles/right/css/percles-right.css deleted file mode 100644 index f782ef553..000000000 --- a/core/templates/layout/three-column/percles/right/css/percles-right.css +++ /dev/null @@ -1,221 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--percles-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--percles-right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--percles-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--percles-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--percles-right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--percles-right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--percles-right .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-right .column { - width: calc(33.33333% - 26.66667px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-right .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-right .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-right .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--percles-right .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--percles-right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--percles-right .column--first { - width: calc(66.66667% - 33.33333px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--percles-right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--percles-right .column--first { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--percles-right .column--first { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--percles-right .column--first { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -.layout--percles-right .column--third { - clear: both; -} - -/*# sourceMappingURL=percles-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/percles/right/percles-right.html.twig b/core/templates/layout/three-column/percles/right/percles-right.html.twig deleted file mode 100644 index fad3b6ce3..000000000 --- a/core/templates/layout/three-column/percles/right/percles-right.html.twig +++ /dev/null @@ -1,39 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    -
    -
    diff --git a/core/templates/layout/three-column/percles/right/scss/percles-right.scss b/core/templates/layout/three-column/percles/right/scss/percles-right.scss deleted file mode 100644 index a66040aca..000000000 --- a/core/templates/layout/three-column/percles/right/scss/percles-right.scss +++ /dev/null @@ -1,48 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 3, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -$column-first: ( - 'xs': 1 of 1, - 'sm': 2 of 3, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -.layout--percles-right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse; - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - - } - - .column--third { - clear: both; - } -} diff --git a/core/templates/layout/three-column/robot/css/robot.css b/core/templates/layout/three-column/robot/css/robot.css deleted file mode 100644 index 87dcdfbad..000000000 --- a/core/templates/layout/three-column/robot/css/robot.css +++ /dev/null @@ -1,223 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--robot { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--robot { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--robot { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--robot { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--robot { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--robot { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--robot::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--robot .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--robot .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--robot .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--robot .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--robot .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--robot .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--robot .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--robot .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--robot .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--robot .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--robot .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--robot .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--robot .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(25% - 25px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--robot .column--first, - .layout--robot .column--third { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=robot.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/robot/robot.html.twig b/core/templates/layout/three-column/robot/robot.html.twig deleted file mode 100644 index 25950dc32..000000000 --- a/core/templates/layout/three-column/robot/robot.html.twig +++ /dev/null @@ -1,37 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    -
    - -
    diff --git a/core/templates/layout/three-column/robot/robot.json b/core/templates/layout/three-column/robot/robot.json new file mode 100644 index 000000000..84598a104 --- /dev/null +++ b/core/templates/layout/three-column/robot/robot.json @@ -0,0 +1,7 @@ +{ + "modifier_class": "layout--robot", + "header": "

    An optional Header Area

    ", + "first": "

    First column

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    " +} diff --git a/core/templates/layout/three-column/robot/robot.twig b/core/templates/layout/three-column/robot/robot.twig new file mode 100644 index 000000000..708b3bc51 --- /dev/null +++ b/core/templates/layout/three-column/robot/robot.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + diff --git a/core/templates/layout/three-column/robot/scss/robot.scss b/core/templates/layout/three-column/robot/scss/robot.scss deleted file mode 100644 index 73951f5d3..000000000 --- a/core/templates/layout/three-column/robot/scss/robot.scss +++ /dev/null @@ -1,46 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -// Responsive grid patterns for the column. -$column-f3: ( - 'xs': 1 of 1, - 'sm': 1 of 4, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--robot { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--second { - @include responsive-grid-column($column, $default-container); - } - - .column--first, - .column--third { - @include responsive-grid-column($column-f3, $default-container); - } - -} diff --git a/core/templates/layout/three-column/space-invader/css/space-invader.css b/core/templates/layout/three-column/space-invader/css/space-invader.css deleted file mode 100644 index 495aa77d0..000000000 --- a/core/templates/layout/three-column/space-invader/css/space-invader.css +++ /dev/null @@ -1,181 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--space-invader { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--space-invader { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--space-invader { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--space-invader { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--space-invader { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--space-invader { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--space-invader::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--space-invader .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--space-invader .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--space-invader .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--space-invader .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--space-invader .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--space-invader .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--space-invader .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--space-invader .column--first, - .layout--space-invader .column--second, - .layout--space-invader .column--third { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=space-invader.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/space-invader/scss/space-invader.scss b/core/templates/layout/three-column/space-invader/scss/space-invader.scss deleted file mode 100644 index 53bc68c5b..000000000 --- a/core/templates/layout/three-column/space-invader/scss/space-invader.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-ft: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--space-invader { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first, - .column--second, - .column--third { - @include responsive-grid-column($column-ft, $default-container); - } - -} diff --git a/core/templates/layout/three-column/space-invader/space-invader.html.twig b/core/templates/layout/three-column/space-invader/space-invader.html.twig deleted file mode 100644 index c662be1ff..000000000 --- a/core/templates/layout/three-column/space-invader/space-invader.html.twig +++ /dev/null @@ -1,36 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    -
    -
    diff --git a/core/templates/layout/three-column/space-invader/space-invader.json b/core/templates/layout/three-column/space-invader/space-invader.json new file mode 100644 index 000000000..65b28c694 --- /dev/null +++ b/core/templates/layout/three-column/space-invader/space-invader.json @@ -0,0 +1,7 @@ +{ + "modifier_class": "layout--space-invader", + "header": "

    An optional Header Area

    ", + "first": "

    First column

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    " +} diff --git a/core/templates/layout/three-column/space-invader/space-invader.twig b/core/templates/layout/three-column/space-invader/space-invader.twig new file mode 100644 index 000000000..708b3bc51 --- /dev/null +++ b/core/templates/layout/three-column/space-invader/space-invader.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 96181a174..04e7d113d 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1336,9 +1336,9 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { opacity: .8; } .layout > * { border: dashed 1px #2e2d29; } - .layout > header { + .layout header { background-color: rgba(0, 0, 139, 0.15); } - .layout > footer { + .layout footer { background-color: rgba(85, 107, 47, 0.2); } .layout > section, .layout > div, @@ -1351,5 +1351,9 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .layout section > aside { border: dashed 1px #2e2d29; background-color: rgba(128, 0, 0, 0.2); } + .layout header, + .layout footer, + .layout aside { + border: dashed 1px #2e2d29; } /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_layout-colors.scss b/kss/builder/decanter/scss/_layout-colors.scss index 02c38870b..8e86ff189 100644 --- a/kss/builder/decanter/scss/_layout-colors.scss +++ b/kss/builder/decanter/scss/_layout-colors.scss @@ -12,11 +12,11 @@ border: dashed 1px $color-black; } - > header { + header { background-color: rgba(darkblue, .15); } - > footer { + footer { background-color: rgba(darkolivegreen, .2); } @@ -35,4 +35,10 @@ background-color: rgba(maroon, .2); } + header, + footer, + aside { + border: dashed 1px $color-black; + } + } From 5188038c34e36738008f1802d18c5fa73afe0982 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 12:20:29 -0800 Subject: [PATCH 026/123] Layout - Sunset Delorean. --- core/css/decanter.css | 158 ++++++++ .../three-column/_sunset-delorean-right.scss | 23 ++ .../layout/three-column/_sunset-delorean.scss | 38 ++ core/scss/layout/three-column/index.scss | 4 +- .../three-column/strigges/css/strigges.css | 217 ----------- .../three-column/strigges/scss/strigges.scss | 44 --- .../layout/three-column/strigges/strigges.png | Bin 3254 -> 0 bytes .../left/css/sunset-delorean-left.css | 325 ---------------- .../left/scss/sunset-delorean-left.scss | 73 ---- .../left/sunset-delorean-left.html.twig | 40 -- .../right/css/sunset-delorean-right.css | 348 ------------------ .../right/scss/sunset-delorean-right.scss | 85 ----- .../right/sunset-delorean-right.html.twig | 40 -- .../{left => }/sunset-delorean-left.png | Bin .../{right => }/sunset-delorean-right.png | Bin .../sunset-delorean/sunset-delorean.json | 6 + .../sunset-delorean.twig} | 27 +- 17 files changed, 243 insertions(+), 1185 deletions(-) create mode 100644 core/scss/layout/three-column/_sunset-delorean-right.scss create mode 100644 core/scss/layout/three-column/_sunset-delorean.scss delete mode 100644 core/templates/layout/three-column/strigges/css/strigges.css delete mode 100644 core/templates/layout/three-column/strigges/scss/strigges.scss delete mode 100644 core/templates/layout/three-column/strigges/strigges.png delete mode 100644 core/templates/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css delete mode 100644 core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss delete mode 100644 core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig delete mode 100644 core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css delete mode 100644 core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss delete mode 100644 core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig rename core/templates/layout/three-column/sunset-delorean/{left => }/sunset-delorean-left.png (100%) rename core/templates/layout/three-column/sunset-delorean/{right => }/sunset-delorean-right.png (100%) create mode 100644 core/templates/layout/three-column/sunset-delorean/sunset-delorean.json rename core/templates/layout/three-column/{strigges/strigges.html.twig => sunset-delorean/sunset-delorean.twig} (61%) diff --git a/core/css/decanter.css b/core/css/decanter.css index f5187a5f2..b08e0c93c 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2512,6 +2512,164 @@ dfn { grid-column: 1 / span 3; -ms-grid-column-span: span 3-1; } +.layout-sunset-delorean > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-sunset-delorean > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-sunset-delorean > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-sunset-delorean > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-sunset-delorean > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-sunset-delorean > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-sunset-delorean > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 20px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-sunset-delorean > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 30px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 30px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-sunset-delorean > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 30px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 30px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } + .layout-sunset-delorean > div > header { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + .layout-sunset-delorean > div > aside { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: span 2-1; } + .layout-sunset-delorean > div > section { + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout-sunset-delorean--right > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + +.layout-sunset-delorean--right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: span 1-3; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: span 2-1; } + +.layout-sunset-delorean--right > div > section { + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + .layout--donies > section, .layout--donies > header, .layout--donies > footer { diff --git a/core/scss/layout/three-column/_sunset-delorean-right.scss b/core/scss/layout/three-column/_sunset-delorean-right.scss new file mode 100644 index 000000000..9ea628917 --- /dev/null +++ b/core/scss/layout/three-column/_sunset-delorean-right.scss @@ -0,0 +1,23 @@ +@charset "UTF-8"; + +// +// Right side variant. +// +.layout-sunset-delorean--right { + + > div { + + > header { + @include grid-item-spans(1, span 2, 1, span 1); + } + + > aside { + @include grid-item-spans(3, span 1, 1, span 2); + } + + > section { + @include grid-item-spans(null, null, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/_sunset-delorean.scss b/core/scss/layout/three-column/_sunset-delorean.scss new file mode 100644 index 000000000..017591adf --- /dev/null +++ b/core/scss/layout/three-column/_sunset-delorean.scss @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +// +// Sunset Delorean +// +// A complext three column layout. +// +// .layout-sunset-delorean--right - Right side variant +// +// Markup: ../../../../../templates/layout/three-column/sunset-delorean/sunset-delorean.twig +// +// Style guide: Layout.3Column.SunsetDelorean +// +.layout-sunset-delorean { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(2, span 2, 1, span 1); + } + + > aside { + @include grid-item-spans(1, span 1, 1, span 2); + } + + > section { + @include grid-item-spans(null, null, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 2a3a58f56..147975cd3 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -18,4 +18,6 @@ 'percles', 'percles-right', 'robot', - 'space-invader'; + 'space-invader', + 'sunset-delorean', + 'sunset-delorean-right'; diff --git a/core/templates/layout/three-column/strigges/css/strigges.css b/core/templates/layout/three-column/strigges/css/strigges.css deleted file mode 100644 index 72227481b..000000000 --- a/core/templates/layout/three-column/strigges/css/strigges.css +++ /dev/null @@ -1,217 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--strigges { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--strigges { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--strigges { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--strigges { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--strigges { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--strigges { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--strigges::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--strigges .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--strigges .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--strigges .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--strigges .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--strigges .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--strigges .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--strigges .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--strigges .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--strigges .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--strigges .column { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--strigges .column { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--strigges .column { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--strigges .column { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--strigges .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--strigges .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--strigges .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--strigges .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--strigges .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--strigges .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=strigges.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/strigges/scss/strigges.scss b/core/templates/layout/three-column/strigges/scss/strigges.scss deleted file mode 100644 index 4ef2b1ff0..000000000 --- a/core/templates/layout/three-column/strigges/scss/strigges.scss +++ /dev/null @@ -1,44 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -$column-second: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--strigges { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--second { - @include responsive-grid-column($column-second, $default-container); - } - -} diff --git a/core/templates/layout/three-column/strigges/strigges.png b/core/templates/layout/three-column/strigges/strigges.png deleted file mode 100644 index 0f683d976e1b5ea7aae8cb356ff1437e05487942..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3254 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 c1?S%63qnUa2 div > section::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--left > div > section { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--left > div > section { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--left > div > section { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--left > div > section { - width: calc(75% - 70px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--left > div > section { - width: calc(75% - 105px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--left > div > section { - width: calc(75% - 0.4375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 120px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--left > div > section .column--header { - width: calc(100% - 0.5in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--left > div > section .column--first, - .layout--sunset-delorean--left > div > section .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--left > div > aside { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--left > div > aside { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--left > div > aside { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--left > div > aside { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--left > div > aside { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--left > div > aside { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=sunset-delorean-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss b/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss deleted file mode 100644 index 7e0918f1a..000000000 --- a/core/templates/layout/three-column/sunset-delorean/left/scss/sunset-delorean-left.scss +++ /dev/null @@ -1,73 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 3 of 4, - 'lg': 3 of 4, - 'xl': 3 of 4, - 'print': 3 of 4 -); - -$column-header: ( - 'md': 1 of 1, - 'lg': 1 of 1, - 'xl': 1 of 1, - 'print': 1 of 1 -); - -$column-fs: ( - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -$column-aside: ( - 'sm': 1 of 1, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--sunset-delorean--left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - // Main Content. - > div > section { - @include clearfix; - @include responsive-grid-column($column, $default-container); - - // Gotta do better than this. - .column--header { - @include responsive-grid-column($column-header, $default-container); - } - - // Two columns in right content region. - .column--first, - .column--second { - @include responsive-grid-column($column-fs, $default-container); - } - - } - - // Sidebar - > div > aside { - @include responsive-grid-column($column-aside, $default-container); - } - -} diff --git a/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig b/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig deleted file mode 100644 index a109267d8..000000000 --- a/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.html.twig +++ /dev/null @@ -1,40 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    -
    -
    - {{ content.header }} -
    - -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - - - -
    -
    diff --git a/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css b/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css deleted file mode 100644 index ec0988d80..000000000 --- a/core/templates/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css +++ /dev/null @@ -1,348 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--sunset-delorean--right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--sunset-delorean--right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) { - .layout--sunset-delorean--right > div { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: flex-start; - align-content: center; - box-sizing: border-box; - } - .layout--sunset-delorean--right > div > * { - flex: 0 0 auto; - box-sizing: inherit; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--sunset-delorean--right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--sunset-delorean--right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -.layout--sunset-delorean--right > div > section { - order: 10; -} - -.layout--sunset-delorean--right > div > section::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right > div > section { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right > div > section { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right > div > section { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right > div > section { - width: calc(66.66667% - 66.66667px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right > div > section { - width: calc(66.66667% - 100px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--right > div > section { - width: calc(66.66667% - 0.41667in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 80px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 120px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--right > div > section .column--header { - width: calc(100% - 0.5in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--right > div > section .column--first, - .layout--sunset-delorean--right > div > section .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -.layout--sunset-delorean--right > div > aside { - order: 1; -} - -@media only screen and (max-width: 575px) { - .layout--sunset-delorean--right > div > aside { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--sunset-delorean--right > div > aside { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--sunset-delorean--right > div > aside { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--sunset-delorean--right > div > aside { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--sunset-delorean--right > div > aside { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--sunset-delorean--right > div > aside { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=sunset-delorean-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss b/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss deleted file mode 100644 index 040a5090e..000000000 --- a/core/templates/layout/three-column/sunset-delorean/right/scss/sunset-delorean-right.scss +++ /dev/null @@ -1,85 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-section: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 2 of 3, - 'lg': 2 of 3, - 'xl': 2 of 3, - 'print': 2 of 3 -); - -$column-header: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 1, - 'lg': 1 of 1, - 'xl': 1 of 1, - 'print': 1 of 1 -); - -$column-fs: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -$column-aside: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -.layout--sunset-delorean--right { - @include responsive-container($default-container); - - > div { - @include grid-media($media-md) { - @include flex-container(); - } - } - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - // Main Content. - > div > section { - order: 10; - @include clearfix; - @include responsive-grid-column($column-section, $default-container); - - // Gotta do better than this. - .column--header { - @include responsive-grid-column($column-header, $default-container); - } - - // Two columns in right content region. - .column--first, - .column--second { - @include responsive-grid-column($column-fs, $default-container); - } - - } - - // Sidebar - > div > aside { - order: 1; - @include responsive-grid-column($column-aside, $default-container); - } - -} diff --git a/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig b/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig deleted file mode 100644 index 21e0b7fa2..000000000 --- a/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.html.twig +++ /dev/null @@ -1,40 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    -
    -
    - {{ content.header }} -
    - -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    -
    -
    - - - -
    -
    diff --git a/core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.png b/core/templates/layout/three-column/sunset-delorean/sunset-delorean-left.png similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/left/sunset-delorean-left.png rename to core/templates/layout/three-column/sunset-delorean/sunset-delorean-left.png diff --git a/core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.png b/core/templates/layout/three-column/sunset-delorean/sunset-delorean-right.png similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/right/sunset-delorean-right.png rename to core/templates/layout/three-column/sunset-delorean/sunset-delorean-right.png diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean.json b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.json new file mode 100644 index 000000000..391a2c98d --- /dev/null +++ b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.json @@ -0,0 +1,6 @@ +{ + "header": "

    An optional Header Area

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "first": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/strigges/strigges.html.twig b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig similarity index 61% rename from core/templates/layout/three-column/strigges/strigges.html.twig rename to core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig index a322a8570..edd6c60a7 100644 --- a/core/templates/layout/three-column/strigges/strigges.html.twig +++ b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig @@ -14,20 +14,23 @@ * - $content['second']: Content in the right column. */ #} -
    + +
    +
    + {{ header }} +
    -
    -
    - {{ content.first }} -
    +
    + {{ first }} +
    -
    - {{ content.second }} -
    +
    + {{ second }} +
    -
    - {{ content.third }} -
    + {# Sidebar #} +
    -
    From d2b5b9370efdfddd483202dcb6060815b6ad98e3 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 13:00:01 -0800 Subject: [PATCH 027/123] Layout - Valmer. --- core/css/decanter.css | 401 ++++++++++++++++++ .../layout/three-column/_thions-bottom.scss | 28 ++ core/scss/layout/three-column/_thions.scss | 46 ++ .../layout/three-column/_valmer-right.scss | 17 + core/scss/layout/three-column/_valmer.scss | 34 ++ core/scss/layout/three-column/index.scss | 6 +- .../thions/bottom/css/thions-bottom.css | 227 ---------- .../thions/bottom/scss/thions-bottom.scss | 50 --- .../thions/bottom/thions-bottom.html.twig | 39 -- .../thions/{bottom => }/thions-bottom.png | Bin .../thions/{top => }/thions-top.png | Bin .../layout/three-column/thions/thions.json | 7 + .../{top/thions-top.html.twig => thions.twig} | 24 +- .../thions/top/css/thions-top.css | 227 ---------- .../thions/top/scss/thions-top.scss | 49 --- .../valmer/left/css/valmer-left.css | 223 ---------- .../valmer/left/scss/valmer-left.scss | 45 -- .../valmer/left/valmer-left.html.twig | 41 -- .../valmer/right/css/valmer-right.css | 243 ----------- .../valmer/right/scss/valmer-right.scss | 52 --- .../valmer/right/valmer-right.html.twig | 41 -- .../valmer/{left => }/valmer-left.png | Bin .../valmer/{right => }/valmer-right.png | Bin .../layout/three-column/valmer/valmer.json | 7 + .../layout/three-column/valmer/valmer.twig | 44 ++ 25 files changed, 601 insertions(+), 1250 deletions(-) create mode 100644 core/scss/layout/three-column/_thions-bottom.scss create mode 100644 core/scss/layout/three-column/_thions.scss create mode 100644 core/scss/layout/three-column/_valmer-right.scss create mode 100644 core/scss/layout/three-column/_valmer.scss delete mode 100644 core/templates/layout/three-column/thions/bottom/css/thions-bottom.css delete mode 100644 core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss delete mode 100644 core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig rename core/templates/layout/three-column/thions/{bottom => }/thions-bottom.png (100%) rename core/templates/layout/three-column/thions/{top => }/thions-top.png (100%) create mode 100644 core/templates/layout/three-column/thions/thions.json rename core/templates/layout/three-column/thions/{top/thions-top.html.twig => thions.twig} (57%) delete mode 100644 core/templates/layout/three-column/thions/top/css/thions-top.css delete mode 100644 core/templates/layout/three-column/thions/top/scss/thions-top.scss delete mode 100644 core/templates/layout/three-column/valmer/left/css/valmer-left.css delete mode 100644 core/templates/layout/three-column/valmer/left/scss/valmer-left.scss delete mode 100644 core/templates/layout/three-column/valmer/left/valmer-left.html.twig delete mode 100644 core/templates/layout/three-column/valmer/right/css/valmer-right.css delete mode 100644 core/templates/layout/three-column/valmer/right/scss/valmer-right.scss delete mode 100644 core/templates/layout/three-column/valmer/right/valmer-right.html.twig rename core/templates/layout/three-column/valmer/{left => }/valmer-left.png (100%) rename core/templates/layout/three-column/valmer/{right => }/valmer-right.png (100%) create mode 100644 core/templates/layout/three-column/valmer/valmer.json create mode 100644 core/templates/layout/three-column/valmer/valmer.twig diff --git a/core/css/decanter.css b/core/css/decanter.css index b08e0c93c..f77a0ebc2 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2670,6 +2670,407 @@ dfn { grid-row: 2 / span 1; -ms-grid-row-span: span 1-2; } +.layout-thions > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-thions > div { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-thions > div { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-thions > div { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-thions > div { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-thions > div { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-thions > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 20px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 20px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-thions > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 20px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 20px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-thions > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 20px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 20px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-thions > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 30px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 30px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-thions > div > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 30px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 30px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-thions > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } + .layout-thions > div > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 6; + -ms-grid-column-span: span 6-1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + .layout-thions > div > div:nth-of-type(2) { + -ms-grid-column: 7; + grid-column: 7 / span 6; + -ms-grid-column-span: span 6-7; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + .layout-thions > div > div:nth-of-type(3) { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: span 4-1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + .layout-thions > div > div:nth-of-type(4) { + -ms-grid-column: 5; + grid-column: 5 / span 4; + -ms-grid-column-span: span 4-5; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + .layout-thions > div > div:nth-of-type(5) { + -ms-grid-column: 9; + grid-column: 9 / span 4; + -ms-grid-column-span: span 4-9; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout-thions--bottom > div > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: span 4-1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + +.layout-thions--bottom > div > div:nth-of-type(2) { + -ms-grid-column: 5; + grid-column: 5 / span 4; + -ms-grid-column-span: span 4-5; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + +.layout-thions--bottom > div > div:nth-of-type(3) { + -ms-grid-column: 9; + grid-column: 9 / span 4; + -ms-grid-column-span: span 4-9; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } + +.layout-thions--bottom > div > div:nth-of-type(4) { + -ms-grid-column: 1; + grid-column: 1 / span 6; + -ms-grid-column-span: span 6-1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout-thions--bottom > div > div:nth-of-type(5) { + -ms-grid-column: 7; + grid-column: 7 / span 6; + -ms-grid-column-span: span 6-7; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: span 1-2; } + +.layout-valmer > header, +.layout-valmer > footer, +.layout-valmer > section { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 768px; } } + @media only screen and (min-width: 1024px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 1024px; } } + @media only screen and (min-width: 1500px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 1500px; } } + @media only screen and (min-width: 0) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 20px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1024px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 30px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 30px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 30px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 15px; + margin-bottom: 15px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 30px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + +@media only screen and (min-width: 576px) { + .layout-valmer > section { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } } + +.layout-valmer > section > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: span 2-1; } + +.layout-valmer--right > section > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } + +.layout-valmer--right > section > div:nth-of-type(3) { + -ms-grid-column: 3; + grid-column: 3 / span 2; + -ms-grid-column-span: span 2-3; } + .layout--donies > section, .layout--donies > header, .layout--donies > footer { diff --git a/core/scss/layout/three-column/_thions-bottom.scss b/core/scss/layout/three-column/_thions-bottom.scss new file mode 100644 index 000000000..8ca93b9d6 --- /dev/null +++ b/core/scss/layout/three-column/_thions-bottom.scss @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +// +// Right side variant. +// +.layout-thions--bottom { + > div { + > div:nth-of-type(1) { + @include grid-item-spans(1, span 4, 1, span 1); + } + + > div:nth-of-type(2) { + @include grid-item-spans(5, span 4, 1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(9, span 4, 1, span 1); + } + + > div:nth-of-type(4) { + @include grid-item-spans(1, span 6, 2, span 1); + } + + > div:nth-of-type(5) { + @include grid-item-spans(7, span 6, 2, span 1); + } + } +} diff --git a/core/scss/layout/three-column/_thions.scss b/core/scss/layout/three-column/_thions.scss new file mode 100644 index 000000000..3893c406b --- /dev/null +++ b/core/scss/layout/three-column/_thions.scss @@ -0,0 +1,46 @@ +@charset "UTF-8"; + +// +// Thions +// +// A complext three column layout. +// +// .layout-thions--bottom - A bottom heavy variant. +// +// Markup: ../../../../../templates/layout/three-column/thions/thions.twig +// +// Style guide: Layout.3Column.Thions +// +.layout-thions { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns; + } + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 6, 1, span 1); + } + + > div:nth-of-type(2) { + @include grid-item-spans(7, span 6, 1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(1, span 4, 2, span 1); + } + + > div:nth-of-type(4) { + @include grid-item-spans(5, span 4, 2, span 1); + } + + > div:nth-of-type(5) { + @include grid-item-spans(9, span 4, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/_valmer-right.scss b/core/scss/layout/three-column/_valmer-right.scss new file mode 100644 index 000000000..8a5ba676a --- /dev/null +++ b/core/scss/layout/three-column/_valmer-right.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// Right side variant. +// +.layout-valmer--right { + > section { + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(3, span 2); + } + } +} diff --git a/core/scss/layout/three-column/_valmer.scss b/core/scss/layout/three-column/_valmer.scss new file mode 100644 index 000000000..225e27398 --- /dev/null +++ b/core/scss/layout/three-column/_valmer.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +// +// Valmer +// +// A complext three column layout. +// +// .layout-valmer--right - A right heavy variant. +// +// Markup: ../../../../../templates/layout/three-column/valmer/valmer.twig +// +// Style guide: Layout.3Column.Valmer +// +.layout-valmer { + > header, + > footer, + > section { + @include centered-column; + @include responsive-grid-gap; + } + + > section { + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr 1fr); + } + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 2); + } + + } +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/three-column/index.scss index 147975cd3..600d1adb0 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/three-column/index.scss @@ -20,4 +20,8 @@ 'robot', 'space-invader', 'sunset-delorean', - 'sunset-delorean-right'; + 'sunset-delorean-right', + 'thions', + 'thions-bottom', + 'valmer', + 'valmer-right'; diff --git a/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css b/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css deleted file mode 100644 index fabedeac1..000000000 --- a/core/templates/layout/three-column/thions/bottom/css/thions-bottom.css +++ /dev/null @@ -1,227 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--thions-bottom { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-bottom { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-bottom { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-bottom { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-bottom { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--thions-bottom { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--thions-bottom::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--thions-bottom .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-bottom .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-bottom .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-bottom .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-bottom .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--thions-bottom .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--thions-bottom .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--thions-bottom .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-bottom .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-bottom .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-bottom .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-bottom .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--thions-bottom .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--thions-bottom .column--fourth, - .layout--thions-bottom .column--fifth { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -.layout--thions-bottom .column--fourth { - clear: both; -} - -/*# sourceMappingURL=thions-bottom.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss b/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss deleted file mode 100644 index a33badc85..000000000 --- a/core/templates/layout/three-column/thions/bottom/scss/thions-bottom.scss +++ /dev/null @@ -1,50 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -$column-ff: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - - -.layout--thions-bottom { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--fourth, - .column--fifth { - @include responsive-grid-column($column-ff, $default-container); - } - - .column--fourth { - clear: both; - } - -} diff --git a/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig b/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig deleted file mode 100644 index daf1521ef..000000000 --- a/core/templates/layout/three-column/thions/bottom/thions-bottom.html.twig +++ /dev/null @@ -1,39 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    - -
    - {{ content.fourth }} -
    - -
    - {{ content.fifth }} -
    -
    -
    diff --git a/core/templates/layout/three-column/thions/bottom/thions-bottom.png b/core/templates/layout/three-column/thions/thions-bottom.png similarity index 100% rename from core/templates/layout/three-column/thions/bottom/thions-bottom.png rename to core/templates/layout/three-column/thions/thions-bottom.png diff --git a/core/templates/layout/three-column/thions/top/thions-top.png b/core/templates/layout/three-column/thions/thions-top.png similarity index 100% rename from core/templates/layout/three-column/thions/top/thions-top.png rename to core/templates/layout/three-column/thions/thions-top.png diff --git a/core/templates/layout/three-column/thions/thions.json b/core/templates/layout/three-column/thions/thions.json new file mode 100644 index 000000000..4a7c14c1b --- /dev/null +++ b/core/templates/layout/three-column/thions/thions.json @@ -0,0 +1,7 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fifth": "

    Fifth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/thions/top/thions-top.html.twig b/core/templates/layout/three-column/thions/thions.twig similarity index 57% rename from core/templates/layout/three-column/thions/top/thions-top.html.twig rename to core/templates/layout/three-column/thions/thions.twig index 3696b6db9..dc4bc14cc 100644 --- a/core/templates/layout/three-column/thions/top/thions-top.html.twig +++ b/core/templates/layout/three-column/thions/thions.twig @@ -14,26 +14,26 @@ * - $content['second']: Content in the right column. */ #} -
    -
    -
    - {{ content.first }} + +
    +
    + {{ first }}
    -
    - {{ content.second }} +
    + {{ second }}
    -
    - {{ content.third }} +
    + {{ third }}
    -
    - {{ content.fourth }} +
    + {{ fourth }}
    -
    - {{ content.fifth }} +
    + {{ fifth }}
    diff --git a/core/templates/layout/three-column/thions/top/css/thions-top.css b/core/templates/layout/three-column/thions/top/css/thions-top.css deleted file mode 100644 index a0dd4ec4c..000000000 --- a/core/templates/layout/three-column/thions/top/css/thions-top.css +++ /dev/null @@ -1,227 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--thions-top { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-top { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-top { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-top { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-top { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--thions-top { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--thions-top::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--thions-top .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-top .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-top .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-top .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-top .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--thions-top .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--thions-top .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--thions-top .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-top .column { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-top .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-top .column { - width: calc(33.33333% - 53.33333px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-top .column { - width: calc(33.33333% - 80px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--thions-top .column { - width: calc(33.33333% - 0.33333in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--thions-top .column--first, - .layout--thions-top .column--second { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -.layout--thions-top .column--third { - clear: both; -} - -/*# sourceMappingURL=thions-top.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/thions/top/scss/thions-top.scss b/core/templates/layout/three-column/thions/top/scss/thions-top.scss deleted file mode 100644 index 8fac11040..000000000 --- a/core/templates/layout/three-column/thions/top/scss/thions-top.scss +++ /dev/null @@ -1,49 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 3, - 'lg': 1 of 3, - 'xl': 1 of 3, - 'print': 1 of 3 -); - -$column-fs: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -.layout--thions-top { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column { - @include responsive-grid-column($column, $default-container); - } - - .column--first, - .column--second { - @include responsive-grid-column($column-fs, $default-container); - } - - .column--third { - clear: both; - } - -} diff --git a/core/templates/layout/three-column/valmer/left/css/valmer-left.css b/core/templates/layout/three-column/valmer/left/css/valmer-left.css deleted file mode 100644 index 5287a6e4c..000000000 --- a/core/templates/layout/three-column/valmer/left/css/valmer-left.css +++ /dev/null @@ -1,223 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--valmer-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-left { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-left { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-left { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--valmer-left { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--valmer-left::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--valmer-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-left .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-left .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-left .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--valmer-left .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--valmer-left .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (max-width: 575px) { - .layout--valmer-left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-left .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-left .column--first { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-left .column--first { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-left .column--first { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--valmer-left .column--first { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -@media only screen and (max-width: 575px) { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--valmer-left .column--second, - .layout--valmer-left .column--third { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=valmer-left.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss b/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss deleted file mode 100644 index f234a390a..000000000 --- a/core/templates/layout/three-column/valmer/left/scss/valmer-left.scss +++ /dev/null @@ -1,45 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -$column-st: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--valmer-left { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - } - - .column--second, - .column--third { - @include responsive-grid-column($column-st, $default-container); - } - -} diff --git a/core/templates/layout/three-column/valmer/left/valmer-left.html.twig b/core/templates/layout/three-column/valmer/left/valmer-left.html.twig deleted file mode 100644 index 210f98530..000000000 --- a/core/templates/layout/three-column/valmer/left/valmer-left.html.twig +++ /dev/null @@ -1,41 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    -
    - -
    - {{ content.footer }} -
    - -
    diff --git a/core/templates/layout/three-column/valmer/right/css/valmer-right.css b/core/templates/layout/three-column/valmer/right/css/valmer-right.css deleted file mode 100644 index ed2c17836..000000000 --- a/core/templates/layout/three-column/valmer/right/css/valmer-right.css +++ /dev/null @@ -1,243 +0,0 @@ -@media only screen and (max-width: 575px) { - .layout--valmer-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-right { - padding: 1em calc(((50% /12) * 0) + 20px); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-right { - padding: 1em calc(((50% /12) * 0) + 40px); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-right { - padding: 1em calc(50% - (750px - 60px)); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only print { - .layout--valmer-right { - padding: 1em calc(((50% /12) * 0) + 0.25in); - } - .layout--valmer-right::after { - clear: both; - content: ""; - display: block; - } -} - -@media only screen and (max-width: 575px) { - .layout--valmer-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-right .grid-collapse { - margin-left: -20px; - margin-right: -20px; - width: calc(100% + 40px); - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-right .grid-collapse { - margin-left: -40px; - margin-right: -40px; - width: calc(100% + 80px); - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-right .grid-collapse { - margin-left: -60px; - margin-right: -60px; - width: calc(100% + 120px); - } -} - -@media only print { - .layout--valmer-right .grid-collapse { - margin-left: -0.25in; - margin-right: -0.25in; - width: calc(100% + 0.5in); - } -} - -.layout--valmer-right .grid-collapse::after { - clear: both; - content: ""; - display: block; -} - -@media only screen and (min-width: 576px) { - .layout--valmer-right section { - display: flex; - flex-flow: row wrap; - justify-content: "flex-start"; - align-items: flex-start; - align-content: center; - box-sizing: border-box; - } - .layout--valmer-right section > * { - flex: 0 0 auto; - box-sizing: inherit; - } -} - -@media only screen and (max-width: 575px) { - .layout--valmer-right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-right .column--first { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-right .column--first { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-right .column--first { - width: calc(50% - 60px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-right .column--first { - width: calc(50% - 90px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--valmer-right .column--first { - width: calc(50% - 0.375in); - float: left; - margin-left: 0.25in; - } -} - -.layout--valmer-right .column--second, -.layout--valmer-right .column--third { - order: 1; -} - -@media only screen and (max-width: 575px) { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(100% - 40px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 576px) and (max-width: 767px) { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(50% - 30px); - float: left; - margin-left: 20px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1024px) and (max-width: 1499px) { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(25% - 50px); - float: left; - margin-left: 40px; - } -} - -@media only screen and (min-width: 1500px) { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(25% - 75px); - float: left; - margin-left: 60px; - } -} - -@media only print { - .layout--valmer-right .column--second, - .layout--valmer-right .column--third { - width: calc(25% - 0.3125in); - float: left; - margin-left: 0.25in; - } -} - -/*# sourceMappingURL=valmer-right.css.map */ \ No newline at end of file diff --git a/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss b/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss deleted file mode 100644 index f22de0dea..000000000 --- a/core/templates/layout/three-column/valmer/right/scss/valmer-right.scss +++ /dev/null @@ -1,52 +0,0 @@ -@charset 'UTF-8'; - -// My grids -@import "config/grid-system"; - -// Decant. -@import "decanter/core/utilities/decanter-utilities"; - -// Responsive grid patterns for the column. -$column-first: ( - 'xs': 1 of 1, - 'sm': 1 of 1, - 'md': 1 of 2, - 'lg': 1 of 2, - 'xl': 1 of 2, - 'print': 1 of 2 -); - -$column-st: ( - 'xs': 1 of 1, - 'sm': 1 of 2, - 'md': 1 of 4, - 'lg': 1 of 4, - 'xl': 1 of 4, - 'print': 1 of 4 -); - -.layout--valmer-right { - @include responsive-container($default-container); - - .grid-collapse { - @include responsive-grid-collapse($default-container); - @include clearfix; - } - - section { - @include grid-media($media-sm) { - @include flex-container(('justify-content': 'flex-start')); - } - } - - .column--first { - @include responsive-grid-column($column-first, $default-container); - } - - .column--second, - .column--third { - order: 1; - @include responsive-grid-column($column-st, $default-container); - } - -} diff --git a/core/templates/layout/three-column/valmer/right/valmer-right.html.twig b/core/templates/layout/three-column/valmer/right/valmer-right.html.twig deleted file mode 100644 index bfaa15bcb..000000000 --- a/core/templates/layout/three-column/valmer/right/valmer-right.html.twig +++ /dev/null @@ -1,41 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. - */ -#} -
    - -
    - {{ content.header }} -
    - -
    -
    - {{ content.first }} -
    - -
    - {{ content.second }} -
    - -
    - {{ content.third }} -
    -
    - -
    - {{ content.footer }} -
    - -
    diff --git a/core/templates/layout/three-column/valmer/left/valmer-left.png b/core/templates/layout/three-column/valmer/valmer-left.png similarity index 100% rename from core/templates/layout/three-column/valmer/left/valmer-left.png rename to core/templates/layout/three-column/valmer/valmer-left.png diff --git a/core/templates/layout/three-column/valmer/right/valmer-right.png b/core/templates/layout/three-column/valmer/valmer-right.png similarity index 100% rename from core/templates/layout/three-column/valmer/right/valmer-right.png rename to core/templates/layout/three-column/valmer/valmer-right.png diff --git a/core/templates/layout/three-column/valmer/valmer.json b/core/templates/layout/three-column/valmer/valmer.json new file mode 100644 index 000000000..b25fa8bc3 --- /dev/null +++ b/core/templates/layout/three-column/valmer/valmer.json @@ -0,0 +1,7 @@ +{ + "header": "

    An optional Header Area

    ", + "footer": "

    Optional Footer

    ", + "first": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adiptrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore eum.

    " +} diff --git a/core/templates/layout/three-column/valmer/valmer.twig b/core/templates/layout/three-column/valmer/valmer.twig new file mode 100644 index 000000000..8da5acc43 --- /dev/null +++ b/core/templates/layout/three-column/valmer/valmer.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} +
    From 280021ab6ef0ec89199b4cb4e8763a692b974caa Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 15:39:08 -0800 Subject: [PATCH 028/123] Refactored Flex Grid with Helpers. --- core/css/decanter-grid.css | 134 ++++++++++++++---- core/css/decanter.css | 134 ++++++++++++++---- core/scss/core/grid/_grid.scss | 2 +- .../functions/flex/_flex-column-ratio.scss | 24 ++++ .../functions/flex/_flex-column-width.scss | 31 ++++ .../functions/flex/_flex-parse-columns.scss | 21 +++ core/scss/utilities/functions/flex/index.scss | 10 ++ core/scss/utilities/functions/index.scss | 1 + .../_flex-classes.scss} | 89 ++---------- .../utilities/mixins/flex/_flex-column.scss | 28 ++++ .../utilities/mixins/flex/_flex-item.scss | 17 --- .../mixins/flex/_responsive-flex-column.scss | 12 ++ core/scss/utilities/mixins/flex/index.scss | 4 +- core/scss/utilities/mixins/grid/index.scss | 1 - core/scss/utilities/variables/core/_grid.scss | 22 +++ 15 files changed, 383 insertions(+), 147 deletions(-) create mode 100644 core/scss/utilities/functions/flex/_flex-column-ratio.scss create mode 100644 core/scss/utilities/functions/flex/_flex-column-width.scss create mode 100644 core/scss/utilities/functions/flex/_flex-parse-columns.scss create mode 100644 core/scss/utilities/functions/flex/index.scss rename core/scss/utilities/mixins/{grid/_grid-classes.scss => flex/_flex-classes.scss} (52%) create mode 100644 core/scss/utilities/mixins/flex/_flex-column.scss delete mode 100644 core/scss/utilities/mixins/flex/_flex-item.scss create mode 100644 core/scss/utilities/mixins/flex/_responsive-flex-column.scss diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 8766a80e9..178158db5 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -12,100 +12,186 @@ padding-right: 3rem; padding-left: 3rem; } } -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .flex-item:last-child:nth-child(odd) { - width: calc(1 / 1 * 100% - (0px)); } } - .grid--3-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--3-of-12 { + width: calc(25% - 15px); } } + @media only screen and (min-width: 576px) { + .grid--3-of-12 { + width: calc(25% - 15px); } } @media only screen and (min-width: 768px) { .grid--3-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(25% - 15px); } } @media only screen and (min-width: 1024px) { .grid--3-of-12 { - width: calc(3 / 12 * 100% - (22.5px)); } } + width: calc(25% - 22.5px); } } + @media only screen and (min-width: 1500px) { + .grid--3-of-12 { + width: calc(25% - 22.5px); } } .grid--9-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 576px) { + .grid--9-of-12 { + width: calc(75% - 5px); } } @media only screen and (min-width: 768px) { .grid--9-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(75% - 5px); } } @media only screen and (min-width: 1024px) { .grid--9-of-12 { - width: calc(9 / 12 * 100% - (7.5px)); } } + width: calc(75% - 7.5px); } } + @media only screen and (min-width: 1500px) { + .grid--9-of-12 { + width: calc(75% - 7.5px); } } .grid--4-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--4-of-12 { + width: calc(33.3333333333% - 13.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .grid--4-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(33.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--4-of-12 { - width: calc(4 / 12 * 100% - (20px)); } } + width: calc(33.3333333333% - 20px); } } + @media only screen and (min-width: 1500px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 20px); } } .grid--8-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 768px) { .grid--8-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--8-of-12 { - width: calc(8 / 12 * 100% - (10px)); } } + width: calc(66.6666666667% - 10px); } } + @media only screen and (min-width: 1500px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 10px); } } .grid--6-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--6-of-12 { + width: calc(50% - 10px); } } + @media only screen and (min-width: 576px) { + .grid--6-of-12 { + width: calc(50% - 10px); } } @media only screen and (min-width: 768px) { .grid--6-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(50% - 10px); } } @media only screen and (min-width: 1024px) { .grid--6-of-12 { - width: calc(6 / 12 * 100% - (15px)); } } + width: calc(50% - 15px); } } + @media only screen and (min-width: 1500px) { + .grid--6-of-12 { + width: calc(50% - 15px); } } .grid--12-of-12 { width: 100%; } .grid--2-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } @media only screen and (min-width: 768px) { .grid--2-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(16.6666666667% - 16.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--2-of-12 { - width: calc(2 / 12 * 100% - (25px)); } } + width: calc(16.6666666667% - 25px); } } + @media only screen and (min-width: 1500px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 25px); } } .grid--10-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--10-of-12 { + width: calc(83.3333333333% - 3.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 3.3333333333px); } } @media only screen and (min-width: 768px) { .grid--10-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(83.3333333333% - 3.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--10-of-12 { - width: calc(10 / 12 * 100% - (5px)); } } + width: calc(83.3333333333% - 5px); } } + @media only screen and (min-width: 1500px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 5px); } } .grid--1-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } @media only screen and (min-width: 768px) { .grid--1-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(8.3333333333% - 18.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--1-of-12 { - width: calc(1 / 12 * 100% - (27.5px)); } } + width: calc(8.3333333333% - 27.5px); } } + @media only screen and (min-width: 1500px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 27.5px); } } .grid--5-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 768px) { .grid--5-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--5-of-12 { - width: calc(5 / 12 * 100% - (17.5px)); } } + width: calc(41.6666666667% - 17.5px); } } + @media only screen and (min-width: 1500px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 17.5px); } } .grid--7-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } @media only screen and (min-width: 768px) { .grid--7-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(58.3333333333% - 8.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--7-of-12 { - width: calc(7 / 12 * 100% - (12.5px)); } } + width: calc(58.3333333333% - 12.5px); } } + @media only screen and (min-width: 1500px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 12.5px); } } /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index f77a0ebc2..ca62143ae 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -376,102 +376,188 @@ template { padding-right: 3rem; padding-left: 3rem; } } -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .flex-item:last-child:nth-child(odd) { - width: calc(1 / 1 * 100% - (0px)); } } - .grid--3-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--3-of-12 { + width: calc(25% - 15px); } } + @media only screen and (min-width: 576px) { + .grid--3-of-12 { + width: calc(25% - 15px); } } @media only screen and (min-width: 768px) { .grid--3-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(25% - 15px); } } @media only screen and (min-width: 1024px) { .grid--3-of-12 { - width: calc(3 / 12 * 100% - (22.5px)); } } + width: calc(25% - 22.5px); } } + @media only screen and (min-width: 1500px) { + .grid--3-of-12 { + width: calc(25% - 22.5px); } } .grid--9-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 576px) { + .grid--9-of-12 { + width: calc(75% - 5px); } } @media only screen and (min-width: 768px) { .grid--9-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(75% - 5px); } } @media only screen and (min-width: 1024px) { .grid--9-of-12 { - width: calc(9 / 12 * 100% - (7.5px)); } } + width: calc(75% - 7.5px); } } + @media only screen and (min-width: 1500px) { + .grid--9-of-12 { + width: calc(75% - 7.5px); } } .grid--4-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--4-of-12 { + width: calc(33.3333333333% - 13.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .grid--4-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(33.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--4-of-12 { - width: calc(4 / 12 * 100% - (20px)); } } + width: calc(33.3333333333% - 20px); } } + @media only screen and (min-width: 1500px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 20px); } } .grid--8-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 768px) { .grid--8-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--8-of-12 { - width: calc(8 / 12 * 100% - (10px)); } } + width: calc(66.6666666667% - 10px); } } + @media only screen and (min-width: 1500px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 10px); } } .grid--6-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--6-of-12 { + width: calc(50% - 10px); } } + @media only screen and (min-width: 576px) { + .grid--6-of-12 { + width: calc(50% - 10px); } } @media only screen and (min-width: 768px) { .grid--6-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(50% - 10px); } } @media only screen and (min-width: 1024px) { .grid--6-of-12 { - width: calc(6 / 12 * 100% - (15px)); } } + width: calc(50% - 15px); } } + @media only screen and (min-width: 1500px) { + .grid--6-of-12 { + width: calc(50% - 15px); } } .grid--12-of-12 { width: 100%; } .grid--2-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } @media only screen and (min-width: 768px) { .grid--2-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(16.6666666667% - 16.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--2-of-12 { - width: calc(2 / 12 * 100% - (25px)); } } + width: calc(16.6666666667% - 25px); } } + @media only screen and (min-width: 1500px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 25px); } } .grid--10-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--10-of-12 { + width: calc(83.3333333333% - 3.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 3.3333333333px); } } @media only screen and (min-width: 768px) { .grid--10-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(83.3333333333% - 3.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--10-of-12 { - width: calc(10 / 12 * 100% - (5px)); } } + width: calc(83.3333333333% - 5px); } } + @media only screen and (min-width: 1500px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 5px); } } .grid--1-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } @media only screen and (min-width: 768px) { .grid--1-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(8.3333333333% - 18.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--1-of-12 { - width: calc(1 / 12 * 100% - (27.5px)); } } + width: calc(8.3333333333% - 27.5px); } } + @media only screen and (min-width: 1500px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 27.5px); } } .grid--5-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 768px) { .grid--5-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 1024px) { .grid--5-of-12 { - width: calc(5 / 12 * 100% - (17.5px)); } } + width: calc(41.6666666667% - 17.5px); } } + @media only screen and (min-width: 1500px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 17.5px); } } .grid--7-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } @media only screen and (min-width: 768px) { .grid--7-of-12 { - width: calc(1 / 2 * 100% - (10px)); } } + width: calc(58.3333333333% - 8.3333333333px); } } @media only screen and (min-width: 1024px) { .grid--7-of-12 { - width: calc(7 / 12 * 100% - (12.5px)); } } + width: calc(58.3333333333% - 12.5px); } } + @media only screen and (min-width: 1500px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 12.5px); } } .su-sr-only { position: absolute; diff --git a/core/scss/core/grid/_grid.scss b/core/scss/core/grid/_grid.scss index 4b78b183d..10f710db5 100644 --- a/core/scss/core/grid/_grid.scss +++ b/core/scss/core/grid/_grid.scss @@ -12,7 +12,7 @@ } .flex-item { - @include flex-item; + // @include flex-item; } // Got classes if you want them. diff --git a/core/scss/utilities/functions/flex/_flex-column-ratio.scss b/core/scss/utilities/functions/flex/_flex-column-ratio.scss new file mode 100644 index 000000000..6e6bd679c --- /dev/null +++ b/core/scss/utilities/functions/flex/_flex-column-ratio.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; +/// Determine the ratio of `$columns` to the total column count. +/// If `$columns` is more than one value, they are handed to +/// `_neat-parse-columns()` which will determine the total columns and use this +/// value instead of `total-columns`. +/// +/// @argument {map} $grid +/// +/// @argument {number | list} $columns +/// +/// @return {number} +/// +/// @example scss +/// flex-column-ratio($grid, 3) +/// +/// @access private + +@function flex-column-ratio($grid-columns, $columns) { + @if length($columns) > 1 { + @return nth($columns, 1) / flex-parse-columns($columns); + } @else if $columns { + @return $columns / $grid-columns; + } +} diff --git a/core/scss/utilities/functions/flex/_flex-column-width.scss b/core/scss/utilities/functions/flex/_flex-column-width.scss new file mode 100644 index 000000000..9977ab429 --- /dev/null +++ b/core/scss/utilities/functions/flex/_flex-column-width.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +/// Return a calulated column width that can then be passed in to a `calc()`. +/// +/// @argument {map} $grid +/// +/// @argument {number} $columns +/// +/// @return {string} +/// +/// @example scss +/// _neat-column-width($neat-grid, 4) +/// +/// @access private + +@function flex-column-width($columns, $gutter, $grid-columns) { + $_column-ratio: flex-column-ratio($grid-columns, $columns); + + // Make note here. + $_total-columns: $grid-columns; + @if length($columns) == 3 { + $_total-columns: flex-parse-columns($columns); + } + + @if $gutter == 0 { + @return unquote("#{percentage($_column-ratio)}"); + } @else { + $_gutter-affordance: (#{(1 - nth($columns, 1) / $_total_columns) * $gutter}); + @return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}"); + } +} diff --git a/core/scss/utilities/functions/flex/_flex-parse-columns.scss b/core/scss/utilities/functions/flex/_flex-parse-columns.scss new file mode 100644 index 000000000..ed2249e69 --- /dev/null +++ b/core/scss/utilities/functions/flex/_flex-parse-columns.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; +/// Parse a column count like `3 of 5` and return the total column count. +/// This is to allow a shorthand for custom grids without using a settings map. +/// +/// @argument {list} $span +/// +/// @return {number} +/// +/// @example scss +/// flex-parse-columns(3 of 5) +/// +/// @access private + +@function flex-parse-columns($span) { + @if length($span) == 3 { + $_total-columns: nth($span, 3); + @return $_total-columns; + } @else if (length($span) == 2) or (length($span) >= 3) { + @error "`$column` should contain 2 values, seperated by an `of`"; + } +} diff --git a/core/scss/utilities/functions/flex/index.scss b/core/scss/utilities/functions/flex/index.scss new file mode 100644 index 000000000..6314b8f44 --- /dev/null +++ b/core/scss/utilities/functions/flex/index.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +/// +/// ROLL UP +/// + +@import + 'flex-column-ratio', + 'flex-column-width', + 'flex-parse-columns'; diff --git a/core/scss/utilities/functions/index.scss b/core/scss/utilities/functions/index.scss index b6ace46a2..d86aa496a 100644 --- a/core/scss/utilities/functions/index.scss +++ b/core/scss/utilities/functions/index.scss @@ -5,4 +5,5 @@ /// @import + 'flex/index', 'modular-scale/index'; diff --git a/core/scss/utilities/mixins/grid/_grid-classes.scss b/core/scss/utilities/mixins/flex/_flex-classes.scss similarity index 52% rename from core/scss/utilities/mixins/grid/_grid-classes.scss rename to core/scss/utilities/mixins/flex/_flex-classes.scss index d136295a9..4252f9ac3 100644 --- a/core/scss/utilities/mixins/grid/_grid-classes.scss +++ b/core/scss/utilities/mixins/flex/_flex-classes.scss @@ -22,14 +22,7 @@ @mixin grid--6-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(6 / 12 * 100% - (#{(1 - 6 / 12) * $gutter-lg})); - } + @include responsive-flex-column(6); } // @@ -42,14 +35,8 @@ @mixin grid--3-of-12 { width: 100%; + @include responsive-flex-column(3); - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(3 / 12 * 100% - (#{(1 - 3 / 12) * $gutter-lg})); - } } // @@ -62,14 +49,7 @@ @mixin grid--9-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(9 / 12 * 100% - (#{(1 - 9 / 12) * $gutter-lg})); - } + @include responsive-flex-column(9 of 12); } // @@ -82,14 +62,7 @@ @mixin grid--4-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(4 / 12 * 100% - (#{(1 - 4 / 12) * $gutter-lg})); - } + @include responsive-flex-column(4); } // @@ -102,14 +75,7 @@ @mixin grid--8-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(8 / 12 * 100% - (#{(1 - 8 / 12) * $gutter-lg})); - } + @include responsive-flex-column(8 of 12); } // @@ -122,14 +88,7 @@ @mixin grid--2-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(2 / 12 * 100% - (#{(1 - 2 / 12) * $gutter-lg})); - } + @include responsive-flex-column(2 of 12); } // @@ -142,14 +101,7 @@ @mixin grid--10-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(10 / 12 * 100% - (#{(1 - 10 / 12) * $gutter-lg})); - } + @include responsive-flex-column(10 of 12); } // @@ -162,14 +114,7 @@ @mixin grid--1-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(1 / 12 * 100% - (#{(1 - 1 / 12) * $gutter-lg})); - } + @include responsive-flex-column(1 of 12); } // @@ -182,14 +127,7 @@ @mixin grid--5-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(5 / 12 * 100% - (#{(1 - 5 / 12) * $gutter-lg})); - } + @include responsive-flex-column(5 of 12); } // @@ -202,12 +140,5 @@ @mixin grid--7-of-12 { width: 100%; - - @media #{$breakpoint-md} { - width: calc(1 / 2 * 100% - (#{(1 - 1 / 2) * $gutter-md})); - } - - @media #{$breakpoint-lg} { - width: calc(7 / 12 * 100% - (#{(1 - 7 / 12) * $gutter-lg})); - } + @include responsive-flex-column(7 of 12); } diff --git a/core/scss/utilities/mixins/flex/_flex-column.scss b/core/scss/utilities/mixins/flex/_flex-column.scss new file mode 100644 index 000000000..870511c53 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_flex-column.scss @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +// Creates a grid column of requested size. +// +// @group features +// +// @name Grid column +// +// @argument {number (unitless)} $columns [null] +// Specifies the number of columns an element should span based on the total +// columns of the grid. +// +// This can also be defined in a shorthand syntaxt which also contains the +// total column count such as `3 of 5`. +// +// @example scss +// .element { +// @include flex-column(3); +// } +// +// @example css +// .element { +// width: calc(25% - 25px); +// margin-left: 20px; +// } +@mixin flex-column($columns: null, $gutter: $gutter-xs, $grid-columns: 12) { + width: calc(#{flex-column-width($columns, $gutter, $grid-columns)}); +} diff --git a/core/scss/utilities/mixins/flex/_flex-item.scss b/core/scss/utilities/mixins/flex/_flex-item.scss deleted file mode 100644 index 92d8e5e61..000000000 --- a/core/scss/utilities/mixins/flex/_flex-item.scss +++ /dev/null @@ -1,17 +0,0 @@ -@charset "UTF-8"; - -// -// @flex-item -// -// Mixin to apply to an element within a class-based grid row. -// -// Style guide: Mixins.Flex.flex-item -// - -@mixin flex-item { - @media #{$breakpoint-md-only} { - &:last-child:nth-child(odd) { - width: calc(1 / 1 * 100% - (#{(1 - 1 / 1) * $gutter-md})); - } - } -} diff --git a/core/scss/utilities/mixins/flex/_responsive-flex-column.scss b/core/scss/utilities/mixins/flex/_responsive-flex-column.scss new file mode 100644 index 000000000..d2a4ae0d9 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_responsive-flex-column.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +/// +/// +/// +@mixin responsive-flex-column($columns, $grid: $grid-media, $gutters: $grid-gutters) { + @each $key, $breakpoint in $grid { + @include grid-media($key) { + @include flex-column($columns, map-get($gutters, $key)); + } + } +} diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss index 5a518591f..e637e681b 100644 --- a/core/scss/utilities/mixins/flex/index.scss +++ b/core/scss/utilities/mixins/flex/index.scss @@ -1,5 +1,7 @@ @charset "UTF-8"; @import + 'flex-classes', + 'flex-column', 'flex-container', - 'flex-item'; + 'responsive-flex-column'; diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index 828b8eff8..b98272f5f 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -12,7 +12,6 @@ 'centered-column', 'centered-grid-container', 'display-grid', - 'grid-classes', 'grid-column-gap', 'grid-columns', 'grid-gap', diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 04f0d542e..2c3ca551d 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -69,6 +69,28 @@ $responsive-columns-four: ( $breakpoint-xl: 1fr 1fr 1fr 1fr ); +// +// +// +$responsive-columns-six: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr +); + +// +// +// +$grid-gutters: ( + 'xs': $gutter-xs, + 'sm': $gutter-sm, + 'md': $gutter-md, + 'lg': $gutter-lg, + 'xl': $gutter-xl +); + // // // From 5ab1b3d0b637800c5fb383679df557ea22870422 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 9 Nov 2018 16:39:53 -0800 Subject: [PATCH 029/123] fixup! wip. --- core/scss/core/grid/_grid.scss | 61 ---------------------- core/scss/core/grid/index.scss | 2 +- core/scss/core/index.scss | 6 --- core/scss/utilities/mixins/flex/index.scss | 3 ++ 4 files changed, 4 insertions(+), 68 deletions(-) delete mode 100644 core/scss/core/grid/_grid.scss diff --git a/core/scss/core/grid/_grid.scss b/core/scss/core/grid/_grid.scss deleted file mode 100644 index 10f710db5..000000000 --- a/core/scss/core/grid/_grid.scss +++ /dev/null @@ -1,61 +0,0 @@ -@charset "UTF-8"; - -// -// Class-based Grid. -// -// Markup: ../../templates/core/grid/grid.twig -// - -// The grid. -.grid--container { - @include flex-container; -} - -.flex-item { - // @include flex-item; -} - -// Got classes if you want them. -.grid--3-of-12 { - @include grid--3-of-12; -} - -.grid--9-of-12 { - @include grid--9-of-12; -} - -.grid--4-of-12 { - @include grid--4-of-12; -} - -.grid--8-of-12 { - @include grid--8-of-12; -} - -.grid--6-of-12 { - @include grid--6-of-12; -} - -.grid--12-of-12 { - @include grid--12-of-12; -} - -.grid--2-of-12 { - @include grid--2-of-12; -} - -.grid--10-of-12 { - @include grid--10-of-12; -} - -.grid--1-of-12 { - @include grid--1-of-12; -} - -.grid--5-of-12 { - @include grid--5-of-12; -} - -.grid--7-of-12 { - @include grid--7-of-12; -} diff --git a/core/scss/core/grid/index.scss b/core/scss/core/grid/index.scss index ade2d913d..cdd8b3938 100644 --- a/core/scss/core/grid/index.scss +++ b/core/scss/core/grid/index.scss @@ -5,4 +5,4 @@ /// @import - 'grid'; + 'flex-grid'; diff --git a/core/scss/core/index.scss b/core/scss/core/index.scss index 03b5b675a..2679be84b 100644 --- a/core/scss/core/index.scss +++ b/core/scss/core/index.scss @@ -13,12 +13,6 @@ // // Style guide: Core.Fonts -// Grid -// -// Markup: ../../templates/core/grid/grid.twig -// -// Style guide: Core.Grid - // Helpers // // Helper partials. diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss index e637e681b..c219757ac 100644 --- a/core/scss/utilities/mixins/flex/index.scss +++ b/core/scss/utilities/mixins/flex/index.scss @@ -1,5 +1,8 @@ @charset "UTF-8"; +// +// Roll ups +// @import 'flex-classes', 'flex-column', From 644546b656af0aa3df559f9d17d943a8b26edac6 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 9 Nov 2018 17:48:10 -0800 Subject: [PATCH 030/123] @mixin sticky-footer now accepts the footer's selector as a parameter --- .../mixins/layout/_sticky-footer.scss | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index a3a30933f..d0a41f7f6 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -3,25 +3,27 @@ // // @sticky-footer // -// Stick the footer to the bottom of the browser window no matter -// the size of the browser or content. +// Stick the footer to the bottom of the browser window no matter the size of the +// browser or content. // // Apply this mixin to the `` tag only. It will set the body tag height to -// 100% and set it to display as #grid. This mixin will then target a direct -// descendant element with the class `.global-footer` and set it to css grid's -// align-self: flex-end; This will keep the footer at the bottom of the page -// when the content is shorter than the window but all the content to push the -// footer below the viewport when the page is long. +// 100% and set it to `display: grid`. It will also set whatever element you specify +// with $selector to css grid's `align-self: flex-end;`. This will keep the footer +// at the bottom of the page when the content is shorter than the window, but allow +// the content to push the footer below the viewport when the page is long. +// +// $selector - the CSS selector used to target the footer; default '> footer' // // Style guide: Mixins.Layout.Sticky Footer // -@mixin sticky-footer { - display: grid; - height: 100vh; // Avoid the IE 10-11 `min-height` bug. +@mixin sticky-footer($selector: '> footer') { @include padding(0); @include margin(0); - > .global-footer { + display: grid; + height: 100vh; // Avoid the IE 10-11 `min-height` bug. + + #{$selector} { align-self: flex-end; } } From b430d82302c963d36ec1e3c85fc1521387262ab2 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 9 Nov 2018 17:49:10 -0800 Subject: [PATCH 031/123] make styleguide's footer be sticky --- kss/builder/decanter/kss-assets/css/kss.css | 16 +++++++++++++++- kss/builder/decanter/scss/_global-footer.scss | 7 ++++--- kss/builder/decanter/scss/kss.scss | 1 + 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 4e00d19f2..ca79498fe 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -365,7 +365,7 @@ template { --media-query: 'xl'; } } #kss-node { - padding-top: 40px; } + padding-top: 40px !important; } #kss-node > .su-brand-bar { position: fixed; top: 0; @@ -982,6 +982,20 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .kss-color code { display: none; } +article.kss-main { + padding: 0; + margin: 0; + display: grid; + height: 100vh; } + article.kss-main .global-footer { + align-self: flex-end; } + article.kss-main .kss-sidebar { + padding-bottom: 150px; + z-index: 0; } + article.kss-main .global-footer { + position: relative; + z-index: 10; } + #kss-node.kss-home .kss-main { width: 100%; margin: 30px 0 0; diff --git a/kss/builder/decanter/scss/_global-footer.scss b/kss/builder/decanter/scss/_global-footer.scss index 2a33c599f..42cff9da9 100644 --- a/kss/builder/decanter/scss/_global-footer.scss +++ b/kss/builder/decanter/scss/_global-footer.scss @@ -1,9 +1,10 @@ @charset "UTF-8"; -body#kss-node { - @include sticky-footer; +article.kss-main { + $footer: '.global-footer'; + @include sticky-footer($footer); // To support the sticky footer we must put the sidebar behind the footer. .kss-sidebar { @@ -11,7 +12,7 @@ body#kss-node { z-index: 0; } - .global-footer { + #{$footer} { position: relative; z-index: 10; } diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index 593be3829..e73cab819 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -39,5 +39,6 @@ 'builder', 'class-based-grid', 'colors-demo', + 'global-footer', 'home', 'layout-colors'; From 417a050011763896e8e68249ecd215b15bc985a6 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Fri, 9 Nov 2018 17:49:55 -0800 Subject: [PATCH 032/123] if the brand bar is position:fixed then we really need padding to accommodate it --- kss/builder/decanter/scss/_brand-bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kss/builder/decanter/scss/_brand-bar.scss b/kss/builder/decanter/scss/_brand-bar.scss index 6ec34eafd..27d10d2d3 100644 --- a/kss/builder/decanter/scss/_brand-bar.scss +++ b/kss/builder/decanter/scss/_brand-bar.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; #kss-node { - padding-top: 40px; + padding-top: 40px !important; > .su-brand-bar { position: fixed; top: 0; From e632c9977898a21041a1d9837862c6f7cfd963ba Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Tue, 13 Nov 2018 12:15:09 -0800 Subject: [PATCH 033/123] fixup! wip. --- core/scss/core/grid/_flex-grid.scss | 61 +++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 core/scss/core/grid/_flex-grid.scss diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss new file mode 100644 index 000000000..a3a70ba84 --- /dev/null +++ b/core/scss/core/grid/_flex-grid.scss @@ -0,0 +1,61 @@ +@charset "UTF-8"; + +// Flex Grid +// +// Markup: ../../templates/core/grid/grid.twig +// +// Style guide: Core.FlexGrid + +// The grid. +.grid--container { + @include flex-container; +} + +.flex-item { + // @include flex-item; +} + +// Got classes if you want them. +.grid--3-of-12 { + @include grid--3-of-12; +} + +.grid--9-of-12 { + @include grid--9-of-12; +} + +.grid--4-of-12 { + @include grid--4-of-12; +} + +.grid--8-of-12 { + @include grid--8-of-12; +} + +.grid--6-of-12 { + @include grid--6-of-12; +} + +.grid--12-of-12 { + @include grid--12-of-12; +} + +.grid--2-of-12 { + @include grid--2-of-12; +} + +.grid--10-of-12 { + @include grid--10-of-12; +} + +.grid--1-of-12 { + @include grid--1-of-12; +} + +.grid--5-of-12 { + @include grid--5-of-12; +} + +.grid--7-of-12 { + @include grid--7-of-12; +} From 019ea8700c52a1741c1aac1918a22254d519a8fd Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Wed, 14 Nov 2018 16:27:55 -0800 Subject: [PATCH 034/123] grid and breakpoint updates WIP --- core/css/decanter-grid.css | 255 +-- core/css/decanter.css | 1593 +++++++++++------ core/scss/core/grid/_flex-grid.scss | 40 +- core/scss/layout/three-column/_blastila.scss | 2 +- .../layout/three-column/_cuttoner-right.scss | 2 +- .../layout/three-column/_percles-right.scss | 4 +- core/scss/layout/two-column/_pacman.scss | 7 +- .../scss/layout/two-column/_plakes-right.scss | 4 +- core/scss/layout/two-column/_plakes.scss | 7 +- core/scss/layout/two-column/_trunks.scss | 5 +- core/scss/layout/two-column/_wedge.scss | 5 +- .../utilities/mixins/flex/_flex-classes.scss | 106 +- .../modular-scale/_modular-typography.scss | 4 + .../variables/core/_breakpoints.scss | 63 +- core/scss/utilities/variables/core/_grid.scss | 27 +- .../variables/core/_magic-numbers.scss | 6 +- .../variables/core/_modular-typography.scss | 3 +- kss/builder/decanter/kss-assets/css/kss.css | 102 +- 18 files changed, 1480 insertions(+), 755 deletions(-) diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 178158db5..7abd4b052 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -4,7 +4,7 @@ justify-content: space-between; flex-wrap: wrap; margin: auto; - max-width: 1220px; + max-width: 1500px; padding-right: 1.5rem; padding-left: 1.5rem; } @media only screen and (min-width: 768px) { @@ -12,6 +12,48 @@ padding-right: 3rem; padding-left: 3rem; } } +.grid--1-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 768px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 992px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 33px); } } + @media only screen and (min-width: 1200px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 36.6666666667px); } } + @media only screen and (min-width: 1500px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 44px); } } + +.grid--2-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 768px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 30px); } } + @media only screen and (min-width: 1200px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 33.3333333333px); } } + @media only screen and (min-width: 1500px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 40px); } } + .grid--3-of-12 { width: 100%; } @media only screen and (min-width: 0) { @@ -23,30 +65,15 @@ @media only screen and (min-width: 768px) { .grid--3-of-12 { width: calc(25% - 15px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--3-of-12 { - width: calc(25% - 22.5px); } } - @media only screen and (min-width: 1500px) { + width: calc(25% - 27px); } } + @media only screen and (min-width: 1200px) { .grid--3-of-12 { - width: calc(25% - 22.5px); } } - -.grid--9-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 576px) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 768px) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 1024px) { - .grid--9-of-12 { - width: calc(75% - 7.5px); } } + width: calc(25% - 30px); } } @media only screen and (min-width: 1500px) { - .grid--9-of-12 { - width: calc(75% - 7.5px); } } + .grid--3-of-12 { + width: calc(25% - 36px); } } .grid--4-of-12 { width: 100%; } @@ -59,30 +86,36 @@ @media only screen and (min-width: 768px) { .grid--4-of-12 { width: calc(33.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--4-of-12 { - width: calc(33.3333333333% - 20px); } } + width: calc(33.3333333333% - 24px); } } + @media only screen and (min-width: 1200px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 26.6666666667px); } } @media only screen and (min-width: 1500px) { .grid--4-of-12 { - width: calc(33.3333333333% - 20px); } } + width: calc(33.3333333333% - 32px); } } -.grid--8-of-12 { +.grid--5-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 576px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 768px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 21px); } } + @media only screen and (min-width: 1200px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 23.3333333333px); } } @media only screen and (min-width: 1500px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 28px); } } .grid--6-of-12 { width: 100%; } @@ -95,33 +128,78 @@ @media only screen and (min-width: 768px) { .grid--6-of-12 { width: calc(50% - 10px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--6-of-12 { - width: calc(50% - 15px); } } + width: calc(50% - 18px); } } + @media only screen and (min-width: 1200px) { + .grid--6-of-12 { + width: calc(50% - 20px); } } @media only screen and (min-width: 1500px) { .grid--6-of-12 { - width: calc(50% - 15px); } } + width: calc(50% - 24px); } } -.grid--12-of-12 { +.grid--7-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 768px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 992px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 15px); } } + @media only screen and (min-width: 1200px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 16.6666666667px); } } + @media only screen and (min-width: 1500px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 20px); } } + +.grid--8-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 768px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 12px); } } + @media only screen and (min-width: 1200px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 13.3333333333px); } } + @media only screen and (min-width: 1500px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 16px); } } -.grid--2-of-12 { +.grid--9-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + .grid--9-of-12 { + width: calc(75% - 5px); } } @media only screen and (min-width: 576px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + .grid--9-of-12 { + width: calc(75% - 5px); } } @media only screen and (min-width: 768px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 25px); } } + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 992px) { + .grid--9-of-12 { + width: calc(75% - 9px); } } + @media only screen and (min-width: 1200px) { + .grid--9-of-12 { + width: calc(75% - 10px); } } @media only screen and (min-width: 1500px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 25px); } } + .grid--9-of-12 { + width: calc(75% - 12px); } } .grid--10-of-12 { width: 100%; } @@ -134,64 +212,37 @@ @media only screen and (min-width: 768px) { .grid--10-of-12 { width: calc(83.3333333333% - 3.3333333333px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--10-of-12 { - width: calc(83.3333333333% - 5px); } } + width: calc(83.3333333333% - 6px); } } + @media only screen and (min-width: 1200px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 6.6666666667px); } } @media only screen and (min-width: 1500px) { .grid--10-of-12 { - width: calc(83.3333333333% - 5px); } } + width: calc(83.3333333333% - 8px); } } -.grid--1-of-12 { +.grid--11-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } @media only screen and (min-width: 576px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } @media only screen and (min-width: 768px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } - @media only screen and (min-width: 1024px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 27.5px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--11-of-12 { + width: calc(91.6666666667% - 3px); } } + @media only screen and (min-width: 1200px) { + .grid--11-of-12 { + width: calc(91.6666666667% - 3.3333333333px); } } @media only screen and (min-width: 1500px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 27.5px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 4px); } } -.grid--5-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 17.5px); } } - @media only screen and (min-width: 1500px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 17.5px); } } - -.grid--7-of-12 { +.grid--12-of-12 { width: 100%; } - @media only screen and (min-width: 0) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 1024px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 12.5px); } } - @media only screen and (min-width: 1500px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 12.5px); } } /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index ca62143ae..00237e91f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -368,7 +368,7 @@ template { justify-content: space-between; flex-wrap: wrap; margin: auto; - max-width: 1220px; + max-width: 1500px; padding-right: 1.5rem; padding-left: 1.5rem; } @media only screen and (min-width: 768px) { @@ -376,6 +376,48 @@ template { padding-right: 3rem; padding-left: 3rem; } } +.grid--1-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 768px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 18.3333333333px); } } + @media only screen and (min-width: 992px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 33px); } } + @media only screen and (min-width: 1200px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 36.6666666667px); } } + @media only screen and (min-width: 1500px) { + .grid--1-of-12 { + width: calc(8.3333333333% - 44px); } } + +.grid--2-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 576px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 768px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 16.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 30px); } } + @media only screen and (min-width: 1200px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 33.3333333333px); } } + @media only screen and (min-width: 1500px) { + .grid--2-of-12 { + width: calc(16.6666666667% - 40px); } } + .grid--3-of-12 { width: 100%; } @media only screen and (min-width: 0) { @@ -387,30 +429,15 @@ template { @media only screen and (min-width: 768px) { .grid--3-of-12 { width: calc(25% - 15px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--3-of-12 { - width: calc(25% - 22.5px); } } - @media only screen and (min-width: 1500px) { + width: calc(25% - 27px); } } + @media only screen and (min-width: 1200px) { .grid--3-of-12 { - width: calc(25% - 22.5px); } } - -.grid--9-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 576px) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 768px) { - .grid--9-of-12 { - width: calc(75% - 5px); } } - @media only screen and (min-width: 1024px) { - .grid--9-of-12 { - width: calc(75% - 7.5px); } } + width: calc(25% - 30px); } } @media only screen and (min-width: 1500px) { - .grid--9-of-12 { - width: calc(75% - 7.5px); } } + .grid--3-of-12 { + width: calc(25% - 36px); } } .grid--4-of-12 { width: 100%; } @@ -423,30 +450,36 @@ template { @media only screen and (min-width: 768px) { .grid--4-of-12 { width: calc(33.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .grid--4-of-12 { + width: calc(33.3333333333% - 24px); } } + @media only screen and (min-width: 1200px) { .grid--4-of-12 { - width: calc(33.3333333333% - 20px); } } + width: calc(33.3333333333% - 26.6666666667px); } } @media only screen and (min-width: 1500px) { .grid--4-of-12 { - width: calc(33.3333333333% - 20px); } } + width: calc(33.3333333333% - 32px); } } -.grid--8-of-12 { +.grid--5-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 576px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } @media only screen and (min-width: 768px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 11.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 21px); } } + @media only screen and (min-width: 1200px) { + .grid--5-of-12 { + width: calc(41.6666666667% - 23.3333333333px); } } @media only screen and (min-width: 1500px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10px); } } + .grid--5-of-12 { + width: calc(41.6666666667% - 28px); } } .grid--6-of-12 { width: 100%; } @@ -459,33 +492,78 @@ template { @media only screen and (min-width: 768px) { .grid--6-of-12 { width: calc(50% - 10px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .grid--6-of-12 { - width: calc(50% - 15px); } } + width: calc(50% - 18px); } } + @media only screen and (min-width: 1200px) { + .grid--6-of-12 { + width: calc(50% - 20px); } } @media only screen and (min-width: 1500px) { .grid--6-of-12 { - width: calc(50% - 15px); } } + width: calc(50% - 24px); } } -.grid--12-of-12 { +.grid--7-of-12 { width: 100%; } + @media only screen and (min-width: 0) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 576px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 768px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 8.3333333333px); } } + @media only screen and (min-width: 992px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 15px); } } + @media only screen and (min-width: 1200px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 16.6666666667px); } } + @media only screen and (min-width: 1500px) { + .grid--7-of-12 { + width: calc(58.3333333333% - 20px); } } -.grid--2-of-12 { +.grid--8-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 576px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } @media only screen and (min-width: 768px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 25px); } } + .grid--8-of-12 { + width: calc(66.6666666667% - 6.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 12px); } } + @media only screen and (min-width: 1200px) { + .grid--8-of-12 { + width: calc(66.6666666667% - 13.3333333333px); } } @media only screen and (min-width: 1500px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 25px); } } + .grid--8-of-12 { + width: calc(66.6666666667% - 16px); } } + +.grid--9-of-12 { + width: 100%; } + @media only screen and (min-width: 0) { + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 576px) { + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 768px) { + .grid--9-of-12 { + width: calc(75% - 5px); } } + @media only screen and (min-width: 992px) { + .grid--9-of-12 { + width: calc(75% - 9px); } } + @media only screen and (min-width: 1200px) { + .grid--9-of-12 { + width: calc(75% - 10px); } } + @media only screen and (min-width: 1500px) { + .grid--9-of-12 { + width: calc(75% - 12px); } } .grid--10-of-12 { width: 100%; } @@ -498,66 +576,39 @@ template { @media only screen and (min-width: 768px) { .grid--10-of-12 { width: calc(83.3333333333% - 3.3333333333px); } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .grid--10-of-12 { + width: calc(83.3333333333% - 6px); } } + @media only screen and (min-width: 1200px) { .grid--10-of-12 { - width: calc(83.3333333333% - 5px); } } + width: calc(83.3333333333% - 6.6666666667px); } } @media only screen and (min-width: 1500px) { .grid--10-of-12 { - width: calc(83.3333333333% - 5px); } } + width: calc(83.3333333333% - 8px); } } -.grid--1-of-12 { +.grid--11-of-12 { width: 100%; } @media only screen and (min-width: 0) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } @media only screen and (min-width: 576px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } @media only screen and (min-width: 768px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } - @media only screen and (min-width: 1024px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 27.5px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 1.6666666667px); } } + @media only screen and (min-width: 992px) { + .grid--11-of-12 { + width: calc(91.6666666667% - 3px); } } + @media only screen and (min-width: 1200px) { + .grid--11-of-12 { + width: calc(91.6666666667% - 3.3333333333px); } } @media only screen and (min-width: 1500px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 27.5px); } } + .grid--11-of-12 { + width: calc(91.6666666667% - 4px); } } -.grid--5-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } - @media only screen and (min-width: 1024px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 17.5px); } } - @media only screen and (min-width: 1500px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 17.5px); } } - -.grid--7-of-12 { +.grid--12-of-12 { width: 100%; } - @media only screen and (min-width: 0) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } - @media only screen and (min-width: 1024px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 12.5px); } } - @media only screen and (min-width: 1500px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 12.5px); } } .su-sr-only { position: absolute; @@ -1025,16 +1076,19 @@ dfn { @media only screen and (min-width: 768px) { .layout--ibeam > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--ibeam > section { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--ibeam > section { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--ibeam > section { max-width: 1500px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .layout--ibeam > section { margin: 38px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--ibeam > section { margin: 36px; } } @media only screen and (min-width: 768px) { @@ -1057,9 +1111,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--bricks .layout__columns { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--bricks .layout__columns { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--bricks .layout__columns { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--bricks .layout__columns { max-width: 1500px; } } @@ -1129,25 +1186,47 @@ dfn { .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 30px; } + grid-column-gap: 36px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 30px; } + grid-row-gap: 36px; } + .layout--bricks .layout__columns > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout--bricks .layout__columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--bricks .layout__columns > * { + margin-right: 20px; + margin-left: 20px; } + @supports (grid-column-gap: 20px) { + .layout--bricks .layout__columns { + grid-column-gap: 40px; } + .layout--bricks .layout__columns > * { + margin-right: 0; + margin-left: 0; } } + .layout--bricks .layout__columns > * { + margin-top: 20px; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .layout--bricks .layout__columns { + grid-row-gap: 40px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1156,20 +1235,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1189,14 +1268,14 @@ dfn { .layout--molive > header { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--molive > header { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { .layout--molive > header { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } .layout--molive > section { margin: 0 auto; @@ -1211,9 +1290,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--molive > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--molive > section { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--molive > section { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--molive > section { max-width: 1500px; } } @@ -1283,25 +1365,47 @@ dfn { .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--molive > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout--molive > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--molive > section { + grid-column-gap: 36px; } + .layout--molive > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--molive > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--molive > section { + grid-row-gap: 36px; } + .layout--molive > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1310,20 +1414,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1343,14 +1447,14 @@ dfn { .layout--molive > footer { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--molive > footer { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { .layout--molive > footer { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } .layout--bars > div { margin: 0 auto; @@ -1365,9 +1469,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--bars > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--bars > div { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--bars > div { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--bars > div { max-width: 1500px; } } @@ -1437,25 +1544,47 @@ dfn { .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--bars > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--bars > div { + grid-column-gap: 36px; } + .layout--bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--bars > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--bars > div { + grid-row-gap: 36px; } + .layout--bars > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1464,20 +1593,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1495,9 +1624,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--battleship > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--battleship > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--battleship > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--battleship > div { max-width: 1500px; } } @@ -1567,25 +1699,47 @@ dfn { .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout--battleship > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--battleship > div { + grid-column-gap: 36px; } + .layout--battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--battleship > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--battleship > div { + grid-row-gap: 36px; } + .layout--battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1594,20 +1748,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1627,9 +1781,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-blastila > header { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout-blastila > header { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout-blastila > header { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-blastila > header { max-width: 1500px; } } @@ -1645,9 +1802,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-blastila > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-blastila > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-blastila > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-blastila > div { max-width: 1500px; } } @@ -1708,41 +1868,60 @@ dfn { .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout-blastila > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 30px; } + grid-column-gap: 36px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 30px; } + grid-row-gap: 36px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-blastila > div > * { + margin-right: 20px; + margin-left: 20px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 40px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 20px; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 40px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-blastila > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1754,8 +1933,8 @@ dfn { grid-template-columns: 1fr 1fr 1fr; } } .layout-blastila > div > aside { -ms-grid-column: 1; - grid-column: 1 / 1; - -ms-grid-column-span: 0; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; -ms-grid-row: 1; grid-row: 1 / span 2; -ms-grid-row-span: span 2-1; } @@ -1824,10 +2003,14 @@ dfn { .layout--chess > header, .layout--chess > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--chess > header, .layout--chess > footer { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--chess > header, + .layout--chess > footer { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--chess > header, .layout--chess > footer { @@ -1844,9 +2027,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--chess > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--chess > section { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--chess > section { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--chess > section { max-width: 1500px; } } @@ -1907,41 +2093,60 @@ dfn { .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--chess > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 30px; } + grid-column-gap: 36px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 30px; } + grid-row-gap: 36px; } + .layout--chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout--chess > section > * { + margin-right: 20px; + margin-left: 20px; } + @supports (grid-column-gap: 20px) { + .layout--chess > section { + grid-column-gap: 40px; } + .layout--chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--chess > section > * { + margin-top: 20px; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .layout--chess > section { + grid-row-gap: 40px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--chess > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1951,7 +2156,7 @@ dfn { display: -ms-grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--chess > section { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } @@ -1967,9 +2172,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-cuttoner > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-cuttoner > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-cuttoner > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div { max-width: 1500px; } } @@ -1992,7 +2200,26 @@ dfn { .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > * { + margin-right: 10px; + margin-left: 10px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 20px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 10px; + margin-bottom: 10px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 20px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { .layout-cuttoner > div > * { margin-right: 10px; margin-left: 10px; } @@ -2011,60 +2238,60 @@ dfn { .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { + @media only screen and (min-width: 992px) { .layout-cuttoner > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 1200px) { .layout-cuttoner > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2131,41 +2358,60 @@ dfn { .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-cuttoner > div > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -2202,8 +2448,8 @@ dfn { grid-column: 1 / span 1; -ms-grid-column-span: span 1-1; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } .layout-percles > div { margin: 0 auto; } @@ -2216,9 +2462,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-percles > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout-percles > div { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout-percles > div { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-percles > div { max-width: 1500px; } } @@ -2279,41 +2528,60 @@ dfn { .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-percles > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 36px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 36px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-percles > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-percles > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2337,16 +2605,16 @@ dfn { grid-column: 3 / span 1; -ms-grid-column-span: span 1-3; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } .layout-percles--right > div > header { -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } .layout--robot > div { margin: 0 auto; } @@ -2359,9 +2627,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--robot > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--robot > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--robot > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--robot > div { max-width: 1500px; } } @@ -2422,41 +2693,60 @@ dfn { .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--robot > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--robot > div { + grid-column-gap: 36px; } + .layout--robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--robot > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--robot > div { + grid-row-gap: 36px; } + .layout--robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--robot > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--robot > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2486,9 +2776,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--space-invader > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--space-invader > div { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--space-invader > div { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--space-invader > div { max-width: 1500px; } } @@ -2549,41 +2842,60 @@ dfn { .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--space-invader > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--space-invader > div { + grid-column-gap: 36px; } + .layout--space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--space-invader > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--space-invader > div { + grid-row-gap: 36px; } + .layout--space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--space-invader > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--space-invader > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2609,9 +2921,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-sunset-delorean > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-sunset-delorean > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-sunset-delorean > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-sunset-delorean > div { max-width: 1500px; } } @@ -2672,41 +2987,60 @@ dfn { .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-sunset-delorean > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-sunset-delorean > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-sunset-delorean > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2767,9 +3101,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-thions > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout-thions > div { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout-thions > div { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-thions > div { max-width: 1500px; } } @@ -2830,41 +3167,60 @@ dfn { .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-thions > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 36px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 36px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-thions > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-thions > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2969,11 +3325,16 @@ dfn { .layout-valmer > footer, .layout-valmer > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-valmer > header, .layout-valmer > footer, @@ -3072,17 +3433,48 @@ dfn { .layout-valmer > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3091,13 +3483,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3107,13 +3499,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3122,13 +3514,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3176,11 +3568,16 @@ dfn { .layout--donies > header, .layout--donies > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--donies > section, + .layout--donies > header, + .layout--donies > footer { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--donies > section, .layout--donies > header, @@ -3256,25 +3653,47 @@ dfn { .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--donies > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--donies > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--donies > section { + grid-column-gap: 36px; } + .layout--donies > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--donies > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--donies > section { + grid-row-gap: 36px; } + .layout--donies > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3283,20 +3702,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3324,12 +3743,18 @@ dfn { .layout--frogger > header, .layout--frogger > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 1024px; } } + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .layout--frogger > div, + .layout--frogger > section, + .layout--frogger > header, + .layout--frogger > footer { + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--frogger > div, .layout--frogger > section, @@ -3406,25 +3831,47 @@ dfn { .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--frogger > section { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--frogger > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--frogger > section { + grid-column-gap: 36px; } + .layout--frogger > section > * { + margin-right: 0; + margin-left: 0; } } + .layout--frogger > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--frogger > section { + grid-row-gap: 36px; } + .layout--frogger > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3433,20 +3880,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3470,11 +3917,16 @@ dfn { .layout-pacman > header, .layout-pacman > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-pacman > div, + .layout-pacman > header, + .layout-pacman > footer { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-pacman > div, .layout-pacman > header, @@ -3550,25 +4002,47 @@ dfn { .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-pacman > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-pacman > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-pacman > div { + grid-column-gap: 36px; } + .layout-pacman > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-pacman > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-pacman > div { + grid-row-gap: 36px; } + .layout-pacman > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3577,36 +4051,36 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-pacman > div aside { -ms-grid-column: 1; - grid-column: 1 / 1; - -ms-grid-column-span: 0; } } + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-pacman > div section { -ms-grid-column: 2; grid-column: 2 / span 2; -ms-grid-column-span: span 2-2; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-pacman--right > div aside { @@ -3639,11 +4113,16 @@ dfn { .layout-plakes > header, .layout-plakes > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-plakes > div, + .layout-plakes > header, + .layout-plakes > footer { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-plakes > div, .layout-plakes > header, @@ -3719,25 +4198,47 @@ dfn { .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-plakes > div { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-plakes > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-plakes > div { + grid-column-gap: 36px; } + .layout-plakes > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-plakes > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-plakes > div { + grid-row-gap: 36px; } + .layout-plakes > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3746,36 +4247,36 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-plakes > div aside { -ms-grid-column: 1; - grid-column: 1 / 1; - -ms-grid-column-span: 0; } } + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-plakes > div section { -ms-grid-column: 2; grid-column: 2 / span 3; -ms-grid-column-span: span 3-2; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-plakes--right > div aside { @@ -3783,7 +4284,7 @@ dfn { grid-column: 3 / span 1; -ms-grid-column-span: span 1-3; } } -@media only screen and (min-width: 1024px) { +@media only screen and (min-width: 992px) { .layout-plakes--right > div aside { -ms-grid-column: 4; grid-column: 4 / span 1; @@ -3795,17 +4296,17 @@ dfn { grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } -@media only screen and (min-width: 1024px) { +@media only screen and (min-width: 992px) { .layout-plakes--right > div section { -ms-grid-column: 1; grid-column: 1 / span 3; -ms-grid-column-span: span 3-1; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } .layout--toucan > div { margin: 0 auto; @@ -3820,9 +4321,12 @@ dfn { @media only screen and (min-width: 768px) { .layout--toucan > div { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--toucan > div { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--toucan > div { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--toucan > div { max-width: 1500px; } } @@ -3892,25 +4396,47 @@ dfn { .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--toucan > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout--toucan > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout--toucan > div { + grid-column-gap: 36px; } + .layout--toucan > div > * { + margin-right: 0; + margin-left: 0; } } + .layout--toucan > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout--toucan > div { + grid-row-gap: 36px; } + .layout--toucan > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout--toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3919,20 +4445,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3950,9 +4476,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-trunks > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-trunks > section { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-trunks > section { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-trunks > section { max-width: 1500px; } } @@ -4022,25 +4551,47 @@ dfn { .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-trunks > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-trunks > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-trunks > section { + grid-column-gap: 36px; } + .layout-trunks > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-trunks > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-trunks > section { + grid-row-gap: 36px; } + .layout-trunks > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4049,20 +4600,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4077,8 +4628,8 @@ dfn { grid-column: 2 / span 2; -ms-grid-column-span: span 2-2; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-trunks--right > section div:first-child { @@ -4105,9 +4656,12 @@ dfn { @media only screen and (min-width: 768px) { .layout-wedge > section { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-wedge > section { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout-wedge > section { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout-wedge > section { max-width: 1500px; } } @@ -4177,25 +4731,47 @@ dfn { .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout-wedge > section { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-wedge > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-wedge > section { + grid-column-gap: 36px; } + .layout-wedge > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-wedge > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-wedge > section { + grid-row-gap: 36px; } + .layout-wedge > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 20px; + margin-left: 20px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 30px; } + grid-column-gap: 40px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 20px; + margin-bottom: 20px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 30px; } + grid-row-gap: 40px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4204,20 +4780,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 24px; + margin-left: 24px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 30px; } + grid-column-gap: 48px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 15px; - margin-bottom: 15px; } + margin-top: 24px; + margin-bottom: 24px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 30px; } + grid-row-gap: 48px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4232,8 +4808,8 @@ dfn { grid-column: 2 / span 3; -ms-grid-column-span: span 3-2; -ms-grid-row: 1; - grid-row: 1 / 1; - -ms-grid-row-span: 0; } } + grid-row: 1 / span 1; + -ms-grid-row-span: span 1-1; } } @media only screen and (min-width: 576px) { .layout-wedge--right > section div:first-child { @@ -4278,11 +4854,16 @@ dfn { .layout--basic > section, .layout--basic > footer { max-width: 768px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + .layout--basic > header, + .layout--basic > section, + .layout--basic > footer { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 1024px; } } + max-width: 1200px; } } @media only screen and (min-width: 1500px) { .layout--basic > header, .layout--basic > section, @@ -4304,14 +4885,14 @@ dfn { .centered-container { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .centered-container { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { .centered-container { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } .su-alert { padding: 2rem; @@ -4383,14 +4964,14 @@ dfn { .su-brand-bar { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-brand-bar { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { .su-brand-bar { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } .su-brand-bar__logo { display: inline-block; @@ -4578,10 +5159,10 @@ button, .su-card__contents { margin: 32px; } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-card__contents { margin: 38px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-card__contents { margin: 36px; } } @media only screen and (min-width: 768px) { @@ -4602,7 +5183,7 @@ button, @media only screen and (min-width: 768px) { .su-card__contents > h5 { margin-bottom: 12px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-card__contents > h5 { margin-bottom: 13px; } } .su-card__contents > h3 { @@ -4611,7 +5192,7 @@ button, font-size: 25px; font-weight: bold; line-height: 31px; } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-card__contents > h3 { margin-bottom: 19px; } } @@ -4641,10 +5222,10 @@ button, @media only screen and (min-width: 768px) { .su-card--horizontal > img { margin: 36px 0; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-card--horizontal > img { margin: 36px 0; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-card--horizontal > img { margin: 38px 0; } } @@ -4755,14 +5336,14 @@ button, .global-footer { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .global-footer { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { .global-footer { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } .global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } @@ -4884,10 +5465,10 @@ button, flex-direction: column; justify-content: center; min-height: 320px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-hero { min-height: 409px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-hero { min-height: 520px; } } @@ -4899,11 +5480,11 @@ button, .su-hero__media { min-height: 320px; position: absolute; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-hero__media { min-height: 409px; position: absolute; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-hero__media { min-height: 520px; position: absolute; } } @@ -4926,10 +5507,10 @@ button, margin-bottom: 45px; left: 45px; max-width: 400px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-hero__card { max-width: 450px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-hero__card { margin-top: 96px; margin-bottom: 0; @@ -4943,10 +5524,10 @@ button, @media only screen and (min-width: 768px) { .su-hero--youtube { min-height: 640px; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-hero--youtube { min-height: 640px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 1200px) { .su-hero--youtube { min-height: 728px; } } .su-hero--youtube .su-hero__media iframe { @@ -5100,7 +5681,7 @@ button, .su-site-search__input::placeholder { color: #2e2d29; opacity: 1; } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-site-search__input { max-width: 20em; } } @@ -5119,7 +5700,7 @@ button, top: 11px; right: 12px; width: auto; } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { .su-site-search__submit { position: relative; top: 7px; diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss index a3a70ba84..3b64c75bd 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/grid/_flex-grid.scss @@ -16,46 +16,50 @@ } // Got classes if you want them. -.grid--3-of-12 { - @include grid--3-of-12; +.grid--1-of-12 { + @include grid--1-of-12; } -.grid--9-of-12 { - @include grid--9-of-12; +.grid--2-of-12 { + @include grid--2-of-12; +} + +.grid--3-of-12 { + @include grid--3-of-12; } .grid--4-of-12 { @include grid--4-of-12; } -.grid--8-of-12 { - @include grid--8-of-12; +.grid--5-of-12 { + @include grid--5-of-12; } .grid--6-of-12 { @include grid--6-of-12; } -.grid--12-of-12 { - @include grid--12-of-12; +.grid--7-of-12 { + @include grid--7-of-12; } -.grid--2-of-12 { - @include grid--2-of-12; +.grid--8-of-12 { + @include grid--8-of-12; } -.grid--10-of-12 { - @include grid--10-of-12; +.grid--9-of-12 { + @include grid--9-of-12; } -.grid--1-of-12 { - @include grid--1-of-12; +.grid--10-of-12 { + @include grid--10-of-12; } -.grid--5-of-12 { - @include grid--5-of-12; +.grid--11-of-12 { + @include grid--11-of-12; } -.grid--7-of-12 { - @include grid--7-of-12; +.grid--12-of-12 { + @include grid--12-of-12; } diff --git a/core/scss/layout/three-column/_blastila.scss b/core/scss/layout/three-column/_blastila.scss index 2e2dca92a..1cfc42146 100644 --- a/core/scss/layout/three-column/_blastila.scss +++ b/core/scss/layout/three-column/_blastila.scss @@ -31,7 +31,7 @@ > aside { // First column, for 1 column, but down two columns. - @include grid-item-spans(1, 1, 1, span 2); + @include grid-item-spans(1, span 1, 1, span 2); } > section { diff --git a/core/scss/layout/three-column/_cuttoner-right.scss b/core/scss/layout/three-column/_cuttoner-right.scss index ac80ff12e..71cdab361 100644 --- a/core/scss/layout/three-column/_cuttoner-right.scss +++ b/core/scss/layout/three-column/_cuttoner-right.scss @@ -12,7 +12,7 @@ > aside { @include grid-media('sm') { - @include grid-item-spans(1, span 1, 1, 1); + @include grid-item-spans(1, span 1, 1, span 1); } } } diff --git a/core/scss/layout/three-column/_percles-right.scss b/core/scss/layout/three-column/_percles-right.scss index f1c46b70e..49e8b800e 100644 --- a/core/scss/layout/three-column/_percles-right.scss +++ b/core/scss/layout/three-column/_percles-right.scss @@ -7,11 +7,11 @@ > div { > &:first-child { - @include grid-item-spans(3, span 1, 1, 1); + @include grid-item-spans(3, span 1, 1, span 1); } > header { - @include grid-item-spans(1, span 2, 1, 1); + @include grid-item-spans(1, span 2, 1, span 1); } } diff --git a/core/scss/layout/two-column/_pacman.scss b/core/scss/layout/two-column/_pacman.scss index 40bc61730..ecb85ebfb 100644 --- a/core/scss/layout/two-column/_pacman.scss +++ b/core/scss/layout/two-column/_pacman.scss @@ -17,7 +17,8 @@ $_layout-pacman-columns: ( $breakpoint-sm: 1fr 1fr 1fr, $breakpoint-md: 1fr 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr ); .layout-pacman { @@ -33,13 +34,13 @@ $_layout-pacman-columns: ( aside { @include grid-media('sm') { - @include grid-item-spans(1, 1); + @include grid-item-spans(1, span 1); } } section { @include grid-media('sm') { - @include grid-item-spans(2, span 2, 1, 1); + @include grid-item-spans(2, span 2, 1, span 1); } } diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/two-column/_plakes-right.scss index 981317677..f96b03625 100644 --- a/core/scss/layout/two-column/_plakes-right.scss +++ b/core/scss/layout/two-column/_plakes-right.scss @@ -16,10 +16,10 @@ section { @include grid-media('sm') { - @include grid-item-spans(1, span 2, 1, 1); + @include grid-item-spans(1, span 2, 1, span 1); } @include grid-media('lg') { - @include grid-item-spans(1, span 3, 1, 1); + @include grid-item-spans(1, span 3, 1, span 1); } } diff --git a/core/scss/layout/two-column/_plakes.scss b/core/scss/layout/two-column/_plakes.scss index 1248b6bc2..dc3648aef 100644 --- a/core/scss/layout/two-column/_plakes.scss +++ b/core/scss/layout/two-column/_plakes.scss @@ -17,7 +17,8 @@ $_layout-plakes-columns: ( $breakpoint-sm: 1fr 1fr 1fr, $breakpoint-md: 1fr 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr ); .layout-plakes { @@ -33,13 +34,13 @@ $_layout-plakes-columns: ( aside { @include grid-media('sm') { - @include grid-item-spans(1, 1); + @include grid-item-spans(1, span 1); } } section { @include grid-media('sm') { - @include grid-item-spans(2, span 3, 1, 1); + @include grid-item-spans(2, span 3, 1, span 1); } } diff --git a/core/scss/layout/two-column/_trunks.scss b/core/scss/layout/two-column/_trunks.scss index 6d9ddde12..7cf07f412 100644 --- a/core/scss/layout/two-column/_trunks.scss +++ b/core/scss/layout/two-column/_trunks.scss @@ -17,7 +17,8 @@ $_layout-trunks-columns: ( $breakpoint-sm: 1fr 1fr 1fr, $breakpoint-md: 1fr 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr ); .layout-trunks { @@ -34,7 +35,7 @@ $_layout-trunks-columns: ( &:nth-child(2) { @include grid-media('sm') { - @include grid-item-spans(2, span 2, 1, 1); + @include grid-item-spans(2, span 2, 1, span 1); } } } diff --git a/core/scss/layout/two-column/_wedge.scss b/core/scss/layout/two-column/_wedge.scss index 6d3e7327b..2a787daaa 100644 --- a/core/scss/layout/two-column/_wedge.scss +++ b/core/scss/layout/two-column/_wedge.scss @@ -17,7 +17,8 @@ $_layout-wedge-columns: ( $breakpoint-sm: 1fr 1fr 1fr, $breakpoint-md: 1fr 1fr 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr ); .layout-wedge { @@ -34,7 +35,7 @@ $_layout-wedge-columns: ( &:nth-child(2) { @include grid-media('sm') { - @include grid-item-spans(2, span 3, 1, 1); + @include grid-item-spans(2, span 3, 1, span 1); } } } diff --git a/core/scss/utilities/mixins/flex/_flex-classes.scss b/core/scss/utilities/mixins/flex/_flex-classes.scss index 4252f9ac3..8607022ff 100644 --- a/core/scss/utilities/mixins/flex/_flex-classes.scss +++ b/core/scss/utilities/mixins/flex/_flex-classes.scss @@ -1,28 +1,29 @@ @charset "UTF-8"; // -// @grid--12-of-12 +// @grid--1-of-12 // -// Mixin to apply to an element that should occupy 12/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 1/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--12-of-12 +// Style guide: Mixins.Grid.grid--1-of-12 // -@mixin grid--12-of-12 { +@mixin grid--1-of-12 { width: 100%; + @include responsive-flex-column(1 of 12); } // -// @grid--6-of-12 +// @grid--2-of-12 // -// Mixin to apply to an element that should occupy 6/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 2/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--6-of-12 +// Style guide: Mixins.Grid.grid--2-of-12 // -@mixin grid--6-of-12 { +@mixin grid--2-of-12 { width: 100%; - @include responsive-flex-column(6); + @include responsive-flex-column(2 of 12); } // @@ -36,33 +37,58 @@ @mixin grid--3-of-12 { width: 100%; @include responsive-flex-column(3); +} +// +// @grid--4-of-12 +// +// Mixin to apply to an element that should occupy 4/12 of a class-based grid row. +// +// Style guide: Mixins.Grid.grid--4-of-12 +// + +@mixin grid--4-of-12 { + width: 100%; + @include responsive-flex-column(4); } // -// @grid--9-of-12 +// @grid--5-of-12 // -// Mixin to apply to an element that should occupy 9/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 5/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--9-of-12 +// Style guide: Mixins.Grid.grid--5-of-12 // -@mixin grid--9-of-12 { +@mixin grid--5-of-12 { width: 100%; - @include responsive-flex-column(9 of 12); + @include responsive-flex-column(5 of 12); } // -// @grid--4-of-12 +// @grid--6-of-12 // -// Mixin to apply to an element that should occupy 4/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 6/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--4-of-12 +// Style guide: Mixins.Grid.grid--6-of-12 // -@mixin grid--4-of-12 { +@mixin grid--6-of-12 { width: 100%; - @include responsive-flex-column(4); + @include responsive-flex-column(6); +} + +// +// @grid--7-of-12 +// +// Mixin to apply to an element that should occupy 7/12 of a class-based grid row. +// +// Style guide: Mixins.Grid.grid--7-of-12 +// + +@mixin grid--7-of-12 { + width: 100%; + @include responsive-flex-column(7 of 12); } // @@ -79,16 +105,16 @@ } // -// @grid--2-of-12 +// @grid--9-of-12 // -// Mixin to apply to an element that should occupy 2/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 9/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--2-of-12 +// Style guide: Mixins.Grid.grid--9-of-12 // -@mixin grid--2-of-12 { +@mixin grid--9-of-12 { width: 100%; - @include responsive-flex-column(2 of 12); + @include responsive-flex-column(9 of 12); } // @@ -105,40 +131,26 @@ } // -// @grid--1-of-12 -// -// Mixin to apply to an element that should occupy 1/12 of a class-based grid row. -// -// Style guide: Mixins.Grid.grid--1-of-12 -// - -@mixin grid--1-of-12 { - width: 100%; - @include responsive-flex-column(1 of 12); -} - -// -// @grid--5-of-12 +// @grid--11-of-12 // -// Mixin to apply to an element that should occupy 5/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 11/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--5-of-12 +// Style guide: Mixins.Grid.grid--11-of-12 // -@mixin grid--5-of-12 { +@mixin grid--11-of-12 { width: 100%; - @include responsive-flex-column(5 of 12); + @include responsive-flex-column(11); } // -// @grid--7-of-12 +// @grid--12-of-12 // -// Mixin to apply to an element that should occupy 7/12 of a class-based grid row. +// Mixin to apply to an element that should occupy 12/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--7-of-12 +// Style guide: Mixins.Grid.grid--12-of-12 // -@mixin grid--7-of-12 { +@mixin grid--12-of-12 { width: 100%; - @include responsive-flex-column(7 of 12); } diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss index c54f06f73..873934169 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss @@ -34,4 +34,8 @@ @media #{$breakpoint-xl} { font-size: modular-scale($scale, map-get($modular-typography, 'xl')); } + + @media #{$breakpoint-2xl} { + font-size: modular-scale($scale, map-get($modular-typography, '2xl')); + } } diff --git a/core/scss/utilities/variables/core/_breakpoints.scss b/core/scss/utilities/variables/core/_breakpoints.scss index 80ea0b73d..c0cf48cc0 100644 --- a/core/scss/utilities/variables/core/_breakpoints.scss +++ b/core/scss/utilities/variables/core/_breakpoints.scss @@ -36,20 +36,29 @@ $screen-md: 768px !default; // // $screen-lg // -// Markup: $screen-lg: 1024px !default; +// Markup: $screen-lg: 992px !default; // // Styleguide: Variables.Core.Breakpoints.screen-lg // -$screen-lg: 1024px !default; +$screen-lg: 992px !default; // // $screen-xl // -// Markup: $screen-xl: 1500px !default; +// Markup: $screen-xl: 1200px !default; // // Styleguide: Variables.Core.Breakpoints.screen-xl // -$screen-xl: 1500px !default; +$screen-xl: 1200px !default; + +// +// $screen-2xl +// +// Markup: $screen-2xl: 1500px !default; +// +// Styleguide: Variables.Core.Breakpoints.screen-2xl +// +$screen-2xl: 1500px !default; // // $breakpoint-xs @@ -141,6 +150,26 @@ $breakpoint-lg-only: 'only screen and (min-width: #{$screen-lg}) and (max-width: // Styleguide: Variables.Core.Breakpoints.xl $breakpoint-xl: 'only screen and (min-width: #{$screen-xl})' !default; +// +// $breakpoint-xl-only +// +// Mixin for basic mobile-first media query for xl-only screen size. +// +// Markup: $breakpoint-xl-only: 'only screen and (min-width: #{$screen-xl}) and (max-width: #{$screen-2xl - 1})' !default; +// +// Styleguide: Variables.Core.Breakpoints.breakpoint-xl-only +$breakpoint-xl-only: 'only screen and (min-width: #{$screen-xl}) and (max-width: #{$screen-2xl - 1})' !default; + +// +// $breakpoint-2xl +// +// Mixin for basic mobile-first media query for 2xl-and-up screen size. +// +// Markup: $breakpoint-2xl: 'only screen and (min-width: #{$screen-2xl})' !default; +// +// Styleguide: Variables.Core.Breakpoints.2xl +$breakpoint-2xl: 'only screen and (min-width: #{$screen-2xl})' !default; + ////////////////////////////////////////////////////////////////////////////// // @@ -194,6 +223,15 @@ $columns-lg: 12 !default; // $columns-xl: 12 !default; +// +// $columns-2xl +// +// Markup: $columns-2xl: 12 !default; +// +// Styleguide: Variables.Core.Columns.cols-2xl +// +$columns-2xl: 12 !default; + ////////////////////////////////////////////////////////////////////////////// // @@ -232,17 +270,26 @@ $gutter-md: 20px !default; // // $gutter-lg // -// Markup: $gutter-lg: 30px !default; +// Markup: $gutter-lg: 36px !default; // // Styleguide: Variables.Core.Gutters.gutter-lg // -$gutter-lg: 30px !default; +$gutter-lg: 36px !default; // // $gutter-xl // -// Markup: $gutter-xl: 30px !default; +// Markup: $gutter-xl: 40px !default; // // Styleguide: Variables.Core.Gutters.gutter-xl // -$gutter-xl: 30px !default; +$gutter-xl: 40px !default; + +// +// $gutter-2xl +// +// Markup: $gutter-2xl: 48px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-2xl +// +$gutter-2xl: 48px !default; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 2c3ca551d..03e3e87b8 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -8,7 +8,8 @@ $grid-screens: ( 'sm': $screen-sm, 'md': $screen-md, 'lg': $screen-lg, - 'xl': $screen-xl + 'xl': $screen-xl, + '2xl': $screen-2xl ); // @@ -19,7 +20,8 @@ $grid-media: ( 'sm': $breakpoint-sm, 'md': $breakpoint-md, 'lg': $breakpoint-lg, - 'xl': $breakpoint-xl + 'xl': $breakpoint-xl, + '2xl': $breakpoint-2xl ); // @@ -30,7 +32,8 @@ $grid-media-only: ( 'sm': $breakpoint-sm-only, 'md': $breakpoint-md-only, 'lg': $breakpoint-lg-only, - 'xl': $breakpoint-xl + 'xl': $breakpoint-xl-only, + '2xl': $breakpoint-2xl ); // @@ -41,7 +44,8 @@ $responsive-columns-default: ( $breakpoint-sm: 1fr 1fr, $breakpoint-md: 1fr 1fr, $breakpoint-lg: 1fr 1fr, - $breakpoint-xl: 1fr 1fr + $breakpoint-xl: 1fr 1fr, + $breakpoint-2xl: 1fr 1fr ); // Helper for those like me that forget. @@ -55,7 +59,8 @@ $responsive-columns-three: ( $breakpoint-sm: 1fr 1fr, $breakpoint-md: 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr ); // @@ -66,7 +71,8 @@ $responsive-columns-four: ( $breakpoint-sm: 1fr 1fr, $breakpoint-md: 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr ); // @@ -77,7 +83,8 @@ $responsive-columns-six: ( $breakpoint-sm: 1fr 1fr 1fr, $breakpoint-md: 1fr 1fr 1fr, $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr + $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr ); // @@ -88,7 +95,8 @@ $grid-gutters: ( 'sm': $gutter-sm, 'md': $gutter-md, 'lg': $gutter-lg, - 'xl': $gutter-xl + 'xl': $gutter-xl, + '2xl': $gutter-2xl ); // @@ -99,5 +107,6 @@ $responsive-gutters-default:( $breakpoint-sm: $gutter-sm, $breakpoint-md: $gutter-md, $breakpoint-lg: $gutter-lg, - $breakpoint-xl: $gutter-xl + $breakpoint-xl: $gutter-xl, + $breakpoint-2xl: $gutter-2xl ); diff --git a/core/scss/utilities/variables/core/_magic-numbers.scss b/core/scss/utilities/variables/core/_magic-numbers.scss index b4a953441..631d526d5 100644 --- a/core/scss/utilities/variables/core/_magic-numbers.scss +++ b/core/scss/utilities/variables/core/_magic-numbers.scss @@ -35,11 +35,11 @@ $lead-max-width: 85rem !default; // // For setting the max-width of the project's grid system. // -// Markup: $site-max-width: 1220px !default; +// Markup: $site-max-width: 1500px !default; // // Styleguide: Variables.Core.Magic.site-max-width // -$site-max-width: 1220px !default; +$site-max-width: 1500px !default; // // $site-margins @@ -50,7 +50,7 @@ $site-max-width: 1220px !default; // // Styleguide: Variables.Core.Magic.site-margins // -$site-margins: 3rem !default; +$site-margins: 3rem !default; // // $site-margins-mobile diff --git a/core/scss/utilities/variables/core/_modular-typography.scss b/core/scss/utilities/variables/core/_modular-typography.scss index 16637d6f4..1b659eaf7 100644 --- a/core/scss/utilities/variables/core/_modular-typography.scss +++ b/core/scss/utilities/variables/core/_modular-typography.scss @@ -20,5 +20,6 @@ $modular-typography: ( 'sm': 1.6rem, 'md': 1.8rem, 'lg': 1.8rem, - 'xl': 1.9rem + 'xl': 1.8rem, + '2xl': 1.9rem ) !default; diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 04e7d113d..2fd24ac27 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -343,18 +343,18 @@ template { --color-text: hsla(204, 80%, 72%, 1); --media-query: 'md'; } } -@media (min-width: 1024px) { +@media (min-width: 992px) { :root { --columns: 12; - --gutter: 30px; + --gutter: 36px; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'lg'; } } -@media (min-width: 1500px) { +@media (min-width: 1200px) { :root { --columns: 12; - --gutter: 30px; + --gutter: 40px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; } } @@ -997,7 +997,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { @media only screen and (min-width: 768px) { #kss-node.kss-home p { font-size: 1.8rem; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + #kss-node.kss-home p { + font-size: 1.8rem; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home p { font-size: 1.8rem; } } @media only screen and (min-width: 1500px) { @@ -1014,7 +1017,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { @media only screen and (min-width: 768px) { #kss-node.kss-home h2 { font-size: 3.515625rem; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + #kss-node.kss-home h2 { + font-size: 3.515625rem; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home h2 { font-size: 3.515625rem; } } @media only screen and (min-width: 1500px) { @@ -1038,14 +1044,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home header { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home header { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } #kss-node.kss-home header div { display: grid; display: -ms-grid; @@ -1069,7 +1075,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { @media only screen and (min-width: 768px) { #kss-node.kss-home header h1 { font-size: 2.8125rem; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + #kss-node.kss-home header h1 { + font-size: 2.8125rem; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home header h1 { font-size: 2.8125rem; } } @media only screen and (min-width: 1500px) { @@ -1116,14 +1125,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } #kss-node.kss-home .section--welcome h1, #kss-node.kss-home .section--welcome h2, #kss-node.kss-home .section--welcome h3, @@ -1148,7 +1157,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { @media only screen and (min-width: 768px) { #kss-node.kss-home .section--welcome p { font-size: 2.25rem; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--welcome p { + font-size: 2.25rem; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--welcome p { font-size: 2.25rem; } } @media only screen and (min-width: 1500px) { @@ -1172,14 +1184,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--ui-components { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } #kss-node.kss-home .section--ui-components .su-card { box-shadow: none; border: 0; } @@ -1205,14 +1217,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } #kss-node.kss-home .section--dev-resources > * { margin-right: 15px; margin-left: 15px; } @@ -1230,14 +1242,14 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 364px 364px auto; grid-template-columns: auto 364px 364px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 226px 226px auto; - grid-template-columns: auto 226px 226px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 212px 212px auto; + grid-template-columns: auto 212px 212px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 345px 345px auto; - grid-template-columns: auto 345px 345px auto; } } + -ms-grid-columns: auto 260px 260px auto; + grid-template-columns: auto 260px 260px auto; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources h2 { grid-column-start: 2; } } @@ -1273,20 +1285,20 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--more-info { -ms-grid-columns: auto 768px auto; grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1024px auto; - grid-template-columns: auto 1024px auto; } } - @media only screen and (min-width: 1500px) { + -ms-grid-columns: auto 992px auto; + grid-template-columns: auto 992px auto; } } + @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1200px auto; + grid-template-columns: auto 1200px auto; } } #kss-node.kss-home .section--more-info h2 { text-align: center; } #kss-node.kss-home .section--more-info ul { display: grid; display: -ms-grid; } - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; From 336ab98467f26eb4cf786708dc4c11fef98eefbd Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 14 Nov 2018 21:06:52 -0800 Subject: [PATCH 035/123] Sticky footer and template updates. --- .../mixins/layout/_sticky-footer.scss | 3 +- kss/builder/decanter/index.twig | 378 +++++++++--------- kss/builder/decanter/kss-assets/css/kss.css | 23 +- kss/builder/decanter/scss/_brand-bar.scss | 2 +- kss/builder/decanter/scss/_builder.scss | 34 +- kss/builder/decanter/scss/_global-footer.scss | 18 +- 6 files changed, 210 insertions(+), 248 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index d0a41f7f6..88d4eaa4c 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -19,9 +19,10 @@ @mixin sticky-footer($selector: '> footer') { @include padding(0); @include margin(0); + @include display-grid; - display: grid; height: 100vh; // Avoid the IE 10-11 `min-height` bug. + z-index: 9999; #{$selector} { align-self: flex-end; diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 16070b153..3a3650795 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -19,214 +19,217 @@ only %} -{% if not template.isHomepage %} +
    + {% if not template.isHomepage %} -
    -
    -

    {{ options.title }}

    -
    - -
    - -{% endif %} +
    +
    +

    {{ options.title }}

    +
    + +
    -
    -{% if template.isHomepage %} - {% if homepage %} -
    - {{ homepage|raw }} -
    {% endif %} -{% else %} - {# - Display each section, in order. +
    + {% if template.isHomepage %} + {% if homepage %} +
    + {{ homepage|raw }} +
    + {% endif %} + {% else %} + + {# + Display each section, in order. - The "root" element comes first in this loop, and can be detected using the - "loop.first" variable as seen below. - #} - {% for section in sections %} - {% set sectionElement = loop.first ? 'div' : 'section' %} - <{{ sectionElement }} id="kssref-{{ section.referenceURI }}" class="kss-section kss-section--depth-{{ section.depth }} {% if template.isItem %}is-fullscreen{% endif %}"> -
    - {% set headerElement = (section.depth > 6) ? 'h6' : 'h' ~ section.depth %} - <{{ headerElement }} class="kss-title kss-title--level-{{ section.depth }}"> - - - {{ section.referenceNumber }} - - {{ hasNumericReferences ? '#permalink' : section.reference }} + The "root" element comes first in this loop, and can be detected using the + "loop.first" variable as seen below. + #} + {% for section in sections %} + {% set sectionElement = loop.first ? 'div' : 'section' %} + <{{ sectionElement }} id="kssref-{{ section.referenceURI }}" class="kss-section kss-section--depth-{{ section.depth }} {% if template.isItem %}is-fullscreen{% endif %}"> +
    + {% set headerElement = (section.depth > 6) ? 'h6' : 'h' ~ section.depth %} + <{{ headerElement }} class="kss-title kss-title--level-{{ section.depth }}"> + + + {{ section.referenceNumber }} + + {{ hasNumericReferences ? '#permalink' : section.reference }} + - - {{ section.header }} - - + {{ section.header }} + + - {% if section.example %} -

    - {% if not template.isItem %} - - Toggle full screen - - - - - + {% if section.example %} +

    + {% if not template.isItem %} + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + {% endif %} + + Toggle example guides + + + + + + + + + + + + + + + + + - - Open in new window + + Toggle HTML markup - - - - - - + + - {% endif %} - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - {% endif %} - - {% if section.description %} -
    - {{ section.description|raw }} -
    - {% endif %} - - {% for parameter in section.parameters %} - {% if loop.first %} -
    Parameters:
    -
      +

      {% endif %} -
    • -
      {{ parameter.name }}
      -
      - {{ parameter.description|raw }} - {% if parameter.defaultValue %} -
      - Defaults to: {{ parameter.defaultValue }} -
      - {% endif %} -
      -
      • - {% if loop.last %} -
    - {% endif %} - {% endfor %} -
    - {% if section.example %} -
    -
    - Example{% if section.modifiers is not empty %}s{% endif %} -
    - - {% if section.modifiers is not empty %} -
    - Default styling + {% if section.description %} +
    + {{ section.description|raw }}
    {% endif %} -
    - {{ section.example|raw }} -
    -
    + {% for parameter in section.parameters %} + {% if loop.first %} +
    Parameters:
    +
      + {% endif %} +
    • +
      {{ parameter.name }}
      +
      + {{ parameter.description|raw }} + {% if parameter.defaultValue %} +
      + Defaults to: {{ parameter.defaultValue }} +
      + {% endif %} +
      +
      • + {% if loop.last %} +
    + {% endif %} + {% endfor %} +
    - {% for modifier in section.modifiers %} -
    - {{ modifier.name }} -
    -
    - {{ modifier.description|raw }} + {% if section.example %} +
    +
    + Example{% if section.modifiers is not empty %}s{% endif %}
    + + {% if section.modifiers is not empty %} +
    + Default styling +
    + {% endif %} +
    - {{ modifier.markup|raw }} + {{ section.example|raw }}
    - {% endfor %} -
    - {% if section.markup %} -
    - - {% if section.markupFile %} - Markup: {{ section.markupFile }} - {% else %} - Markup - {% endif %} - - 
    {{ section.markup|escape('html') }}
    -
    + + {% for modifier in section.modifiers %} +
    + {{ modifier.name }} +
    +
    + {{ modifier.description|raw }} +
    +
    + {{ modifier.markup|raw }} +
    +
    + {% endfor %} +
    + {% if section.markup %} +
    + + {% if section.markupFile %} + Markup: {{ section.markupFile }} + {% else %} + Markup + {% endif %} + + 
    {{ section.markup|escape('html') }}
    +
    + {% endif %} {% endif %} - {% endif %} - {% if section.source.filename %} -
    - Source: {{ section.source.filename }}, line {{ section.source.line }} -
    - {% endif %} - - {% endfor %} -{% endif %} + {% if section.source.filename %} +
    + Source: {{ section.source.filename }}, line {{ section.source.line }} +
    + {% endif %} + + {% endfor %} + {% endif %} +
    +
    + {% include "@decanter/components/global-footer/global-footer.twig" with {} only %} - @@ -256,14 +259,5 @@ }); {{ scripts|raw }} -{# This will only be included in the demo page. #} -{% if options.demo %} -
    - - Fork me on GitHub -
    -{% endif %} - - diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index ca79498fe..e41cbebde 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -365,7 +365,7 @@ template { --media-query: 'xl'; } } #kss-node { - padding-top: 40px !important; } + padding-top: 20px !important; } #kss-node > .su-brand-bar { position: fixed; top: 0; @@ -470,6 +470,9 @@ template { .kss-style h2, .kss-style h3 { page-break-after: avoid; } } +body > div { + position: relative; } + #kss-node { margin: 0; padding: 20px; @@ -498,7 +501,9 @@ template { border-bottom: 1px solid #ddd; } @media screen and (min-width: 769px) { #kss-node .kss-sidebar { - position: fixed; + position: absolute; + top: 0px; + left: 0px; width: 20%; height: 100%; overflow: auto; @@ -982,19 +987,15 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .kss-color code { display: none; } -article.kss-main { +body { padding: 0; margin: 0; + display: -ms-grid; display: grid; - height: 100vh; } - article.kss-main .global-footer { + height: 100vh; + z-index: 9999; } + body > footer { align-self: flex-end; } - article.kss-main .kss-sidebar { - padding-bottom: 150px; - z-index: 0; } - article.kss-main .global-footer { - position: relative; - z-index: 10; } #kss-node.kss-home .kss-main { width: 100%; diff --git a/kss/builder/decanter/scss/_brand-bar.scss b/kss/builder/decanter/scss/_brand-bar.scss index 27d10d2d3..46dc5e91f 100644 --- a/kss/builder/decanter/scss/_brand-bar.scss +++ b/kss/builder/decanter/scss/_brand-bar.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; #kss-node { - padding-top: 40px !important; + padding-top: 20px !important; > .su-brand-bar { position: fixed; top: 0; diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index 4939478c0..bd3bd2045 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -28,28 +28,6 @@ } } - // p { - // margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0; - // } - // - // h1, h2, h3, h4, h5, h6 { - // margin: $kss-vertical-rhythm 0 0 0; - // font-family: $kss-font-body; - // color: $kss-colors-heading; - // line-height: 1.15em; - // } - // - // h4, h5, h6 { - // font-weight: bold; - // } - // - // h1 { font-size: $kss-font-size * 2.5; } - // h2 { font-size: $kss-font-size * 2.25; } - // h3 { font-size: $kss-font-size * 2.125; } - // h4 { font-size: $kss-font-size * 2; } - // h5 { font-size: $kss-font-size * 1.875; } - // h6 { font-size: $kss-font-size * 1.75; } - blockquote { color: $kss-colors-quotes; margin: 0; @@ -143,6 +121,10 @@ // Layout and page background // ------------------------------------------------------------------------------ +body > div { + position: relative; +} + #kss-node { margin: 0; padding: 20px; @@ -182,16 +164,14 @@ border-bottom:1px solid #ddd; @media screen and (min-width: 769px) { - position: fixed; + position: absolute; + top: 0px; + left: 0px; width: 20%; height: 100%; overflow: auto; padding: 0 10px 0 20px; border-bottom: 0; - // background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee); - // background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee); - // background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee); - // background-image: url(noise-low.png), radial-gradient(#fff, #eee); background-color: $color-light-sandstone; box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7); } diff --git a/kss/builder/decanter/scss/_global-footer.scss b/kss/builder/decanter/scss/_global-footer.scss index 42cff9da9..ad7829e50 100644 --- a/kss/builder/decanter/scss/_global-footer.scss +++ b/kss/builder/decanter/scss/_global-footer.scss @@ -1,19 +1,5 @@ @charset "UTF-8"; - -article.kss-main { - $footer: '.global-footer'; - - @include sticky-footer($footer); - - // To support the sticky footer we must put the sidebar behind the footer. - .kss-sidebar { - @include padding(null null 150px null); - z-index: 0; - } - - #{$footer} { - position: relative; - z-index: 10; - } +body { + @include sticky-footer(); } From dc1fc2deb3c77607d38a1d850f04cea6aab26f57 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 14 Nov 2018 22:48:00 -0800 Subject: [PATCH 036/123] More documentation and comments. --- core/css/decanter.css | 102 +++++++++--------- core/scss/components/alert/_alert.scss | 6 +- .../components/card/_card--horizontal.scss | 23 ++-- core/scss/components/card/_card.scss | 8 +- core/scss/components/cta/_cta.scss | 2 +- .../global-footer/_global-footer.scss | 36 +++---- core/scss/components/hero/_hero--youtube.scss | 11 +- core/scss/components/hero/_hero.scss | 21 ++-- .../components/site-search/_site-search.scss | 4 +- core/scss/core/grid/_flex-grid.scss | 4 - .../layout/three-column/_blastila-right.scss | 2 +- .../functions/flex/_flex-column-ratio.scss | 30 +++--- .../functions/flex/_flex-column-width.scss | 27 +++-- .../functions/flex/_flex-parse-columns.scss | 20 ++-- core/scss/utilities/functions/flex/index.scss | 8 +- .../_modular-spacing-get-value.scss | 6 +- .../functions/modular-scale/index.scss | 7 +- .../utilities/mixins/flex/_flex-classes.scss | 24 ++--- .../utilities/mixins/flex/_flex-column.scss | 24 +---- .../mixins/flex/_flex-container.scss | 2 +- .../mixins/flex/_responsive-flex-column.scss | 15 ++- core/scss/utilities/mixins/flex/index.scss | 5 +- .../mixins/grid/_centered-column.scss | 4 +- .../mixins/grid/_centered-grid-container.scss | 2 +- .../utilities/mixins/grid/_display-grid.scss | 2 +- .../mixins/grid/_grid-align-self.scss | 4 +- .../mixins/grid/_grid-column-gap.scss | 4 +- .../utilities/mixins/grid/_grid-columns.scss | 4 +- .../scss/utilities/mixins/grid/_grid-gap.scss | 4 +- .../mixins/grid/_grid-item-spans.scss | 7 +- .../mixins/grid/_grid-justify-self.scss | 5 +- .../mixins/grid/_grid-media-only.scss | 8 +- .../utilities/mixins/grid/_grid-media.scss | 6 +- .../utilities/mixins/grid/_grid-row-gap.scss | 4 +- .../utilities/mixins/grid/_grid-rows.scss | 4 +- .../mixins/grid/_responsive-grid-columns.scss | 5 +- .../mixins/grid/_responsive-grid-gap.scss | 6 +- core/scss/utilities/mixins/grid/index.scss | 2 +- .../mixins/image/_image-defaults.scss | 6 +- .../mixins/modular-scale/_modular-margin.scss | 8 +- .../modular-scale/_modular-typography.scss | 10 +- core/scss/utilities/mixins/quote/_quote.scss | 2 +- .../utilities/mixins/shadow/_box-shadow.scss | 1 - core/scss/utilities/mixins/shadow/index.scss | 6 +- core/scss/utilities/variables/core/_grid.scss | 54 ++++++++-- .../layout/four-column/molive/molive.twig | 10 +- .../layout/full-width/bricks/bricks.twig | 8 +- 47 files changed, 314 insertions(+), 249 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 00237e91f..2de57e76a 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -649,11 +649,11 @@ body { height: 100%; } img { + margin: 0; + padding: 0; display: block; height: auto; - max-width: 100%; - margin: 0; - padding: 0; } + max-width: 100%; } input, textarea, @@ -1960,8 +1960,8 @@ dfn { .layout-blastila--right > div > aside { -ms-grid-column: 3; - grid-column: 3 / 3; - -ms-grid-column-span: 0; + grid-column: 3 / span 3; + -ms-grid-column-span: span 3-3; -ms-grid-row: 1; grid-row: 1 / span 2; -ms-grid-row-span: span 2-1; } @@ -5228,6 +5228,9 @@ button, @media only screen and (min-width: 1200px) { .su-card--horizontal > img { margin: 38px 0; } } + @media only screen and (min-width: 1500px) { + .su-card--horizontal > img { + margin: 0; } } .su-cta--button-bottom, .su-cta { @@ -5319,31 +5322,9 @@ button, width: auto; } } .global-footer { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; - padding: 2.5rem 0; + padding: 2.5rem 10px; background-color: #8c1515; color: #ffffff; } - .global-footer > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - .global-footer { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } - @media only screen and (min-width: 768px) { - .global-footer { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } - @media only screen and (min-width: 992px) { - .global-footer { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } - @media only screen and (min-width: 1200px) { - .global-footer { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } .global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } @@ -5351,8 +5332,36 @@ button, color: #ffffff; text-decoration: underline; } .global-footer .global-footer__container { + margin: 0 auto; display: grid; display: -ms-grid; } + @media only screen and (min-width: 0) { + .global-footer .global-footer__container { + max-width: 100%; } } + @media only screen and (min-width: 576px) { + .global-footer .global-footer__container { + max-width: 576px; } } + @media only screen and (min-width: 768px) { + .global-footer .global-footer__container { + max-width: 768px; } } + @media only screen and (min-width: 992px) { + .global-footer .global-footer__container { + max-width: 992px; } } + @media only screen and (min-width: 1200px) { + .global-footer .global-footer__container { + max-width: 1200px; } } + @media only screen and (min-width: 1500px) { + .global-footer .global-footer__container { + max-width: 1500px; } } + .global-footer .global-footer__container > * { + margin-right: 15px; + margin-left: 15px; } + @supports (grid-column-gap: 20px) { + .global-footer .global-footer__container { + grid-column-gap: 30px; } + .global-footer .global-footer__container > * { + margin-right: 0; + margin-left: 0; } } @media only screen and (min-width: 0) { .global-footer .global-footer__container { -ms-grid-columns: 100%; @@ -5369,10 +5378,7 @@ button, .global-footer .global-footer__container { -ms-grid-columns: 11rem auto; grid-template-columns: 11rem auto; - justify-items: left; } - @supports (grid-column-gap: 20px) { - .global-footer .global-footer__container { - grid-column-gap: 50px; } } } + justify-items: left; } } .global-footer .global-footer__brand { margin: 0 0 1.25rem; padding-top: 5px; @@ -5404,22 +5410,22 @@ button, @media only screen and (min-width: 0) and (max-width: 575px) { .global-footer .global-footer__brand a { font-size: 3.2rem; } } - @media only screen and (min-width: 0) { - .global-footer nav { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; - display: grid; - display: -ms-grid; } } - @media only screen and (min-width: 576px) { - .global-footer nav { - -ms-grid-columns: max-content auto; - grid-template-columns: -webkit-max-content auto; - grid-template-columns: max-content auto; - display: grid; - display: -ms-grid; } } - @media only screen and (min-width: 768px) { - .global-footer nav { - margin-bottom: 0.75rem; } } + .global-footer nav { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .global-footer nav { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } } + @media only screen and (min-width: 576px) { + .global-footer nav { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } } + @media only screen and (min-width: 768px) { + .global-footer nav { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; + margin-bottom: 0.75rem; } } .global-footer .global-footer__menu { margin: 0 0 1.5rem; padding: 0; diff --git a/core/scss/components/alert/_alert.scss b/core/scss/components/alert/_alert.scss index 7d8c89f6f..543d96925 100644 --- a/core/scss/components/alert/_alert.scss +++ b/core/scss/components/alert/_alert.scss @@ -24,7 +24,7 @@ background-size: 4rem; color: $color-black; - @media #{$breakpoint-md} { + @include grid-media('md'){ background-size: 5.2rem; } @@ -34,7 +34,7 @@ @include padding(null null null 3.5rem); - @media #{$breakpoint-md} { + @include grid-media('md') { @include padding(null null null 5rem); } @@ -45,7 +45,7 @@ .su-alert__heading { @include margin(0 null 0.3rem); - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(0.3rem null null); } } diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 9d3495303..702fe2535 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -24,23 +24,28 @@ // Modular padding on images too. > img { - @media #{$breakpoint-sm} { - margin: _modular-spacing-get-value('sm') 0; + @include grid-media('sm') { + margin: modular-spacing-get-value('sm') 0; } - @media #{$breakpoint-md} { - margin: _modular-spacing-get-value('md') 0; + @include grid-media('md') { + margin: modular-spacing-get-value('md') 0; } - @media #{$breakpoint-lg} { - margin: _modular-spacing-get-value('lg') 0; + @include grid-media('lg') { + margin: modular-spacing-get-value('lg') 0; } - @media #{$breakpoint-xl} { - margin: _modular-spacing-get-value('xl') 0; + @include grid-media('xl') { + margin: modular-spacing-get-value('xl') 0; } - margin: _modular-spacing-get-value('xs') 0; + @include grid-media('2xl') { + margin: modular-spacing-get-value('2xl') 0; + } + + margin: modular-spacing-get-value('xs') 0; + } } diff --git a/core/scss/components/card/_card.scss b/core/scss/components/card/_card.scss index 36fbcc1fa..5ca61aecf 100644 --- a/core/scss/components/card/_card.scss +++ b/core/scss/components/card/_card.scss @@ -17,7 +17,7 @@ > img { // Hide the image on the smallest screen sizes. - @media #{$breakpoint-xs-only} { + @include grid-media-only('xs') { display: none; } } @@ -40,11 +40,11 @@ line-height: 17px; text-transform: uppercase; - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(null null 12px); } - @media #{$breakpoint-xl} { + @include grid-media('xl') { @include margin(null null 13px); } @@ -57,7 +57,7 @@ font-weight: bold; line-height: 31px; - @media #{$breakpoint-xl} { + @include grid-media('xl') { @include margin(null null 19px); } diff --git a/core/scss/components/cta/_cta.scss b/core/scss/components/cta/_cta.scss index 95258dbd6..de1c35774 100644 --- a/core/scss/components/cta/_cta.scss +++ b/core/scss/components/cta/_cta.scss @@ -46,7 +46,7 @@ left: 50%; transform: translate(-50%, -50%); - @media #{$breakpoint-xs} { + @include grid-media('xs') { width: auto; } } diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index 2a28b0aaa..dd5ed3ce8 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -12,9 +12,7 @@ // Global styles for the global footer. .global-footer { - - @include centered-grid-container; - @include padding(2.5rem 0); + @include padding(2.5rem 10px); background-color: $color-cardinal-red; color: $color-white; @@ -30,12 +28,13 @@ // Grid settings for footer container. .global-footer__container { + @include centered-column; @include display-grid; + @include grid-column-gap; @include grid-media("xs") { @include grid-columns(100%); @include grid-rows(auto auto); - justify-items: center; } @@ -47,10 +46,6 @@ @include grid-media("md") { @include grid-columns(11rem auto); justify-items: left; - - @supports (grid-column-gap: 20px) { - grid-column-gap: 50px; - } } } @@ -61,7 +56,7 @@ width: 16rem; // Logo should have no margin at higher breakpoints. - @media #{$breakpoint-sm} { + @include grid-media('sm') { @include margin(null null 0); width: 100%; } @@ -70,7 +65,7 @@ a { @include logo; - @media #{$breakpoint-xs-only} { + @include grid-media-only('xs') { font-size: 3.2rem; } @@ -81,17 +76,18 @@ // Grid settings for footer nav region; passing 0 for no outer gutters. nav { - @media #{$breakpoint-xs} { + @include display-grid; + + @include grid-media('xs') { @include grid-columns(1fr 1fr); - @include display-grid; } - @media #{$breakpoint-sm} { - @include grid-columns(max-content auto); - @include display-grid; + @include grid-media('sm') { + @include grid-columns(1fr 1fr); } - @media #{$breakpoint-md} { + @include grid-media('md') { + @include grid-columns(1fr); @include margin(null null .75rem); } } @@ -101,7 +97,7 @@ @include padding(0); list-style-type: none; - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(null null .625rem); } @@ -111,13 +107,13 @@ display: block; text-align: center; - @media #{$breakpoint-xs-only} { + @include grid-media-only('xs') { @include padding(.25em 0); font-weight: normal; text-align: left; } - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(null 2rem null null); display: inline-block; } @@ -143,7 +139,7 @@ white-space: nowrap; } - @media #{$breakpoint-sm} { + @include grid-media('sm') { text-align: left; } diff --git a/core/scss/components/hero/_hero--youtube.scss b/core/scss/components/hero/_hero--youtube.scss index 21441ffe5..d6b602e52 100644 --- a/core/scss/components/hero/_hero--youtube.scss +++ b/core/scss/components/hero/_hero--youtube.scss @@ -6,20 +6,21 @@ $_su-hero-height: ( 'sm': 315px, 'md': 640px, 'lg': 640px, - 'xl': 728px + 'xl': 728px, + '2xl': 728px ); .su-hero--youtube { - @media #{$breakpoint-md} { + @include grid-media('md') { min-height: map-get($_su-hero-height, 'md'); } - @media #{$breakpoint-lg} { + @include grid-media('lg') { min-height: map-get($_su-hero-height, 'lg'); } - @media #{$breakpoint-xl} { + @include grid-media('xl') { min-height: map-get($_su-hero-height, 'xl'); } @@ -28,7 +29,7 @@ $_su-hero-height: ( .su-hero__media { iframe { - @media #{$breakpoint-md} { + @include grid-media('md') { height: 100%; } diff --git a/core/scss/components/hero/_hero.scss b/core/scss/components/hero/_hero.scss index c52aac337..c5b09ced4 100644 --- a/core/scss/components/hero/_hero.scss +++ b/core/scss/components/hero/_hero.scss @@ -6,7 +6,8 @@ $_su-hero-height: ( 'sm': 208px, 'md': 320px, 'lg': 409px, - 'xl': 520px + 'xl': 520px, + '2xl': 520px ); // @@ -25,18 +26,18 @@ $_su-hero-height: ( .su-hero { position: relative; - @media #{$breakpoint-md} { + @include grid-media('md') { display: flex; flex-direction: column; justify-content: center; min-height: map-get($_su-hero-height, 'md'); } - @media #{$breakpoint-lg} { + @include grid-media('lg') { min-height: map-get($_su-hero-height, 'lg'); } - @media #{$breakpoint-xl} { + @include grid-media('xl') { min-height: map-get($_su-hero-height, 'xl'); } } @@ -48,17 +49,17 @@ $_su-hero-height: ( height: 100%; width: 100%; - @media #{$breakpoint-md} { + @include grid-media('md') { min-height: map-get($_su-hero-height, 'md'); position: absolute; } - @media #{$breakpoint-lg} { + @include grid-media('lg') { min-height: map-get($_su-hero-height, 'lg'); position: absolute; } - @media #{$breakpoint-xl} { + @include grid-media('xl') { min-height: map-get($_su-hero-height, 'xl'); position: absolute; } @@ -79,17 +80,17 @@ $_su-hero-height: ( position: relative; z-index: 10; - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(45px null); left: 45px; max-width: 400px; } - @media #{$breakpoint-lg} { + @include grid-media('lg') { max-width: 450px; } - @media #{$breakpoint-xl} { + @include grid-media('xl') { @include margin(96px null 0 null); bottom: 48px; left: 48px; diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss index b0eb93f07..85a8a0a5f 100644 --- a/core/scss/components/site-search/_site-search.scss +++ b/core/scss/components/site-search/_site-search.scss @@ -24,7 +24,7 @@ opacity: 1; // For Firefox } - @media #{$breakpoint-lg} { + @include grid-media('lg') { max-width: 20em; } } @@ -44,7 +44,7 @@ right: 12px; width: auto; - @media #{$breakpoint-lg} { + @include grid-media('lg') { position: relative; top: 7px; right: 40px; diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss index 3b64c75bd..2895fc06b 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/grid/_flex-grid.scss @@ -11,10 +11,6 @@ @include flex-container; } -.flex-item { - // @include flex-item; -} - // Got classes if you want them. .grid--1-of-12 { @include grid--1-of-12; diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/three-column/_blastila-right.scss index ca181547c..d6a19f4d4 100644 --- a/core/scss/layout/three-column/_blastila-right.scss +++ b/core/scss/layout/three-column/_blastila-right.scss @@ -9,7 +9,7 @@ > aside { // First column, for 1 column, but down two columns. - @include grid-item-spans(3, 3, 1, span 2); + @include grid-item-spans(3, span 3, 1, span 2); } > section { diff --git a/core/scss/utilities/functions/flex/_flex-column-ratio.scss b/core/scss/utilities/functions/flex/_flex-column-ratio.scss index 6e6bd679c..a460ab68a 100644 --- a/core/scss/utilities/functions/flex/_flex-column-ratio.scss +++ b/core/scss/utilities/functions/flex/_flex-column-ratio.scss @@ -1,21 +1,19 @@ @charset "UTF-8"; -/// Determine the ratio of `$columns` to the total column count. -/// If `$columns` is more than one value, they are handed to -/// `_neat-parse-columns()` which will determine the total columns and use this -/// value instead of `total-columns`. -/// -/// @argument {map} $grid -/// -/// @argument {number | list} $columns -/// -/// @return {number} -/// -/// @example scss -/// flex-column-ratio($grid, 3) -/// -/// @access private -@function flex-column-ratio($grid-columns, $columns) { +// flex-column-ratio($columns, $grid-columns: 12) +// +// Determine the ratio of `$columns` to the total $grid-column count. +// +// If `$columns` is more than one value, they are handed to +// `flex-parse-columns()` which will determine the total columns and use this +// value instead of `total-columns`. +// +// $columns - The total number of columns in the grid. Default 12 +// $grid-columns - The number of columns for the item to span +// +// Style guide: Functions.Flex.flex-column-ratio + +@function flex-column-ratio($columns, $grid-columns: 12) { @if length($columns) > 1 { @return nth($columns, 1) / flex-parse-columns($columns); } @else if $columns { diff --git a/core/scss/utilities/functions/flex/_flex-column-width.scss b/core/scss/utilities/functions/flex/_flex-column-width.scss index 9977ab429..336a7142d 100644 --- a/core/scss/utilities/functions/flex/_flex-column-width.scss +++ b/core/scss/utilities/functions/flex/_flex-column-width.scss @@ -1,20 +1,17 @@ @charset "UTF-8"; -/// Return a calulated column width that can then be passed in to a `calc()`. -/// -/// @argument {map} $grid -/// -/// @argument {number} $columns -/// -/// @return {string} -/// -/// @example scss -/// _neat-column-width($neat-grid, 4) -/// -/// @access private - -@function flex-column-width($columns, $gutter, $grid-columns) { - $_column-ratio: flex-column-ratio($grid-columns, $columns); +// flex-column-width($columns, $gutter: $gutter-xs, $grid-columns: 12) +// +// Return a calulated column width that can then be passed in to a `calc()`. +// +// $columns - mixed: Number of columns either as integer or `x of y` +// $gutter - unit: The width of the gutter in a css unit +// $grid-columns - integer: the number of columns in the grid +// +// Style guide: Functions.Flex.flex-column-width +// +@function flex-column-width($columns, $gutter: $gutter-xs, $grid-columns: 12) { + $_column-ratio: flex-column-ratio($columns, $grid-columns); // Make note here. $_total-columns: $grid-columns; diff --git a/core/scss/utilities/functions/flex/_flex-parse-columns.scss b/core/scss/utilities/functions/flex/_flex-parse-columns.scss index ed2249e69..6639a185c 100644 --- a/core/scss/utilities/functions/flex/_flex-parse-columns.scss +++ b/core/scss/utilities/functions/flex/_flex-parse-columns.scss @@ -1,16 +1,14 @@ @charset "UTF-8"; -/// Parse a column count like `3 of 5` and return the total column count. -/// This is to allow a shorthand for custom grids without using a settings map. -/// -/// @argument {list} $span -/// -/// @return {number} -/// -/// @example scss -/// flex-parse-columns(3 of 5) -/// -/// @access private +// flex-parse-columns($span) +// +// Parse a column count like `3 of 5` and return the total column count. +// This is to allow a shorthand for custom grids without using a settings map. +// +// $span - list: something like `2 of 12` +// +// Style guide: Functions.Flex.flex-column-ratio +// @function flex-parse-columns($span) { @if length($span) == 3 { $_total-columns: nth($span, 3); diff --git a/core/scss/utilities/functions/flex/index.scss b/core/scss/utilities/functions/flex/index.scss index 6314b8f44..3d6461a68 100644 --- a/core/scss/utilities/functions/flex/index.scss +++ b/core/scss/utilities/functions/flex/index.scss @@ -1,8 +1,10 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Flex Grid +// +// Style guide: Functions.Flex +// @import 'flex-column-ratio', diff --git a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss index 4882565b0..4b8cb3427 100644 --- a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss +++ b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss @@ -1,15 +1,15 @@ @charset "UTF-8"; // -// _modular-spacing-get-value($breakpoint) +// modular-spacing-get-value($breakpoint) // // Get a value out of the modular-spacing map // Returns the pixel value of the $modular-spacing variable at a breakpoint. // // $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl // -// Style guide: Functions._modular-spacing-get-value +// Style guide: Functions.ModularScale.modular-spacing-get-value // -@function _modular-spacing-get-value($breakpoint: 'xs') { +@function modular-spacing-get-value($breakpoint: 'xs') { @return map-get($modular-spacing, $breakpoint); } diff --git a/core/scss/utilities/functions/modular-scale/index.scss b/core/scss/utilities/functions/modular-scale/index.scss index ad45dcb05..448dfc125 100644 --- a/core/scss/utilities/functions/modular-scale/index.scss +++ b/core/scss/utilities/functions/modular-scale/index.scss @@ -1,6 +1,9 @@ @charset "UTF-8"; -// Roll up file. - +// +// Modular Scale +// +// Style guide: Functions.ModularScale +// @import 'modular-spacing-get-value'; diff --git a/core/scss/utilities/mixins/flex/_flex-classes.scss b/core/scss/utilities/mixins/flex/_flex-classes.scss index 8607022ff..25f1bcb7e 100644 --- a/core/scss/utilities/mixins/flex/_flex-classes.scss +++ b/core/scss/utilities/mixins/flex/_flex-classes.scss @@ -5,7 +5,7 @@ // // Mixin to apply to an element that should occupy 1/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--1-of-12 +// Style guide: Mixins.Flex.grid--1-of-12 // @mixin grid--1-of-12 { @@ -18,7 +18,7 @@ // // Mixin to apply to an element that should occupy 2/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--2-of-12 +// Style guide: Mixins.Flex.grid--2-of-12 // @mixin grid--2-of-12 { @@ -31,7 +31,7 @@ // // Mixin to apply to an element that should occupy 3/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--3-of-12 +// Style guide: Mixins.Flex.grid--3-of-12 // @mixin grid--3-of-12 { @@ -44,7 +44,7 @@ // // Mixin to apply to an element that should occupy 4/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--4-of-12 +// Style guide: Mixins.Flex.grid--4-of-12 // @mixin grid--4-of-12 { @@ -57,7 +57,7 @@ // // Mixin to apply to an element that should occupy 5/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--5-of-12 +// Style guide: Mixins.Flex.grid--5-of-12 // @mixin grid--5-of-12 { @@ -70,7 +70,7 @@ // // Mixin to apply to an element that should occupy 6/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--6-of-12 +// Style guide: Mixins.Flex.grid--6-of-12 // @mixin grid--6-of-12 { @@ -83,7 +83,7 @@ // // Mixin to apply to an element that should occupy 7/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--7-of-12 +// Style guide: Mixins.Flex.grid--7-of-12 // @mixin grid--7-of-12 { @@ -96,7 +96,7 @@ // // Mixin to apply to an element that should occupy 8/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--8-of-12 +// Style guide: Mixins.Flex.grid--8-of-12 // @mixin grid--8-of-12 { @@ -109,7 +109,7 @@ // // Mixin to apply to an element that should occupy 9/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--9-of-12 +// Style guide: Mixins.Flex.grid--9-of-12 // @mixin grid--9-of-12 { @@ -122,7 +122,7 @@ // // Mixin to apply to an element that should occupy 10/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--10-of-12 +// Style guide: Mixins.Flex.grid--10-of-12 // @mixin grid--10-of-12 { @@ -135,7 +135,7 @@ // // Mixin to apply to an element that should occupy 11/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--11-of-12 +// Style guide: Mixins.Flex.grid--11-of-12 // @mixin grid--11-of-12 { @@ -148,7 +148,7 @@ // // Mixin to apply to an element that should occupy 12/12 of a class-based grid row. // -// Style guide: Mixins.Grid.grid--12-of-12 +// Style guide: Mixins.Flex.grid--12-of-12 // @mixin grid--12-of-12 { diff --git a/core/scss/utilities/mixins/flex/_flex-column.scss b/core/scss/utilities/mixins/flex/_flex-column.scss index 870511c53..c7b54ebeb 100644 --- a/core/scss/utilities/mixins/flex/_flex-column.scss +++ b/core/scss/utilities/mixins/flex/_flex-column.scss @@ -1,28 +1,14 @@ @charset "UTF-8"; -// Creates a grid column of requested size. -// -// @group features // -// @name Grid column +// @flex-column($columns: null, $gutter: $gutter-xs, $grid-columns: 12) // -// @argument {number (unitless)} $columns [null] -// Specifies the number of columns an element should span based on the total -// columns of the grid. +// Creates a grid column of requested size. // -// This can also be defined in a shorthand syntaxt which also contains the -// total column count such as `3 of 5`. +// $columns - list: Specifies the number of columns an element should span based on the total columns of the grid. eg: `3 of 5` // -// @example scss -// .element { -// @include flex-column(3); -// } +// Style guide: Mixins.Flex.flex-column // -// @example css -// .element { -// width: calc(25% - 25px); -// margin-left: 20px; -// } -@mixin flex-column($columns: null, $gutter: $gutter-xs, $grid-columns: 12) { +@mixin flex-column($columns, $gutter: $gutter-xs, $grid-columns: 12) { width: calc(#{flex-column-width($columns, $gutter, $grid-columns)}); } diff --git a/core/scss/utilities/mixins/flex/_flex-container.scss b/core/scss/utilities/mixins/flex/_flex-container.scss index 979a03a3b..963befb4c 100644 --- a/core/scss/utilities/mixins/flex/_flex-container.scss +++ b/core/scss/utilities/mixins/flex/_flex-container.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// @flex-container +// @flex-container($gap: $gutter-md) // // Mixin to apply to the wrapper of all class-based layouts. // diff --git a/core/scss/utilities/mixins/flex/_responsive-flex-column.scss b/core/scss/utilities/mixins/flex/_responsive-flex-column.scss index d2a4ae0d9..35fce1d28 100644 --- a/core/scss/utilities/mixins/flex/_responsive-flex-column.scss +++ b/core/scss/utilities/mixins/flex/_responsive-flex-column.scss @@ -1,8 +1,17 @@ @charset "UTF-8"; -/// -/// -/// +// +// @responsive-flex-column($columns, $grid: $grid-media, $gutters: $grid-gutters) +// +// Loops through the breakpoints and dynamically calculates the width for each +// breakpoint based on the number of columns passed in. +// +// $columns - list: something like 1 of 12 +// $grid - map: A key value map where the key is the shortcode of the breakpoint and the value is the full media query. +// $gutters - map: A complimentary map to the $grid map where the size of the css grid gutter is applied at each breakpoint. +// +// Style guide: Mixins.Flex.responsive-flex-column +// @mixin responsive-flex-column($columns, $grid: $grid-media, $gutters: $grid-gutters) { @each $key, $breakpoint in $grid { @include grid-media($key) { diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss index c219757ac..1431795bf 100644 --- a/core/scss/utilities/mixins/flex/index.scss +++ b/core/scss/utilities/mixins/flex/index.scss @@ -1,7 +1,10 @@ @charset "UTF-8"; +// Flex Box Grid System // -// Roll ups +// Mixins for the Class-Based Grids +// +// Style guide: Mixins.Flex // @import 'flex-classes', diff --git a/core/scss/utilities/mixins/grid/_centered-column.scss b/core/scss/utilities/mixins/grid/_centered-column.scss index ad4d7f4ce..3c97e365c 100644 --- a/core/scss/utilities/mixins/grid/_centered-column.scss +++ b/core/scss/utilities/mixins/grid/_centered-column.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// centered-column($grid: $grid-media, $screens: $grid-screens) +// @centered-column($grid: $grid-media, $screens: $grid-screens) // // Centers a single cellin a container based on max width in breakpoints. // +// Style guide: Mixins.Grid.centered-column +// @mixin centered-column($grid: $grid-media, $screens: $grid-screens) { @include margin(0 auto); @each $code, $breakpoint in $grid { diff --git a/core/scss/utilities/mixins/grid/_centered-grid-container.scss b/core/scss/utilities/mixins/grid/_centered-grid-container.scss index b2ed20341..76fcad102 100644 --- a/core/scss/utilities/mixins/grid/_centered-grid-container.scss +++ b/core/scss/utilities/mixins/grid/_centered-grid-container.scss @@ -7,7 +7,7 @@ // This creates a three column row and places the first html element in to the // second column with a max width of the current breakpoint screen size. // -// Style guide Mixins.Grid.Centered Grid Container +// Style guide: Mixins.Grid.centered-grid-container // @mixin centered-grid-container { @include display-grid; diff --git a/core/scss/utilities/mixins/grid/_display-grid.scss b/core/scss/utilities/mixins/grid/_display-grid.scss index 5eab74ca4..da501ac79 100644 --- a/core/scss/utilities/mixins/grid/_display-grid.scss +++ b/core/scss/utilities/mixins/grid/_display-grid.scss @@ -5,7 +5,7 @@ // // Mixin to render cssGrid in all modern browsers, including IE11. // -// Style guide: Mixins.Layout.display-grid +// Style guide: Mixins.Grid.display-grid // @mixin display-grid { diff --git a/core/scss/utilities/mixins/grid/_grid-align-self.scss b/core/scss/utilities/mixins/grid/_grid-align-self.scss index a5d1b6f09..15fba92e4 100644 --- a/core/scss/utilities/mixins/grid/_grid-align-self.scss +++ b/core/scss/utilities/mixins/grid/_grid-align-self.scss @@ -1,8 +1,10 @@ @charset "UTF-8"; +// @grid-align-self($value) // +// $value - string: value for css property align-self. // -// +// Style guide: Mixins.Grid.grid-align-self // @mixin grid-align-self($value) { -ms-grid-row-align: $value; diff --git a/core/scss/utilities/mixins/grid/_grid-column-gap.scss b/core/scss/utilities/mixins/grid/_grid-column-gap.scss index daf1f91b5..30e058520 100644 --- a/core/scss/utilities/mixins/grid/_grid-column-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-column-gap.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// @grid-column-gap +// @grid-column-gap($gapL 30px) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // +// $gap - unit: A unit of space for the column gap between columns. +// // Style guide: Mixins.Grid.grid-column-gap // @mixin grid-column-gap($gap: 30px) { diff --git a/core/scss/utilities/mixins/grid/_grid-columns.scss b/core/scss/utilities/mixins/grid/_grid-columns.scss index 38a8a0ad6..7c272c24f 100644 --- a/core/scss/utilities/mixins/grid/_grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_grid-columns.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// @grid-columns +// @grid-columns($columns) // // Mixin to render cssGrid template columns in all modern browsers, including IE11. // +// $columns - list: A value for grid-template-columns. +// // Style guide: Mixins.Grid.grid-columns // @mixin grid-columns($columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) { diff --git a/core/scss/utilities/mixins/grid/_grid-gap.scss b/core/scss/utilities/mixins/grid/_grid-gap.scss index 500f9bc00..e030d2fc8 100644 --- a/core/scss/utilities/mixins/grid/_grid-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-gap.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// @grid-gap +// @grid-gap($gap: 30px) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // +// $gap - unit: A unit of space for the column gap between columns. +// // Style guide: Mixins.Grid.grid-gap // @mixin grid-gap($gap: 30px) { diff --git a/core/scss/utilities/mixins/grid/_grid-item-spans.scss b/core/scss/utilities/mixins/grid/_grid-item-spans.scss index 91a16c018..59319c602 100644 --- a/core/scss/utilities/mixins/grid/_grid-item-spans.scss +++ b/core/scss/utilities/mixins/grid/_grid-item-spans.scss @@ -1,10 +1,15 @@ @charset "UTF-8"; // -// @grid-item-spans +// @grid-item-spans($col-start, $col-end, $row-start, $row-end) // // Mixin to render cssGrid column spans in all modern browsers, including IE11. // +// $col-start - integer: The column integer to start at +// $col-end - list: A column integer or span +// $row-start - integer: The row integer to start at +// $row-end - list: A row integer or span +// // Style guide: Mixins.Grid.grid-item-spans // @mixin grid-item-spans($col-start: null, $col-end: null, $row-start: null, $row-end: null) { diff --git a/core/scss/utilities/mixins/grid/_grid-justify-self.scss b/core/scss/utilities/mixins/grid/_grid-justify-self.scss index b3356053e..a14948a0a 100644 --- a/core/scss/utilities/mixins/grid/_grid-justify-self.scss +++ b/core/scss/utilities/mixins/grid/_grid-justify-self.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; +// @grid-justify-self($value) // +// A cross browser mixin to justify the grid. // +// $value - list: A value for justify-self. // -// +// Style guide: Mixins.Grid.grid-justify-self // @mixin grid-justify-self($value) { -ms-grid-column-align: $value; diff --git a/core/scss/utilities/mixins/grid/_grid-media-only.scss b/core/scss/utilities/mixins/grid/_grid-media-only.scss index 53a0ef572..c43e7582c 100644 --- a/core/scss/utilities/mixins/grid/_grid-media-only.scss +++ b/core/scss/utilities/mixins/grid/_grid-media-only.scss @@ -1,9 +1,13 @@ @charset 'UTF-8'; // -// grid-media($breakpoint: 'xs') +// @grid-media($breakpoint: 'xs') // -// A helper to quickly generate a media query +// A helper to quickly generate a media query for single breakpoints. +// +// $breakpoint - The breakpoint shortcode. Eg: xs +// +// Style guide: Mixins.Grid.grid-media-only // @mixin grid-media-only($breakpoint: 'xs') { @media #{map-get($grid-media-only, $breakpoint)} { diff --git a/core/scss/utilities/mixins/grid/_grid-media.scss b/core/scss/utilities/mixins/grid/_grid-media.scss index afaac7074..a4a6553c0 100644 --- a/core/scss/utilities/mixins/grid/_grid-media.scss +++ b/core/scss/utilities/mixins/grid/_grid-media.scss @@ -1,10 +1,14 @@ @charset 'UTF-8'; // -// grid-media($breakpoint: 'xs') +// @grid-media($breakpoint: 'xs') // // A helper to quickly generate a media query // +// $breakpoint - The breakpoint shortcode. Eg: xs +// +// Style guide: Mixins.Grid.grid-media +// @mixin grid-media($breakpoint: 'xs') { @media #{map-get($grid-media, $breakpoint)} { @content; diff --git a/core/scss/utilities/mixins/grid/_grid-row-gap.scss b/core/scss/utilities/mixins/grid/_grid-row-gap.scss index 2d6922f58..69796ac3d 100644 --- a/core/scss/utilities/mixins/grid/_grid-row-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-row-gap.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// @grid-row-gap +// @grid-row-gap($gap: 30px) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // +// $gap - unit: A unit of space for the column gap between columns. +// // Style guide: Mixins.Grid.grid-row-gap // @mixin grid-row-gap($gap: 30px) { diff --git a/core/scss/utilities/mixins/grid/_grid-rows.scss b/core/scss/utilities/mixins/grid/_grid-rows.scss index 29d7f584b..779adcb67 100644 --- a/core/scss/utilities/mixins/grid/_grid-rows.scss +++ b/core/scss/utilities/mixins/grid/_grid-rows.scss @@ -1,10 +1,12 @@ @charset "UTF-8"; // -// @grid-rows +// @grid-rows($rows) // // Mixin to render cssGrid in IE11 browsers. // +// $rows - list: A value for grid-template-rows. +// // Style guide: Mixins.Grid.grid-rows // diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss index b13e50f54..4d8832a53 100644 --- a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss @@ -1,13 +1,14 @@ @charset "UTF-8"; // -// responsive-grid-columns($grid-map) +// @responsive-grid-columns($grid-map, $gutters-map) // // A mixin to create a responsive grid layout. // // $grid-map: A sass map with the columns per breakpoint. +// $gutters-map: A complimentary map to the $grid-map. // -// Styleguide: Mixins.Grid.Responsive Grid Columns +// Styleguide: Mixins.Grid.responsive-grid-columns // @mixin responsive-grid-columns($grid-map: $responsive-columns-default, $gutters-map: $responsive-gutters-default) { @include display-grid; diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss b/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss index c1a8452cb..43f638f62 100644 --- a/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss +++ b/core/scss/utilities/mixins/grid/_responsive-grid-gap.scss @@ -1,13 +1,13 @@ @charset "UTF-8"; // -// responsive-grid-gap($grid-map) +// @responsive-grid-gap($grid-map) // // A mixin to create a responsive grid layout. // -// $grid-map: A sass map with the columns per breakpoint. +// $gutters-map: A sass map with the gutters per breakpoint. // -// Styleguide: Mixins.Grid.Responsive Grid Gap +// Styleguide: Mixins.Grid.responsive-grid-gap // @mixin responsive-grid-gap($gutters-map: $responsive-gutters-default) { diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index b98272f5f..ee84db127 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Class-Based Grid System +// CSS Grid System // // Mixins for the Class-Based Grids // diff --git a/core/scss/utilities/mixins/image/_image-defaults.scss b/core/scss/utilities/mixins/image/_image-defaults.scss index f95aaa90b..76054ac77 100644 --- a/core/scss/utilities/mixins/image/_image-defaults.scss +++ b/core/scss/utilities/mixins/image/_image-defaults.scss @@ -8,10 +8,10 @@ // Style guide: Mixins.Image.image-defaults // @mixin image-defaults { + @include margin(0); + @include padding(0); + display: block; height: auto; max-width: 100%; - - @include margin(0); - @include padding(0); } diff --git a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss b/core/scss/utilities/mixins/modular-scale/_modular-margin.scss index 45bb87a11..5e1a561bd 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-margin.scss @@ -9,19 +9,19 @@ // @mixin modular-margin { - @media #{$breakpoint-xl} { + @include grid-media('xl') { margin: map-get($modular-spacing, 'xl'); } - @media #{$breakpoint-lg} { + @include grid-media('lg') { margin: map-get($modular-spacing, 'lg'); } - @media #{$breakpoint-md} { + @include grid-media('md') { margin: map-get($modular-spacing, 'md'); } - @media #{$breakpoint-sm} { + @include grid-media('sm') { margin: map-get($modular-spacing, 'sm'); } diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss index 873934169..ae6ae47ce 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss @@ -19,23 +19,23 @@ font-size: modular-scale($scale, map-get($modular-typography, 'xs')); - @media #{$breakpoint-sm} { + @include grid-media('sm') { font-size: modular-scale($scale, map-get($modular-typography, 'sm')); } - @media #{$breakpoint-md} { + @include grid-media('md') { font-size: modular-scale($scale, map-get($modular-typography, 'md')); } - @media #{$breakpoint-lg} { + @include grid-media('lg') { font-size: modular-scale($scale, map-get($modular-typography, 'lg')); } - @media #{$breakpoint-xl} { + @include grid-media('xl') { font-size: modular-scale($scale, map-get($modular-typography, 'xl')); } - @media #{$breakpoint-2xl} { + @include grid-media('2xl') { font-size: modular-scale($scale, map-get($modular-typography, '2xl')); } } diff --git a/core/scss/utilities/mixins/quote/_quote.scss b/core/scss/utilities/mixins/quote/_quote.scss index 347c418e4..9a936c921 100644 --- a/core/scss/utilities/mixins/quote/_quote.scss +++ b/core/scss/utilities/mixins/quote/_quote.scss @@ -29,7 +29,7 @@ } .su-quote__bio { - margin: 0; + @include margin(0); } .su-quote__quote { diff --git a/core/scss/utilities/mixins/shadow/_box-shadow.scss b/core/scss/utilities/mixins/shadow/_box-shadow.scss index 615a0e298..a73921f38 100644 --- a/core/scss/utilities/mixins/shadow/_box-shadow.scss +++ b/core/scss/utilities/mixins/shadow/_box-shadow.scss @@ -10,7 +10,6 @@ // // Style guide: Mixins.Shadow.Box Shadow // - @mixin box-shadow($depth: 'flat', $stroke: '1px solid #C6C6C6') { border: #{$stroke}; box-shadow: #{map-get($box-shadow-depth, $depth)}; diff --git a/core/scss/utilities/mixins/shadow/index.scss b/core/scss/utilities/mixins/shadow/index.scss index 70a1ae049..06d3ce2fe 100644 --- a/core/scss/utilities/mixins/shadow/index.scss +++ b/core/scss/utilities/mixins/shadow/index.scss @@ -1,5 +1,7 @@ @charset "UTF-8"; -// Roll up file. - +// Shadows +// +// Style guide: Mixins.Shadow +// @import 'box-shadow'; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 03e3e87b8..88a1fcf3e 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -1,7 +1,10 @@ @charset "UTF-8"; +// $grid-screens // +// A sass map of screen sized keyed with the breakpoint shortcode. // +// Style guide: Variables.Core.grid-screens // $grid-screens: ( 'xs': 100%, @@ -10,10 +13,13 @@ $grid-screens: ( 'lg': $screen-lg, 'xl': $screen-xl, '2xl': $screen-2xl -); +) !default; +// $grid-media // +// A sass map of breakpoints sized keyed with the breakpoint shortcode. // +// Style guide: Variables.Core.grid-media // $grid-media: ( 'xs': $breakpoint-xs, @@ -22,10 +28,13 @@ $grid-media: ( 'lg': $breakpoint-lg, 'xl': $breakpoint-xl, '2xl': $breakpoint-2xl -); +) !default; +// $grid-screens-only // +// A sass map of single breakpoint spans keyed with the breakpoint shortcode. // +// Style guide: Variables.Core.grid-screens-only // $grid-media-only: ( 'xs': $breakpoint-xs-only, @@ -34,10 +43,13 @@ $grid-media-only: ( 'lg': $breakpoint-lg-only, 'xl': $breakpoint-xl-only, '2xl': $breakpoint-2xl -); +) !default; +// $responsive-columns-default // +// A sass map of css grid columns keyed with breakpoint media queries. 2 column. // +// Style guide: Variables.Core.responsive-columns-default // $responsive-columns-default: ( $breakpoint-xs: 1fr, @@ -46,13 +58,21 @@ $responsive-columns-default: ( $breakpoint-lg: 1fr 1fr, $breakpoint-xl: 1fr 1fr, $breakpoint-2xl: 1fr 1fr -); +) !default; -// Helper for those like me that forget. -$responsive-columns-two: $responsive-columns-default; +// $responsive-columns-two +// +// A sass map of css grid columns keyed with breakpoint media queries. 2 column. +// +// Style guide: Variables.Core.responsive-columns-two +// +$responsive-columns-two: $responsive-columns-default !default; +// $responsive-columns-three // +// A sass map of css grid columns keyed with breakpoint media queries. 3 column. // +// Style guide: Variables.Core.responsive-columns-three // $responsive-columns-three: ( $breakpoint-xs: 1fr, @@ -61,10 +81,13 @@ $responsive-columns-three: ( $breakpoint-lg: 1fr 1fr 1fr, $breakpoint-xl: 1fr 1fr 1fr, $breakpoint-2xl: 1fr 1fr 1fr -); +) !default; +// $responsive-columns-four // +// A sass map of css grid columns keyed with breakpoint media queries. 4 column. // +// Style guide: Variables.Core.responsive-columns-four // $responsive-columns-four: ( $breakpoint-xs: 1fr, @@ -73,10 +96,13 @@ $responsive-columns-four: ( $breakpoint-lg: 1fr 1fr 1fr 1fr, $breakpoint-xl: 1fr 1fr 1fr 1fr, $breakpoint-2xl: 1fr 1fr 1fr 1fr -); +) !default; +// $responsive-columns-six // +// A sass map of css grid columns keyed with breakpoint media queries. 6 column. // +// Style guide: Variables.Core.responsive-columns-six // $responsive-columns-six: ( $breakpoint-xs: 1fr, @@ -85,10 +111,13 @@ $responsive-columns-six: ( $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr, $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr, $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr -); +) !default; +// $grid-gutters // +// A sass map of css gutter width values keyed by breakpoint short codes. // +// Style guide: Variables.Core.grid-gutters // $grid-gutters: ( 'xs': $gutter-xs, @@ -97,10 +126,13 @@ $grid-gutters: ( 'lg': $gutter-lg, 'xl': $gutter-xl, '2xl': $gutter-2xl -); +) !default; +// $responsive-gutters-default // +// A sass map of css grid gap width keyed with breakpoint media queries. // +// Style guide: Variables.Core.responsive-gutters-default // $responsive-gutters-default:( $breakpoint-xs: $gutter-xs, @@ -109,4 +141,4 @@ $responsive-gutters-default:( $breakpoint-lg: $gutter-lg, $breakpoint-xl: $gutter-xl, $breakpoint-2xl: $gutter-2xl -); +) !default; diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/four-column/molive/molive.twig index ba14c9bae..dde1f8b98 100644 --- a/core/templates/layout/four-column/molive/molive.twig +++ b/core/templates/layout/four-column/molive/molive.twig @@ -26,20 +26,20 @@ {% endif %} {# Because of the responsive behaviour each column is required. #} -
    -
    +
    +
    {{ first }}
    -
    +
    {{ second }}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    diff --git a/core/templates/layout/full-width/bricks/bricks.twig b/core/templates/layout/full-width/bricks/bricks.twig index 57b4d7392..781c32ced 100644 --- a/core/templates/layout/full-width/bricks/bricks.twig +++ b/core/templates/layout/full-width/bricks/bricks.twig @@ -28,11 +28,11 @@ {# Required two equal column centered content area. #}
    -
    +
    {{ first }}
    -
    +
    {{ second}}
    @@ -47,11 +47,11 @@ {# Optional two equal column centered content area. #} {% if third is not empty %}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    From fa6a0cce6fd6f9b207738a872207463f8983e95a Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Thu, 15 Nov 2018 09:18:25 -0800 Subject: [PATCH 037/123] clean up --- core/templates/components/button/button.twig | 2 +- kss/builder/decanter/kss-assets/css/kss.css | 16 ++++++++++++---- kss/builder/decanter/scss/_home.scss | 13 +++++++++---- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/core/templates/components/button/button.twig b/core/templates/components/button/button.twig index bd9795338..6536d4ee1 100644 --- a/core/templates/components/button/button.twig +++ b/core/templates/components/button/button.twig @@ -16,4 +16,4 @@ * - button_label: The text to display as the button */ #} -{{ button_label }}" +{{ button_label }} diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 2fd24ac27..d89e30fc6 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1067,8 +1067,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header h1 { font-size: 2.5rem; color: #ffffff; - font-weight: 700; - text-align: center; } + font-weight: 700; } @media only screen and (min-width: 576px) { #kss-node.kss-home header h1 { font-size: 2.5rem; } } @@ -1250,9 +1249,18 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 260px 260px auto; grid-template-columns: auto 260px 260px auto; } } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--dev-resources h2:first-child { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: span 1-1; + text-align: center; } } @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources h2 { - grid-column-start: 2; } } + #kss-node.kss-home .section--dev-resources h2:first-child { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: span 2-2; + text-align: center; } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; box-shadow: none; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 8a66a0e15..8ad732b37 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -47,7 +47,6 @@ @include modular-typography(2); color: $color-white; font-weight: $font-x-bold; - text-align: center; } } @@ -172,9 +171,15 @@ background: $color-light-sandstone; - h2 { - @media #{$breakpoint-sm} { - grid-column-start: 2; + h2:first-child { + @include grid-media("xs") { + @include grid-item-spans(1, span 1); + text-align: center; + } + + @include grid-media("sm") { + @include grid-item-spans(2, span 2); + text-align: center; } } From a1a8fff40ebe5539d32983c466d2788e3dd0f815 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Thu, 15 Nov 2018 11:11:47 -0800 Subject: [PATCH 038/123] added new modular spacing for 2xl --- core/css/decanter.css | 14 ++++++++++---- .../mixins/modular-scale/_modular-margin.scss | 4 ++++ .../utilities/variables/core/_modular-spacing.scss | 6 ++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 2de57e76a..95066f16e 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1085,9 +1085,12 @@ dfn { @media only screen and (min-width: 1500px) { .layout--ibeam > section { max-width: 1500px; } } - @media only screen and (min-width: 1200px) { + @media only screen and (min-width: 1500px) { .layout--ibeam > section { margin: 38px; } } + @media only screen and (min-width: 1200px) { + .layout--ibeam > section { + margin: 36px; } } @media only screen and (min-width: 992px) { .layout--ibeam > section { margin: 36px; } } @@ -5159,9 +5162,12 @@ button, .su-card__contents { margin: 32px; } - @media only screen and (min-width: 1200px) { + @media only screen and (min-width: 1500px) { .su-card__contents { margin: 38px; } } + @media only screen and (min-width: 1200px) { + .su-card__contents { + margin: 36px; } } @media only screen and (min-width: 992px) { .su-card__contents { margin: 36px; } } @@ -5227,10 +5233,10 @@ button, margin: 36px 0; } } @media only screen and (min-width: 1200px) { .su-card--horizontal > img { - margin: 38px 0; } } + margin: 36px 0; } } @media only screen and (min-width: 1500px) { .su-card--horizontal > img { - margin: 0; } } + margin: 38px 0; } } .su-cta--button-bottom, .su-cta { diff --git a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss b/core/scss/utilities/mixins/modular-scale/_modular-margin.scss index 5e1a561bd..30469b697 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-margin.scss @@ -9,6 +9,10 @@ // @mixin modular-margin { + @include grid-media('2xl') { + margin: map-get($modular-spacing, '2xl'); + } + @include grid-media('xl') { margin: map-get($modular-spacing, 'xl'); } diff --git a/core/scss/utilities/variables/core/_modular-spacing.scss b/core/scss/utilities/variables/core/_modular-spacing.scss index 2a76facf2..19480bde1 100644 --- a/core/scss/utilities/variables/core/_modular-spacing.scss +++ b/core/scss/utilities/variables/core/_modular-spacing.scss @@ -10,7 +10,8 @@ // 'sm': 32px, // 'md': 36px, // 'lg': 36px, -// 'xl': 38px +// 'xl': 36px, +// '2xl': 38px, // ) !default; // // Styleguide: Variables.Core.modular-spacing @@ -20,5 +21,6 @@ $modular-spacing: ( 'sm': 32px, 'md': 36px, 'lg': 36px, - 'xl': 38px + 'xl': 36px, + '2xl': 38px ) !default; From b5a69e9a25748596fd2c1b46b31fa173a1208e67 Mon Sep 17 00:00:00 2001 From: Sherakama Date: Thu, 15 Nov 2018 13:15:56 -0800 Subject: [PATCH 039/123] Update _alert.scss --- core/scss/components/alert/_alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/components/alert/_alert.scss b/core/scss/components/alert/_alert.scss index 543d96925..03d79f897 100644 --- a/core/scss/components/alert/_alert.scss +++ b/core/scss/components/alert/_alert.scss @@ -24,7 +24,7 @@ background-size: 4rem; color: $color-black; - @include grid-media('md'){ + @include grid-media('md') { background-size: 5.2rem; } From 9921c0689646c1e9559bc74fe8d4cf91761bb3db Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Mon, 19 Nov 2018 16:42:59 -0800 Subject: [PATCH 040/123] new flex grid approach WIP --- Gruntfile.js | 2 +- core/css/decanter-grid.css | 597 +++++- core/css/decanter-no-markup.css | 468 +++- core/css/decanter.css | 1892 ++++++++++------- core/scss/decanter-grid.scss | 1 + .../flex/_zzz-breakpoint-insert.scss | 16 + .../functions/flex/_zzz-breakpoint-max.scss | 15 + .../functions/flex/_zzz-breakpoint-min.scss | 13 + .../functions/flex/_zzz-breakpoint-next.scss | 13 + core/scss/utilities/functions/flex/index.scss | 6 +- .../flex/_zzz-generate-grid-classes.scss | 72 + .../flex/_zzz-generate-grid-column.scss | 10 + .../mixins/flex/_zzz-generate-grid-push.scss | 11 + .../mixins/flex/_zzz-grid-media-between.scss | 24 + .../mixins/flex/_zzz-grid-media-max.scss | 17 + .../mixins/flex/_zzz-grid-media-min.scss | 17 + .../mixins/flex/_zzz-grid-media-only.scss | 26 + core/scss/utilities/mixins/flex/index.scss | 10 +- .../variables/core/_breakpoints.scss | 20 +- core/scss/utilities/variables/core/_grid.scss | 5 +- core/templates/core/grid/zzz-flex-grid.html | 72 + kss/builder/decanter/kss-assets/css/kss.css | 490 ++++- 22 files changed, 3004 insertions(+), 793 deletions(-) create mode 100644 core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss create mode 100644 core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss create mode 100644 core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss create mode 100644 core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss create mode 100644 core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss create mode 100755 core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss create mode 100644 core/templates/core/grid/zzz-flex-grid.html diff --git a/Gruntfile.js b/Gruntfile.js index 99019ad97..3eedaa3e3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -36,7 +36,7 @@ module.exports = function(grunt) { 'core/css/decanter.css': 'core/scss/decanter.scss', 'core/css/decanter-no-markup.css': 'core/scss/decanter-no-markup.scss', 'core/css/decanter-grid.css': 'core/scss/decanter-grid.scss', - 'kss/builder/decanter/kss-assets/css/kss.css': 'kss/builder/decanter/scss/kss.scss' + 'kss/builder/decanter/kss-assets/css/kss.css': 'kss/builder/decanter/scss/kss.scss', } } }, diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 7abd4b052..783760158 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -1,3 +1,490 @@ +.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, +.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, +.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, +.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, +.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, +.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, +.grid-2xl-auto { + position: relative; + width: 100%; + min-height: 1px; + padding-right: 18px; + padding-left: 18px; } + +.grid-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + +.grid-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + +.grid-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + +.grid-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + +.grid-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + +.grid-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + +.grid-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + +.grid-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + +.grid-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + +.grid-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + +.grid-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + +.grid-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + +.grid-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + +.grid-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + +.grid-push-1 { + margin-left: 8.3333333333%; } + +.grid-push-2 { + margin-left: 16.6666666667%; } + +.grid-push-3 { + margin-left: 25%; } + +.grid-push-4 { + margin-left: 33.3333333333%; } + +.grid-push-5 { + margin-left: 41.6666666667%; } + +.grid-push-6 { + margin-left: 50%; } + +.grid-push-7 { + margin-left: 58.3333333333%; } + +.grid-push-8 { + margin-left: 66.6666666667%; } + +.grid-push-9 { + margin-left: 75%; } + +.grid-push-10 { + margin-left: 83.3333333333%; } + +.grid-push-11 { + margin-left: 91.6666666667%; } + +@media (min-width: 576px) { + .grid-sm-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-sm-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-sm-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-sm-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-sm-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-sm-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-sm-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-sm-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-sm-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-sm-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-sm-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-sm-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-sm-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-sm-0 { + margin-left: 0; } + .grid-push-sm-1 { + margin-left: 8.3333333333%; } + .grid-push-sm-2 { + margin-left: 16.6666666667%; } + .grid-push-sm-3 { + margin-left: 25%; } + .grid-push-sm-4 { + margin-left: 33.3333333333%; } + .grid-push-sm-5 { + margin-left: 41.6666666667%; } + .grid-push-sm-6 { + margin-left: 50%; } + .grid-push-sm-7 { + margin-left: 58.3333333333%; } + .grid-push-sm-8 { + margin-left: 66.6666666667%; } + .grid-push-sm-9 { + margin-left: 75%; } + .grid-push-sm-10 { + margin-left: 83.3333333333%; } + .grid-push-sm-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 768px) { + .grid-md-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-md-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-md-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-md-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-md-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-md-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-md-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-md-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-md-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-md-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-md-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-md-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-md-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-md-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-md-0 { + margin-left: 0; } + .grid-push-md-1 { + margin-left: 8.3333333333%; } + .grid-push-md-2 { + margin-left: 16.6666666667%; } + .grid-push-md-3 { + margin-left: 25%; } + .grid-push-md-4 { + margin-left: 33.3333333333%; } + .grid-push-md-5 { + margin-left: 41.6666666667%; } + .grid-push-md-6 { + margin-left: 50%; } + .grid-push-md-7 { + margin-left: 58.3333333333%; } + .grid-push-md-8 { + margin-left: 66.6666666667%; } + .grid-push-md-9 { + margin-left: 75%; } + .grid-push-md-10 { + margin-left: 83.3333333333%; } + .grid-push-md-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 992px) { + .grid-lg-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-lg-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-lg-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-lg-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-lg-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-lg-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-lg-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-lg-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-lg-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-lg-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-lg-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-lg-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-lg-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-lg-0 { + margin-left: 0; } + .grid-push-lg-1 { + margin-left: 8.3333333333%; } + .grid-push-lg-2 { + margin-left: 16.6666666667%; } + .grid-push-lg-3 { + margin-left: 25%; } + .grid-push-lg-4 { + margin-left: 33.3333333333%; } + .grid-push-lg-5 { + margin-left: 41.6666666667%; } + .grid-push-lg-6 { + margin-left: 50%; } + .grid-push-lg-7 { + margin-left: 58.3333333333%; } + .grid-push-lg-8 { + margin-left: 66.6666666667%; } + .grid-push-lg-9 { + margin-left: 75%; } + .grid-push-lg-10 { + margin-left: 83.3333333333%; } + .grid-push-lg-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1200px) { + .grid-xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-xl-0 { + margin-left: 0; } + .grid-push-xl-1 { + margin-left: 8.3333333333%; } + .grid-push-xl-2 { + margin-left: 16.6666666667%; } + .grid-push-xl-3 { + margin-left: 25%; } + .grid-push-xl-4 { + margin-left: 33.3333333333%; } + .grid-push-xl-5 { + margin-left: 41.6666666667%; } + .grid-push-xl-6 { + margin-left: 50%; } + .grid-push-xl-7 { + margin-left: 58.3333333333%; } + .grid-push-xl-8 { + margin-left: 66.6666666667%; } + .grid-push-xl-9 { + margin-left: 75%; } + .grid-push-xl-10 { + margin-left: 83.3333333333%; } + .grid-push-xl-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1500px) { + .grid-2xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-2xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-2xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-2xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-2xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-2xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-2xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-2xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-2xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-2xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-2xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-2xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-2xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-2xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-2xl-0 { + margin-left: 0; } + .grid-push-2xl-1 { + margin-left: 8.3333333333%; } + .grid-push-2xl-2 { + margin-left: 16.6666666667%; } + .grid-push-2xl-3 { + margin-left: 25%; } + .grid-push-2xl-4 { + margin-left: 33.3333333333%; } + .grid-push-2xl-5 { + margin-left: 41.6666666667%; } + .grid-push-2xl-6 { + margin-left: 50%; } + .grid-push-2xl-7 { + margin-left: 58.3333333333%; } + .grid-push-2xl-8 { + margin-left: 66.6666666667%; } + .grid-push-2xl-9 { + margin-left: 75%; } + .grid-push-2xl-10 { + margin-left: 83.3333333333%; } + .grid-push-2xl-11 { + margin-left: 91.6666666667%; } } + +.grid--container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .grid--container { + padding-right: 3rem; + padding-left: 3rem; } } + +html { + box-sizing: border-box; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +body { + background-color: #ffffff; + overflow-x: hidden; } + +.lt-ie9 * { + -webkit-filter: none !important; + filter: none !important; } + +[hidden] { + display: none !important; } + .grid--container { display: flex; flex-direction: row; @@ -16,232 +503,232 @@ width: 100%; } @media only screen and (min-width: 0) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .grid--1-of-12 { width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .grid--1-of-12 { - width: calc(8.3333333333% - 36.6666666667px); } } + width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .grid--1-of-12 { - width: calc(8.3333333333% - 44px); } } + width: calc(8.3333333333% - 34.8333333333px); } } .grid--2-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .grid--2-of-12 { width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .grid--2-of-12 { - width: calc(16.6666666667% - 33.3333333333px); } } + width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .grid--2-of-12 { - width: calc(16.6666666667% - 40px); } } + width: calc(16.6666666667% - 31.6666666667px); } } .grid--3-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .grid--3-of-12 { width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .grid--3-of-12 { - width: calc(25% - 30px); } } + width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .grid--3-of-12 { - width: calc(25% - 36px); } } + width: calc(25% - 28.5px); } } .grid--4-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .grid--4-of-12 { width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .grid--4-of-12 { - width: calc(33.3333333333% - 26.6666666667px); } } + width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .grid--4-of-12 { - width: calc(33.3333333333% - 32px); } } + width: calc(33.3333333333% - 25.3333333333px); } } .grid--5-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 576px) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .grid--5-of-12 { width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .grid--5-of-12 { - width: calc(41.6666666667% - 23.3333333333px); } } + width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .grid--5-of-12 { - width: calc(41.6666666667% - 28px); } } + width: calc(41.6666666667% - 22.1666666667px); } } .grid--6-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .grid--6-of-12 { width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .grid--6-of-12 { - width: calc(50% - 20px); } } + width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .grid--6-of-12 { - width: calc(50% - 24px); } } + width: calc(50% - 19px); } } .grid--7-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .grid--7-of-12 { width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .grid--7-of-12 { - width: calc(58.3333333333% - 16.6666666667px); } } + width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .grid--7-of-12 { - width: calc(58.3333333333% - 20px); } } + width: calc(58.3333333333% - 15.8333333333px); } } .grid--8-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .grid--8-of-12 { width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .grid--8-of-12 { - width: calc(66.6666666667% - 13.3333333333px); } } + width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .grid--8-of-12 { - width: calc(66.6666666667% - 16px); } } + width: calc(66.6666666667% - 12.6666666667px); } } .grid--9-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 8px); } } @media only screen and (min-width: 576px) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .grid--9-of-12 { width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .grid--9-of-12 { - width: calc(75% - 10px); } } + width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .grid--9-of-12 { - width: calc(75% - 12px); } } + width: calc(75% - 9.5px); } } .grid--10-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .grid--10-of-12 { width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .grid--10-of-12 { - width: calc(83.3333333333% - 6.6666666667px); } } + width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .grid--10-of-12 { - width: calc(83.3333333333% - 8px); } } + width: calc(83.3333333333% - 6.3333333333px); } } .grid--11-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .grid--11-of-12 { width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .grid--11-of-12 { - width: calc(91.6666666667% - 3.3333333333px); } } + width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .grid--11-of-12 { - width: calc(91.6666666667% - 4px); } } + width: calc(91.6666666667% - 3.1666666667px); } } .grid--12-of-12 { width: 100%; } diff --git a/core/css/decanter-no-markup.css b/core/css/decanter-no-markup.css index 8b9a04750..afafaf659 100644 --- a/core/css/decanter-no-markup.css +++ b/core/css/decanter-no-markup.css @@ -1,2 +1,468 @@ +.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, +.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, +.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, +.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, +.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, +.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, +.grid-2xl-auto { + position: relative; + width: 100%; + min-height: 1px; + padding-right: 18px; + padding-left: 18px; } -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJkZWNhbnRlci1uby1tYXJrdXAuY3NzIn0= */ \ No newline at end of file +.grid-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + +.grid-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + +.grid-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + +.grid-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + +.grid-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + +.grid-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + +.grid-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + +.grid-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + +.grid-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + +.grid-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + +.grid-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + +.grid-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + +.grid-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + +.grid-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + +.grid-push-1 { + margin-left: 8.3333333333%; } + +.grid-push-2 { + margin-left: 16.6666666667%; } + +.grid-push-3 { + margin-left: 25%; } + +.grid-push-4 { + margin-left: 33.3333333333%; } + +.grid-push-5 { + margin-left: 41.6666666667%; } + +.grid-push-6 { + margin-left: 50%; } + +.grid-push-7 { + margin-left: 58.3333333333%; } + +.grid-push-8 { + margin-left: 66.6666666667%; } + +.grid-push-9 { + margin-left: 75%; } + +.grid-push-10 { + margin-left: 83.3333333333%; } + +.grid-push-11 { + margin-left: 91.6666666667%; } + +@media (min-width: 576px) { + .grid-sm-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-sm-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-sm-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-sm-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-sm-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-sm-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-sm-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-sm-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-sm-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-sm-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-sm-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-sm-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-sm-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-sm-0 { + margin-left: 0; } + .grid-push-sm-1 { + margin-left: 8.3333333333%; } + .grid-push-sm-2 { + margin-left: 16.6666666667%; } + .grid-push-sm-3 { + margin-left: 25%; } + .grid-push-sm-4 { + margin-left: 33.3333333333%; } + .grid-push-sm-5 { + margin-left: 41.6666666667%; } + .grid-push-sm-6 { + margin-left: 50%; } + .grid-push-sm-7 { + margin-left: 58.3333333333%; } + .grid-push-sm-8 { + margin-left: 66.6666666667%; } + .grid-push-sm-9 { + margin-left: 75%; } + .grid-push-sm-10 { + margin-left: 83.3333333333%; } + .grid-push-sm-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 768px) { + .grid-md-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-md-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-md-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-md-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-md-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-md-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-md-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-md-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-md-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-md-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-md-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-md-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-md-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-md-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-md-0 { + margin-left: 0; } + .grid-push-md-1 { + margin-left: 8.3333333333%; } + .grid-push-md-2 { + margin-left: 16.6666666667%; } + .grid-push-md-3 { + margin-left: 25%; } + .grid-push-md-4 { + margin-left: 33.3333333333%; } + .grid-push-md-5 { + margin-left: 41.6666666667%; } + .grid-push-md-6 { + margin-left: 50%; } + .grid-push-md-7 { + margin-left: 58.3333333333%; } + .grid-push-md-8 { + margin-left: 66.6666666667%; } + .grid-push-md-9 { + margin-left: 75%; } + .grid-push-md-10 { + margin-left: 83.3333333333%; } + .grid-push-md-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 992px) { + .grid-lg-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-lg-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-lg-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-lg-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-lg-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-lg-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-lg-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-lg-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-lg-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-lg-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-lg-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-lg-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-lg-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-lg-0 { + margin-left: 0; } + .grid-push-lg-1 { + margin-left: 8.3333333333%; } + .grid-push-lg-2 { + margin-left: 16.6666666667%; } + .grid-push-lg-3 { + margin-left: 25%; } + .grid-push-lg-4 { + margin-left: 33.3333333333%; } + .grid-push-lg-5 { + margin-left: 41.6666666667%; } + .grid-push-lg-6 { + margin-left: 50%; } + .grid-push-lg-7 { + margin-left: 58.3333333333%; } + .grid-push-lg-8 { + margin-left: 66.6666666667%; } + .grid-push-lg-9 { + margin-left: 75%; } + .grid-push-lg-10 { + margin-left: 83.3333333333%; } + .grid-push-lg-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1200px) { + .grid-xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-xl-0 { + margin-left: 0; } + .grid-push-xl-1 { + margin-left: 8.3333333333%; } + .grid-push-xl-2 { + margin-left: 16.6666666667%; } + .grid-push-xl-3 { + margin-left: 25%; } + .grid-push-xl-4 { + margin-left: 33.3333333333%; } + .grid-push-xl-5 { + margin-left: 41.6666666667%; } + .grid-push-xl-6 { + margin-left: 50%; } + .grid-push-xl-7 { + margin-left: 58.3333333333%; } + .grid-push-xl-8 { + margin-left: 66.6666666667%; } + .grid-push-xl-9 { + margin-left: 75%; } + .grid-push-xl-10 { + margin-left: 83.3333333333%; } + .grid-push-xl-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1500px) { + .grid-2xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-2xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-2xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-2xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-2xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-2xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-2xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-2xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-2xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-2xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-2xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-2xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-2xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-2xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-2xl-0 { + margin-left: 0; } + .grid-push-2xl-1 { + margin-left: 8.3333333333%; } + .grid-push-2xl-2 { + margin-left: 16.6666666667%; } + .grid-push-2xl-3 { + margin-left: 25%; } + .grid-push-2xl-4 { + margin-left: 33.3333333333%; } + .grid-push-2xl-5 { + margin-left: 41.6666666667%; } + .grid-push-2xl-6 { + margin-left: 50%; } + .grid-push-2xl-7 { + margin-left: 58.3333333333%; } + .grid-push-2xl-8 { + margin-left: 66.6666666667%; } + .grid-push-2xl-9 { + margin-left: 75%; } + .grid-push-2xl-10 { + margin-left: 83.3333333333%; } + .grid-push-2xl-11 { + margin-left: 91.6666666667%; } } + +.grid--container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .grid--container { + padding-right: 3rem; + padding-left: 3rem; } } +/*# sourceMappingURL=decanter-no-markup.css.map */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index 95066f16e..5e97f13ae 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -303,6 +303,474 @@ template { [hidden] { display: none; } +.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, +.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, +.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, +.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, +.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, +.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, +.grid-2xl-auto { + position: relative; + width: 100%; + min-height: 1px; + padding-right: 18px; + padding-left: 18px; } + +.grid-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + +.grid-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + +.grid-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + +.grid-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + +.grid-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + +.grid-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + +.grid-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + +.grid-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + +.grid-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + +.grid-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + +.grid-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + +.grid-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + +.grid-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + +.grid-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + +.grid-push-1 { + margin-left: 8.3333333333%; } + +.grid-push-2 { + margin-left: 16.6666666667%; } + +.grid-push-3 { + margin-left: 25%; } + +.grid-push-4 { + margin-left: 33.3333333333%; } + +.grid-push-5 { + margin-left: 41.6666666667%; } + +.grid-push-6 { + margin-left: 50%; } + +.grid-push-7 { + margin-left: 58.3333333333%; } + +.grid-push-8 { + margin-left: 66.6666666667%; } + +.grid-push-9 { + margin-left: 75%; } + +.grid-push-10 { + margin-left: 83.3333333333%; } + +.grid-push-11 { + margin-left: 91.6666666667%; } + +@media (min-width: 576px) { + .grid-sm-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-sm-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-sm-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-sm-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-sm-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-sm-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-sm-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-sm-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-sm-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-sm-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-sm-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-sm-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-sm-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-sm-0 { + margin-left: 0; } + .grid-push-sm-1 { + margin-left: 8.3333333333%; } + .grid-push-sm-2 { + margin-left: 16.6666666667%; } + .grid-push-sm-3 { + margin-left: 25%; } + .grid-push-sm-4 { + margin-left: 33.3333333333%; } + .grid-push-sm-5 { + margin-left: 41.6666666667%; } + .grid-push-sm-6 { + margin-left: 50%; } + .grid-push-sm-7 { + margin-left: 58.3333333333%; } + .grid-push-sm-8 { + margin-left: 66.6666666667%; } + .grid-push-sm-9 { + margin-left: 75%; } + .grid-push-sm-10 { + margin-left: 83.3333333333%; } + .grid-push-sm-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 768px) { + .grid-md-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-md-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-md-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-md-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-md-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-md-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-md-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-md-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-md-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-md-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-md-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-md-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-md-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-md-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-md-0 { + margin-left: 0; } + .grid-push-md-1 { + margin-left: 8.3333333333%; } + .grid-push-md-2 { + margin-left: 16.6666666667%; } + .grid-push-md-3 { + margin-left: 25%; } + .grid-push-md-4 { + margin-left: 33.3333333333%; } + .grid-push-md-5 { + margin-left: 41.6666666667%; } + .grid-push-md-6 { + margin-left: 50%; } + .grid-push-md-7 { + margin-left: 58.3333333333%; } + .grid-push-md-8 { + margin-left: 66.6666666667%; } + .grid-push-md-9 { + margin-left: 75%; } + .grid-push-md-10 { + margin-left: 83.3333333333%; } + .grid-push-md-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 992px) { + .grid-lg-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-lg-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-lg-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-lg-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-lg-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-lg-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-lg-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-lg-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-lg-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-lg-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-lg-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-lg-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-lg-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-lg-0 { + margin-left: 0; } + .grid-push-lg-1 { + margin-left: 8.3333333333%; } + .grid-push-lg-2 { + margin-left: 16.6666666667%; } + .grid-push-lg-3 { + margin-left: 25%; } + .grid-push-lg-4 { + margin-left: 33.3333333333%; } + .grid-push-lg-5 { + margin-left: 41.6666666667%; } + .grid-push-lg-6 { + margin-left: 50%; } + .grid-push-lg-7 { + margin-left: 58.3333333333%; } + .grid-push-lg-8 { + margin-left: 66.6666666667%; } + .grid-push-lg-9 { + margin-left: 75%; } + .grid-push-lg-10 { + margin-left: 83.3333333333%; } + .grid-push-lg-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1200px) { + .grid-xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-xl-0 { + margin-left: 0; } + .grid-push-xl-1 { + margin-left: 8.3333333333%; } + .grid-push-xl-2 { + margin-left: 16.6666666667%; } + .grid-push-xl-3 { + margin-left: 25%; } + .grid-push-xl-4 { + margin-left: 33.3333333333%; } + .grid-push-xl-5 { + margin-left: 41.6666666667%; } + .grid-push-xl-6 { + margin-left: 50%; } + .grid-push-xl-7 { + margin-left: 58.3333333333%; } + .grid-push-xl-8 { + margin-left: 66.6666666667%; } + .grid-push-xl-9 { + margin-left: 75%; } + .grid-push-xl-10 { + margin-left: 83.3333333333%; } + .grid-push-xl-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1500px) { + .grid-2xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-2xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-2xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-2xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-2xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-2xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-2xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-2xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-2xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-2xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-2xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-2xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-2xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-2xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-2xl-0 { + margin-left: 0; } + .grid-push-2xl-1 { + margin-left: 8.3333333333%; } + .grid-push-2xl-2 { + margin-left: 16.6666666667%; } + .grid-push-2xl-3 { + margin-left: 25%; } + .grid-push-2xl-4 { + margin-left: 33.3333333333%; } + .grid-push-2xl-5 { + margin-left: 41.6666666667%; } + .grid-push-2xl-6 { + margin-left: 50%; } + .grid-push-2xl-7 { + margin-left: 58.3333333333%; } + .grid-push-2xl-8 { + margin-left: 66.6666666667%; } + .grid-push-2xl-9 { + margin-left: 75%; } + .grid-push-2xl-10 { + margin-left: 83.3333333333%; } + .grid-push-2xl-11 { + margin-left: 91.6666666667%; } } + +.grid--container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .grid--container { + padding-right: 3rem; + padding-left: 3rem; } } + @font-face { font-family: "Source Serif Pro"; src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); @@ -380,232 +848,232 @@ template { width: 100%; } @media only screen and (min-width: 0) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .grid--1-of-12 { - width: calc(8.3333333333% - 18.3333333333px); } } + width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .grid--1-of-12 { width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .grid--1-of-12 { - width: calc(8.3333333333% - 36.6666666667px); } } + width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .grid--1-of-12 { - width: calc(8.3333333333% - 44px); } } + width: calc(8.3333333333% - 34.8333333333px); } } .grid--2-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .grid--2-of-12 { - width: calc(16.6666666667% - 16.6666666667px); } } + width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .grid--2-of-12 { width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .grid--2-of-12 { - width: calc(16.6666666667% - 33.3333333333px); } } + width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .grid--2-of-12 { - width: calc(16.6666666667% - 40px); } } + width: calc(16.6666666667% - 31.6666666667px); } } .grid--3-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .grid--3-of-12 { - width: calc(25% - 15px); } } + width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .grid--3-of-12 { width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .grid--3-of-12 { - width: calc(25% - 30px); } } + width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .grid--3-of-12 { - width: calc(25% - 36px); } } + width: calc(25% - 28.5px); } } .grid--4-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .grid--4-of-12 { - width: calc(33.3333333333% - 13.3333333333px); } } + width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .grid--4-of-12 { width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .grid--4-of-12 { - width: calc(33.3333333333% - 26.6666666667px); } } + width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .grid--4-of-12 { - width: calc(33.3333333333% - 32px); } } + width: calc(33.3333333333% - 25.3333333333px); } } .grid--5-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 576px) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .grid--5-of-12 { - width: calc(41.6666666667% - 11.6666666667px); } } + width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .grid--5-of-12 { width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .grid--5-of-12 { - width: calc(41.6666666667% - 23.3333333333px); } } + width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .grid--5-of-12 { - width: calc(41.6666666667% - 28px); } } + width: calc(41.6666666667% - 22.1666666667px); } } .grid--6-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .grid--6-of-12 { - width: calc(50% - 10px); } } + width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .grid--6-of-12 { width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .grid--6-of-12 { - width: calc(50% - 20px); } } + width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .grid--6-of-12 { - width: calc(50% - 24px); } } + width: calc(50% - 19px); } } .grid--7-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .grid--7-of-12 { - width: calc(58.3333333333% - 8.3333333333px); } } + width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .grid--7-of-12 { width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .grid--7-of-12 { - width: calc(58.3333333333% - 16.6666666667px); } } + width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .grid--7-of-12 { - width: calc(58.3333333333% - 20px); } } + width: calc(58.3333333333% - 15.8333333333px); } } .grid--8-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .grid--8-of-12 { - width: calc(66.6666666667% - 6.6666666667px); } } + width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .grid--8-of-12 { width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .grid--8-of-12 { - width: calc(66.6666666667% - 13.3333333333px); } } + width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .grid--8-of-12 { - width: calc(66.6666666667% - 16px); } } + width: calc(66.6666666667% - 12.6666666667px); } } .grid--9-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 8px); } } @media only screen and (min-width: 576px) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .grid--9-of-12 { - width: calc(75% - 5px); } } + width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .grid--9-of-12 { width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .grid--9-of-12 { - width: calc(75% - 10px); } } + width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .grid--9-of-12 { - width: calc(75% - 12px); } } + width: calc(75% - 9.5px); } } .grid--10-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .grid--10-of-12 { - width: calc(83.3333333333% - 3.3333333333px); } } + width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .grid--10-of-12 { width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .grid--10-of-12 { - width: calc(83.3333333333% - 6.6666666667px); } } + width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .grid--10-of-12 { - width: calc(83.3333333333% - 8px); } } + width: calc(83.3333333333% - 6.3333333333px); } } .grid--11-of-12 { width: 100%; } @media only screen and (min-width: 0) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .grid--11-of-12 { - width: calc(91.6666666667% - 1.6666666667px); } } + width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .grid--11-of-12 { width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .grid--11-of-12 { - width: calc(91.6666666667% - 3.3333333333px); } } + width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .grid--11-of-12 { - width: calc(91.6666666667% - 4px); } } + width: calc(91.6666666667% - 3.1666666667px); } } .grid--12-of-12 { width: 100%; } @@ -708,8 +1176,8 @@ fieldset { .su-fieldset-inputs label { margin-top: 0; } -[type=checkbox], -[type=radio] { +[type="checkbox"], +[type="radio"] { position: absolute; left: -999em; } .lt-ie9 [type=checkbox], .lt-ie9 @@ -1069,7 +1537,7 @@ dfn { margin: 32px; } @media only screen and (min-width: 0) { .layout--ibeam > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--ibeam > section { max-width: 576px; } } @@ -1107,7 +1575,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bricks .layout__columns { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--bricks .layout__columns { max-width: 576px; } } @@ -1128,20 +1596,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--bricks .layout__columns > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1150,20 +1618,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1172,20 +1640,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1216,20 +1684,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1238,20 +1706,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bricks .layout__columns > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--bricks .layout__columns { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } .layout--bricks .layout__columns > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--bricks .layout__columns { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @@ -1286,7 +1754,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--molive > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--molive > section { max-width: 576px; } } @@ -1307,20 +1775,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--molive > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1329,20 +1797,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--molive > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1351,20 +1819,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--molive > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1395,20 +1863,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1417,20 +1885,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout--molive > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--molive > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--molive > section > * { margin-right: 0; margin-left: 0; } } .layout--molive > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--molive > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--molive > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -1465,7 +1933,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bars > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--bars > div { max-width: 576px; } } @@ -1486,20 +1954,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--bars > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1508,20 +1976,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bars > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1530,20 +1998,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--bars > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1574,20 +2042,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1596,20 +2064,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--bars > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--bars > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--bars > div > * { margin-right: 0; margin-left: 0; } } .layout--bars > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--bars > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--bars > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1620,7 +2088,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--battleship > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--battleship > div { max-width: 576px; } } @@ -1641,20 +2109,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--battleship > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1663,20 +2131,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--battleship > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1685,20 +2153,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--battleship > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1729,20 +2197,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1751,20 +2219,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout--battleship > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--battleship > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--battleship > div > * { margin-right: 0; margin-left: 0; } } .layout--battleship > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--battleship > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1777,7 +2245,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-blastila > header { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-blastila > header { max-width: 576px; } } @@ -1798,7 +2266,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-blastila > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-blastila > div { max-width: 576px; } } @@ -1816,58 +2284,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout-blastila > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-blastila > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-blastila > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1892,39 +2360,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-blastila > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-blastila > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-blastila > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-blastila > div > * { margin-right: 0; margin-left: 0; } } .layout-blastila > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-blastila > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -1997,7 +2465,7 @@ dfn { @media only screen and (min-width: 0) { .layout--chess > header, .layout--chess > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--chess > header, .layout--chess > footer { @@ -2023,7 +2491,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--chess > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--chess > section { max-width: 576px; } } @@ -2041,58 +2509,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout--chess > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--chess > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--chess > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -2117,39 +2585,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout--chess > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--chess > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--chess > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--chess > section > * { margin-right: 0; margin-left: 0; } } .layout--chess > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--chess > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--chess > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -2168,7 +2636,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-cuttoner > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-cuttoner > div { max-width: 576px; } } @@ -2186,58 +2654,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout-cuttoner > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-cuttoner > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-cuttoner > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2262,39 +2730,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-cuttoner > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-cuttoner > div > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-cuttoner > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2306,58 +2774,58 @@ dfn { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (min-width: 0) { .layout-cuttoner > div > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-cuttoner > div > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-cuttoner > div > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -2382,39 +2850,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-cuttoner > div > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-cuttoner > div > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-cuttoner > div > section > * { margin-right: 0; margin-left: 0; } } .layout-cuttoner > div > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-cuttoner > div > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-cuttoner > div > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -2458,7 +2926,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-percles > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-percles > div { max-width: 576px; } } @@ -2476,58 +2944,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout-percles > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-percles > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-percles > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2552,39 +3020,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-percles > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-percles > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-percles > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-percles > div > * { margin-right: 0; margin-left: 0; } } .layout-percles > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-percles > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-percles > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2623,7 +3091,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--robot > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--robot > div { max-width: 576px; } } @@ -2641,58 +3109,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout--robot > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--robot > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--robot > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2717,39 +3185,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout--robot > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--robot > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--robot > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--robot > div > * { margin-right: 0; margin-left: 0; } } .layout--robot > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--robot > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--robot > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2772,7 +3240,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--space-invader > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--space-invader > div { max-width: 576px; } } @@ -2790,58 +3258,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout--space-invader > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout--space-invader > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout--space-invader > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2866,39 +3334,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout--space-invader > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout--space-invader > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--space-invader > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--space-invader > div > * { margin-right: 0; margin-left: 0; } } .layout--space-invader > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--space-invader > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -2917,7 +3385,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-sunset-delorean > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-sunset-delorean > div { max-width: 576px; } } @@ -2935,58 +3403,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout-sunset-delorean > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-sunset-delorean > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-sunset-delorean > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3011,39 +3479,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-sunset-delorean > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-sunset-delorean > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-sunset-delorean > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-sunset-delorean > div > * { margin-right: 0; margin-left: 0; } } .layout-sunset-delorean > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-sunset-delorean > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-sunset-delorean > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3097,7 +3565,7 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-thions > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-thions > div { max-width: 576px; } } @@ -3115,58 +3583,58 @@ dfn { max-width: 1500px; } } @media only screen and (min-width: 0) { .layout-thions > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .layout-thions > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .layout-thions > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3191,39 +3659,39 @@ dfn { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .layout-thions > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .layout-thions > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-thions > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-thions > div > * { margin-right: 0; margin-left: 0; } } .layout-thions > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-thions > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-thions > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3317,7 +3785,7 @@ dfn { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-valmer > header, .layout-valmer > footer, @@ -3347,13 +3815,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3362,13 +3830,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3378,13 +3846,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3393,13 +3861,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3409,13 +3877,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3424,13 +3892,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3471,13 +3939,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3486,13 +3954,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3502,13 +3970,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3517,13 +3985,13 @@ dfn { .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-valmer > header > *, .layout-valmer > footer > *, .layout-valmer > section > * { @@ -3560,7 +4028,7 @@ dfn { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--donies > section, .layout--donies > header, @@ -3595,20 +4063,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--donies > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3617,20 +4085,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3639,20 +4107,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3683,20 +4151,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3705,20 +4173,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--donies > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--donies > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--donies > section > * { margin-right: 0; margin-left: 0; } } .layout--donies > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--donies > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--donies > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3733,7 +4201,7 @@ dfn { .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--frogger > div, .layout--frogger > section, @@ -3773,20 +4241,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--frogger > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3795,20 +4263,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3817,20 +4285,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3861,20 +4329,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3883,20 +4351,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--frogger > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--frogger > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--frogger > section > * { margin-right: 0; margin-left: 0; } } .layout--frogger > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--frogger > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -3909,7 +4377,7 @@ dfn { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-pacman > div, .layout-pacman > header, @@ -3944,20 +4412,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout-pacman > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3966,20 +4434,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -3988,20 +4456,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4032,20 +4500,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4054,20 +4522,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-pacman > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-pacman > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-pacman > div > * { margin-right: 0; margin-left: 0; } } .layout-pacman > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-pacman > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-pacman > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4105,7 +4573,7 @@ dfn { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-plakes > div, .layout-plakes > header, @@ -4140,20 +4608,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout-plakes > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4162,20 +4630,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4184,20 +4652,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4228,20 +4696,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4250,20 +4718,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-plakes > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-plakes > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-plakes > div > * { margin-right: 0; margin-left: 0; } } .layout-plakes > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-plakes > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-plakes > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4317,7 +4785,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--toucan > div { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--toucan > div { max-width: 576px; } } @@ -4338,20 +4806,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout--toucan > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4360,20 +4828,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4382,20 +4850,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4426,20 +4894,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4448,20 +4916,20 @@ dfn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .layout--toucan > div > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout--toucan > div { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout--toucan > div > * { margin-right: 0; margin-left: 0; } } .layout--toucan > div > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout--toucan > div { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout--toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -4472,7 +4940,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-trunks > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-trunks > section { max-width: 576px; } } @@ -4493,20 +4961,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout-trunks > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4515,20 +4983,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4537,20 +5005,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4581,20 +5049,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4603,20 +5071,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-trunks > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-trunks > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-trunks > section > * { margin-right: 0; margin-left: 0; } } .layout-trunks > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-trunks > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-trunks > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4652,7 +5120,7 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-wedge > section { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout-wedge > section { max-width: 576px; } } @@ -4673,20 +5141,20 @@ dfn { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .layout-wedge > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4695,20 +5163,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 20px; } + grid-column-gap: 32px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 16px; + margin-bottom: 16px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 20px; } + grid-row-gap: 32px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4717,20 +5185,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 10px; - margin-left: 10px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 20px; } + grid-column-gap: 36px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 20px; } + grid-row-gap: 36px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4761,20 +5229,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 20px; - margin-left: 20px; } + margin-right: 18px; + margin-left: 18px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 40px; } + grid-column-gap: 36px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 20px; - margin-bottom: 20px; } + margin-top: 18px; + margin-bottom: 18px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 40px; } + grid-row-gap: 36px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4783,20 +5251,20 @@ dfn { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .layout-wedge > section > * { - margin-right: 24px; - margin-left: 24px; } + margin-right: 19px; + margin-left: 19px; } @supports (grid-column-gap: 20px) { .layout-wedge > section { - grid-column-gap: 48px; } + grid-column-gap: 38px; } .layout-wedge > section > * { margin-right: 0; margin-left: 0; } } .layout-wedge > section > * { - margin-top: 24px; - margin-bottom: 24px; } + margin-top: 19px; + margin-bottom: 19px; } @supports (grid-row-gap: 20px) { .layout-wedge > section { - grid-row-gap: 48px; } + grid-row-gap: 38px; } .layout-wedge > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -4846,7 +5314,7 @@ dfn { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .layout--basic > header, .layout--basic > section, @@ -5343,7 +5811,7 @@ button, display: -ms-grid; } @media only screen and (min-width: 0) { .global-footer .global-footer__container { - max-width: 100%; } } + max-width: 0; } } @media only screen and (min-width: 576px) { .global-footer .global-footer__container { max-width: 576px; } } diff --git a/core/scss/decanter-grid.scss b/core/scss/decanter-grid.scss index dab4a0eb8..f5bd19c5c 100644 --- a/core/scss/decanter-grid.scss +++ b/core/scss/decanter-grid.scss @@ -31,4 +31,5 @@ $border-box-sizing: false; // 4. Grid. @import + 'core/base', 'core/grid/index'; diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss b/core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss new file mode 100644 index 000000000..3cfdf2a6f --- /dev/null +++ b/core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss @@ -0,0 +1,16 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. +// +// Returns the breakpoint name with a dash in front. If the smallest breakpoint +// (xs) is passed through, a blank string is returned. +// + +// breakpoint-insert(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) +// Returns a blank string +// breakpoint-insert(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) +// Returns "-sm" +@function breakpoint-insert($name, $breakpoints: $grid-screens) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss b/core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss new file mode 100644 index 000000000..1b2afe4c6 --- /dev/null +++ b/core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Maximum breakpoint width. Null for the largest (2xl) breakpoint. +// The maximum value is calculated as the minimum of the following breakpoint +// minus 1px. +// +// breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) +// Returns "767px" +@function breakpoint-max($name, $breakpoints: $grid-screens) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); +} diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss b/core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss new file mode 100644 index 000000000..56156aadd --- /dev/null +++ b/core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Minimum breakpoint width. Null for the smallest (xs) breakpoint. +// +// breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) +// Returns "576px" +@function breakpoint-min($name, $breakpoints: $grid-screens) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss b/core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss new file mode 100644 index 000000000..48459ed1b --- /dev/null +++ b/core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Name of the next breakpoint, or null for the last breakpoint. +// +// breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) +// Returns "md" +@function breakpoint-next($name, $breakpoints: $grid-screens, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} diff --git a/core/scss/utilities/functions/flex/index.scss b/core/scss/utilities/functions/flex/index.scss index 3d6461a68..fba00a32c 100644 --- a/core/scss/utilities/functions/flex/index.scss +++ b/core/scss/utilities/functions/flex/index.scss @@ -9,4 +9,8 @@ @import 'flex-column-ratio', 'flex-column-width', - 'flex-parse-columns'; + 'flex-parse-columns', + 'zzz-breakpoint-insert', + 'zzz-breakpoint-max', + 'zzz-breakpoint-min', + 'zzz-breakpoint-next'; diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss new file mode 100755 index 000000000..a18edc44e --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss @@ -0,0 +1,72 @@ +@charset "UTF-8"; + +// +// @generate-grid-classes +// +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. +// + +// Generates grid classes given the value of the $grid-columns grid variable value. +@mixin generate-grid-classes($columns: $grid-columns, $gutter: 36px, $breakpoints: $grid-screens) { + // Properties for all breakpoints. + %grid-column { + position: relative; + width: 100%; + min-height: 1px; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + + @each $breakpoint in map-keys($breakpoints) { + $insert: breakpoint-insert($breakpoint, $breakpoints); + + // Allow columns to stretch full width below their breakpoints. + @for $n from 1 through $columns { + .grid#{$insert}-#{$n}-of-12 { + @extend %grid-column; + } + } + .grid#{$insert}-of-12, + .grid#{$insert}-auto { + @extend %grid-column; + } + + @include grid-media-min($breakpoint, $breakpoints) { + // Provide .grid-{bp}-of-12 classes for equal width flexbox columns. + .grid#{$insert}-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .grid#{$insert}-auto { + flex: 0 0 auto; + width: auto; + max-width: none; + } + + @for $n from 1 through $columns { + .grid#{$insert}-#{$n}-of-12 { + @include generate-grid-column($n, $columns); + } + } + + @for $n from 0 through ($columns - 1) { + @if not ($insert == "" and $n == 0) { // No .grid-push-0. + .grid-push#{$insert}-#{$n} { + @include generate-grid-push($n, $columns); + } + } + } + } + } +} + +// Generates grid classes if variable is set to true. +@if $grid-classes-enabled { + @include generate-grid-classes(); + + .grid--container { + @include flex-container; + } +} diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss new file mode 100644 index 000000000..25856f8bc --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// @generate-grid-column +// + +@mixin generate-grid-column($size, $columns: $grid-columns) { + flex: 0 0 percentage($size / $columns); + max-width: percentage($size / $columns); +} diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss new file mode 100755 index 000000000..d35f2ec89 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// @generate-grid-push +// + +// Pushes a grid column by changing its left margin. +@mixin generate-grid-push($size, $columns: $grid-columns) { + $number: $size / $columns; + margin-left: if($number == 0, 0, percentage($number)); +} diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss b/core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss new file mode 100755 index 000000000..22de26893 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Media query that spans multiple breakpoint widths (between the min and max breakpoints). +@mixin grid-media-between($lower, $upper, $breakpoints: $grid-screens) { + $min: breakpoint-min($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include grid-media-min($lower, $breakpoints) { + @content; + } + } @else if $min == null { + @include grid-media-max($upper, $breakpoints) { + @content; + } + } +} diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss b/core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss new file mode 100755 index 000000000..8dcfa3578 --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Media query of at most the maximum breakpoint width. No query for the largest breakpoint. +// Applies to the passed through breakpoint and below. +@mixin grid-media-max($name, $breakpoints: $grid-screens) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss b/core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss new file mode 100755 index 000000000..de74a311b --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Media query of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Applies to the passed through breakpoint and above. +@mixin grid-media-min($name, $breakpoints: $grid-screens) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss b/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss new file mode 100755 index 000000000..6366c5e5f --- /dev/null +++ b/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +// The $grid-screens map defined in the grid variables file is used as the +// $breakpoints argument by default. + +// Media query between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Applies only to the passed through breakpoint, not any wider or narrower. +@mixin grid-media-only($name, $breakpoints: $grid-screens) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include grid-media-min($name, $breakpoints) { + @content; + } + } @else if $min == null { + @include grid-media-max($name, $breakpoints) { + @content; + } + } +} diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss index 1431795bf..8fc015bd2 100644 --- a/core/scss/utilities/mixins/flex/index.scss +++ b/core/scss/utilities/mixins/flex/index.scss @@ -10,4 +10,12 @@ 'flex-classes', 'flex-column', 'flex-container', - 'responsive-flex-column'; + 'responsive-flex-column', + 'flex-container', + 'zzz-grid-media-min', + 'zzz-grid-media-max', + 'zzz-grid-media-between', + 'zzz-grid-media-only', + 'zzz-generate-grid-column', + 'zzz-generate-grid-push', + 'zzz-generate-grid-classes'; diff --git a/core/scss/utilities/variables/core/_breakpoints.scss b/core/scss/utilities/variables/core/_breakpoints.scss index c0cf48cc0..5e9f8c9af 100644 --- a/core/scss/utilities/variables/core/_breakpoints.scss +++ b/core/scss/utilities/variables/core/_breakpoints.scss @@ -243,29 +243,29 @@ $columns-2xl: 12 !default; // // $gutter-xs // -// Markup: $gutter-xs: 20px !default; +// Markup: $gutter-xs: 32px !default; // // Styleguide: Variables.Core.Gutters.gutter-xs // -$gutter-xs: 20px !default; +$gutter-xs: 32px !default; // // $gutter-sm // -// Markup: $gutter-sm: 20px !default; +// Markup: $gutter-sm: 32px !default; // // Styleguide: Variables.Core.Gutters.gutter-sm // -$gutter-sm: 20px !default; +$gutter-sm: 32px !default; // // $gutter-md // -// Markup: $gutter-md: 20px !default; +// Markup: $gutter-md: 36px !default; // // Styleguide: Variables.Core.Gutters.gutter-md // -$gutter-md: 20px !default; +$gutter-md: 36px !default; // // $gutter-lg @@ -279,17 +279,17 @@ $gutter-lg: 36px !default; // // $gutter-xl // -// Markup: $gutter-xl: 40px !default; +// Markup: $gutter-xl: 36px !default; // // Styleguide: Variables.Core.Gutters.gutter-xl // -$gutter-xl: 40px !default; +$gutter-xl: 36px !default; // // $gutter-2xl // -// Markup: $gutter-2xl: 48px !default; +// Markup: $gutter-2xl: 38px !default; // // Styleguide: Variables.Core.Gutters.gutter-2xl // -$gutter-2xl: 48px !default; +$gutter-2xl: 38px !default; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 88a1fcf3e..8017b0a28 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -1,5 +1,8 @@ @charset "UTF-8"; +$grid-classes-enabled: true !default; +$grid-columns: 12 !default; + // $grid-screens // // A sass map of screen sized keyed with the breakpoint shortcode. @@ -7,7 +10,7 @@ // Style guide: Variables.Core.grid-screens // $grid-screens: ( - 'xs': 100%, + 'xs': $screen-xs, 'sm': $screen-sm, 'md': $screen-md, 'lg': $screen-lg, diff --git a/core/templates/core/grid/zzz-flex-grid.html b/core/templates/core/grid/zzz-flex-grid.html new file mode 100644 index 000000000..6d7ebf3e8 --- /dev/null +++ b/core/templates/core/grid/zzz-flex-grid.html @@ -0,0 +1,72 @@ + + + + + + + + Flex Grid + + + + + + + + + +
    + +

    Flex Grid

    + +
    +
    .grid-4-of-12
    +
    .grid-4-of-12
    +
    .grid-4-of-12
    +
    + +
    +
    .grid-sm-4-of-12
    +
    .grid-sm-4-of-12
    +
    .grid-sm-4-of-12
    +
    + +
    +
    .grid-md-4-of-12
    +
    .grid-md-4-of-12
    +
    .grid-md-4-of-12
    +
    + +
    +
    .grid-lg-4-of-12
    +
    .grid-lg-4-of-12
    +
    .grid-lg-4-of-12
    +
    + +
    +
    .grid-xl-4-of-12
    +
    .grid-xl-4-of-12
    +
    .grid-xl-4-of-12
    +
    + +
    +
    .grid-2xl-4-of-12
    +
    .grid-2xl-4-of-12
    +
    .grid-2xl-4-of-12
    +
    + +
    + + diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index d89e30fc6..f1a053d4e 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -297,6 +297,474 @@ template { [hidden] { display: none; } +.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, +.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, +.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, +.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, +.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, +.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, +.grid-2xl-auto { + position: relative; + width: 100%; + min-height: 1px; + padding-right: 18px; + padding-left: 18px; } + +.grid-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + +.grid-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + +.grid-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + +.grid-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + +.grid-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + +.grid-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + +.grid-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + +.grid-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + +.grid-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + +.grid-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + +.grid-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + +.grid-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + +.grid-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + +.grid-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + +.grid-push-1 { + margin-left: 8.3333333333%; } + +.grid-push-2 { + margin-left: 16.6666666667%; } + +.grid-push-3 { + margin-left: 25%; } + +.grid-push-4 { + margin-left: 33.3333333333%; } + +.grid-push-5 { + margin-left: 41.6666666667%; } + +.grid-push-6 { + margin-left: 50%; } + +.grid-push-7 { + margin-left: 58.3333333333%; } + +.grid-push-8 { + margin-left: 66.6666666667%; } + +.grid-push-9 { + margin-left: 75%; } + +.grid-push-10 { + margin-left: 83.3333333333%; } + +.grid-push-11 { + margin-left: 91.6666666667%; } + +@media (min-width: 576px) { + .grid-sm-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-sm-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-sm-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-sm-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-sm-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-sm-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-sm-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-sm-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-sm-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-sm-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-sm-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-sm-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-sm-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-sm-0 { + margin-left: 0; } + .grid-push-sm-1 { + margin-left: 8.3333333333%; } + .grid-push-sm-2 { + margin-left: 16.6666666667%; } + .grid-push-sm-3 { + margin-left: 25%; } + .grid-push-sm-4 { + margin-left: 33.3333333333%; } + .grid-push-sm-5 { + margin-left: 41.6666666667%; } + .grid-push-sm-6 { + margin-left: 50%; } + .grid-push-sm-7 { + margin-left: 58.3333333333%; } + .grid-push-sm-8 { + margin-left: 66.6666666667%; } + .grid-push-sm-9 { + margin-left: 75%; } + .grid-push-sm-10 { + margin-left: 83.3333333333%; } + .grid-push-sm-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 768px) { + .grid-md-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-md-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-md-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-md-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-md-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-md-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-md-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-md-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-md-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-md-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-md-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-md-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-md-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-md-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-md-0 { + margin-left: 0; } + .grid-push-md-1 { + margin-left: 8.3333333333%; } + .grid-push-md-2 { + margin-left: 16.6666666667%; } + .grid-push-md-3 { + margin-left: 25%; } + .grid-push-md-4 { + margin-left: 33.3333333333%; } + .grid-push-md-5 { + margin-left: 41.6666666667%; } + .grid-push-md-6 { + margin-left: 50%; } + .grid-push-md-7 { + margin-left: 58.3333333333%; } + .grid-push-md-8 { + margin-left: 66.6666666667%; } + .grid-push-md-9 { + margin-left: 75%; } + .grid-push-md-10 { + margin-left: 83.3333333333%; } + .grid-push-md-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 992px) { + .grid-lg-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-lg-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-lg-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-lg-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-lg-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-lg-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-lg-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-lg-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-lg-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-lg-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-lg-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-lg-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-lg-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-lg-0 { + margin-left: 0; } + .grid-push-lg-1 { + margin-left: 8.3333333333%; } + .grid-push-lg-2 { + margin-left: 16.6666666667%; } + .grid-push-lg-3 { + margin-left: 25%; } + .grid-push-lg-4 { + margin-left: 33.3333333333%; } + .grid-push-lg-5 { + margin-left: 41.6666666667%; } + .grid-push-lg-6 { + margin-left: 50%; } + .grid-push-lg-7 { + margin-left: 58.3333333333%; } + .grid-push-lg-8 { + margin-left: 66.6666666667%; } + .grid-push-lg-9 { + margin-left: 75%; } + .grid-push-lg-10 { + margin-left: 83.3333333333%; } + .grid-push-lg-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1200px) { + .grid-xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-xl-0 { + margin-left: 0; } + .grid-push-xl-1 { + margin-left: 8.3333333333%; } + .grid-push-xl-2 { + margin-left: 16.6666666667%; } + .grid-push-xl-3 { + margin-left: 25%; } + .grid-push-xl-4 { + margin-left: 33.3333333333%; } + .grid-push-xl-5 { + margin-left: 41.6666666667%; } + .grid-push-xl-6 { + margin-left: 50%; } + .grid-push-xl-7 { + margin-left: 58.3333333333%; } + .grid-push-xl-8 { + margin-left: 66.6666666667%; } + .grid-push-xl-9 { + margin-left: 75%; } + .grid-push-xl-10 { + margin-left: 83.3333333333%; } + .grid-push-xl-11 { + margin-left: 91.6666666667%; } } + +@media (min-width: 1500px) { + .grid-2xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .grid-2xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .grid-2xl-1-of-12 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; } + .grid-2xl-2-of-12 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .grid-2xl-3-of-12 { + flex: 0 0 25%; + max-width: 25%; } + .grid-2xl-4-of-12 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .grid-2xl-5-of-12 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } + .grid-2xl-6-of-12 { + flex: 0 0 50%; + max-width: 50%; } + .grid-2xl-7-of-12 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } + .grid-2xl-8-of-12 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; } + .grid-2xl-9-of-12 { + flex: 0 0 75%; + max-width: 75%; } + .grid-2xl-10-of-12 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; } + .grid-2xl-11-of-12 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; } + .grid-2xl-12-of-12 { + flex: 0 0 100%; + max-width: 100%; } + .grid-push-2xl-0 { + margin-left: 0; } + .grid-push-2xl-1 { + margin-left: 8.3333333333%; } + .grid-push-2xl-2 { + margin-left: 16.6666666667%; } + .grid-push-2xl-3 { + margin-left: 25%; } + .grid-push-2xl-4 { + margin-left: 33.3333333333%; } + .grid-push-2xl-5 { + margin-left: 41.6666666667%; } + .grid-push-2xl-6 { + margin-left: 50%; } + .grid-push-2xl-7 { + margin-left: 58.3333333333%; } + .grid-push-2xl-8 { + margin-left: 66.6666666667%; } + .grid-push-2xl-9 { + margin-left: 75%; } + .grid-push-2xl-10 { + margin-left: 83.3333333333%; } + .grid-push-2xl-11 { + margin-left: 91.6666666667%; } } + +.grid--container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .grid--container { + padding-right: 3rem; + padding-left: 3rem; } } + :root { --max_width: $site-max-width; --baseline: 3rem; @@ -322,7 +790,7 @@ template { @media (min-width: 0) { :root { --columns: 6; - --gutter: 20px; + --gutter: 32px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xs'; } } @@ -330,7 +798,7 @@ template { @media (min-width: 576px) { :root { --columns: 12; - --gutter: 20px; + --gutter: 32px; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'sm'; } } @@ -338,7 +806,7 @@ template { @media (min-width: 768px) { :root { --columns: 12; - --gutter: 20px; + --gutter: 36px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'md'; } } @@ -354,7 +822,7 @@ template { @media (min-width: 1200px) { :root { --columns: 12; - --gutter: 40px; + --gutter: 36px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; } } @@ -1235,20 +1703,20 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { margin-left: 0; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 268px 268px auto; - grid-template-columns: auto 268px 268px auto; } } + -ms-grid-columns: auto 256px 256px auto; + grid-template-columns: auto 256px 256px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 364px 364px auto; - grid-template-columns: auto 364px 364px auto; } } + -ms-grid-columns: auto 348px 348px auto; + grid-template-columns: auto 348px 348px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 212px 212px auto; grid-template-columns: auto 212px 212px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 260px 260px auto; - grid-template-columns: auto 260px 260px auto; } } + -ms-grid-columns: auto 264px 264px auto; + grid-template-columns: auto 264px 264px auto; } } @media only screen and (min-width: 0) { #kss-node.kss-home .section--dev-resources h2:first-child { -ms-grid-column: 1; @@ -1270,7 +1738,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column-start: 2; } } #kss-node.kss-home .section--dev-resources .su-card img { max-width: 100px; - margin: 20px auto; } + margin: 36px auto; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources .su-card h3 { text-align: center; } } From 657cbf8d5a40dd17b0a64cf16900a6d0351e75d0 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Tue, 20 Nov 2018 11:49:08 -0800 Subject: [PATCH 041/123] grid column calculation update --- core/css/decanter-grid.css | 291 +++++++++--------- core/css/decanter-no-markup.css | 291 +++++++++--------- core/css/decanter.css | 291 +++++++++--------- .../flex/_zzz-generate-grid-classes.scss | 5 +- .../flex/_zzz-generate-grid-column.scss | 6 +- core/templates/core/grid/zzz-flex-grid.html | 10 +- kss/builder/decanter/kss-assets/css/kss.css | 291 +++++++++--------- 7 files changed, 592 insertions(+), 593 deletions(-) diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 783760158..28b2e3852 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -8,8 +8,7 @@ position: relative; width: 100%; min-height: 1px; - padding-right: 18px; - padding-left: 18px; } + padding: 1rem; } .grid-of-12 { flex-basis: 0; @@ -22,52 +21,52 @@ max-width: none; } .grid-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-1 { margin-left: 8.3333333333%; } @@ -112,41 +111,41 @@ width: auto; max-width: none; } .grid-sm-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-sm-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-sm-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-sm-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-sm-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-sm-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-sm-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-sm-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-sm-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-sm-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-sm-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-sm-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-sm-0 { margin-left: 0; } .grid-push-sm-1 { @@ -182,41 +181,41 @@ width: auto; max-width: none; } .grid-md-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-md-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-md-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-md-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-md-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-md-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-md-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-md-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-md-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-md-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-md-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-md-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-md-0 { margin-left: 0; } .grid-push-md-1 { @@ -252,41 +251,41 @@ width: auto; max-width: none; } .grid-lg-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-lg-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-lg-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-lg-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-lg-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-lg-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-lg-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-lg-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-lg-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-lg-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-lg-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-lg-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-lg-0 { margin-left: 0; } .grid-push-lg-1 { @@ -322,41 +321,41 @@ width: auto; max-width: none; } .grid-xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-xl-0 { margin-left: 0; } .grid-push-xl-1 { @@ -392,41 +391,41 @@ width: auto; max-width: none; } .grid-2xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-2xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-2xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-2xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-2xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-2xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-2xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-2xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-2xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-2xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-2xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-2xl-0 { margin-left: 0; } .grid-push-2xl-1 { diff --git a/core/css/decanter-no-markup.css b/core/css/decanter-no-markup.css index afafaf659..839906f1f 100644 --- a/core/css/decanter-no-markup.css +++ b/core/css/decanter-no-markup.css @@ -8,8 +8,7 @@ position: relative; width: 100%; min-height: 1px; - padding-right: 18px; - padding-left: 18px; } + padding: 1rem; } .grid-of-12 { flex-basis: 0; @@ -22,52 +21,52 @@ max-width: none; } .grid-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-1 { margin-left: 8.3333333333%; } @@ -112,41 +111,41 @@ width: auto; max-width: none; } .grid-sm-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-sm-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-sm-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-sm-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-sm-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-sm-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-sm-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-sm-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-sm-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-sm-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-sm-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-sm-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-sm-0 { margin-left: 0; } .grid-push-sm-1 { @@ -182,41 +181,41 @@ width: auto; max-width: none; } .grid-md-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-md-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-md-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-md-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-md-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-md-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-md-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-md-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-md-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-md-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-md-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-md-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-md-0 { margin-left: 0; } .grid-push-md-1 { @@ -252,41 +251,41 @@ width: auto; max-width: none; } .grid-lg-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-lg-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-lg-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-lg-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-lg-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-lg-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-lg-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-lg-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-lg-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-lg-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-lg-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-lg-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-lg-0 { margin-left: 0; } .grid-push-lg-1 { @@ -322,41 +321,41 @@ width: auto; max-width: none; } .grid-xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-xl-0 { margin-left: 0; } .grid-push-xl-1 { @@ -392,41 +391,41 @@ width: auto; max-width: none; } .grid-2xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-2xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-2xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-2xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-2xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-2xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-2xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-2xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-2xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-2xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-2xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-2xl-0 { margin-left: 0; } .grid-push-2xl-1 { diff --git a/core/css/decanter.css b/core/css/decanter.css index 5e97f13ae..29cbf57e5 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -313,8 +313,7 @@ template { position: relative; width: 100%; min-height: 1px; - padding-right: 18px; - padding-left: 18px; } + padding: 1rem; } .grid-of-12 { flex-basis: 0; @@ -327,52 +326,52 @@ template { max-width: none; } .grid-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-1 { margin-left: 8.3333333333%; } @@ -417,41 +416,41 @@ template { width: auto; max-width: none; } .grid-sm-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-sm-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-sm-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-sm-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-sm-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-sm-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-sm-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-sm-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-sm-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-sm-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-sm-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-sm-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-sm-0 { margin-left: 0; } .grid-push-sm-1 { @@ -487,41 +486,41 @@ template { width: auto; max-width: none; } .grid-md-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-md-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-md-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-md-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-md-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-md-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-md-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-md-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-md-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-md-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-md-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-md-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-md-0 { margin-left: 0; } .grid-push-md-1 { @@ -557,41 +556,41 @@ template { width: auto; max-width: none; } .grid-lg-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-lg-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-lg-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-lg-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-lg-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-lg-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-lg-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-lg-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-lg-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-lg-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-lg-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-lg-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-lg-0 { margin-left: 0; } .grid-push-lg-1 { @@ -627,41 +626,41 @@ template { width: auto; max-width: none; } .grid-xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-xl-0 { margin-left: 0; } .grid-push-xl-1 { @@ -697,41 +696,41 @@ template { width: auto; max-width: none; } .grid-2xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-2xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-2xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-2xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-2xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-2xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-2xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-2xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-2xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-2xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-2xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-2xl-0 { margin-left: 0; } .grid-push-2xl-1 { diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss index a18edc44e..8e5fc9c80 100755 --- a/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss +++ b/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss @@ -8,14 +8,13 @@ // // Generates grid classes given the value of the $grid-columns grid variable value. -@mixin generate-grid-classes($columns: $grid-columns, $gutter: 36px, $breakpoints: $grid-screens) { +@mixin generate-grid-classes($columns: $grid-columns, $breakpoints: $grid-screens) { // Properties for all breakpoints. %grid-column { position: relative; width: 100%; min-height: 1px; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding: 1rem; } @each $breakpoint in map-keys($breakpoints) { diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss index 25856f8bc..3c4984d28 100644 --- a/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss +++ b/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss @@ -4,7 +4,7 @@ // @generate-grid-column // -@mixin generate-grid-column($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - max-width: percentage($size / $columns); +@mixin generate-grid-column($size, $columns: $grid-columns, $gutter: 36px) { + flex: 0 0 calc(#{percentage($size / $columns)} - #{$gutter}); + max-width: calc(#{percentage($size / $columns)} - #{$gutter}); } diff --git a/core/templates/core/grid/zzz-flex-grid.html b/core/templates/core/grid/zzz-flex-grid.html index 6d7ebf3e8..2e76a1f5b 100644 --- a/core/templates/core/grid/zzz-flex-grid.html +++ b/core/templates/core/grid/zzz-flex-grid.html @@ -12,8 +12,6 @@ @@ -29,7 +31,9 @@
    -

    Flex Grid

    +
    +

    Flex Grid

    +
    .grid-4-of-12
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index f1a053d4e..90da34555 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -307,8 +307,7 @@ template { position: relative; width: 100%; min-height: 1px; - padding-right: 18px; - padding-left: 18px; } + padding: 1rem; } .grid-of-12 { flex-basis: 0; @@ -321,52 +320,52 @@ template { max-width: none; } .grid-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-1 { margin-left: 8.3333333333%; } @@ -411,41 +410,41 @@ template { width: auto; max-width: none; } .grid-sm-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-sm-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-sm-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-sm-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-sm-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-sm-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-sm-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-sm-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-sm-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-sm-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-sm-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-sm-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-sm-0 { margin-left: 0; } .grid-push-sm-1 { @@ -481,41 +480,41 @@ template { width: auto; max-width: none; } .grid-md-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-md-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-md-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-md-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-md-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-md-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-md-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-md-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-md-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-md-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-md-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-md-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-md-0 { margin-left: 0; } .grid-push-md-1 { @@ -551,41 +550,41 @@ template { width: auto; max-width: none; } .grid-lg-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-lg-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-lg-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-lg-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-lg-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-lg-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-lg-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-lg-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-lg-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-lg-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-lg-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-lg-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-lg-0 { margin-left: 0; } .grid-push-lg-1 { @@ -621,41 +620,41 @@ template { width: auto; max-width: none; } .grid-xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-xl-0 { margin-left: 0; } .grid-push-xl-1 { @@ -691,41 +690,41 @@ template { width: auto; max-width: none; } .grid-2xl-1-of-12 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 calc(8.3333333333% - 36px); + max-width: calc(8.3333333333% - 36px); } .grid-2xl-2-of-12 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 calc(16.6666666667% - 36px); + max-width: calc(16.6666666667% - 36px); } .grid-2xl-3-of-12 { - flex: 0 0 25%; - max-width: 25%; } + flex: 0 0 calc(25% - 36px); + max-width: calc(25% - 36px); } .grid-2xl-4-of-12 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 calc(33.3333333333% - 36px); + max-width: calc(33.3333333333% - 36px); } .grid-2xl-5-of-12 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 calc(41.6666666667% - 36px); + max-width: calc(41.6666666667% - 36px); } .grid-2xl-6-of-12 { - flex: 0 0 50%; - max-width: 50%; } + flex: 0 0 calc(50% - 36px); + max-width: calc(50% - 36px); } .grid-2xl-7-of-12 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 calc(58.3333333333% - 36px); + max-width: calc(58.3333333333% - 36px); } .grid-2xl-8-of-12 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 calc(66.6666666667% - 36px); + max-width: calc(66.6666666667% - 36px); } .grid-2xl-9-of-12 { - flex: 0 0 75%; - max-width: 75%; } + flex: 0 0 calc(75% - 36px); + max-width: calc(75% - 36px); } .grid-2xl-10-of-12 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 calc(83.3333333333% - 36px); + max-width: calc(83.3333333333% - 36px); } .grid-2xl-11-of-12 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 calc(91.6666666667% - 36px); + max-width: calc(91.6666666667% - 36px); } .grid-2xl-12-of-12 { - flex: 0 0 100%; - max-width: 100%; } + flex: 0 0 calc(100% - 36px); + max-width: calc(100% - 36px); } .grid-push-2xl-0 { margin-left: 0; } .grid-push-2xl-1 { From 83f6e3cc1f572bc4da292d5dd45ad458149f63e8 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 21 Nov 2018 14:40:23 -0800 Subject: [PATCH 042/123] fixup! wip. --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index eb27157ce..cd0926b17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4419,12 +4419,6 @@ "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=", "dev": true }, - "merge": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz", - "integrity": "sha1-dTHjnUlJwoGma4xabgJl6LBYlNo=", - "dev": true - }, "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -5283,6 +5277,12 @@ } } }, + "merge": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", + "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", + "dev": true + }, "micromatch": { "version": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", From fdc945726bdaf2bc3b352a5cf66bf1ab6e069345 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 21 Nov 2018 14:41:09 -0800 Subject: [PATCH 043/123] fixup! wip. --- core/css/decanter.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 6379b71f9..fce82d10b 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6120,8 +6120,8 @@ button, color: #8c1515; } .su-lockup { - display: -ms-grid; display: grid; + display: -ms-grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto auto auto auto; From 84f938fac93ff8116910a71c30f472863207b5da Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 21 Nov 2018 16:12:51 -0800 Subject: [PATCH 044/123] fixup! wip. --- core/css/decanter-grid.css | 926 ++++------- core/css/decanter-no-markup.css | 467 +----- core/css/decanter.css | 1374 +++++++---------- core/scss/core/grid/_flex-grid.scss | 94 +- core/scss/core/grid/index.scss | 9 +- core/scss/layout/four-column/_molive.scss | 4 +- core/scss/layout/full-width/_ibeam.scss | 1 - ...nt-insert.scss => _breakpoint-insert.scss} | 0 ...eakpoint-max.scss => _breakpoint-max.scss} | 0 ...eakpoint-min.scss => _breakpoint-min.scss} | 0 ...kpoint-next.scss => _breakpoint-next.scss} | 0 core/scss/utilities/functions/flex/index.scss | 10 +- .../_grid-media-between.scss} | 0 .../_grid-media-max.scss} | 0 .../_grid-media-min.scss} | 0 .../_grid-media-only.scss | 0 .../{grid => breakpoint}/_grid-media.scss | 0 .../utilities/mixins/breakpoint/index.scss | 10 + .../{grid => display}/_centered-column.scss | 6 +- .../utilities/mixins/display/_overflow.scss | 14 - core/scss/utilities/mixins/display/index.scss | 4 +- .../utilities/mixins/flex/_flex-classes.scss | 156 -- .../utilities/mixins/flex/_flex-column.scss | 5 +- ...te-grid-push.scss => _flex-grid-push.scss} | 4 +- .../flex/_zzz-generate-grid-classes.scss | 71 - .../flex/_zzz-generate-grid-column.scss | 10 - .../mixins/flex/_zzz-grid-media-only.scss | 26 - core/scss/utilities/mixins/flex/index.scss | 9 +- core/scss/utilities/mixins/grid/index.scss | 3 - core/scss/utilities/mixins/index.scss | 1 + core/scss/utilities/mixins/quote/_quote.scss | 2 +- .../variables/core/_breakpoints.scss | 5 + core/templates/core/grid/grid.twig | 116 +- core/templates/core/grid/zzz-flex-grid.html | 56 +- kss/builder/decanter/kss-assets/css/kss.css | 477 +----- .../decanter/scss/_class-based-grid.scss | 2 +- kss/builder/decanter/scss/_visible-grid.scss | 11 + 37 files changed, 1088 insertions(+), 2785 deletions(-) rename core/scss/utilities/functions/flex/{_zzz-breakpoint-insert.scss => _breakpoint-insert.scss} (100%) rename core/scss/utilities/functions/flex/{_zzz-breakpoint-max.scss => _breakpoint-max.scss} (100%) rename core/scss/utilities/functions/flex/{_zzz-breakpoint-min.scss => _breakpoint-min.scss} (100%) rename core/scss/utilities/functions/flex/{_zzz-breakpoint-next.scss => _breakpoint-next.scss} (100%) rename core/scss/utilities/mixins/{flex/_zzz-grid-media-between.scss => breakpoint/_grid-media-between.scss} (100%) rename core/scss/utilities/mixins/{flex/_zzz-grid-media-max.scss => breakpoint/_grid-media-max.scss} (100%) rename core/scss/utilities/mixins/{flex/_zzz-grid-media-min.scss => breakpoint/_grid-media-min.scss} (100%) rename core/scss/utilities/mixins/{grid => breakpoint}/_grid-media-only.scss (100%) rename core/scss/utilities/mixins/{grid => breakpoint}/_grid-media.scss (100%) create mode 100644 core/scss/utilities/mixins/breakpoint/index.scss rename core/scss/utilities/mixins/{grid => display}/_centered-column.scss (79%) delete mode 100644 core/scss/utilities/mixins/display/_overflow.scss delete mode 100644 core/scss/utilities/mixins/flex/_flex-classes.scss rename core/scss/utilities/mixins/flex/{_zzz-generate-grid-push.scss => _flex-grid-push.scss} (66%) delete mode 100755 core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss delete mode 100644 core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss delete mode 100755 core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 28b2e3852..6a7716f21 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -1,734 +1,486 @@ -.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, -.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, -.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, -.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, -.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, -.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, -.grid-2xl-auto { +html { + box-sizing: border-box; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +body { + background-color: #ffffff; + overflow-x: hidden; } + +.lt-ie9 * { + -webkit-filter: none !important; + filter: none !important; } + +[hidden] { + display: none !important; } + +.flex-container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .flex-container { + padding-right: 3rem; + padding-left: 3rem; } } + +.flex-1-of-12, .flex-2-of-12, .flex-3-of-12, .flex-4-of-12, .flex-5-of-12, .flex-6-of-12, .flex-7-of-12, .flex-8-of-12, .flex-9-of-12, .flex-10-of-12, .flex-11-of-12, .flex-12-of-12, .flex-of-12, +.flex-auto, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-sm-of-12, +.flex-sm-auto, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-md-of-12, +.flex-md-auto, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-lg-of-12, +.flex-lg-auto, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-xl-of-12, +.flex-xl-auto, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12, .flex-2xl-of-12, +.flex-2xl-auto { position: relative; width: 100%; min-height: 1px; padding: 1rem; } -.grid-of-12 { +.flex-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } -.grid-auto { +.flex-auto { flex: 0 0 auto; width: auto; max-width: none; } -.grid-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } +.flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } -.grid-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } +.flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } -.grid-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } +.flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } -.grid-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } +.flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } -.grid-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } +.flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } -.grid-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } +.flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } -.grid-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } +.flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } -.grid-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } +.flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } -.grid-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } +.flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } -.grid-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } +.flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } -.grid-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } +.flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } -.grid-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } +.flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } -.grid-push-1 { +.flex-push-1 { margin-left: 8.3333333333%; } -.grid-push-2 { +.flex-push-2 { margin-left: 16.6666666667%; } -.grid-push-3 { +.flex-push-3 { margin-left: 25%; } -.grid-push-4 { +.flex-push-4 { margin-left: 33.3333333333%; } -.grid-push-5 { +.flex-push-5 { margin-left: 41.6666666667%; } -.grid-push-6 { +.flex-push-6 { margin-left: 50%; } -.grid-push-7 { +.flex-push-7 { margin-left: 58.3333333333%; } -.grid-push-8 { +.flex-push-8 { margin-left: 66.6666666667%; } -.grid-push-9 { +.flex-push-9 { margin-left: 75%; } -.grid-push-10 { +.flex-push-10 { margin-left: 83.3333333333%; } -.grid-push-11 { +.flex-push-11 { margin-left: 91.6666666667%; } @media (min-width: 576px) { - .grid-sm-of-12 { + .flex-sm-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-sm-auto { + .flex-sm-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-sm-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-sm-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-sm-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-sm-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-sm-0 { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-sm-0 { margin-left: 0; } - .grid-push-sm-1 { + .flex-push-sm-1 { margin-left: 8.3333333333%; } - .grid-push-sm-2 { + .flex-push-sm-2 { margin-left: 16.6666666667%; } - .grid-push-sm-3 { + .flex-push-sm-3 { margin-left: 25%; } - .grid-push-sm-4 { + .flex-push-sm-4 { margin-left: 33.3333333333%; } - .grid-push-sm-5 { + .flex-push-sm-5 { margin-left: 41.6666666667%; } - .grid-push-sm-6 { + .flex-push-sm-6 { margin-left: 50%; } - .grid-push-sm-7 { + .flex-push-sm-7 { margin-left: 58.3333333333%; } - .grid-push-sm-8 { + .flex-push-sm-8 { margin-left: 66.6666666667%; } - .grid-push-sm-9 { + .flex-push-sm-9 { margin-left: 75%; } - .grid-push-sm-10 { + .flex-push-sm-10 { margin-left: 83.3333333333%; } - .grid-push-sm-11 { + .flex-push-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 768px) { - .grid-md-of-12 { + .flex-md-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-md-auto { + .flex-md-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-md-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-md-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-md-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-md-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-md-0 { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-md-0 { margin-left: 0; } - .grid-push-md-1 { + .flex-push-md-1 { margin-left: 8.3333333333%; } - .grid-push-md-2 { + .flex-push-md-2 { margin-left: 16.6666666667%; } - .grid-push-md-3 { + .flex-push-md-3 { margin-left: 25%; } - .grid-push-md-4 { + .flex-push-md-4 { margin-left: 33.3333333333%; } - .grid-push-md-5 { + .flex-push-md-5 { margin-left: 41.6666666667%; } - .grid-push-md-6 { + .flex-push-md-6 { margin-left: 50%; } - .grid-push-md-7 { + .flex-push-md-7 { margin-left: 58.3333333333%; } - .grid-push-md-8 { + .flex-push-md-8 { margin-left: 66.6666666667%; } - .grid-push-md-9 { + .flex-push-md-9 { margin-left: 75%; } - .grid-push-md-10 { + .flex-push-md-10 { margin-left: 83.3333333333%; } - .grid-push-md-11 { + .flex-push-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 992px) { - .grid-lg-of-12 { + .flex-lg-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-lg-auto { + .flex-lg-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-lg-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-lg-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-lg-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-lg-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-lg-0 { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-lg-0 { margin-left: 0; } - .grid-push-lg-1 { + .flex-push-lg-1 { margin-left: 8.3333333333%; } - .grid-push-lg-2 { + .flex-push-lg-2 { margin-left: 16.6666666667%; } - .grid-push-lg-3 { + .flex-push-lg-3 { margin-left: 25%; } - .grid-push-lg-4 { + .flex-push-lg-4 { margin-left: 33.3333333333%; } - .grid-push-lg-5 { + .flex-push-lg-5 { margin-left: 41.6666666667%; } - .grid-push-lg-6 { + .flex-push-lg-6 { margin-left: 50%; } - .grid-push-lg-7 { + .flex-push-lg-7 { margin-left: 58.3333333333%; } - .grid-push-lg-8 { + .flex-push-lg-8 { margin-left: 66.6666666667%; } - .grid-push-lg-9 { + .flex-push-lg-9 { margin-left: 75%; } - .grid-push-lg-10 { + .flex-push-lg-10 { margin-left: 83.3333333333%; } - .grid-push-lg-11 { + .flex-push-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1200px) { - .grid-xl-of-12 { + .flex-xl-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-xl-auto { + .flex-xl-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-xl-0 { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-xl-0 { margin-left: 0; } - .grid-push-xl-1 { + .flex-push-xl-1 { margin-left: 8.3333333333%; } - .grid-push-xl-2 { + .flex-push-xl-2 { margin-left: 16.6666666667%; } - .grid-push-xl-3 { + .flex-push-xl-3 { margin-left: 25%; } - .grid-push-xl-4 { + .flex-push-xl-4 { margin-left: 33.3333333333%; } - .grid-push-xl-5 { + .flex-push-xl-5 { margin-left: 41.6666666667%; } - .grid-push-xl-6 { + .flex-push-xl-6 { margin-left: 50%; } - .grid-push-xl-7 { + .flex-push-xl-7 { margin-left: 58.3333333333%; } - .grid-push-xl-8 { + .flex-push-xl-8 { margin-left: 66.6666666667%; } - .grid-push-xl-9 { + .flex-push-xl-9 { margin-left: 75%; } - .grid-push-xl-10 { + .flex-push-xl-10 { margin-left: 83.3333333333%; } - .grid-push-xl-11 { + .flex-push-xl-11 { margin-left: 91.6666666667%; } } @media (min-width: 1500px) { - .grid-2xl-of-12 { + .flex-2xl-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-2xl-auto { + .flex-2xl-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-2xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-2xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-2xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-2xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-2xl-0 { + .flex-2xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } + .flex-2xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } + .flex-2xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } + .flex-2xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } + .flex-2xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } + .flex-2xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } + .flex-2xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } + .flex-2xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } + .flex-2xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } + .flex-2xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } + .flex-2xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } + .flex-2xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-2xl-0 { margin-left: 0; } - .grid-push-2xl-1 { + .flex-push-2xl-1 { margin-left: 8.3333333333%; } - .grid-push-2xl-2 { + .flex-push-2xl-2 { margin-left: 16.6666666667%; } - .grid-push-2xl-3 { + .flex-push-2xl-3 { margin-left: 25%; } - .grid-push-2xl-4 { + .flex-push-2xl-4 { margin-left: 33.3333333333%; } - .grid-push-2xl-5 { + .flex-push-2xl-5 { margin-left: 41.6666666667%; } - .grid-push-2xl-6 { + .flex-push-2xl-6 { margin-left: 50%; } - .grid-push-2xl-7 { + .flex-push-2xl-7 { margin-left: 58.3333333333%; } - .grid-push-2xl-8 { + .flex-push-2xl-8 { margin-left: 66.6666666667%; } - .grid-push-2xl-9 { + .flex-push-2xl-9 { margin-left: 75%; } - .grid-push-2xl-10 { + .flex-push-2xl-10 { margin-left: 83.3333333333%; } - .grid-push-2xl-11 { + .flex-push-2xl-11 { margin-left: 91.6666666667%; } } - -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } - -html { - box-sizing: border-box; } - -*, -*::before, -*::after { - box-sizing: inherit; } - -body { - background-color: #ffffff; - overflow-x: hidden; } - -.lt-ie9 * { - -webkit-filter: none !important; - filter: none !important; } - -[hidden] { - display: none !important; } - -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } - -.grid--1-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--1-of-12 { - width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 992px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 1200px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 1500px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 34.8333333333px); } } - -.grid--2-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--2-of-12 { - width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 992px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 1200px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 1500px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 31.6666666667px); } } - -.grid--3-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--3-of-12 { - width: calc(25% - 24px); } } - @media only screen and (min-width: 576px) { - .grid--3-of-12 { - width: calc(25% - 24px); } } - @media only screen and (min-width: 768px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 992px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 1200px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 1500px) { - .grid--3-of-12 { - width: calc(25% - 28.5px); } } - -.grid--4-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--4-of-12 { - width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 992px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 1200px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 1500px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 25.3333333333px); } } - -.grid--5-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--5-of-12 { - width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 992px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 1200px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 1500px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 22.1666666667px); } } - -.grid--6-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--6-of-12 { - width: calc(50% - 16px); } } - @media only screen and (min-width: 576px) { - .grid--6-of-12 { - width: calc(50% - 16px); } } - @media only screen and (min-width: 768px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 992px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 1200px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 1500px) { - .grid--6-of-12 { - width: calc(50% - 19px); } } - -.grid--7-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--7-of-12 { - width: calc(58.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 992px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 1200px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 1500px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15.8333333333px); } } - -.grid--8-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 992px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 1200px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 1500px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12.6666666667px); } } - -.grid--9-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--9-of-12 { - width: calc(75% - 8px); } } - @media only screen and (min-width: 576px) { - .grid--9-of-12 { - width: calc(75% - 8px); } } - @media only screen and (min-width: 768px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 992px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 1200px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 1500px) { - .grid--9-of-12 { - width: calc(75% - 9.5px); } } - -.grid--10-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--10-of-12 { - width: calc(83.3333333333% - 5.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 5.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 992px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 1200px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 1500px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6.3333333333px); } } - -.grid--11-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--11-of-12 { - width: calc(91.6666666667% - 2.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 2.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 992px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 1200px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 1500px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3.1666666667px); } } - -.grid--12-of-12 { - width: 100%; } /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/core/css/decanter-no-markup.css b/core/css/decanter-no-markup.css index 839906f1f..8b9a04750 100644 --- a/core/css/decanter-no-markup.css +++ b/core/css/decanter-no-markup.css @@ -1,467 +1,2 @@ -.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, -.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, -.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, -.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, -.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, -.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, -.grid-2xl-auto { - position: relative; - width: 100%; - min-height: 1px; - padding: 1rem; } -.grid-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - -.grid-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - -.grid-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - -.grid-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - -.grid-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - -.grid-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - -.grid-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - -.grid-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - -.grid-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - -.grid-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - -.grid-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - -.grid-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - -.grid-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - -.grid-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - -.grid-push-1 { - margin-left: 8.3333333333%; } - -.grid-push-2 { - margin-left: 16.6666666667%; } - -.grid-push-3 { - margin-left: 25%; } - -.grid-push-4 { - margin-left: 33.3333333333%; } - -.grid-push-5 { - margin-left: 41.6666666667%; } - -.grid-push-6 { - margin-left: 50%; } - -.grid-push-7 { - margin-left: 58.3333333333%; } - -.grid-push-8 { - margin-left: 66.6666666667%; } - -.grid-push-9 { - margin-left: 75%; } - -.grid-push-10 { - margin-left: 83.3333333333%; } - -.grid-push-11 { - margin-left: 91.6666666667%; } - -@media (min-width: 576px) { - .grid-sm-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-sm-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-sm-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-sm-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-sm-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-sm-0 { - margin-left: 0; } - .grid-push-sm-1 { - margin-left: 8.3333333333%; } - .grid-push-sm-2 { - margin-left: 16.6666666667%; } - .grid-push-sm-3 { - margin-left: 25%; } - .grid-push-sm-4 { - margin-left: 33.3333333333%; } - .grid-push-sm-5 { - margin-left: 41.6666666667%; } - .grid-push-sm-6 { - margin-left: 50%; } - .grid-push-sm-7 { - margin-left: 58.3333333333%; } - .grid-push-sm-8 { - margin-left: 66.6666666667%; } - .grid-push-sm-9 { - margin-left: 75%; } - .grid-push-sm-10 { - margin-left: 83.3333333333%; } - .grid-push-sm-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 768px) { - .grid-md-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-md-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-md-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-md-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-md-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-md-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-md-0 { - margin-left: 0; } - .grid-push-md-1 { - margin-left: 8.3333333333%; } - .grid-push-md-2 { - margin-left: 16.6666666667%; } - .grid-push-md-3 { - margin-left: 25%; } - .grid-push-md-4 { - margin-left: 33.3333333333%; } - .grid-push-md-5 { - margin-left: 41.6666666667%; } - .grid-push-md-6 { - margin-left: 50%; } - .grid-push-md-7 { - margin-left: 58.3333333333%; } - .grid-push-md-8 { - margin-left: 66.6666666667%; } - .grid-push-md-9 { - margin-left: 75%; } - .grid-push-md-10 { - margin-left: 83.3333333333%; } - .grid-push-md-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 992px) { - .grid-lg-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-lg-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-lg-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-lg-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-lg-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-lg-0 { - margin-left: 0; } - .grid-push-lg-1 { - margin-left: 8.3333333333%; } - .grid-push-lg-2 { - margin-left: 16.6666666667%; } - .grid-push-lg-3 { - margin-left: 25%; } - .grid-push-lg-4 { - margin-left: 33.3333333333%; } - .grid-push-lg-5 { - margin-left: 41.6666666667%; } - .grid-push-lg-6 { - margin-left: 50%; } - .grid-push-lg-7 { - margin-left: 58.3333333333%; } - .grid-push-lg-8 { - margin-left: 66.6666666667%; } - .grid-push-lg-9 { - margin-left: 75%; } - .grid-push-lg-10 { - margin-left: 83.3333333333%; } - .grid-push-lg-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 1200px) { - .grid-xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-xl-0 { - margin-left: 0; } - .grid-push-xl-1 { - margin-left: 8.3333333333%; } - .grid-push-xl-2 { - margin-left: 16.6666666667%; } - .grid-push-xl-3 { - margin-left: 25%; } - .grid-push-xl-4 { - margin-left: 33.3333333333%; } - .grid-push-xl-5 { - margin-left: 41.6666666667%; } - .grid-push-xl-6 { - margin-left: 50%; } - .grid-push-xl-7 { - margin-left: 58.3333333333%; } - .grid-push-xl-8 { - margin-left: 66.6666666667%; } - .grid-push-xl-9 { - margin-left: 75%; } - .grid-push-xl-10 { - margin-left: 83.3333333333%; } - .grid-push-xl-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 1500px) { - .grid-2xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-2xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-2xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-2xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-2xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-2xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-2xl-0 { - margin-left: 0; } - .grid-push-2xl-1 { - margin-left: 8.3333333333%; } - .grid-push-2xl-2 { - margin-left: 16.6666666667%; } - .grid-push-2xl-3 { - margin-left: 25%; } - .grid-push-2xl-4 { - margin-left: 33.3333333333%; } - .grid-push-2xl-5 { - margin-left: 41.6666666667%; } - .grid-push-2xl-6 { - margin-left: 50%; } - .grid-push-2xl-7 { - margin-left: 58.3333333333%; } - .grid-push-2xl-8 { - margin-left: 66.6666666667%; } - .grid-push-2xl-9 { - margin-left: 75%; } - .grid-push-2xl-10 { - margin-left: 83.3333333333%; } - .grid-push-2xl-11 { - margin-left: 91.6666666667%; } } - -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } -/*# sourceMappingURL=decanter-no-markup.css.map */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJkZWNhbnRlci1uby1tYXJrdXAuY3NzIn0= */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index fce82d10b..f687a06b3 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -303,780 +303,532 @@ template { [hidden] { display: none; } -.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, -.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, -.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, -.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, -.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, -.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, -.grid-2xl-auto { +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); + font-style: normal; + font-weight: 200; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 200; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont.woff") format("woff"); + font-style: normal; + font-weight: 300; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 300; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 400; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 600; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 700; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont.woff") format("woff"); + font-style: normal; + font-weight: 900; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 900; } + +@font-face { + font-family: "Stanford"; + src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); + font-weight: 300; } + +.flex-container { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: auto; + max-width: 1500px; + padding-right: 1.5rem; + padding-left: 1.5rem; } + @media only screen and (min-width: 768px) { + .flex-container { + padding-right: 3rem; + padding-left: 3rem; } } + +.flex-1-of-12, .flex-2-of-12, .flex-3-of-12, .flex-4-of-12, .flex-5-of-12, .flex-6-of-12, .flex-7-of-12, .flex-8-of-12, .flex-9-of-12, .flex-10-of-12, .flex-11-of-12, .flex-12-of-12, .flex-of-12, +.flex-auto, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-sm-of-12, +.flex-sm-auto, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-md-of-12, +.flex-md-auto, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-lg-of-12, +.flex-lg-auto, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-xl-of-12, +.flex-xl-auto, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12, .flex-2xl-of-12, +.flex-2xl-auto { position: relative; width: 100%; min-height: 1px; padding: 1rem; } -.grid-of-12 { +.flex-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } -.grid-auto { +.flex-auto { flex: 0 0 auto; width: auto; max-width: none; } -.grid-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } +.flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } -.grid-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } +.flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } -.grid-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } +.flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } -.grid-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } +.flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } -.grid-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } +.flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } -.grid-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } +.flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } -.grid-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } +.flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } -.grid-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } +.flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } -.grid-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } +.flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } -.grid-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } +.flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } -.grid-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } +.flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } -.grid-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } +.flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } -.grid-push-1 { +.flex-push-1 { margin-left: 8.3333333333%; } -.grid-push-2 { +.flex-push-2 { margin-left: 16.6666666667%; } -.grid-push-3 { +.flex-push-3 { margin-left: 25%; } -.grid-push-4 { +.flex-push-4 { margin-left: 33.3333333333%; } -.grid-push-5 { +.flex-push-5 { margin-left: 41.6666666667%; } -.grid-push-6 { +.flex-push-6 { margin-left: 50%; } -.grid-push-7 { +.flex-push-7 { margin-left: 58.3333333333%; } -.grid-push-8 { +.flex-push-8 { margin-left: 66.6666666667%; } -.grid-push-9 { +.flex-push-9 { margin-left: 75%; } -.grid-push-10 { +.flex-push-10 { margin-left: 83.3333333333%; } -.grid-push-11 { +.flex-push-11 { margin-left: 91.6666666667%; } @media (min-width: 576px) { - .grid-sm-of-12 { + .flex-sm-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-sm-auto { + .flex-sm-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-sm-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-sm-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-sm-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-sm-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-sm-0 { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-sm-0 { margin-left: 0; } - .grid-push-sm-1 { + .flex-push-sm-1 { margin-left: 8.3333333333%; } - .grid-push-sm-2 { + .flex-push-sm-2 { margin-left: 16.6666666667%; } - .grid-push-sm-3 { + .flex-push-sm-3 { margin-left: 25%; } - .grid-push-sm-4 { + .flex-push-sm-4 { margin-left: 33.3333333333%; } - .grid-push-sm-5 { + .flex-push-sm-5 { margin-left: 41.6666666667%; } - .grid-push-sm-6 { + .flex-push-sm-6 { margin-left: 50%; } - .grid-push-sm-7 { + .flex-push-sm-7 { margin-left: 58.3333333333%; } - .grid-push-sm-8 { + .flex-push-sm-8 { margin-left: 66.6666666667%; } - .grid-push-sm-9 { + .flex-push-sm-9 { margin-left: 75%; } - .grid-push-sm-10 { + .flex-push-sm-10 { margin-left: 83.3333333333%; } - .grid-push-sm-11 { + .flex-push-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 768px) { - .grid-md-of-12 { + .flex-md-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-md-auto { + .flex-md-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-md-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-md-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-md-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-md-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-md-0 { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-md-0 { margin-left: 0; } - .grid-push-md-1 { + .flex-push-md-1 { margin-left: 8.3333333333%; } - .grid-push-md-2 { + .flex-push-md-2 { margin-left: 16.6666666667%; } - .grid-push-md-3 { + .flex-push-md-3 { margin-left: 25%; } - .grid-push-md-4 { + .flex-push-md-4 { margin-left: 33.3333333333%; } - .grid-push-md-5 { + .flex-push-md-5 { margin-left: 41.6666666667%; } - .grid-push-md-6 { + .flex-push-md-6 { margin-left: 50%; } - .grid-push-md-7 { + .flex-push-md-7 { margin-left: 58.3333333333%; } - .grid-push-md-8 { + .flex-push-md-8 { margin-left: 66.6666666667%; } - .grid-push-md-9 { + .flex-push-md-9 { margin-left: 75%; } - .grid-push-md-10 { + .flex-push-md-10 { margin-left: 83.3333333333%; } - .grid-push-md-11 { + .flex-push-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 992px) { - .grid-lg-of-12 { + .flex-lg-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-lg-auto { + .flex-lg-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-lg-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-lg-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-lg-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-lg-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-lg-0 { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-lg-0 { margin-left: 0; } - .grid-push-lg-1 { + .flex-push-lg-1 { margin-left: 8.3333333333%; } - .grid-push-lg-2 { + .flex-push-lg-2 { margin-left: 16.6666666667%; } - .grid-push-lg-3 { + .flex-push-lg-3 { margin-left: 25%; } - .grid-push-lg-4 { + .flex-push-lg-4 { margin-left: 33.3333333333%; } - .grid-push-lg-5 { + .flex-push-lg-5 { margin-left: 41.6666666667%; } - .grid-push-lg-6 { + .flex-push-lg-6 { margin-left: 50%; } - .grid-push-lg-7 { + .flex-push-lg-7 { margin-left: 58.3333333333%; } - .grid-push-lg-8 { + .flex-push-lg-8 { margin-left: 66.6666666667%; } - .grid-push-lg-9 { + .flex-push-lg-9 { margin-left: 75%; } - .grid-push-lg-10 { + .flex-push-lg-10 { margin-left: 83.3333333333%; } - .grid-push-lg-11 { + .flex-push-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1200px) { - .grid-xl-of-12 { + .flex-xl-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-xl-auto { + .flex-xl-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-xl-0 { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } + .flex-xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } + .flex-xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-xl-0 { margin-left: 0; } - .grid-push-xl-1 { + .flex-push-xl-1 { margin-left: 8.3333333333%; } - .grid-push-xl-2 { + .flex-push-xl-2 { margin-left: 16.6666666667%; } - .grid-push-xl-3 { + .flex-push-xl-3 { margin-left: 25%; } - .grid-push-xl-4 { + .flex-push-xl-4 { margin-left: 33.3333333333%; } - .grid-push-xl-5 { + .flex-push-xl-5 { margin-left: 41.6666666667%; } - .grid-push-xl-6 { + .flex-push-xl-6 { margin-left: 50%; } - .grid-push-xl-7 { + .flex-push-xl-7 { margin-left: 58.3333333333%; } - .grid-push-xl-8 { + .flex-push-xl-8 { margin-left: 66.6666666667%; } - .grid-push-xl-9 { + .flex-push-xl-9 { margin-left: 75%; } - .grid-push-xl-10 { + .flex-push-xl-10 { margin-left: 83.3333333333%; } - .grid-push-xl-11 { + .flex-push-xl-11 { margin-left: 91.6666666667%; } } @media (min-width: 1500px) { - .grid-2xl-of-12 { + .flex-2xl-of-12 { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .grid-2xl-auto { + .flex-2xl-auto { flex: 0 0 auto; width: auto; max-width: none; } - .grid-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-2xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-2xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-2xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-2xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-2xl-0 { + .flex-2xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } + .flex-2xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } + .flex-2xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } + .flex-2xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } + .flex-2xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } + .flex-2xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } + .flex-2xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } + .flex-2xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } + .flex-2xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } + .flex-2xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } + .flex-2xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } + .flex-2xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } + .flex-push-2xl-0 { margin-left: 0; } - .grid-push-2xl-1 { + .flex-push-2xl-1 { margin-left: 8.3333333333%; } - .grid-push-2xl-2 { + .flex-push-2xl-2 { margin-left: 16.6666666667%; } - .grid-push-2xl-3 { + .flex-push-2xl-3 { margin-left: 25%; } - .grid-push-2xl-4 { + .flex-push-2xl-4 { margin-left: 33.3333333333%; } - .grid-push-2xl-5 { + .flex-push-2xl-5 { margin-left: 41.6666666667%; } - .grid-push-2xl-6 { + .flex-push-2xl-6 { margin-left: 50%; } - .grid-push-2xl-7 { + .flex-push-2xl-7 { margin-left: 58.3333333333%; } - .grid-push-2xl-8 { + .flex-push-2xl-8 { margin-left: 66.6666666667%; } - .grid-push-2xl-9 { + .flex-push-2xl-9 { margin-left: 75%; } - .grid-push-2xl-10 { + .flex-push-2xl-10 { margin-left: 83.3333333333%; } - .grid-push-2xl-11 { + .flex-push-2xl-11 { margin-left: 91.6666666667%; } } -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); - font-style: normal; - font-weight: 200; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 200; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont.woff") format("woff"); - font-style: normal; - font-weight: 300; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 300; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 400; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 600; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 700; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont.woff") format("woff"); - font-style: normal; - font-weight: 900; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 900; } - -@font-face { - font-family: "Stanford"; - src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); - font-weight: 300; } - -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } - -.grid--1-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--1-of-12 { - width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 992px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 1200px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 33px); } } - @media only screen and (min-width: 1500px) { - .grid--1-of-12 { - width: calc(8.3333333333% - 34.8333333333px); } } - -.grid--2-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--2-of-12 { - width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 992px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 1200px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 30px); } } - @media only screen and (min-width: 1500px) { - .grid--2-of-12 { - width: calc(16.6666666667% - 31.6666666667px); } } - -.grid--3-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--3-of-12 { - width: calc(25% - 24px); } } - @media only screen and (min-width: 576px) { - .grid--3-of-12 { - width: calc(25% - 24px); } } - @media only screen and (min-width: 768px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 992px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 1200px) { - .grid--3-of-12 { - width: calc(25% - 27px); } } - @media only screen and (min-width: 1500px) { - .grid--3-of-12 { - width: calc(25% - 28.5px); } } - -.grid--4-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--4-of-12 { - width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 992px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 1200px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 24px); } } - @media only screen and (min-width: 1500px) { - .grid--4-of-12 { - width: calc(33.3333333333% - 25.3333333333px); } } - -.grid--5-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--5-of-12 { - width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 992px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 1200px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 21px); } } - @media only screen and (min-width: 1500px) { - .grid--5-of-12 { - width: calc(41.6666666667% - 22.1666666667px); } } - -.grid--6-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--6-of-12 { - width: calc(50% - 16px); } } - @media only screen and (min-width: 576px) { - .grid--6-of-12 { - width: calc(50% - 16px); } } - @media only screen and (min-width: 768px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 992px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 1200px) { - .grid--6-of-12 { - width: calc(50% - 18px); } } - @media only screen and (min-width: 1500px) { - .grid--6-of-12 { - width: calc(50% - 19px); } } - -.grid--7-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--7-of-12 { - width: calc(58.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 992px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 1200px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15px); } } - @media only screen and (min-width: 1500px) { - .grid--7-of-12 { - width: calc(58.3333333333% - 15.8333333333px); } } - -.grid--8-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 10.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 992px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 1200px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12px); } } - @media only screen and (min-width: 1500px) { - .grid--8-of-12 { - width: calc(66.6666666667% - 12.6666666667px); } } - -.grid--9-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--9-of-12 { - width: calc(75% - 8px); } } - @media only screen and (min-width: 576px) { - .grid--9-of-12 { - width: calc(75% - 8px); } } - @media only screen and (min-width: 768px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 992px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 1200px) { - .grid--9-of-12 { - width: calc(75% - 9px); } } - @media only screen and (min-width: 1500px) { - .grid--9-of-12 { - width: calc(75% - 9.5px); } } - -.grid--10-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--10-of-12 { - width: calc(83.3333333333% - 5.3333333333px); } } - @media only screen and (min-width: 576px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 5.3333333333px); } } - @media only screen and (min-width: 768px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 992px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 1200px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6px); } } - @media only screen and (min-width: 1500px) { - .grid--10-of-12 { - width: calc(83.3333333333% - 6.3333333333px); } } - -.grid--11-of-12 { - width: 100%; } - @media only screen and (min-width: 0) { - .grid--11-of-12 { - width: calc(91.6666666667% - 2.6666666667px); } } - @media only screen and (min-width: 576px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 2.6666666667px); } } - @media only screen and (min-width: 768px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 992px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 1200px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3px); } } - @media only screen and (min-width: 1500px) { - .grid--11-of-12 { - width: calc(91.6666666667% - 3.1666666667px); } } - -.grid--12-of-12 { - width: 100%; } - .su-sr-only { position: absolute; left: -999em; } @@ -1532,41 +1284,25 @@ dfn { margin-top: 0; } .layout--ibeam > section { - margin: 0 auto; - margin: 32px; } + margin: 0 auto; } @media only screen and (min-width: 0) { .layout--ibeam > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--ibeam > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--ibeam > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--ibeam > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--ibeam > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--ibeam > section { - max-width: 1500px; } } - @media only screen and (min-width: 1500px) { - .layout--ibeam > section { - margin: 38px; } } - @media only screen and (min-width: 1200px) { - .layout--ibeam > section { - margin: 36px; } } - @media only screen and (min-width: 992px) { - .layout--ibeam > section { - margin: 36px; } } - @media only screen and (min-width: 768px) { - .layout--ibeam > section { - margin: 36px; } } - @media only screen and (min-width: 576px) { - .layout--ibeam > section { - margin: 32px; } } + max-width: 1462px; } } .layout--bricks .layout__columns { margin: 0 auto; @@ -1574,22 +1310,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bricks .layout__columns { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--bricks .layout__columns { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--bricks .layout__columns { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--bricks .layout__columns { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--bricks .layout__columns { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--bricks .layout__columns { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--bricks .layout__columns { -ms-grid-columns: 1fr; @@ -1724,28 +1460,25 @@ dfn { margin-bottom: 0; } } } .layout--molive > header { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; } - .layout--molive > header > :first-child { - grid-column: 2; } + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--molive > header { + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--molive > header { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--molive > header { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--molive > header { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--molive > header { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout--molive > header { + max-width: 1462px; } } .layout--molive > section { margin: 0 auto; @@ -1753,22 +1486,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--molive > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--molive > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--molive > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--molive > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--molive > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--molive > section { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--molive > section { -ms-grid-columns: 1fr; @@ -1903,28 +1636,25 @@ dfn { margin-bottom: 0; } } } .layout--molive > footer { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; } - .layout--molive > footer > :first-child { - grid-column: 2; } + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout--molive > footer { + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--molive > footer { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--molive > footer { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--molive > footer { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--molive > footer { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout--molive > footer { + max-width: 1462px; } } .layout--bars > div { margin: 0 auto; @@ -1932,22 +1662,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--bars > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--bars > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--bars > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--bars > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--bars > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--bars > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--bars > div { -ms-grid-columns: 1fr; @@ -2087,22 +1817,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--battleship > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--battleship > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--battleship > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--battleship > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--battleship > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--battleship > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--battleship > div { -ms-grid-columns: 1fr; @@ -2244,43 +1974,43 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-blastila > header { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-blastila > header { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-blastila > header { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-blastila > header { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-blastila > header { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-blastila > header { - max-width: 1500px; } } + max-width: 1462px; } } .layout-blastila > div { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-blastila > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-blastila > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-blastila > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-blastila > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-blastila > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-blastila > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-blastila > div > * { margin-right: 16px; @@ -2464,48 +2194,48 @@ dfn { @media only screen and (min-width: 0) { .layout--chess > header, .layout--chess > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--chess > header, .layout--chess > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--chess > header, .layout--chess > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--chess > header, .layout--chess > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--chess > header, .layout--chess > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--chess > header, .layout--chess > footer { - max-width: 1500px; } } + max-width: 1462px; } } .layout--chess > section { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--chess > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--chess > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--chess > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--chess > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--chess > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--chess > section { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--chess > section > * { margin-right: 16px; @@ -2635,22 +2365,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-cuttoner > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-cuttoner > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-cuttoner > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-cuttoner > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-cuttoner > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-cuttoner > div > * { margin-right: 16px; @@ -2925,22 +2655,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-percles > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-percles > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-percles > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-percles > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-percles > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-percles > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-percles > div > * { margin-right: 16px; @@ -3090,22 +2820,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--robot > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--robot > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--robot > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--robot > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--robot > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--robot > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--robot > div > * { margin-right: 16px; @@ -3239,22 +2969,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout--space-invader > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--space-invader > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--space-invader > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--space-invader > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--space-invader > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--space-invader > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--space-invader > div > * { margin-right: 16px; @@ -3384,22 +3114,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-sunset-delorean > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-sunset-delorean > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-sunset-delorean > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-sunset-delorean > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-sunset-delorean > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-sunset-delorean > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-sunset-delorean > div > * { margin-right: 16px; @@ -3564,22 +3294,22 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-thions > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-thions > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-thions > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-thions > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-thions > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-thions > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-thions > div > * { margin-right: 16px; @@ -3784,32 +3514,32 @@ dfn { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-valmer > header > *, .layout-valmer > footer > *, @@ -4027,32 +3757,32 @@ dfn { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--donies > section, .layout--donies > header, .layout--donies > footer { - max-width: 1500px; } } + max-width: 1462px; } } .layout--donies > section { display: grid; @@ -4200,37 +3930,37 @@ dfn { .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--frogger > div, .layout--frogger > section, .layout--frogger > header, .layout--frogger > footer { - max-width: 1500px; } } + max-width: 1462px; } } .layout--frogger > section { display: grid; @@ -4376,32 +4106,32 @@ dfn { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 1500px; } } + max-width: 1462px; } } .layout-pacman > div { display: grid; @@ -4572,32 +4302,32 @@ dfn { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 1500px; } } + max-width: 1462px; } } .layout-plakes > div { display: grid; @@ -4784,22 +4514,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout--toucan > div { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--toucan > div { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--toucan > div { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--toucan > div { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--toucan > div { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--toucan > div { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout--toucan > div { -ms-grid-columns: 1fr; @@ -4939,22 +4669,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-trunks > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-trunks > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-trunks > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-trunks > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-trunks > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-trunks > section { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-trunks > section { -ms-grid-columns: 1fr; @@ -5119,22 +4849,22 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-wedge > section { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout-wedge > section { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout-wedge > section { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout-wedge > section { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout-wedge > section { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout-wedge > section { - max-width: 1500px; } } + max-width: 1462px; } } @media only screen and (min-width: 0) { .layout-wedge > section { -ms-grid-columns: 1fr; @@ -5313,32 +5043,32 @@ dfn { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .layout--basic > header, .layout--basic > section, .layout--basic > footer { - max-width: 1500px; } } + max-width: 1462px; } } .centered-container { display: grid; @@ -5810,22 +5540,22 @@ button, display: -ms-grid; } @media only screen and (min-width: 0) { .global-footer .global-footer__container { - max-width: 0; } } + max-width: -32px; } } @media only screen and (min-width: 576px) { .global-footer .global-footer__container { - max-width: 576px; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { - max-width: 768px; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .global-footer .global-footer__container { - max-width: 992px; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .global-footer .global-footer__container { - max-width: 1200px; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .global-footer .global-footer__container { - max-width: 1500px; } } + max-width: 1462px; } } .global-footer .global-footer__container > * { margin-right: 15px; margin-left: 15px; } diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss index 2895fc06b..9ce15cee1 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/grid/_flex-grid.scss @@ -6,56 +6,64 @@ // // Style guide: Core.FlexGrid -// The grid. -.grid--container { - @include flex-container; -} +// Generates grid classes if variable is set to true. +@if $grid-classes-enabled { -// Got classes if you want them. -.grid--1-of-12 { - @include grid--1-of-12; -} + .flex-container { + @include flex-container; + } -.grid--2-of-12 { - @include grid--2-of-12; -} + // Properties for all breakpoints. + %grid-column { + position: relative; + width: 100%; + min-height: 1px; + padding: 1rem; + } -.grid--3-of-12 { - @include grid--3-of-12; -} + @each $breakpoint in map-keys($grid-screens) { + $insert: breakpoint-insert($breakpoint, $grid-screens); + $gutter: map-get($grid-gutters, $breakpoint); -.grid--4-of-12 { - @include grid--4-of-12; -} + // Allow columns to stretch full width below their breakpoints. + @for $n from 1 through $grid-columns { + .flex#{$insert}-#{$n}-of-12 { + @extend %grid-column; + } + } + .flex#{$insert}-of-12, + .flex#{$insert}-auto { + @extend %grid-column; + } -.grid--5-of-12 { - @include grid--5-of-12; -} + @include grid-media-min($breakpoint, $grid-screens) { -.grid--6-of-12 { - @include grid--6-of-12; -} + // Provide .flex-{bp}-of-12 classes for equal width flexbox columns. + .flex#{$insert}-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .flex#{$insert}-auto { + flex: 0 0 auto; + width: auto; + max-width: none; + } -.grid--7-of-12 { - @include grid--7-of-12; -} + @for $n from 1 through $grid-columns { + .flex#{$insert}-#{$n}-of-12 { + @include flex-column($n, $gutter, $grid-columns); + } + } -.grid--8-of-12 { - @include grid--8-of-12; -} - -.grid--9-of-12 { - @include grid--9-of-12; -} - -.grid--10-of-12 { - @include grid--10-of-12; -} - -.grid--11-of-12 { - @include grid--11-of-12; -} + @for $n from 0 through ($grid-columns - 1) { + @if not ($insert == "" and $n == 0) { // No .flex-push-0. + .flex-push#{$insert}-#{$n} { + @include flex-grid-push($n, $grid-columns); + } + } + } + } + } -.grid--12-of-12 { - @include grid--12-of-12; } diff --git a/core/scss/core/grid/index.scss b/core/scss/core/grid/index.scss index cdd8b3938..5d0c5062d 100644 --- a/core/scss/core/grid/index.scss +++ b/core/scss/core/grid/index.scss @@ -1,8 +1,3 @@ -@charset "UTF-8"; +@charset 'UTF-8'; -/// -/// ROLL UP -/// - -@import - 'flex-grid'; +@import 'flex-grid'; diff --git a/core/scss/layout/four-column/_molive.scss b/core/scss/layout/four-column/_molive.scss index 8eac26cda..47be69498 100644 --- a/core/scss/layout/four-column/_molive.scss +++ b/core/scss/layout/four-column/_molive.scss @@ -14,7 +14,7 @@ // A centered column that spans the max-width of the breakpoint. > header { - @include centered-grid-container; + @include centered-column; } // A centered column broken in to four equal parts. @@ -27,6 +27,6 @@ // A centered column that spans the max-width of the breakpoint. > footer { - @include centered-grid-container; + @include centered-column; } } diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss index 28bf5d87c..70b71d0b7 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/full-width/_ibeam.scss @@ -13,6 +13,5 @@ .layout--ibeam { > section { @include centered-column; - @include modular-margin; } } diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss b/core/scss/utilities/functions/flex/_breakpoint-insert.scss similarity index 100% rename from core/scss/utilities/functions/flex/_zzz-breakpoint-insert.scss rename to core/scss/utilities/functions/flex/_breakpoint-insert.scss diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss b/core/scss/utilities/functions/flex/_breakpoint-max.scss similarity index 100% rename from core/scss/utilities/functions/flex/_zzz-breakpoint-max.scss rename to core/scss/utilities/functions/flex/_breakpoint-max.scss diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss b/core/scss/utilities/functions/flex/_breakpoint-min.scss similarity index 100% rename from core/scss/utilities/functions/flex/_zzz-breakpoint-min.scss rename to core/scss/utilities/functions/flex/_breakpoint-min.scss diff --git a/core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss b/core/scss/utilities/functions/flex/_breakpoint-next.scss similarity index 100% rename from core/scss/utilities/functions/flex/_zzz-breakpoint-next.scss rename to core/scss/utilities/functions/flex/_breakpoint-next.scss diff --git a/core/scss/utilities/functions/flex/index.scss b/core/scss/utilities/functions/flex/index.scss index fba00a32c..34ee02882 100644 --- a/core/scss/utilities/functions/flex/index.scss +++ b/core/scss/utilities/functions/flex/index.scss @@ -7,10 +7,10 @@ // @import + 'breakpoint-insert', + 'breakpoint-max', + 'breakpoint-min', + 'breakpoint-next', 'flex-column-ratio', 'flex-column-width', - 'flex-parse-columns', - 'zzz-breakpoint-insert', - 'zzz-breakpoint-max', - 'zzz-breakpoint-min', - 'zzz-breakpoint-next'; + 'flex-parse-columns'; diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss similarity index 100% rename from core/scss/utilities/mixins/flex/_zzz-grid-media-between.scss rename to core/scss/utilities/mixins/breakpoint/_grid-media-between.scss diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss similarity index 100% rename from core/scss/utilities/mixins/flex/_zzz-grid-media-max.scss rename to core/scss/utilities/mixins/breakpoint/_grid-media-max.scss diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss similarity index 100% rename from core/scss/utilities/mixins/flex/_zzz-grid-media-min.scss rename to core/scss/utilities/mixins/breakpoint/_grid-media-min.scss diff --git a/core/scss/utilities/mixins/grid/_grid-media-only.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-only.scss similarity index 100% rename from core/scss/utilities/mixins/grid/_grid-media-only.scss rename to core/scss/utilities/mixins/breakpoint/_grid-media-only.scss diff --git a/core/scss/utilities/mixins/grid/_grid-media.scss b/core/scss/utilities/mixins/breakpoint/_grid-media.scss similarity index 100% rename from core/scss/utilities/mixins/grid/_grid-media.scss rename to core/scss/utilities/mixins/breakpoint/_grid-media.scss diff --git a/core/scss/utilities/mixins/breakpoint/index.scss b/core/scss/utilities/mixins/breakpoint/index.scss new file mode 100644 index 000000000..691e9728c --- /dev/null +++ b/core/scss/utilities/mixins/breakpoint/index.scss @@ -0,0 +1,10 @@ +@charset 'UTF-8'; + +// Roll up index file. + +@import + 'grid-media-between', + 'grid-media-max', + 'grid-media-min', + 'grid-media-only', + 'grid-media'; diff --git a/core/scss/utilities/mixins/grid/_centered-column.scss b/core/scss/utilities/mixins/display/_centered-column.scss similarity index 79% rename from core/scss/utilities/mixins/grid/_centered-column.scss rename to core/scss/utilities/mixins/display/_centered-column.scss index 3c97e365c..ee8aafef2 100644 --- a/core/scss/utilities/mixins/grid/_centered-column.scss +++ b/core/scss/utilities/mixins/display/_centered-column.scss @@ -7,12 +7,14 @@ // // Style guide: Mixins.Grid.centered-column // -@mixin centered-column($grid: $grid-media, $screens: $grid-screens) { +@mixin centered-column($grid: $grid-media, $screens: $grid-screens, $gutters: $grid-gutters) { @include margin(0 auto); @each $code, $breakpoint in $grid { $max-width: map-get($screens, $code); + $gutter: map-get($gutters, $code); + @media #{$breakpoint} { - max-width: $max-width; + max-width: $max-width - $gutter; } } diff --git a/core/scss/utilities/mixins/display/_overflow.scss b/core/scss/utilities/mixins/display/_overflow.scss deleted file mode 100644 index a3a4fff93..000000000 --- a/core/scss/utilities/mixins/display/_overflow.scss +++ /dev/null @@ -1,14 +0,0 @@ -@charset "UTF-8"; - -// -// @overflow($property) -// -// Specifies what should happen if content overflows an element's box. -// -// $property - visible (web default), scroll, hidden (mixin default), auto -// -// Style guide: Mixins.Display.overflow -// -@mixin overflow($property: hidden) { - overflow: $property; -} diff --git a/core/scss/utilities/mixins/display/index.scss b/core/scss/utilities/mixins/display/index.scss index 2ae04781e..bb8d8d616 100644 --- a/core/scss/utilities/mixins/display/index.scss +++ b/core/scss/utilities/mixins/display/index.scss @@ -9,6 +9,6 @@ // @import + 'centered-column', 'display-icon', - 'embed-container', - 'overflow'; + 'embed-container'; diff --git a/core/scss/utilities/mixins/flex/_flex-classes.scss b/core/scss/utilities/mixins/flex/_flex-classes.scss deleted file mode 100644 index 25f1bcb7e..000000000 --- a/core/scss/utilities/mixins/flex/_flex-classes.scss +++ /dev/null @@ -1,156 +0,0 @@ -@charset "UTF-8"; - -// -// @grid--1-of-12 -// -// Mixin to apply to an element that should occupy 1/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--1-of-12 -// - -@mixin grid--1-of-12 { - width: 100%; - @include responsive-flex-column(1 of 12); -} - -// -// @grid--2-of-12 -// -// Mixin to apply to an element that should occupy 2/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--2-of-12 -// - -@mixin grid--2-of-12 { - width: 100%; - @include responsive-flex-column(2 of 12); -} - -// -// @grid--3-of-12 -// -// Mixin to apply to an element that should occupy 3/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--3-of-12 -// - -@mixin grid--3-of-12 { - width: 100%; - @include responsive-flex-column(3); -} - -// -// @grid--4-of-12 -// -// Mixin to apply to an element that should occupy 4/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--4-of-12 -// - -@mixin grid--4-of-12 { - width: 100%; - @include responsive-flex-column(4); -} - -// -// @grid--5-of-12 -// -// Mixin to apply to an element that should occupy 5/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--5-of-12 -// - -@mixin grid--5-of-12 { - width: 100%; - @include responsive-flex-column(5 of 12); -} - -// -// @grid--6-of-12 -// -// Mixin to apply to an element that should occupy 6/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--6-of-12 -// - -@mixin grid--6-of-12 { - width: 100%; - @include responsive-flex-column(6); -} - -// -// @grid--7-of-12 -// -// Mixin to apply to an element that should occupy 7/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--7-of-12 -// - -@mixin grid--7-of-12 { - width: 100%; - @include responsive-flex-column(7 of 12); -} - -// -// @grid--8-of-12 -// -// Mixin to apply to an element that should occupy 8/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--8-of-12 -// - -@mixin grid--8-of-12 { - width: 100%; - @include responsive-flex-column(8 of 12); -} - -// -// @grid--9-of-12 -// -// Mixin to apply to an element that should occupy 9/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--9-of-12 -// - -@mixin grid--9-of-12 { - width: 100%; - @include responsive-flex-column(9 of 12); -} - -// -// @grid--10-of-12 -// -// Mixin to apply to an element that should occupy 10/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--10-of-12 -// - -@mixin grid--10-of-12 { - width: 100%; - @include responsive-flex-column(10 of 12); -} - -// -// @grid--11-of-12 -// -// Mixin to apply to an element that should occupy 11/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--11-of-12 -// - -@mixin grid--11-of-12 { - width: 100%; - @include responsive-flex-column(11); -} - -// -// @grid--12-of-12 -// -// Mixin to apply to an element that should occupy 12/12 of a class-based grid row. -// -// Style guide: Mixins.Flex.grid--12-of-12 -// - -@mixin grid--12-of-12 { - width: 100%; -} diff --git a/core/scss/utilities/mixins/flex/_flex-column.scss b/core/scss/utilities/mixins/flex/_flex-column.scss index c7b54ebeb..4f70a7d36 100644 --- a/core/scss/utilities/mixins/flex/_flex-column.scss +++ b/core/scss/utilities/mixins/flex/_flex-column.scss @@ -9,6 +9,7 @@ // // Style guide: Mixins.Flex.flex-column // -@mixin flex-column($columns, $gutter: $gutter-xs, $grid-columns: 12) { - width: calc(#{flex-column-width($columns, $gutter, $grid-columns)}); +@mixin flex-column($columns, $gutter: $gutter-xs, $grid-columns: $grid-columns) { + flex: 0 0 calc(#{flex-column-width($columns, $gutter, $grid-columns)}); + max-width: calc(#{flex-column-width($columns, $gutter, $grid-columns)}); } diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss b/core/scss/utilities/mixins/flex/_flex-grid-push.scss similarity index 66% rename from core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss rename to core/scss/utilities/mixins/flex/_flex-grid-push.scss index d35f2ec89..70eaf73f2 100755 --- a/core/scss/utilities/mixins/flex/_zzz-generate-grid-push.scss +++ b/core/scss/utilities/mixins/flex/_flex-grid-push.scss @@ -1,11 +1,11 @@ @charset "UTF-8"; // -// @generate-grid-push +// @flex-grid-push // // Pushes a grid column by changing its left margin. -@mixin generate-grid-push($size, $columns: $grid-columns) { +@mixin flex-grid-push($size, $columns: $grid-columns) { $number: $size / $columns; margin-left: if($number == 0, 0, percentage($number)); } diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss deleted file mode 100755 index 8e5fc9c80..000000000 --- a/core/scss/utilities/mixins/flex/_zzz-generate-grid-classes.scss +++ /dev/null @@ -1,71 +0,0 @@ -@charset "UTF-8"; - -// -// @generate-grid-classes -// -// The $grid-screens map defined in the grid variables file is used as the -// $breakpoints argument by default. -// - -// Generates grid classes given the value of the $grid-columns grid variable value. -@mixin generate-grid-classes($columns: $grid-columns, $breakpoints: $grid-screens) { - // Properties for all breakpoints. - %grid-column { - position: relative; - width: 100%; - min-height: 1px; - padding: 1rem; - } - - @each $breakpoint in map-keys($breakpoints) { - $insert: breakpoint-insert($breakpoint, $breakpoints); - - // Allow columns to stretch full width below their breakpoints. - @for $n from 1 through $columns { - .grid#{$insert}-#{$n}-of-12 { - @extend %grid-column; - } - } - .grid#{$insert}-of-12, - .grid#{$insert}-auto { - @extend %grid-column; - } - - @include grid-media-min($breakpoint, $breakpoints) { - // Provide .grid-{bp}-of-12 classes for equal width flexbox columns. - .grid#{$insert}-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .grid#{$insert}-auto { - flex: 0 0 auto; - width: auto; - max-width: none; - } - - @for $n from 1 through $columns { - .grid#{$insert}-#{$n}-of-12 { - @include generate-grid-column($n, $columns); - } - } - - @for $n from 0 through ($columns - 1) { - @if not ($insert == "" and $n == 0) { // No .grid-push-0. - .grid-push#{$insert}-#{$n} { - @include generate-grid-push($n, $columns); - } - } - } - } - } -} - -// Generates grid classes if variable is set to true. -@if $grid-classes-enabled { - @include generate-grid-classes(); - - .grid--container { - @include flex-container; - } -} diff --git a/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss b/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss deleted file mode 100644 index 3c4984d28..000000000 --- a/core/scss/utilities/mixins/flex/_zzz-generate-grid-column.scss +++ /dev/null @@ -1,10 +0,0 @@ -@charset "UTF-8"; - -// -// @generate-grid-column -// - -@mixin generate-grid-column($size, $columns: $grid-columns, $gutter: 36px) { - flex: 0 0 calc(#{percentage($size / $columns)} - #{$gutter}); - max-width: calc(#{percentage($size / $columns)} - #{$gutter}); -} diff --git a/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss b/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss deleted file mode 100755 index 6366c5e5f..000000000 --- a/core/scss/utilities/mixins/flex/_zzz-grid-media-only.scss +++ /dev/null @@ -1,26 +0,0 @@ -@charset "UTF-8"; - -// The $grid-screens map defined in the grid variables file is used as the -// $breakpoints argument by default. - -// Media query between the breakpoint's minimum and maximum widths. -// No minimum for the smallest breakpoint, and no maximum for the largest one. -// Applies only to the passed through breakpoint, not any wider or narrower. -@mixin grid-media-only($name, $breakpoints: $grid-screens) { - $min: breakpoint-min($name, $breakpoints); - $max: breakpoint-max($name, $breakpoints); - - @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { - @content; - } - } @else if $max == null { - @include grid-media-min($name, $breakpoints) { - @content; - } - } @else if $min == null { - @include grid-media-max($name, $breakpoints) { - @content; - } - } -} diff --git a/core/scss/utilities/mixins/flex/index.scss b/core/scss/utilities/mixins/flex/index.scss index 8fc015bd2..a3035dd94 100644 --- a/core/scss/utilities/mixins/flex/index.scss +++ b/core/scss/utilities/mixins/flex/index.scss @@ -7,15 +7,8 @@ // Style guide: Mixins.Flex // @import - 'flex-classes', 'flex-column', 'flex-container', 'responsive-flex-column', 'flex-container', - 'zzz-grid-media-min', - 'zzz-grid-media-max', - 'zzz-grid-media-between', - 'zzz-grid-media-only', - 'zzz-generate-grid-column', - 'zzz-generate-grid-push', - 'zzz-generate-grid-classes'; + 'flex-grid-push'; diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index ee84db127..c9be2bf14 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -9,15 +9,12 @@ // @import - 'centered-column', 'centered-grid-container', 'display-grid', 'grid-column-gap', 'grid-columns', 'grid-gap', 'grid-item-spans', - 'grid-media', - 'grid-media-only', 'grid-row-gap', 'grid-rows', 'responsive-grid-gap', diff --git a/core/scss/utilities/mixins/index.scss b/core/scss/utilities/mixins/index.scss index 8b03e4945..16222e35f 100644 --- a/core/scss/utilities/mixins/index.scss +++ b/core/scss/utilities/mixins/index.scss @@ -7,6 +7,7 @@ @import 'accessibility/index', 'button/index', + 'breakpoint/index', 'cta/index', 'display/index', 'flex/index', diff --git a/core/scss/utilities/mixins/quote/_quote.scss b/core/scss/utilities/mixins/quote/_quote.scss index 9a936c921..cb8b3391f 100644 --- a/core/scss/utilities/mixins/quote/_quote.scss +++ b/core/scss/utilities/mixins/quote/_quote.scss @@ -9,7 +9,7 @@ // @mixin quote { @include padding(1em); - @include overflow; + overflow: hidden; .su-quote__img { border-radius: 150px; diff --git a/core/scss/utilities/variables/core/_breakpoints.scss b/core/scss/utilities/variables/core/_breakpoints.scss index 5e9f8c9af..88c0b2c3a 100644 --- a/core/scss/utilities/variables/core/_breakpoints.scss +++ b/core/scss/utilities/variables/core/_breakpoints.scss @@ -170,6 +170,11 @@ $breakpoint-xl-only: 'only screen and (min-width: #{$screen-xl}) and (max-width: // Styleguide: Variables.Core.Breakpoints.2xl $breakpoint-2xl: 'only screen and (min-width: #{$screen-2xl})' !default; +// +// Just in case. +// +$breakpoint-2xl-only: $breakpoint-2xl; + ////////////////////////////////////////////////////////////////////////////// // diff --git a/core/templates/core/grid/grid.twig b/core/templates/core/grid/grid.twig index e5083a933..b3cd0329c 100644 --- a/core/templates/core/grid/grid.twig +++ b/core/templates/core/grid/grid.twig @@ -1,91 +1,91 @@

    Whole & Halves

    -
    -
    12/12
    +
    +
    12/12
    -
    -
    6/12
    -
    6/12
    +
    +
    6/12
    +
    6/12

    Thirds

    -
    -
    4/12
    -
    4/12
    -
    4/12
    +
    +
    4/12
    +
    4/12
    +
    4/12
    -
    -
    4/12
    -
    8/12
    +
    +
    4/12
    +
    8/12

    Fourths & Halves

    -
    -
    3/12
    -
    3/12
    -
    3/12
    -
    3/12
    +
    +
    3/12
    +
    3/12
    +
    3/12
    +
    3/12
    -
    -
    3/12
    -
    9/12
    +
    +
    3/12
    +
    9/12
    -
    -
    3/12
    -
    9/12
    -
    3/12
    +
    +
    3/12
    +
    9/12
    +
    3/12

    Sixths, Halves, and Thirds

    -
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    +
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    +
    2/12
    -
    -
    2/12
    -
    6/12
    -
    4/12
    +
    +
    2/12
    +
    6/12
    +
    4/12
    -
    -
    2/12
    -
    8/12
    -
    2/12
    +
    +
    2/12
    +
    8/12
    +
    2/12
    -
    -
    2/12
    -
    10/12
    +
    +
    2/12
    +
    10/12

    Twelfths

    -
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    +
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    +
    1/12
    -
    -
    5/12
    -
    7/12
    +
    +
    5/12
    +
    7/12
    diff --git a/core/templates/core/grid/zzz-flex-grid.html b/core/templates/core/grid/zzz-flex-grid.html index 2e76a1f5b..bf855b868 100644 --- a/core/templates/core/grid/zzz-flex-grid.html +++ b/core/templates/core/grid/zzz-flex-grid.html @@ -11,17 +11,17 @@ @@ -31,44 +31,44 @@
    -
    +

    Flex Grid

    -
    -
    .grid-4-of-12
    -
    .grid-4-of-12
    -
    .grid-4-of-12
    +
    +
    .flex-4-of-12
    +
    .flex-4-of-12
    +
    .flex-4-of-12
    -
    -
    .grid-sm-4-of-12
    -
    .grid-sm-4-of-12
    -
    .grid-sm-4-of-12
    +
    +
    .flex-sm-4-of-12
    +
    .flex-sm-4-of-12
    +
    .flex-sm-4-of-12
    -
    -
    .grid-md-4-of-12
    -
    .grid-md-4-of-12
    -
    .grid-md-4-of-12
    +
    +
    .flex-md-4-of-12
    +
    .flex-md-4-of-12
    +
    .flex-md-4-of-12
    -
    -
    .grid-lg-4-of-12
    -
    .grid-lg-4-of-12
    -
    .grid-lg-4-of-12
    +
    +
    .flex-lg-4-of-12
    +
    .flex-lg-4-of-12
    +
    .flex-lg-4-of-12
    -
    -
    .grid-xl-4-of-12
    -
    .grid-xl-4-of-12
    -
    .grid-xl-4-of-12
    +
    +
    .flex-xl-4-of-12
    +
    .flex-xl-4-of-12
    +
    .flex-xl-4-of-12
    -
    -
    .grid-2xl-4-of-12
    -
    .grid-2xl-4-of-12
    -
    .grid-2xl-4-of-12
    +
    +
    .flex-2xl-4-of-12
    +
    .flex-2xl-4-of-12
    +
    .flex-2xl-4-of-12
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 90da34555..0df9879e8 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -297,473 +297,6 @@ template { [hidden] { display: none; } -.grid-1-of-12, .grid-2-of-12, .grid-3-of-12, .grid-4-of-12, .grid-5-of-12, .grid-6-of-12, .grid-7-of-12, .grid-8-of-12, .grid-9-of-12, .grid-10-of-12, .grid-11-of-12, .grid-12-of-12, .grid-of-12, -.grid-auto, .grid-sm-1-of-12, .grid-sm-2-of-12, .grid-sm-3-of-12, .grid-sm-4-of-12, .grid-sm-5-of-12, .grid-sm-6-of-12, .grid-sm-7-of-12, .grid-sm-8-of-12, .grid-sm-9-of-12, .grid-sm-10-of-12, .grid-sm-11-of-12, .grid-sm-12-of-12, .grid-sm-of-12, -.grid-sm-auto, .grid-md-1-of-12, .grid-md-2-of-12, .grid-md-3-of-12, .grid-md-4-of-12, .grid-md-5-of-12, .grid-md-6-of-12, .grid-md-7-of-12, .grid-md-8-of-12, .grid-md-9-of-12, .grid-md-10-of-12, .grid-md-11-of-12, .grid-md-12-of-12, .grid-md-of-12, -.grid-md-auto, .grid-lg-1-of-12, .grid-lg-2-of-12, .grid-lg-3-of-12, .grid-lg-4-of-12, .grid-lg-5-of-12, .grid-lg-6-of-12, .grid-lg-7-of-12, .grid-lg-8-of-12, .grid-lg-9-of-12, .grid-lg-10-of-12, .grid-lg-11-of-12, .grid-lg-12-of-12, .grid-lg-of-12, -.grid-lg-auto, .grid-xl-1-of-12, .grid-xl-2-of-12, .grid-xl-3-of-12, .grid-xl-4-of-12, .grid-xl-5-of-12, .grid-xl-6-of-12, .grid-xl-7-of-12, .grid-xl-8-of-12, .grid-xl-9-of-12, .grid-xl-10-of-12, .grid-xl-11-of-12, .grid-xl-12-of-12, .grid-xl-of-12, -.grid-xl-auto, .grid-2xl-1-of-12, .grid-2xl-2-of-12, .grid-2xl-3-of-12, .grid-2xl-4-of-12, .grid-2xl-5-of-12, .grid-2xl-6-of-12, .grid-2xl-7-of-12, .grid-2xl-8-of-12, .grid-2xl-9-of-12, .grid-2xl-10-of-12, .grid-2xl-11-of-12, .grid-2xl-12-of-12, .grid-2xl-of-12, -.grid-2xl-auto { - position: relative; - width: 100%; - min-height: 1px; - padding: 1rem; } - -.grid-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - -.grid-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - -.grid-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - -.grid-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - -.grid-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - -.grid-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - -.grid-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - -.grid-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - -.grid-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - -.grid-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - -.grid-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - -.grid-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - -.grid-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - -.grid-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - -.grid-push-1 { - margin-left: 8.3333333333%; } - -.grid-push-2 { - margin-left: 16.6666666667%; } - -.grid-push-3 { - margin-left: 25%; } - -.grid-push-4 { - margin-left: 33.3333333333%; } - -.grid-push-5 { - margin-left: 41.6666666667%; } - -.grid-push-6 { - margin-left: 50%; } - -.grid-push-7 { - margin-left: 58.3333333333%; } - -.grid-push-8 { - margin-left: 66.6666666667%; } - -.grid-push-9 { - margin-left: 75%; } - -.grid-push-10 { - margin-left: 83.3333333333%; } - -.grid-push-11 { - margin-left: 91.6666666667%; } - -@media (min-width: 576px) { - .grid-sm-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-sm-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-sm-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-sm-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-sm-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-sm-0 { - margin-left: 0; } - .grid-push-sm-1 { - margin-left: 8.3333333333%; } - .grid-push-sm-2 { - margin-left: 16.6666666667%; } - .grid-push-sm-3 { - margin-left: 25%; } - .grid-push-sm-4 { - margin-left: 33.3333333333%; } - .grid-push-sm-5 { - margin-left: 41.6666666667%; } - .grid-push-sm-6 { - margin-left: 50%; } - .grid-push-sm-7 { - margin-left: 58.3333333333%; } - .grid-push-sm-8 { - margin-left: 66.6666666667%; } - .grid-push-sm-9 { - margin-left: 75%; } - .grid-push-sm-10 { - margin-left: 83.3333333333%; } - .grid-push-sm-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 768px) { - .grid-md-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-md-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-md-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-md-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-md-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-md-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-md-0 { - margin-left: 0; } - .grid-push-md-1 { - margin-left: 8.3333333333%; } - .grid-push-md-2 { - margin-left: 16.6666666667%; } - .grid-push-md-3 { - margin-left: 25%; } - .grid-push-md-4 { - margin-left: 33.3333333333%; } - .grid-push-md-5 { - margin-left: 41.6666666667%; } - .grid-push-md-6 { - margin-left: 50%; } - .grid-push-md-7 { - margin-left: 58.3333333333%; } - .grid-push-md-8 { - margin-left: 66.6666666667%; } - .grid-push-md-9 { - margin-left: 75%; } - .grid-push-md-10 { - margin-left: 83.3333333333%; } - .grid-push-md-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 992px) { - .grid-lg-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-lg-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-lg-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-lg-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-lg-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-lg-0 { - margin-left: 0; } - .grid-push-lg-1 { - margin-left: 8.3333333333%; } - .grid-push-lg-2 { - margin-left: 16.6666666667%; } - .grid-push-lg-3 { - margin-left: 25%; } - .grid-push-lg-4 { - margin-left: 33.3333333333%; } - .grid-push-lg-5 { - margin-left: 41.6666666667%; } - .grid-push-lg-6 { - margin-left: 50%; } - .grid-push-lg-7 { - margin-left: 58.3333333333%; } - .grid-push-lg-8 { - margin-left: 66.6666666667%; } - .grid-push-lg-9 { - margin-left: 75%; } - .grid-push-lg-10 { - margin-left: 83.3333333333%; } - .grid-push-lg-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 1200px) { - .grid-xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-xl-0 { - margin-left: 0; } - .grid-push-xl-1 { - margin-left: 8.3333333333%; } - .grid-push-xl-2 { - margin-left: 16.6666666667%; } - .grid-push-xl-3 { - margin-left: 25%; } - .grid-push-xl-4 { - margin-left: 33.3333333333%; } - .grid-push-xl-5 { - margin-left: 41.6666666667%; } - .grid-push-xl-6 { - margin-left: 50%; } - .grid-push-xl-7 { - margin-left: 58.3333333333%; } - .grid-push-xl-8 { - margin-left: 66.6666666667%; } - .grid-push-xl-9 { - margin-left: 75%; } - .grid-push-xl-10 { - margin-left: 83.3333333333%; } - .grid-push-xl-11 { - margin-left: 91.6666666667%; } } - -@media (min-width: 1500px) { - .grid-2xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .grid-2xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .grid-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 36px); - max-width: calc(8.3333333333% - 36px); } - .grid-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 36px); - max-width: calc(16.6666666667% - 36px); } - .grid-2xl-3-of-12 { - flex: 0 0 calc(25% - 36px); - max-width: calc(25% - 36px); } - .grid-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 36px); - max-width: calc(33.3333333333% - 36px); } - .grid-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 36px); - max-width: calc(41.6666666667% - 36px); } - .grid-2xl-6-of-12 { - flex: 0 0 calc(50% - 36px); - max-width: calc(50% - 36px); } - .grid-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 36px); - max-width: calc(58.3333333333% - 36px); } - .grid-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 36px); - max-width: calc(66.6666666667% - 36px); } - .grid-2xl-9-of-12 { - flex: 0 0 calc(75% - 36px); - max-width: calc(75% - 36px); } - .grid-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 36px); - max-width: calc(83.3333333333% - 36px); } - .grid-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 36px); - max-width: calc(91.6666666667% - 36px); } - .grid-2xl-12-of-12 { - flex: 0 0 calc(100% - 36px); - max-width: calc(100% - 36px); } - .grid-push-2xl-0 { - margin-left: 0; } - .grid-push-2xl-1 { - margin-left: 8.3333333333%; } - .grid-push-2xl-2 { - margin-left: 16.6666666667%; } - .grid-push-2xl-3 { - margin-left: 25%; } - .grid-push-2xl-4 { - margin-left: 33.3333333333%; } - .grid-push-2xl-5 { - margin-left: 41.6666666667%; } - .grid-push-2xl-6 { - margin-left: 50%; } - .grid-push-2xl-7 { - margin-left: 58.3333333333%; } - .grid-push-2xl-8 { - margin-left: 66.6666666667%; } - .grid-push-2xl-9 { - margin-left: 75%; } - .grid-push-2xl-10 { - margin-left: 83.3333333333%; } - .grid-push-2xl-11 { - margin-left: 91.6666666667%; } } - -.grid--container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - margin: auto; - max-width: 1500px; - padding-right: 1.5rem; - padding-left: 1.5rem; } - @media only screen and (min-width: 768px) { - .grid--container { - padding-right: 3rem; - padding-left: 3rem; } } - :root { --max_width: $site-max-width; --baseline: 3rem; @@ -826,6 +359,14 @@ template { --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; } } +@media (min-width: 1500px) { + :root { + --columns: 12; + --gutter: 38px; + --color: hsla(104, 40%, 32%, 0.2); + --color-text: hsla(104, 40%, 32%, 1); + --media-query: '2xl'; } } + #kss-node { padding-top: 40px; } #kss-node > .su-brand-bar { @@ -1384,7 +925,7 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } -.grid--container { +.flex-container { margin-bottom: 20px; } .flex-item { diff --git a/kss/builder/decanter/scss/_class-based-grid.scss b/kss/builder/decanter/scss/_class-based-grid.scss index b25d00cb3..779684461 100644 --- a/kss/builder/decanter/scss/_class-based-grid.scss +++ b/kss/builder/decanter/scss/_class-based-grid.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // Margins to aid in demonstration of markup. -.grid--container { +.flex-container { margin-bottom: 20px; } diff --git a/kss/builder/decanter/scss/_visible-grid.scss b/kss/builder/decanter/scss/_visible-grid.scss index 2e703cc2c..19ae4cade 100644 --- a/kss/builder/decanter/scss/_visible-grid.scss +++ b/kss/builder/decanter/scss/_visible-grid.scss @@ -122,3 +122,14 @@ --media-query: 'xl'; } } + +@media (min-width: $screen-2xl) { + :root { + --columns: #{$columns-2xl}; + --gutter: #{$gutter-2xl}; + // --offset: #{$gutter-xl}; + --color: hsla(104, 40%, 32%, 0.2); + --color-text: hsla(104, 40%, 32%, 1); + --media-query: '2xl'; + } +} From 72f54d30ab5eeae5e8a13f9bfa3de0886930ffa8 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 22 Nov 2018 11:27:23 -0800 Subject: [PATCH 045/123] Responsive gutters on flex columns. --- core/css/decanter-grid.css | 1571 +++++++++++--- core/css/decanter.css | 1803 +++++++++++++---- core/scss/core/grid/_flex-grid.scss | 127 +- .../breakpoint/_grid-media-between.scss | 14 +- .../mixins/breakpoint/_grid-media-max.scss | 13 +- .../mixins/breakpoint/_grid-media-min.scss | 13 +- .../mixins/breakpoint/_grid-media-only.scss | 2 +- .../mixins/breakpoint/_grid-media.scss | 2 +- .../utilities/mixins/flex/_flex-column.scss | 2 + .../mixins/flex/_flex-container.scss | 8 +- .../mixins/flex/_flex-grid-push.scss | 11 +- .../mixins/grid/_centered-grid-container.scss | 12 +- .../mixins/grid/_grid-column-gap.scss | 4 +- .../scss/utilities/mixins/grid/_grid-gap.scss | 4 +- .../utilities/mixins/grid/_grid-row-gap.scss | 4 +- .../variables/core/_breakpoints.scss | 122 -- core/scss/utilities/variables/core/_grid.scss | 39 +- .../utilities/variables/core/_gutter.scss | 89 + core/scss/utilities/variables/core/index.scss | 3 +- core/templates/core/grid/zzz-flex-grid.html | 56 + kss/builder/decanter/kss-assets/css/kss.css | 28 +- kss/builder/decanter/scss/_visible-grid.scss | 18 +- 22 files changed, 3038 insertions(+), 907 deletions(-) create mode 100644 core/scss/utilities/variables/core/_gutter.scss diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 6a7716f21..24f300130 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -43,98 +43,39 @@ body { min-height: 1px; padding: 1rem; } -.flex-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - -.flex-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - -.flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } - -.flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } - -.flex-3-of-12 { - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } - -.flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } - -.flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } - -.flex-6-of-12 { - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } - -.flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } - -.flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } - -.flex-9-of-12 { - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } - -.flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } - -.flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } - -.flex-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - -.flex-push-1 { - margin-left: 8.3333333333%; } - -.flex-push-2 { - margin-left: 16.6666666667%; } - -.flex-push-3 { - margin-left: 25%; } - -.flex-push-4 { - margin-left: 33.3333333333%; } - -.flex-push-5 { - margin-left: 41.6666666667%; } - -.flex-push-6 { - margin-left: 50%; } - -.flex-push-7 { - margin-left: 58.3333333333%; } - -.flex-push-8 { - margin-left: 66.6666666667%; } - -.flex-push-9 { - margin-left: 75%; } - -.flex-push-10 { - margin-left: 83.3333333333%; } - -.flex-push-11 { - margin-left: 91.6666666667%; } +@media only screen and (min-width: 0) { + .flex-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .flex-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .flex-push-1 { + margin-left: 8.3333333333%; } + .flex-push-2 { + margin-left: 16.6666666667%; } + .flex-push-3 { + margin-left: 25%; } + .flex-push-4 { + margin-left: 33.3333333333%; } + .flex-push-5 { + margin-left: 41.6666666667%; } + .flex-push-6 { + margin-left: 50%; } + .flex-push-7 { + margin-left: 58.3333333333%; } + .flex-push-8 { + margin-left: 66.6666666667%; } + .flex-push-9 { + margin-left: 75%; } + .flex-push-10 { + margin-left: 83.3333333333%; } + .flex-push-11 { + margin-left: 91.6666666667%; } } -@media (min-width: 576px) { +@media only screen and (min-width: 576px) { .flex-sm-of-12 { flex-basis: 0; flex-grow: 1; @@ -143,42 +84,6 @@ body { flex: 0 0 auto; width: auto; max-width: none; } - .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } - .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } - .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } - .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } - .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } - .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } - .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } - .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } - .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } - .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } - .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } - .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-sm-0 { margin-left: 0; } .flex-push-sm-1 { @@ -204,7 +109,7 @@ body { .flex-push-sm-11 { margin-left: 91.6666666667%; } } -@media (min-width: 768px) { +@media only screen and (min-width: 768px) { .flex-md-of-12 { flex-basis: 0; flex-grow: 1; @@ -213,42 +118,6 @@ body { flex: 0 0 auto; width: auto; max-width: none; } - .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } - .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-md-0 { margin-left: 0; } .flex-push-md-1 { @@ -274,7 +143,7 @@ body { .flex-push-md-11 { margin-left: 91.6666666667%; } } -@media (min-width: 992px) { +@media only screen and (min-width: 992px) { .flex-lg-of-12 { flex-basis: 0; flex-grow: 1; @@ -283,42 +152,6 @@ body { flex: 0 0 auto; width: auto; max-width: none; } - .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } - .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-lg-0 { margin-left: 0; } .flex-push-lg-1 { @@ -344,7 +177,7 @@ body { .flex-push-lg-11 { margin-left: 91.6666666667%; } } -@media (min-width: 1200px) { +@media only screen and (min-width: 1200px) { .flex-xl-of-12 { flex-basis: 0; flex-grow: 1; @@ -353,42 +186,6 @@ body { flex: 0 0 auto; width: auto; max-width: none; } - .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } - .flex-xl-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-xl-0 { margin-left: 0; } .flex-push-xl-1 { @@ -414,7 +211,7 @@ body { .flex-push-xl-11 { margin-left: 91.6666666667%; } } -@media (min-width: 1500px) { +@media only screen and (min-width: 1500px) { .flex-2xl-of-12 { flex-basis: 0; flex-grow: 1; @@ -423,42 +220,6 @@ body { flex: 0 0 auto; width: auto; max-width: none; } - .flex-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } - .flex-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } - .flex-2xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } - .flex-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } - .flex-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } - .flex-2xl-6-of-12 { - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } - .flex-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } - .flex-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } - .flex-2xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } - .flex-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } - .flex-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } - .flex-2xl-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-2xl-0 { margin-left: 0; } .flex-push-2xl-1 { @@ -483,4 +244,1264 @@ body { margin-left: 83.3333333333%; } .flex-push-2xl-11 { margin-left: 91.6666666667%; } } + +@media only screen and (min-width: 0) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 0) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 0) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 576px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 768px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 0) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 0) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 0) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 576px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 768px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 0) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 0) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 0) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 576px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 768px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 0) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 0) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 0) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 576px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index f687a06b3..e10dbd0b7 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -388,98 +388,39 @@ template { min-height: 1px; padding: 1rem; } -.flex-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - -.flex-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - -.flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } - -.flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } - -.flex-3-of-12 { - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } - -.flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } - -.flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } - -.flex-6-of-12 { - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } - -.flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } - -.flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } - -.flex-9-of-12 { - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } - -.flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } - -.flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } - -.flex-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - -.flex-push-1 { - margin-left: 8.3333333333%; } - -.flex-push-2 { - margin-left: 16.6666666667%; } - -.flex-push-3 { - margin-left: 25%; } - -.flex-push-4 { - margin-left: 33.3333333333%; } - -.flex-push-5 { - margin-left: 41.6666666667%; } - -.flex-push-6 { - margin-left: 50%; } - -.flex-push-7 { - margin-left: 58.3333333333%; } - -.flex-push-8 { - margin-left: 66.6666666667%; } - -.flex-push-9 { - margin-left: 75%; } - -.flex-push-10 { - margin-left: 83.3333333333%; } - -.flex-push-11 { - margin-left: 91.6666666667%; } +@media only screen and (min-width: 0) { + .flex-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .flex-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .flex-push-1 { + margin-left: 8.3333333333%; } + .flex-push-2 { + margin-left: 16.6666666667%; } + .flex-push-3 { + margin-left: 25%; } + .flex-push-4 { + margin-left: 33.3333333333%; } + .flex-push-5 { + margin-left: 41.6666666667%; } + .flex-push-6 { + margin-left: 50%; } + .flex-push-7 { + margin-left: 58.3333333333%; } + .flex-push-8 { + margin-left: 66.6666666667%; } + .flex-push-9 { + margin-left: 75%; } + .flex-push-10 { + margin-left: 83.3333333333%; } + .flex-push-11 { + margin-left: 91.6666666667%; } } -@media (min-width: 576px) { +@media only screen and (min-width: 576px) { .flex-sm-of-12 { flex-basis: 0; flex-grow: 1; @@ -488,42 +429,6 @@ template { flex: 0 0 auto; width: auto; max-width: none; } - .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } - .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } - .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } - .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } - .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } - .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } - .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } - .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } - .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } - .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } - .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } - .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } .flex-push-sm-0 { margin-left: 0; } .flex-push-sm-1 { @@ -549,7 +454,7 @@ template { .flex-push-sm-11 { margin-left: 91.6666666667%; } } -@media (min-width: 768px) { +@media only screen and (min-width: 768px) { .flex-md-of-12 { flex-basis: 0; flex-grow: 1; @@ -558,276 +463,1392 @@ template { flex: 0 0 auto; width: auto; max-width: none; } + .flex-push-md-0 { + margin-left: 0; } + .flex-push-md-1 { + margin-left: 8.3333333333%; } + .flex-push-md-2 { + margin-left: 16.6666666667%; } + .flex-push-md-3 { + margin-left: 25%; } + .flex-push-md-4 { + margin-left: 33.3333333333%; } + .flex-push-md-5 { + margin-left: 41.6666666667%; } + .flex-push-md-6 { + margin-left: 50%; } + .flex-push-md-7 { + margin-left: 58.3333333333%; } + .flex-push-md-8 { + margin-left: 66.6666666667%; } + .flex-push-md-9 { + margin-left: 75%; } + .flex-push-md-10 { + margin-left: 83.3333333333%; } + .flex-push-md-11 { + margin-left: 91.6666666667%; } } + +@media only screen and (min-width: 992px) { + .flex-lg-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .flex-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .flex-push-lg-0 { + margin-left: 0; } + .flex-push-lg-1 { + margin-left: 8.3333333333%; } + .flex-push-lg-2 { + margin-left: 16.6666666667%; } + .flex-push-lg-3 { + margin-left: 25%; } + .flex-push-lg-4 { + margin-left: 33.3333333333%; } + .flex-push-lg-5 { + margin-left: 41.6666666667%; } + .flex-push-lg-6 { + margin-left: 50%; } + .flex-push-lg-7 { + margin-left: 58.3333333333%; } + .flex-push-lg-8 { + margin-left: 66.6666666667%; } + .flex-push-lg-9 { + margin-left: 75%; } + .flex-push-lg-10 { + margin-left: 83.3333333333%; } + .flex-push-lg-11 { + margin-left: 91.6666666667%; } } + +@media only screen and (min-width: 1200px) { + .flex-xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .flex-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .flex-push-xl-0 { + margin-left: 0; } + .flex-push-xl-1 { + margin-left: 8.3333333333%; } + .flex-push-xl-2 { + margin-left: 16.6666666667%; } + .flex-push-xl-3 { + margin-left: 25%; } + .flex-push-xl-4 { + margin-left: 33.3333333333%; } + .flex-push-xl-5 { + margin-left: 41.6666666667%; } + .flex-push-xl-6 { + margin-left: 50%; } + .flex-push-xl-7 { + margin-left: 58.3333333333%; } + .flex-push-xl-8 { + margin-left: 66.6666666667%; } + .flex-push-xl-9 { + margin-left: 75%; } + .flex-push-xl-10 { + margin-left: 83.3333333333%; } + .flex-push-xl-11 { + margin-left: 91.6666666667%; } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-of-12 { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } + .flex-2xl-auto { + flex: 0 0 auto; + width: auto; + max-width: none; } + .flex-push-2xl-0 { + margin-left: 0; } + .flex-push-2xl-1 { + margin-left: 8.3333333333%; } + .flex-push-2xl-2 { + margin-left: 16.6666666667%; } + .flex-push-2xl-3 { + margin-left: 25%; } + .flex-push-2xl-4 { + margin-left: 33.3333333333%; } + .flex-push-2xl-5 { + margin-left: 41.6666666667%; } + .flex-push-2xl-6 { + margin-left: 50%; } + .flex-push-2xl-7 { + margin-left: 58.3333333333%; } + .flex-push-2xl-8 { + margin-left: 66.6666666667%; } + .flex-push-2xl-9 { + margin-left: 75%; } + .flex-push-2xl-10 { + margin-left: 83.3333333333%; } + .flex-push-2xl-11 { + margin-left: 91.6666666667%; } } + +@media only screen and (min-width: 0) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 768px) { .flex-md-1-of-12 { flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-md-11-of-12 { + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 992px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 33px); + max-width: calc(8.3333333333% - 33px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-1-of-12 { + flex: 0 0 calc(8.3333333333% - 34.8333333333px); + max-width: calc(8.3333333333% - 34.8333333333px); } } + +@media only screen and (min-width: 0) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 992px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 30px); + max-width: calc(16.6666666667% - 30px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-2-of-12 { + flex: 0 0 calc(16.6666666667% - 31.6666666667px); + max-width: calc(16.6666666667% - 31.6666666667px); } } + +@media only screen and (min-width: 0) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 576px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 768px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 992px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 27px); + max-width: calc(25% - 27px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-3-of-12 { + flex: 0 0 calc(25% - 28.5px); + max-width: calc(25% - 28.5px); } } + +@media only screen and (min-width: 0) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 992px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 24px); + max-width: calc(33.3333333333% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-4-of-12 { + flex: 0 0 calc(33.3333333333% - 25.3333333333px); + max-width: calc(33.3333333333% - 25.3333333333px); } } + +@media only screen and (min-width: 0) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 992px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 21px); + max-width: calc(41.6666666667% - 21px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-5-of-12 { + flex: 0 0 calc(41.6666666667% - 22.1666666667px); + max-width: calc(41.6666666667% - 22.1666666667px); } } + +@media only screen and (min-width: 0) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 576px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 768px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 992px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-6-of-12 { + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } + +@media only screen and (min-width: 0) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 992px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15px); + max-width: calc(58.3333333333% - 15px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-7-of-12 { + flex: 0 0 calc(58.3333333333% - 15.8333333333px); + max-width: calc(58.3333333333% - 15.8333333333px); } } + +@media only screen and (min-width: 0) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-8-of-12 { + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 0) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 576px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 768px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-9-of-12 { + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 0) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-10-of-12 { + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 0) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 992px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 1200px) { + .flex-xl-11-of-12 { flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-11-of-12 { + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 0) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 576px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 576px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-sm-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { .flex-md-12-of-12 { flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - .flex-push-md-0 { - margin-left: 0; } - .flex-push-md-1 { - margin-left: 8.3333333333%; } - .flex-push-md-2 { - margin-left: 16.6666666667%; } - .flex-push-md-3 { - margin-left: 25%; } - .flex-push-md-4 { - margin-left: 33.3333333333%; } - .flex-push-md-5 { - margin-left: 41.6666666667%; } - .flex-push-md-6 { - margin-left: 50%; } - .flex-push-md-7 { - margin-left: 58.3333333333%; } - .flex-push-md-8 { - margin-left: 66.6666666667%; } - .flex-push-md-9 { - margin-left: 75%; } - .flex-push-md-10 { - margin-left: 83.3333333333%; } - .flex-push-md-11 { - margin-left: 91.6666666667%; } } + max-width: calc(100% - 0px); } } -@media (min-width: 992px) { - .flex-lg-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .flex-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } +@media only screen and (min-width: 992px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-md-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { .flex-lg-12-of-12 { flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - .flex-push-lg-0 { - margin-left: 0; } - .flex-push-lg-1 { - margin-left: 8.3333333333%; } - .flex-push-lg-2 { - margin-left: 16.6666666667%; } - .flex-push-lg-3 { - margin-left: 25%; } - .flex-push-lg-4 { - margin-left: 33.3333333333%; } - .flex-push-lg-5 { - margin-left: 41.6666666667%; } - .flex-push-lg-6 { - margin-left: 50%; } - .flex-push-lg-7 { - margin-left: 58.3333333333%; } - .flex-push-lg-8 { - margin-left: 66.6666666667%; } - .flex-push-lg-9 { - margin-left: 75%; } - .flex-push-lg-10 { - margin-left: 83.3333333333%; } - .flex-push-lg-11 { - margin-left: 91.6666666667%; } } + max-width: calc(100% - 0px); } } -@media (min-width: 1200px) { - .flex-xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .flex-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } - .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } - .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } - .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } - .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } - .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } - .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } - .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } - .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } - .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } - .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } +@media only screen and (min-width: 1200px) { + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-lg-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { .flex-xl-12-of-12 { flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - .flex-push-xl-0 { - margin-left: 0; } - .flex-push-xl-1 { - margin-left: 8.3333333333%; } - .flex-push-xl-2 { - margin-left: 16.6666666667%; } - .flex-push-xl-3 { - margin-left: 25%; } - .flex-push-xl-4 { - margin-left: 33.3333333333%; } - .flex-push-xl-5 { - margin-left: 41.6666666667%; } - .flex-push-xl-6 { - margin-left: 50%; } - .flex-push-xl-7 { - margin-left: 58.3333333333%; } - .flex-push-xl-8 { - margin-left: 66.6666666667%; } - .flex-push-xl-9 { - margin-left: 75%; } - .flex-push-xl-10 { - margin-left: 83.3333333333%; } - .flex-push-xl-11 { - margin-left: 91.6666666667%; } } + max-width: calc(100% - 0px); } } -@media (min-width: 1500px) { - .flex-2xl-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; } - .flex-2xl-auto { - flex: 0 0 auto; - width: auto; - max-width: none; } - .flex-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } - .flex-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } - .flex-2xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } - .flex-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } - .flex-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } - .flex-2xl-6-of-12 { - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } - .flex-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } - .flex-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } - .flex-2xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } - .flex-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } - .flex-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } +@media only screen and (min-width: 1500px) { + .flex-xl-12-of-12 { + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { .flex-2xl-12-of-12 { flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } - .flex-push-2xl-0 { - margin-left: 0; } - .flex-push-2xl-1 { - margin-left: 8.3333333333%; } - .flex-push-2xl-2 { - margin-left: 16.6666666667%; } - .flex-push-2xl-3 { - margin-left: 25%; } - .flex-push-2xl-4 { - margin-left: 33.3333333333%; } - .flex-push-2xl-5 { - margin-left: 41.6666666667%; } - .flex-push-2xl-6 { - margin-left: 50%; } - .flex-push-2xl-7 { - margin-left: 58.3333333333%; } - .flex-push-2xl-8 { - margin-left: 66.6666666667%; } - .flex-push-2xl-9 { - margin-left: 75%; } - .flex-push-2xl-10 { - margin-left: 83.3333333333%; } - .flex-push-2xl-11 { - margin-left: 91.6666666667%; } } + max-width: calc(100% - 0px); } } .su-sr-only { position: absolute; @@ -5093,6 +6114,10 @@ dfn { .centered-container { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + .centered-container { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } .su-alert { padding: 2rem; @@ -5172,6 +6197,10 @@ dfn { .su-brand-bar { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + .su-brand-bar { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } .su-brand-bar__logo { display: inline-block; @@ -5557,11 +6586,11 @@ button, .global-footer .global-footer__container { max-width: 1462px; } } .global-footer .global-footer__container > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { .global-footer .global-footer__container { - grid-column-gap: 30px; } + grid-column-gap: 32px; } .global-footer .global-footer__container > * { margin-right: 0; margin-left: 0; } } diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss index 9ce15cee1..788037ced 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/grid/_flex-grid.scss @@ -6,64 +6,103 @@ // // Style guide: Core.FlexGrid -// Generates grid classes if variable is set to true. -@if $grid-classes-enabled { +// The container helper. +.flex-container { + @include flex-container; +} + +// Properties for all columns at all breakpoints. +%grid-column { + position: relative; + width: 100%; + min-height: 1px; + padding: 1rem; +} + +// Loop through each breakpoint to generate column and push classes +// For every column. +@each $_breakpoint, $_media-query in $grid-screens { - .flex-container { - @include flex-container; + // The breakpoint short code. eg: xs, sm, lg + $_insert: breakpoint-insert($_breakpoint, $grid-screens); + // The gutter size at this breakpoint. + $_gutter: map-get($grid-gutters, $_breakpoint); + + // For all breakpoints and columns create a default state. + @for $n from 1 through $grid-columns { + .flex#{$_insert}-#{$n}-of-#{$grid-columns} { + @extend %grid-column; + } } - // Properties for all breakpoints. - %grid-column { - position: relative; - width: 100%; - min-height: 1px; - padding: 1rem; + // Add a helper class for the default column state. + .flex#{$_insert}-of-#{$grid-columns}, + .flex#{$_insert}-auto { + @extend %grid-column; } - @each $breakpoint in map-keys($grid-screens) { - $insert: breakpoint-insert($breakpoint, $grid-screens); - $gutter: map-get($grid-gutters, $breakpoint); + // At each breakpoint create size and gutter specific settings for each + // column. + @include grid-media($_breakpoint) { - // Allow columns to stretch full width below their breakpoints. - @for $n from 1 through $grid-columns { - .flex#{$insert}-#{$n}-of-12 { - @extend %grid-column; - } - } - .flex#{$insert}-of-12, - .flex#{$insert}-auto { - @extend %grid-column; + // Provide .flex-{bp}-of-12 classes for equal width flexbox columns. + .flex#{$_insert}-of-#{$grid-columns} { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } - @include grid-media-min($breakpoint, $grid-screens) { + // @jgknox: Fix this comment. + .flex#{$_insert}-auto { + flex: 0 0 auto; + width: auto; + max-width: none; + } - // Provide .flex-{bp}-of-12 classes for equal width flexbox columns. - .flex#{$insert}-of-12 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .flex#{$insert}-auto { - flex: 0 0 auto; - width: auto; - max-width: none; + // Foreach of the columns at this breakpoint create a helper push class. + @for $n from 0 through ($grid-columns - 1) { + @if not ($_insert == "" and $n == 0) { // No .flex-push-0. + .flex-push#{$_insert}-#{$n} { + @include flex-grid-push($n, $grid-columns); + } } + } + } +} - @for $n from 1 through $grid-columns { - .flex#{$insert}-#{$n}-of-12 { - @include flex-column($n, $gutter, $grid-columns); - } +// Loop through each column and breakpoint creating a responsive flex column. +// The gutter sizes change as the breakpoints change so as the breakpoints +// get larger for each breakpoint class we have to adjust the gutter. +@for $n from 1 through $grid-columns { + + // Storage for breakpoint codes through each loop of columns. + $_codes: (); + + @each $_code, $_screen in $grid-screens { + + // The breakpoint short code. eg: xs, sm, lg with a dash + $_insert: breakpoint-insert($_code, $grid-screens); + + // The flex-breakpoint-column class. + .flex#{$_insert}-#{$n}-of-#{$grid-columns} { + + // Loop through the already used breakpoints and remove them + // from the grid map as we only want to create a responsive + // column for the current breakpoint and larger. Smaller screens + // collapse to 100%. + $_grids: $grid-media; + @each $sh in $_codes { + $_grids: map-remove($_grids, $sh); } - @for $n from 0 through ($grid-columns - 1) { - @if not ($insert == "" and $n == 0) { // No .flex-push-0. - .flex-push#{$insert}-#{$n} { - @include flex-grid-push($n, $grid-columns); - } - } + // Generate the media queries and column size. + @if (length($_grids) > 0) { + @include responsive-flex-column($n, $_grids); } + + // Add the current BP code to the storage for next round. + $_codes: append($_codes, $_code); + } } - } diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss index 22de26893..281680843 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss @@ -1,10 +1,16 @@ @charset "UTF-8"; -// The $grid-screens map defined in the grid variables file is used as the -// $breakpoints argument by default. - +// grid-media-between($lower, $upper, $breakpoints: $grid-screens) +// // Media query that spans multiple breakpoint widths (between the min and max breakpoints). -@mixin grid-media-between($lower, $upper, $breakpoints: $grid-screens) { +// +// $lower - The lower breakpoint key code eg: 'sm' +// $upper - The upper breakpoint key code eg: 'xl' +// $breakpoints - A map of each of the screen breakpoint sizes. +// +// Style guide: Mixins.Breakpoint.grid-media-between + +@mixin grid-media-between($lower: 'xs', $upper: 'sm', $breakpoints: $grid-screens) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss index 8dcfa3578..d59e7c3fc 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss @@ -1,11 +1,16 @@ @charset "UTF-8"; -// The $grid-screens map defined in the grid variables file is used as the -// $breakpoints argument by default. - +// grid-media-max($name, $breakpoints: $grid-screens) +// // Media query of at most the maximum breakpoint width. No query for the largest breakpoint. // Applies to the passed through breakpoint and below. -@mixin grid-media-max($name, $breakpoints: $grid-screens) { +// +// $name - The breakpoint key code eg: 'sm' +// $breakpoints - A map of each of the screen breakpoint sizes. +// +// Style guide: Mixins.Breakpoint.grid-media-max + +@mixin grid-media-max($name: 'xs', $breakpoints: $grid-screens) { $max: breakpoint-max($name, $breakpoints); @if $max { @media (max-width: $max) { diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss index de74a311b..35fb2dd68 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss @@ -1,10 +1,15 @@ @charset "UTF-8"; -// The $grid-screens map defined in the grid variables file is used as the -// $breakpoints argument by default. - -// Media query of at least the minimum breakpoint width. No query for the smallest breakpoint. +// grid-media-max($name, $breakpoints: $grid-screens) +// +// Media query of at least the minimum breakpoint width. +// No query for the smallest breakpoint. // Applies to the passed through breakpoint and above. +// +// $name - The breakpoint key code eg: 'sm' +// $breakpoints - A map of each of the screen breakpoint sizes. +// +// Style guide: Mixins.Breakpoint.grid-media-min @mixin grid-media-min($name, $breakpoints: $grid-screens) { $min: breakpoint-min($name, $breakpoints); @if $min { diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-only.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-only.scss index c43e7582c..cd4e48469 100644 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-only.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-only.scss @@ -7,7 +7,7 @@ // // $breakpoint - The breakpoint shortcode. Eg: xs // -// Style guide: Mixins.Grid.grid-media-only +// Style guide: Mixins.Breakpoint.grid-media-only // @mixin grid-media-only($breakpoint: 'xs') { @media #{map-get($grid-media-only, $breakpoint)} { diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media.scss b/core/scss/utilities/mixins/breakpoint/_grid-media.scss index a4a6553c0..bd1dcba99 100644 --- a/core/scss/utilities/mixins/breakpoint/_grid-media.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media.scss @@ -7,7 +7,7 @@ // // $breakpoint - The breakpoint shortcode. Eg: xs // -// Style guide: Mixins.Grid.grid-media +// Style guide: Mixins.Breakpoint.grid-media // @mixin grid-media($breakpoint: 'xs') { @media #{map-get($grid-media, $breakpoint)} { diff --git a/core/scss/utilities/mixins/flex/_flex-column.scss b/core/scss/utilities/mixins/flex/_flex-column.scss index 4f70a7d36..5386a7408 100644 --- a/core/scss/utilities/mixins/flex/_flex-column.scss +++ b/core/scss/utilities/mixins/flex/_flex-column.scss @@ -6,6 +6,8 @@ // Creates a grid column of requested size. // // $columns - list: Specifies the number of columns an element should span based on the total columns of the grid. eg: `3 of 5` +// $gutter - unit: A left and right spacing around the element +// $grid-columns - integer: The number of columns in the grid // // Style guide: Mixins.Flex.flex-column // diff --git a/core/scss/utilities/mixins/flex/_flex-container.scss b/core/scss/utilities/mixins/flex/_flex-container.scss index 963befb4c..cf4583c1f 100644 --- a/core/scss/utilities/mixins/flex/_flex-container.scss +++ b/core/scss/utilities/mixins/flex/_flex-container.scss @@ -1,22 +1,24 @@ @charset "UTF-8"; // -// @flex-container($gap: $gutter-md) +// @flex-container($gap: $gutter-xs) // // Mixin to apply to the wrapper of all class-based layouts. // // Style guide: Mixins.Flex.flex-container // -@mixin flex-container($gap: $gutter-md) { +@mixin flex-container() { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin: auto; max-width: $site-max-width; + @include padding(null $site-margins-mobile); - @media #{$breakpoint-md} { + @include grid-media('md') { @include padding(null $site-margins); } + } diff --git a/core/scss/utilities/mixins/flex/_flex-grid-push.scss b/core/scss/utilities/mixins/flex/_flex-grid-push.scss index 70eaf73f2..cd0e66d50 100755 --- a/core/scss/utilities/mixins/flex/_flex-grid-push.scss +++ b/core/scss/utilities/mixins/flex/_flex-grid-push.scss @@ -1,11 +1,16 @@ @charset "UTF-8"; // -// @flex-grid-push +// @flex-grid-push($size: 1, $columns: $grid-columns) // - // Pushes a grid column by changing its left margin. -@mixin flex-grid-push($size, $columns: $grid-columns) { +// +// $size - integer: The number of columns to 'push' +// $columns - integer: The number of columns in the grid. +// +// Style guide: Mixins.Flex.flex-grid-push +// +@mixin flex-grid-push($size: 1, $columns: $grid-columns) { $number: $size / $columns; margin-left: if($number == 0, 0, percentage($number)); } diff --git a/core/scss/utilities/mixins/grid/_centered-grid-container.scss b/core/scss/utilities/mixins/grid/_centered-grid-container.scss index 76fcad102..a928e4db9 100644 --- a/core/scss/utilities/mixins/grid/_centered-grid-container.scss +++ b/core/scss/utilities/mixins/grid/_centered-grid-container.scss @@ -16,21 +16,25 @@ grid-column: 2; } - @media #{$breakpoint-sm} { + @include grid-media('sm') { @include grid-columns(auto $screen-sm auto); } - @media #{$breakpoint-md} { + @include grid-media('md') { @include grid-columns(auto $screen-md auto); } - @media #{$breakpoint-lg} { + @include grid-media('lg') { @include grid-columns(auto $screen-lg auto); } - @media #{$breakpoint-xl} { + @include grid-media('xl') { @include grid-columns(auto $screen-xl auto); } + @include grid-media('2xl') { + @include grid-columns(auto $screen-2xl auto); + } + @include grid-columns(auto 100% auto); } diff --git a/core/scss/utilities/mixins/grid/_grid-column-gap.scss b/core/scss/utilities/mixins/grid/_grid-column-gap.scss index 30e058520..cd5efb89c 100644 --- a/core/scss/utilities/mixins/grid/_grid-column-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-column-gap.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// @grid-column-gap($gapL 30px) +// @grid-column-gap($gap: $gutter-xs) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // @@ -9,7 +9,7 @@ // // Style guide: Mixins.Grid.grid-column-gap // -@mixin grid-column-gap($gap: 30px) { +@mixin grid-column-gap($gap: $gutter-xs) { > * { $hgap: $gap / 2; diff --git a/core/scss/utilities/mixins/grid/_grid-gap.scss b/core/scss/utilities/mixins/grid/_grid-gap.scss index e030d2fc8..f7f4b0c5e 100644 --- a/core/scss/utilities/mixins/grid/_grid-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-gap.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// @grid-gap($gap: 30px) +// @grid-gap($gap: $gutter-xs) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // @@ -9,7 +9,7 @@ // // Style guide: Mixins.Grid.grid-gap // -@mixin grid-gap($gap: 30px) { +@mixin grid-gap($gap: $gutter-xs) { @include grid-column-gap($gap); @include grid-row-gap($gap); } diff --git a/core/scss/utilities/mixins/grid/_grid-row-gap.scss b/core/scss/utilities/mixins/grid/_grid-row-gap.scss index 69796ac3d..951b70ddc 100644 --- a/core/scss/utilities/mixins/grid/_grid-row-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-row-gap.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// @grid-row-gap($gap: 30px) +// @grid-row-gap($gap: $gutter-xs) // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // @@ -9,7 +9,7 @@ // // Style guide: Mixins.Grid.grid-row-gap // -@mixin grid-row-gap($gap: 30px) { +@mixin grid-row-gap($gap: $gutter-xs) { > * { $hgap: $gap / 2; diff --git a/core/scss/utilities/variables/core/_breakpoints.scss b/core/scss/utilities/variables/core/_breakpoints.scss index 88c0b2c3a..4406520cd 100644 --- a/core/scss/utilities/variables/core/_breakpoints.scss +++ b/core/scss/utilities/variables/core/_breakpoints.scss @@ -176,125 +176,3 @@ $breakpoint-2xl: 'only screen and (min-width: #{$screen-2xl})' !default; $breakpoint-2xl-only: $breakpoint-2xl; ////////////////////////////////////////////////////////////////////////////// - -// -// Columns -// -// Style guide: Variables.Core.Columns -// - -// -// $columns-xs -// -// Markup: $columns-xs: 6 !default; -// -// Styleguide: Variables.Core.Columns.cols-xs -// -$columns-xs: 6 !default; - -// -// $columns-sm -// -// Markup: $columns-sm: 12 !default; -// -// Styleguide: Variables.Core.Columns.cols-sm -// -$columns-sm: 12 !default; - -// -// $columns-md -// -// Markup: $columns-md: 12 !default; -// -// Styleguide: Variables.Core.Columns.cols-md -// -$columns-md: 12 !default; - -// -// $columns-lg -// -// Markup: $columns-lg: 12 !default; -// -// Styleguide: Variables.Core.Columns.cols-lg -// -$columns-lg: 12 !default; - -// -// $columns-xl -// -// Markup: $columns-xl: 12 !default; -// -// Styleguide: Variables.Core.Columns.cols-xl -// -$columns-xl: 12 !default; - -// -// $columns-2xl -// -// Markup: $columns-2xl: 12 !default; -// -// Styleguide: Variables.Core.Columns.cols-2xl -// -$columns-2xl: 12 !default; - -////////////////////////////////////////////////////////////////////////////// - -// -// Gutters -// -// Style guide: Variables.Core.Gutters -// - -// -// $gutter-xs -// -// Markup: $gutter-xs: 32px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-xs -// -$gutter-xs: 32px !default; - -// -// $gutter-sm -// -// Markup: $gutter-sm: 32px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-sm -// -$gutter-sm: 32px !default; - -// -// $gutter-md -// -// Markup: $gutter-md: 36px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-md -// -$gutter-md: 36px !default; - -// -// $gutter-lg -// -// Markup: $gutter-lg: 36px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-lg -// -$gutter-lg: 36px !default; - -// -// $gutter-xl -// -// Markup: $gutter-xl: 36px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-xl -// -$gutter-xl: 36px !default; - -// -// $gutter-2xl -// -// Markup: $gutter-2xl: 38px !default; -// -// Styleguide: Variables.Core.Gutters.gutter-2xl -// -$gutter-2xl: 38px !default; diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 8017b0a28..f9ef285bd 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -1,7 +1,12 @@ @charset "UTF-8"; -$grid-classes-enabled: true !default; -$grid-columns: 12 !default; +// $grid-columns +// +// The number of columns used by default for the flex grid. +// +// Style guide: Variables.Core.grid-columns +// +$grid-columns: 12 !default; // $grid-screens // @@ -115,33 +120,3 @@ $responsive-columns-six: ( $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr, $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr ) !default; - -// $grid-gutters -// -// A sass map of css gutter width values keyed by breakpoint short codes. -// -// Style guide: Variables.Core.grid-gutters -// -$grid-gutters: ( - 'xs': $gutter-xs, - 'sm': $gutter-sm, - 'md': $gutter-md, - 'lg': $gutter-lg, - 'xl': $gutter-xl, - '2xl': $gutter-2xl -) !default; - -// $responsive-gutters-default -// -// A sass map of css grid gap width keyed with breakpoint media queries. -// -// Style guide: Variables.Core.responsive-gutters-default -// -$responsive-gutters-default:( - $breakpoint-xs: $gutter-xs, - $breakpoint-sm: $gutter-sm, - $breakpoint-md: $gutter-md, - $breakpoint-lg: $gutter-lg, - $breakpoint-xl: $gutter-xl, - $breakpoint-2xl: $gutter-2xl -) !default; diff --git a/core/scss/utilities/variables/core/_gutter.scss b/core/scss/utilities/variables/core/_gutter.scss new file mode 100644 index 000000000..0e3ff1a1b --- /dev/null +++ b/core/scss/utilities/variables/core/_gutter.scss @@ -0,0 +1,89 @@ +// +// Gutters +// +// Style guide: Variables.Core.Gutters +// + +// +// $gutter-xs +// +// Markup: $gutter-xs: 32px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-xs +// +$gutter-xs: 32px !default; + +// +// $gutter-sm +// +// Markup: $gutter-sm: 32px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-sm +// +$gutter-sm: 32px !default; + +// +// $gutter-md +// +// Markup: $gutter-md: 36px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-md +// +$gutter-md: 36px !default; + +// +// $gutter-lg +// +// Markup: $gutter-lg: 36px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-lg +// +$gutter-lg: 36px !default; + +// +// $gutter-xl +// +// Markup: $gutter-xl: 36px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-xl +// +$gutter-xl: 36px !default; + +// +// $gutter-2xl +// +// Markup: $gutter-2xl: 38px !default; +// +// Styleguide: Variables.Core.Gutters.gutter-2xl +// +$gutter-2xl: 38px !default; + +// $grid-gutters +// +// A sass map of css gutter width values keyed by breakpoint short codes. +// +// Style guide: Variables.Core.grid-gutters +// +$grid-gutters: ( + 'xs': $gutter-xs, + 'sm': $gutter-sm, + 'md': $gutter-md, + 'lg': $gutter-lg, + 'xl': $gutter-xl, + '2xl': $gutter-2xl +) !default; + +// $responsive-gutters-default +// +// A sass map of css grid gap width keyed with breakpoint media queries. +// +// Style guide: Variables.Core.responsive-gutters-default +// +$responsive-gutters-default:( + $breakpoint-xs: $gutter-xs, + $breakpoint-sm: $gutter-sm, + $breakpoint-md: $gutter-md, + $breakpoint-lg: $gutter-lg, + $breakpoint-xl: $gutter-xl, + $breakpoint-2xl: $gutter-2xl +) !default; diff --git a/core/scss/utilities/variables/core/index.scss b/core/scss/utilities/variables/core/index.scss index 030fe4f87..a3eac9224 100644 --- a/core/scss/utilities/variables/core/index.scss +++ b/core/scss/utilities/variables/core/index.scss @@ -9,11 +9,12 @@ // @import - 'breakpoints', 'box-shadow', + 'breakpoints', 'colors', 'file-paths', 'grid', + 'gutter', 'magic-numbers', 'modular-spacing', 'modular-typography', diff --git a/core/templates/core/grid/zzz-flex-grid.html b/core/templates/core/grid/zzz-flex-grid.html index bf855b868..c23d837e3 100644 --- a/core/templates/core/grid/zzz-flex-grid.html +++ b/core/templates/core/grid/zzz-flex-grid.html @@ -35,6 +35,61 @@

    Flex Grid

    +
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    + +
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    + +
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    + +
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    + +
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    + +
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    + +
    .flex-4-of-12
    .flex-4-of-12
    @@ -71,6 +126,7 @@

    Flex Grid

    .flex-2xl-4-of-12
    +
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 0df9879e8..31a24667b 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -321,7 +321,7 @@ template { @media (min-width: 0) { :root { - --columns: 6; + --columns: 12; --gutter: 32px; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); @@ -1060,6 +1060,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home header { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home header { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home header div { display: grid; display: -ms-grid; @@ -1140,6 +1144,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--welcome { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--welcome { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--welcome h1, #kss-node.kss-home .section--welcome h2, #kss-node.kss-home .section--welcome h3, @@ -1199,6 +1207,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--ui-components { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--ui-components { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--ui-components .su-card { box-shadow: none; border: 0; } @@ -1232,12 +1244,16 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--dev-resources > * { - margin-right: 15px; - margin-left: 15px; } + margin-right: 16px; + margin-left: 16px; } @supports (grid-column-gap: 20px) { #kss-node.kss-home .section--dev-resources { - grid-column-gap: 30px; } + grid-column-gap: 32px; } #kss-node.kss-home .section--dev-resources > * { margin-right: 0; margin-left: 0; } } @@ -1309,6 +1325,10 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--more-info { -ms-grid-columns: auto 1200px auto; grid-template-columns: auto 1200px auto; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--more-info { + -ms-grid-columns: auto 1500px auto; + grid-template-columns: auto 1500px auto; } } #kss-node.kss-home .section--more-info h2 { text-align: center; } #kss-node.kss-home .section--more-info ul { diff --git a/kss/builder/decanter/scss/_visible-grid.scss b/kss/builder/decanter/scss/_visible-grid.scss index 19ae4cade..ac9721c2c 100644 --- a/kss/builder/decanter/scss/_visible-grid.scss +++ b/kss/builder/decanter/scss/_visible-grid.scss @@ -70,9 +70,8 @@ @media (min-width: $screen-xs) { :root { - --columns: #{$columns-xs}; + --columns: #{$grid-columns}; --gutter: #{$gutter-xs}; - // --offset: #{$gutter-xs}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xs'; @@ -81,9 +80,8 @@ @media (min-width: $screen-sm) { :root { - --columns: #{$columns-sm}; + --columns: #{$grid-columns}; --gutter: #{$gutter-sm}; - // --offset: #{$gutter-sm}; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'sm'; @@ -92,9 +90,8 @@ @media (min-width: $screen-md) { :root { - --columns: #{$columns-md}; + --columns: #{$grid-columns}; --gutter: #{$gutter-md}; - // --offset: #{$gutter-md}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'md'; @@ -103,9 +100,8 @@ @media (min-width: $screen-lg) { :root { - --columns: #{$columns-lg}; + --columns: #{$grid-columns}; --gutter: #{$gutter-lg}; - // --offset: #{$gutter-lg}; --color: hsla(286, 51%, 44%, 0.125); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'lg'; @@ -114,9 +110,8 @@ @media (min-width: $screen-xl) { :root { - --columns: #{$columns-xl}; + --columns: #{$grid-columns}; --gutter: #{$gutter-xl}; - // --offset: #{$gutter-xl}; --color: hsla(204, 80%, 72%, 0.2); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'xl'; @@ -125,9 +120,8 @@ @media (min-width: $screen-2xl) { :root { - --columns: #{$columns-2xl}; + --columns: #{$grid-columns}; --gutter: #{$gutter-2xl}; - // --offset: #{$gutter-xl}; --color: hsla(104, 40%, 32%, 0.2); --color-text: hsla(104, 40%, 32%, 1); --media-query: '2xl'; From 3ac144ecec960a7f21ebb11b06b8e0bbe9859b75 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 22 Nov 2018 12:10:36 -0800 Subject: [PATCH 046/123] Layout names. --- core/css/decanter.css | 1146 ++++++++--------- core/scss/layout/four-column/_molive.scss | 2 +- core/scss/layout/full-width/_bricks.scss | 2 +- core/scss/layout/full-width/_ibeam.scss | 2 +- core/scss/layout/one-column/basic.scss | 2 +- core/scss/layout/three-column/_bars.scss | 2 +- .../scss/layout/three-column/_battleship.scss | 2 +- core/scss/layout/three-column/_chess.scss | 2 +- core/scss/layout/three-column/_robot.scss | 2 +- .../layout/three-column/_space-invader.scss | 2 +- core/scss/layout/two-column/_donies.scss | 2 +- core/scss/layout/two-column/_frogger.scss | 2 +- core/scss/layout/two-column/_toucan.scss | 2 +- .../layout/four-column/molive/molive.json | 2 +- .../layout/full-width/bricks/bricks.json | 2 +- .../layout/full-width/ibeam/ibeam.json | 2 +- .../layout/one-column/basic/basic.json | 2 +- .../layout/three-column/bars/bars.json | 2 +- .../three-column/battleship/battleship.json | 2 +- .../layout/three-column/chess/chess.json | 2 +- .../layout/three-column/robot/robot.json | 2 +- .../space-invader/space-invader.json | 2 +- .../layout/two-column/donies/donies.json | 2 +- .../layout/two-column/frogger/frogger.json | 2 +- .../layout/two-column/toucan/toucan.json | 2 +- 25 files changed, 597 insertions(+), 597 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index e10dbd0b7..78cb18b5f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2304,689 +2304,689 @@ dfn { font-style: italic; margin-top: 0; } -.layout--ibeam > section { +.layout-ibeam > section { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--ibeam > section { + .layout-ibeam > section { max-width: 1462px; } } -.layout--bricks .layout__columns { +.layout-bricks .layout__columns { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 32px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 32px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 32px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 32px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 36px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-column-gap: 38px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-right: 0; margin-left: 0; } } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--bricks .layout__columns { + .layout-bricks .layout__columns { grid-row-gap: 38px; } - .layout--bricks .layout__columns > * { + .layout-bricks .layout__columns > * { margin-top: 0; margin-bottom: 0; } } } -.layout--molive > header { +.layout-molive > header { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--molive > header { + .layout-molive > header { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--molive > header { + .layout-molive > header { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--molive > header { + .layout-molive > header { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--molive > header { + .layout-molive > header { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--molive > header { + .layout-molive > header { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--molive > header { + .layout-molive > header { max-width: 1462px; } } -.layout--molive > section { +.layout-molive > section { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--molive > section { + .layout-molive > section { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--molive > section { + .layout-molive > section { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--molive > section { + .layout-molive > section { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--molive > section { + .layout-molive > section { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--molive > section { + .layout-molive > section { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--molive > section { + .layout-molive > section { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 32px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 32px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 32px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 32px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 36px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--molive > section { + .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-column-gap: 38px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-right: 0; margin-left: 0; } } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--molive > section { + .layout-molive > section { grid-row-gap: 38px; } - .layout--molive > section > * { + .layout-molive > section > * { margin-top: 0; margin-bottom: 0; } } } -.layout--molive > footer { +.layout-molive > footer { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--molive > footer { + .layout-molive > footer { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--molive > footer { + .layout-molive > footer { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--molive > footer { + .layout-molive > footer { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--molive > footer { + .layout-molive > footer { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--molive > footer { + .layout-molive > footer { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--molive > footer { + .layout-molive > footer { max-width: 1462px; } } -.layout--bars > div { +.layout-bars > div { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--bars > div { + .layout-bars > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--bars > div { + .layout-bars > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--bars > div { + .layout-bars > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--bars > div { + .layout-bars > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--bars > div { + .layout-bars > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--bars > div { + .layout-bars > div { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 32px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 32px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 32px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 32px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 36px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--bars > div { + .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-column-gap: 38px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-right: 0; margin-left: 0; } } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--bars > div { + .layout-bars > div { grid-row-gap: 38px; } - .layout--bars > div > * { + .layout-bars > div > * { margin-top: 0; margin-bottom: 0; } } } -.layout--battleship > div { +.layout-battleship > div { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--battleship > div { + .layout-battleship > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--battleship > div { + .layout-battleship > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--battleship > div { + .layout-battleship > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--battleship > div { + .layout-battleship > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--battleship > div { + .layout-battleship > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--battleship > div { + .layout-battleship > div { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 32px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 32px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 32px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 32px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 36px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--battleship > div { + .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-column-gap: 38px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-right: 0; margin-left: 0; } } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--battleship > div { + .layout-battleship > div { grid-row-gap: 38px; } - .layout--battleship > div > * { + .layout-battleship > div > * { margin-top: 0; margin-bottom: 0; } } } - .layout--battleship > div :first-child { + .layout-battleship > div :first-child { -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: span 2-1; } @@ -3209,176 +3209,176 @@ dfn { grid-row: 2 / span 1; -ms-grid-row-span: span 1-2; } -.layout--chess > header, -.layout--chess > footer { +.layout-chess > header, +.layout-chess > footer { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--chess > header, - .layout--chess > footer { + .layout-chess > header, + .layout-chess > footer { max-width: 1462px; } } -.layout--chess > section { +.layout-chess > section { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--chess > section { + .layout-chess > section { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--chess > section { + .layout-chess > section { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--chess > section { + .layout-chess > section { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--chess > section { + .layout-chess > section { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--chess > section { + .layout-chess > section { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--chess > section { + .layout-chess > section { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 32px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 32px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 32px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 32px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 36px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-column-gap: 38px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-right: 0; margin-left: 0; } } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--chess > section { + .layout-chess > section { grid-row-gap: 38px; } - .layout--chess > section > * { + .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--chess > section { + .layout-chess > section { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 992px) { - .layout--chess > section { + .layout-chess > section { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } @@ -3837,296 +3837,296 @@ dfn { grid-row: 1 / span 1; -ms-grid-row-span: span 1-1; } -.layout--robot > div { +.layout-robot > div { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--robot > div { + .layout-robot > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--robot > div { + .layout-robot > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--robot > div { + .layout-robot > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--robot > div { + .layout-robot > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--robot > div { + .layout-robot > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--robot > div { + .layout-robot > div { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 32px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 32px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 32px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 32px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 36px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-column-gap: 38px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-right: 0; margin-left: 0; } } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--robot > div { + .layout-robot > div { grid-row-gap: 38px; } - .layout--robot > div > * { + .layout-robot > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--robot > div { + .layout-robot > div { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } } - .layout--robot > div > header { + .layout-robot > div > header { -ms-grid-column: 1; grid-column: 1 / span 4; -ms-grid-column-span: span 4-1; } - .layout--robot > div > div:nth-of-type(2) { + .layout-robot > div > div:nth-of-type(2) { -ms-grid-column: 2; grid-column: 2 / span 2; -ms-grid-column-span: span 2-2; } -.layout--space-invader > div { +.layout-space-invader > div { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--space-invader > div { + .layout-space-invader > div { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 32px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 32px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 32px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 32px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 36px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-column-gap: 38px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-right: 0; margin-left: 0; } } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--space-invader > div { + .layout-space-invader > div { grid-row-gap: 38px; } - .layout--space-invader > div > * { + .layout-space-invader > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--space-invader > div { + .layout-space-invader > div { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } - .layout--space-invader > div > header { + .layout-space-invader > div > header { -ms-grid-column: 1; grid-column: 1 / span 3; -ms-grid-column-span: span 3-1; } @@ -4770,352 +4770,352 @@ dfn { grid-column: 3 / span 2; -ms-grid-column-span: span 2-3; } -.layout--donies > section, -.layout--donies > header, -.layout--donies > footer { +.layout-donies > section, +.layout-donies > header, +.layout-donies > footer { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--donies > section, - .layout--donies > header, - .layout--donies > footer { + .layout-donies > section, + .layout-donies > header, + .layout-donies > footer { max-width: 1462px; } } -.layout--donies > section { +.layout-donies > section { display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 32px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 32px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 32px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 32px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 36px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--donies > section { + .layout-donies > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-column-gap: 38px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-right: 0; margin-left: 0; } } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--donies > section { + .layout-donies > section { grid-row-gap: 38px; } - .layout--donies > section > * { + .layout-donies > section > * { margin-top: 0; margin-bottom: 0; } } } -.layout--frogger > div, -.layout--frogger > section, -.layout--frogger > header, -.layout--frogger > footer { +.layout-frogger > div, +.layout-frogger > section, +.layout-frogger > header, +.layout-frogger > footer { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--frogger > div, - .layout--frogger > section, - .layout--frogger > header, - .layout--frogger > footer { + .layout-frogger > div, + .layout-frogger > section, + .layout-frogger > header, + .layout-frogger > footer { max-width: 1462px; } } -.layout--frogger > section { +.layout-frogger > section { display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 32px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 32px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 32px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 32px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 36px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--frogger > section { + .layout-frogger > section { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-column-gap: 38px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-right: 0; margin-left: 0; } } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--frogger > section { + .layout-frogger > section { grid-row-gap: 38px; } - .layout--frogger > section > * { + .layout-frogger > section > * { margin-top: 0; margin-bottom: 0; } } } @@ -5529,158 +5529,158 @@ dfn { grid-row: 1 / span 1; -ms-grid-row-span: span 1-1; } } -.layout--toucan > div { +.layout-toucan > div { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { - .layout--toucan > div { + .layout-toucan > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--toucan > div { + .layout-toucan > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--toucan > div { + .layout-toucan > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--toucan > div { + .layout-toucan > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--toucan > div { + .layout-toucan > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--toucan > div { + .layout-toucan > div { max-width: 1462px; } } @media only screen and (min-width: 0) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 32px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 32px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 576px) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 16px; margin-left: 16px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 32px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 16px; margin-bottom: 16px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 32px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 768px) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 992px) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 18px; margin-left: 18px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 18px; margin-bottom: 18px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 36px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { - .layout--toucan > div { + .layout-toucan > div { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 19px; margin-left: 19px; } @supports (grid-column-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-column-gap: 38px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-right: 0; margin-left: 0; } } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 19px; margin-bottom: 19px; } @supports (grid-row-gap: 20px) { - .layout--toucan > div { + .layout-toucan > div { grid-row-gap: 38px; } - .layout--toucan > div > * { + .layout-toucan > div > * { margin-top: 0; margin-bottom: 0; } } } @@ -6056,39 +6056,39 @@ dfn { grid-column: 1 / span 3; -ms-grid-column-span: span 3-1; } } -.layout--basic > header, -.layout--basic > section, -.layout--basic > footer { +.layout-basic > header, +.layout-basic > section, +.layout-basic > footer { margin: 0 auto; } @media only screen and (min-width: 0) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: -32px; } } @media only screen and (min-width: 576px) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: 544px; } } @media only screen and (min-width: 768px) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: 732px; } } @media only screen and (min-width: 992px) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: 956px; } } @media only screen and (min-width: 1200px) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .layout--basic > header, - .layout--basic > section, - .layout--basic > footer { + .layout-basic > header, + .layout-basic > section, + .layout-basic > footer { max-width: 1462px; } } .centered-container { diff --git a/core/scss/layout/four-column/_molive.scss b/core/scss/layout/four-column/_molive.scss index 47be69498..5cce03537 100644 --- a/core/scss/layout/four-column/_molive.scss +++ b/core/scss/layout/four-column/_molive.scss @@ -10,7 +10,7 @@ // Style guide: Layout.4Column.Molive // -.layout--molive { +.layout-molive { // A centered column that spans the max-width of the breakpoint. > header { diff --git a/core/scss/layout/full-width/_bricks.scss b/core/scss/layout/full-width/_bricks.scss index 64da612e8..1b10c98aa 100644 --- a/core/scss/layout/full-width/_bricks.scss +++ b/core/scss/layout/full-width/_bricks.scss @@ -10,7 +10,7 @@ // Style guide: Layout.FullWidth.Bricks // -.layout--bricks { +.layout-bricks { // A centered column broken in to four equal parts. // Collapses to 2 columns by 2 columns ad the breakpoint-md diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss index 70b71d0b7..36d65a892 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/full-width/_ibeam.scss @@ -10,7 +10,7 @@ // Style guide: Layout.FullWidth.IBeam // -.layout--ibeam { +.layout-ibeam { > section { @include centered-column; } diff --git a/core/scss/layout/one-column/basic.scss b/core/scss/layout/one-column/basic.scss index b939abd48..42a9cb9db 100644 --- a/core/scss/layout/one-column/basic.scss +++ b/core/scss/layout/one-column/basic.scss @@ -11,7 +11,7 @@ // Style guide: Layout.1Column.Basic // -.layout--basic { +.layout-basic { > header, > section, diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/three-column/_bars.scss index 66e41d4e6..c42b2512c 100644 --- a/core/scss/layout/three-column/_bars.scss +++ b/core/scss/layout/three-column/_bars.scss @@ -11,7 +11,7 @@ // Style guide: Layout.3Column.Bars // -.layout--bars { +.layout-bars { > div { @include centered-column; @include responsive-grid-columns($responsive-columns-three); diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/three-column/_battleship.scss index ecffd971a..f28a271ed 100644 --- a/core/scss/layout/three-column/_battleship.scss +++ b/core/scss/layout/three-column/_battleship.scss @@ -11,7 +11,7 @@ // Style guide: Layout.3Column.Battleship // -.layout--battleship { +.layout-battleship { > div { @include centered-column; @include responsive-grid-columns($responsive-columns-three); diff --git a/core/scss/layout/three-column/_chess.scss b/core/scss/layout/three-column/_chess.scss index b88716093..ea12a03c3 100644 --- a/core/scss/layout/three-column/_chess.scss +++ b/core/scss/layout/three-column/_chess.scss @@ -10,7 +10,7 @@ // // Style guide: Layout.3Column.Chess // -.layout--chess { +.layout-chess { > header, > footer { diff --git a/core/scss/layout/three-column/_robot.scss b/core/scss/layout/three-column/_robot.scss index 50274057b..6690e1b23 100644 --- a/core/scss/layout/three-column/_robot.scss +++ b/core/scss/layout/three-column/_robot.scss @@ -9,7 +9,7 @@ // // Style guide: Layout.3Column.Robot // -.layout--robot { +.layout-robot { > div { @include centered-column; @include responsive-grid-gap; diff --git a/core/scss/layout/three-column/_space-invader.scss b/core/scss/layout/three-column/_space-invader.scss index a7eaf0ea5..4e8d31587 100644 --- a/core/scss/layout/three-column/_space-invader.scss +++ b/core/scss/layout/three-column/_space-invader.scss @@ -9,7 +9,7 @@ // // Style guide: Layout.3Column.SpaceInvader // -.layout--space-invader { +.layout-space-invader { > div { @include centered-column; @include responsive-grid-gap; diff --git a/core/scss/layout/two-column/_donies.scss b/core/scss/layout/two-column/_donies.scss index ea250e23c..1f28b4601 100644 --- a/core/scss/layout/two-column/_donies.scss +++ b/core/scss/layout/two-column/_donies.scss @@ -10,7 +10,7 @@ // Style guide: Layout.2Column.Donies // -.layout--donies { +.layout-donies { > section, > header, diff --git a/core/scss/layout/two-column/_frogger.scss b/core/scss/layout/two-column/_frogger.scss index 663ebd3ee..974443049 100644 --- a/core/scss/layout/two-column/_frogger.scss +++ b/core/scss/layout/two-column/_frogger.scss @@ -10,7 +10,7 @@ // Style guide: Layout.2Column.Frogger // -.layout--frogger { +.layout-frogger { > div, > section, diff --git a/core/scss/layout/two-column/_toucan.scss b/core/scss/layout/two-column/_toucan.scss index 3e4e5853d..f50852322 100644 --- a/core/scss/layout/two-column/_toucan.scss +++ b/core/scss/layout/two-column/_toucan.scss @@ -10,7 +10,7 @@ // Style guide: Layout.2Column.Toucan // -.layout--toucan { +.layout-toucan { > div { @include centered-column; @include responsive-grid-columns($responsive-columns-two); diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/four-column/molive/molive.json index 9b5cf9072..e159f5e09 100644 --- a/core/templates/layout/four-column/molive/molive.json +++ b/core/templates/layout/four-column/molive/molive.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--molive", + "modifier_class": "layout-molive", "first": "

    First Column

    ", "second": "

    Second Column

    ", "third": "

    Third Column

    ", diff --git a/core/templates/layout/full-width/bricks/bricks.json b/core/templates/layout/full-width/bricks/bricks.json index 1fc123393..7dc4518ad 100644 --- a/core/templates/layout/full-width/bricks/bricks.json +++ b/core/templates/layout/full-width/bricks/bricks.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--bricks", + "modifier_class": "layout-bricks", "hero": "

    Full Width Hero Column 1

    ", "hero2": "

    Full Width Hero Column 2

    ", "first": "

    First Column

    ", diff --git a/core/templates/layout/full-width/ibeam/ibeam.json b/core/templates/layout/full-width/ibeam/ibeam.json index 1fa310c4c..88d9e5a6a 100644 --- a/core/templates/layout/full-width/ibeam/ibeam.json +++ b/core/templates/layout/full-width/ibeam/ibeam.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--ibeam", + "modifier_class": "layout-ibeam", "full_width": "

    Full width region

    ", "full_width2": "

    Full width region

    ", "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/one-column/basic/basic.json b/core/templates/layout/one-column/basic/basic.json index 98ad39da0..6ebe18156 100644 --- a/core/templates/layout/one-column/basic/basic.json +++ b/core/templates/layout/one-column/basic/basic.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--basic", + "modifier_class": "layout-basic", "header": "

    Header

    ", "footer": "
    This is the footer
    ", "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " diff --git a/core/templates/layout/three-column/bars/bars.json b/core/templates/layout/three-column/bars/bars.json index e0ba0d59f..ab72d232f 100644 --- a/core/templates/layout/three-column/bars/bars.json +++ b/core/templates/layout/three-column/bars/bars.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--bars", + "modifier_class": "layout-bars", "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " diff --git a/core/templates/layout/three-column/battleship/battleship.json b/core/templates/layout/three-column/battleship/battleship.json index e26660c5b..804712326 100644 --- a/core/templates/layout/three-column/battleship/battleship.json +++ b/core/templates/layout/three-column/battleship/battleship.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--battleship", + "modifier_class": "layout-battleship", "first": "

    Heading goes here

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "second": "Example Image", "third": "Example Image", diff --git a/core/templates/layout/three-column/chess/chess.json b/core/templates/layout/three-column/chess/chess.json index 6fd43c723..a60445c51 100644 --- a/core/templates/layout/three-column/chess/chess.json +++ b/core/templates/layout/three-column/chess/chess.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--chess", + "modifier_class": "layout-chess", "header": "

    This is the optional full column header.

    ", "footer": "

    Footer is optional.

    ", "first": "

    First Column

    ", diff --git a/core/templates/layout/three-column/robot/robot.json b/core/templates/layout/three-column/robot/robot.json index 84598a104..e00347446 100644 --- a/core/templates/layout/three-column/robot/robot.json +++ b/core/templates/layout/three-column/robot/robot.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--robot", + "modifier_class": "layout-robot", "header": "

    An optional Header Area

    ", "first": "

    First column

    ", "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/three-column/space-invader/space-invader.json b/core/templates/layout/three-column/space-invader/space-invader.json index 65b28c694..3f6f9924b 100644 --- a/core/templates/layout/three-column/space-invader/space-invader.json +++ b/core/templates/layout/three-column/space-invader/space-invader.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--space-invader", + "modifier_class": "layout-space-invader", "header": "

    An optional Header Area

    ", "first": "

    First column

    ", "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/two-column/donies/donies.json b/core/templates/layout/two-column/donies/donies.json index 835045e71..8668d400e 100644 --- a/core/templates/layout/two-column/donies/donies.json +++ b/core/templates/layout/two-column/donies/donies.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--donies", + "modifier_class": "layout-donies", "first": "

    First Column

    ", "second": "

    Second Column

    ", "header": "

    Header

    ", diff --git a/core/templates/layout/two-column/frogger/frogger.json b/core/templates/layout/two-column/frogger/frogger.json index f60164a06..3d9c4d512 100644 --- a/core/templates/layout/two-column/frogger/frogger.json +++ b/core/templates/layout/two-column/frogger/frogger.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--frogger", + "modifier_class": "layout-frogger", "first": "

    First Column

    ", "second": "

    Second Column

    ", "third": "

    Third Column

    ", diff --git a/core/templates/layout/two-column/toucan/toucan.json b/core/templates/layout/two-column/toucan/toucan.json index 6b28b09a1..e19ee1aa8 100644 --- a/core/templates/layout/two-column/toucan/toucan.json +++ b/core/templates/layout/two-column/toucan/toucan.json @@ -1,5 +1,5 @@ { - "modifier_class": "layout--toucan", + "modifier_class": "layout-toucan", "first": "

    First Column

    ", "second": "

    Second Column

    " } From ce5b68eecc7eac15f813523e6267d43276db167d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 22 Nov 2018 12:41:23 -0800 Subject: [PATCH 047/123] fixup! wip. --- core/css/decanter.css | 214 +++++++++--------- .../components/lockup/_lockup--two-lines.scss | 39 ++-- core/scss/utilities/functions/index.scss | 3 +- .../functions/string/_str-replace.scss | 17 ++ .../functions/string/_to-number.scss | 69 ++++++ .../utilities/functions/string/index.scss | 5 + .../mixins/grid/_grid-item-spans.scss | 16 +- kss/builder/decanter/kss-assets/css/kss.css | 4 +- 8 files changed, 229 insertions(+), 138 deletions(-) create mode 100644 core/scss/utilities/functions/string/_str-replace.scss create mode 100644 core/scss/utilities/functions/string/_to-number.scss create mode 100644 core/scss/utilities/functions/string/index.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 78cb18b5f..df2d4a221 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2989,7 +2989,7 @@ dfn { .layout-battleship > div :first-child { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } + -ms-grid-column-span: 2; } .layout-blastila > header { margin: 0 auto; } @@ -3155,59 +3155,59 @@ dfn { .layout-blastila > div > aside { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 2; - -ms-grid-row-span: span 2-1; } + -ms-grid-row-span: 2; } .layout-blastila > div > section { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; + -ms-grid-column-span: 2; -ms-grid-row: 2; } .layout-blastila > div > div { -ms-grid-column: 2; grid-column: 2 / span 1; - -ms-grid-column-span: span 1-2; + -ms-grid-column-span: 1; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-blastila > div div ~ div { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; + -ms-grid-column-span: 1; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-blastila--right > div > aside { -ms-grid-column: 3; grid-column: 3 / span 3; - -ms-grid-column-span: span 3-3; + -ms-grid-column-span: 3; -ms-grid-row: 1; grid-row: 1 / span 2; - -ms-grid-row-span: span 2-1; } + -ms-grid-row-span: 2; } .layout-blastila--right > div > section { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; + -ms-grid-column-span: 2; -ms-grid-row: 1; } .layout-blastila--right > div > div { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; + -ms-grid-column-span: 1; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-blastila--right > div div ~ div { -ms-grid-column: 2; grid-column: 2 / span 1; - -ms-grid-column-span: span 1-2; + -ms-grid-column-span: 1; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-chess > header, .layout-chess > footer { @@ -3640,7 +3640,7 @@ dfn { .layout-cuttoner > div > section { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; + -ms-grid-column-span: 2; display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr; @@ -3650,27 +3650,27 @@ dfn { .layout-cuttoner > div > section > footer { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } } + -ms-grid-column-span: 2; } } @media only screen and (min-width: 576px) { .layout-cuttoner > div > aside { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-cuttoner--right > div > section { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; } } + -ms-grid-column-span: 2; } } @media only screen and (min-width: 576px) { .layout-cuttoner--right > div > aside { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } .layout-percles > div { margin: 0 auto; } @@ -3815,27 +3815,27 @@ dfn { > .layout-percles > div:first-child { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } + -ms-grid-column-span: 1; } .layout-percles > div > header { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; } + -ms-grid-column-span: 2; } > .layout-percles--right > div:first-child { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-percles--right > div > header { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-robot > div { margin: 0 auto; } @@ -3980,11 +3980,11 @@ dfn { .layout-robot > div > header { -ms-grid-column: 1; grid-column: 1 / span 4; - -ms-grid-column-span: span 4-1; } + -ms-grid-column-span: 4; } .layout-robot > div > div:nth-of-type(2) { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; } + -ms-grid-column-span: 2; } .layout-space-invader > div { margin: 0 auto; } @@ -4129,7 +4129,7 @@ dfn { .layout-space-invader > div > header { -ms-grid-column: 1; grid-column: 1 / span 3; - -ms-grid-column-span: span 3-1; } + -ms-grid-column-span: 3; } .layout-sunset-delorean > div { margin: 0 auto; } @@ -4274,42 +4274,42 @@ dfn { .layout-sunset-delorean > div > header { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-sunset-delorean > div > aside { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 2; - -ms-grid-row-span: span 2-1; } + -ms-grid-row-span: 2; } .layout-sunset-delorean > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-sunset-delorean--right > div > header { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-sunset-delorean--right > div > aside { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 2; - -ms-grid-row-span: span 2-1; } + -ms-grid-row-span: 2; } .layout-sunset-delorean--right > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-thions > div { margin: 0 auto; } @@ -4454,78 +4454,78 @@ dfn { .layout-thions > div > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 6; - -ms-grid-column-span: span 6-1; + -ms-grid-column-span: 6; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-thions > div > div:nth-of-type(2) { -ms-grid-column: 7; grid-column: 7 / span 6; - -ms-grid-column-span: span 6-7; + -ms-grid-column-span: 6; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-thions > div > div:nth-of-type(3) { -ms-grid-column: 1; grid-column: 1 / span 4; - -ms-grid-column-span: span 4-1; + -ms-grid-column-span: 4; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-thions > div > div:nth-of-type(4) { -ms-grid-column: 5; grid-column: 5 / span 4; - -ms-grid-column-span: span 4-5; + -ms-grid-column-span: 4; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-thions > div > div:nth-of-type(5) { -ms-grid-column: 9; grid-column: 9 / span 4; - -ms-grid-column-span: span 4-9; + -ms-grid-column-span: 4; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-thions--bottom > div > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 4; - -ms-grid-column-span: span 4-1; + -ms-grid-column-span: 4; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-thions--bottom > div > div:nth-of-type(2) { -ms-grid-column: 5; grid-column: 5 / span 4; - -ms-grid-column-span: span 4-5; + -ms-grid-column-span: 4; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-thions--bottom > div > div:nth-of-type(3) { -ms-grid-column: 9; grid-column: 9 / span 4; - -ms-grid-column-span: span 4-9; + -ms-grid-column-span: 4; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } + -ms-grid-row-span: 1; } .layout-thions--bottom > div > div:nth-of-type(4) { -ms-grid-column: 1; grid-column: 1 / span 6; - -ms-grid-column-span: span 6-1; + -ms-grid-column-span: 6; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-thions--bottom > div > div:nth-of-type(5) { -ms-grid-column: 7; grid-column: 7 / span 6; - -ms-grid-column-span: span 6-7; + -ms-grid-column-span: 6; -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: span 1-2; } + -ms-grid-row-span: 1; } .layout-valmer > header, .layout-valmer > footer, @@ -4758,17 +4758,17 @@ dfn { .layout-valmer > section > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } + -ms-grid-column-span: 2; } .layout-valmer--right > section > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } + -ms-grid-column-span: 1; } .layout-valmer--right > section > div:nth-of-type(3) { -ms-grid-column: 3; grid-column: 3 / span 2; - -ms-grid-column-span: span 2-3; } + -ms-grid-column-span: 2; } .layout-donies > section, .layout-donies > header, @@ -5293,27 +5293,27 @@ dfn { .layout-pacman > div aside { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-pacman > div section { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } @media only screen and (min-width: 576px) { .layout-pacman--right > div aside { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-pacman--right > div section { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } } + -ms-grid-column-span: 2; } } .layout-plakes > div, .layout-plakes > header, @@ -5489,45 +5489,45 @@ dfn { .layout-plakes > div aside { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-plakes > div section { -ms-grid-column: 2; grid-column: 2 / span 3; - -ms-grid-column-span: span 3-2; + -ms-grid-column-span: 3; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } @media only screen and (min-width: 576px) { .layout-plakes--right > div aside { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 992px) { .layout-plakes--right > div aside { -ms-grid-column: 4; grid-column: 4 / span 1; - -ms-grid-column-span: span 1-4; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-plakes--right > div section { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } @media only screen and (min-width: 992px) { .layout-plakes--right > div section { -ms-grid-column: 1; grid-column: 1 / span 3; - -ms-grid-column-span: span 3-1; + -ms-grid-column-span: 3; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } .layout-toucan > div { margin: 0 auto; @@ -5842,27 +5842,27 @@ dfn { .layout-trunks > section div:first-child { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-trunks > section div:nth-child(2) { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; + -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } @media only screen and (min-width: 576px) { .layout-trunks--right > section div:first-child { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-trunks--right > section div:nth-child(2) { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } } + -ms-grid-column-span: 2; } } .layout-wedge > section { margin: 0 auto; @@ -6022,39 +6022,39 @@ dfn { .layout-wedge > section div:first-child { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-wedge > section div:nth-child(2) { -ms-grid-column: 2; grid-column: 2 / span 3; - -ms-grid-column-span: span 3-2; + -ms-grid-column-span: 3; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: span 1-1; } } + -ms-grid-row-span: 1; } } @media only screen and (min-width: 576px) { .layout-wedge--right > section div:first-child { -ms-grid-column: 3; grid-column: 3 / span 1; - -ms-grid-column-span: span 1-3; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 768px) { .layout-wedge--right > section div:first-child { -ms-grid-column: 4; grid-column: 4 / span 1; - -ms-grid-column-span: span 1-4; } } + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-wedge--right > section div:nth-child(2) { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: span 2-1; } } + -ms-grid-column-span: 2; } } @media only screen and (min-width: 768px) { .layout-wedge--right > section div:nth-child(2) { -ms-grid-column: 1; grid-column: 1 / span 3; - -ms-grid-column-span: span 3-1; } } + -ms-grid-column-span: 3; } } .layout-basic > header, .layout-basic > section, @@ -7028,14 +7028,14 @@ button, grid-template-rows: auto auto auto; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__wordmark { - grid-row: 1 / span 2; - -ms-grid-row: 1; - -ms-grid-row-span: 2; } } + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__pipe { - grid-row: 1 / span 2; - -ms-grid-row: 1; - -ms-grid-row-span: 2; } } + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; } } .su-lockup--two-lines .su-lockup__sitename-line1, .su-lockup--two-lines .su-lockup__sitename-line2 { font-size: 22px; } @@ -7046,23 +7046,23 @@ button, .su-lockup--two-lines .su-lockup__sitename-line2 { padding-top: 6px; display: block; - grid-row: 5 / span 1; - -ms-grid-row: 5; - -ms-grid-row-span: 1; + -ms-grid-column: 5; + grid-column: 5 / span 1; + -ms-grid-column-span: 1; line-height: .8; } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__sitename-line2 { - grid-row: 2 / span 1; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 3 / span 1; - -ms-grid-column: 3; - -ms-grid-column-span: 1; } } + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 3; + grid-row: 3 / span 1; + -ms-grid-row-span: 1; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__sitename-line5 { - grid-row: 3 / span 1; - -ms-grid-row: 3; - -ms-grid-row-span: 1; } } + -ms-grid-column: 3; + grid-column: 3 / span 2; + -ms-grid-column-span: 2; } } .su-lockup--two-lines .su-lockup__sitename-line1--small, .su-lockup--two-lines .su-lockup__sitename-line1--supersmall { -webkit-font-smoothing: auto; diff --git a/core/scss/components/lockup/_lockup--two-lines.scss b/core/scss/components/lockup/_lockup--two-lines.scss index f955f7ff5..e704d9e8f 100644 --- a/core/scss/components/lockup/_lockup--two-lines.scss +++ b/core/scss/components/lockup/_lockup--two-lines.scss @@ -1,25 +1,21 @@ .su-lockup--two-lines { @include grid-rows(auto auto auto auto auto); - @media #{$breakpoint-md} { + @include grid-media('md') { @include grid-rows(auto auto auto); } .su-lockup__wordmark { - @media #{$breakpoint-md} { - grid-row: 1 / span 2; - -ms-grid-row: 1; - -ms-grid-row-span: 2; + @include grid-media('md') { + @include grid-item-spans(1, span 2); } } .su-lockup__pipe { - @media #{$breakpoint-md} { - grid-row: 1 / span 2; - -ms-grid-row: 1; - -ms-grid-row-span: 2; + @include grid-media('md') { + @include grid-item-spans(1, span 2); } } @@ -27,7 +23,7 @@ .su-lockup__sitename-line2 { font-size: 22px; - @media #{$breakpoint-md} { + @include grid-media('md') { font-size: 22px; } } @@ -35,27 +31,18 @@ .su-lockup__sitename-line2 { @include padding(6px null null); display: block; - grid-row: 5 / span 1; - -ms-grid-row: 5; - -ms-grid-row-span: 1; + @include grid-item-spans(5, span 1); line-height: .8; - @media #{$breakpoint-md} { - grid-row: 2 / span 1; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 3 / span 1; - -ms-grid-column: 3; - -ms-grid-column-span: 1; + @include grid-media('md') { + @include grid-item-spans(2, span 1, 3, span 1); } } .su-lockup__sitename-line5 { - @media #{$breakpoint-md} { - grid-row: 3 / span 1; - -ms-grid-row: 3; - -ms-grid-row-span: 1; + @include grid-media('md') { + @include grid-item-spans(3, span 1); } } @@ -68,7 +55,7 @@ .su-lockup__sitename-line1--small { font-size: 15px; - @media #{$breakpoint-md} { + @include grid-media('md') { font-size: 16px; line-height: .5; } @@ -78,7 +65,7 @@ .su-lockup__sitename-line1--supersmall { font-size: 13px; - @media #{$breakpoint-md} { + @include grid-media('md') { + .su-lockup__sitename-line2 { @include padding(3px null null); font-size: 27px; diff --git a/core/scss/utilities/functions/index.scss b/core/scss/utilities/functions/index.scss index d86aa496a..6af8ea5b0 100644 --- a/core/scss/utilities/functions/index.scss +++ b/core/scss/utilities/functions/index.scss @@ -6,4 +6,5 @@ @import 'flex/index', - 'modular-scale/index'; + 'modular-scale/index', + 'string/index'; diff --git a/core/scss/utilities/functions/string/_str-replace.scss b/core/scss/utilities/functions/string/_str-replace.scss new file mode 100644 index 000000000..9497bb6c4 --- /dev/null +++ b/core/scss/utilities/functions/string/_str-replace.scss @@ -0,0 +1,17 @@ +@charset 'UTF-8'; + +/// Replace `$search` with `$replace` in `$string` +/// @author Hugo Giraudel +/// @param {String} $string - Initial string +/// @param {String} $search - Substring to replace +/// @param {String} $replace ('') - New value +/// @return {String} - Updated string +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} diff --git a/core/scss/utilities/functions/string/_to-number.scss b/core/scss/utilities/functions/string/_to-number.scss new file mode 100644 index 000000000..15b60dd5e --- /dev/null +++ b/core/scss/utilities/functions/string/_to-number.scss @@ -0,0 +1,69 @@ +// ---- +// Sass (v3.4.13) +// Compass (v1.0.3) +// ---- + +//// +/// String to number converter +/// @author Hugo Giraudel +/// @access private +//// + + +/// +/// Casts a string into a number +/// +/// @param {String | Number} $value - Value to be parsed +/// +/// @return {Number} +/// +@function to-number($value) { + @if type-of($value) == 'number' { + @return $value; + } @else if type-of($value) != 'string' { + $_: log('Value for `to-number` should be a number or a string.'); + } + + $result: 0; + $digits: 0; + $minus: str-slice($value, 1, 1) == '-'; + $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); + + @for $i from if($minus, 2, 1) through str-length($value) { + $character: str-slice($value, $i, $i); + + @if not (index(map-keys($numbers), $character) or $character == '.') { + @return to-length(if($minus, -$result, $result), str-slice($value, $i)) + } + + @if $character == '.' { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map-get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + map-get($numbers, $character) / $digits; + } + } + + @return if($minus, -$result, $result);; +} + + +/// +/// Add `$unit` to `$value` +/// +/// @param {Number} $value - Value to add unit to +/// @param {String} $unit - String representation of the unit +/// +/// @return {Number} - `$value` expressed in `$unit` +/// +@function to-length($value, $unit) { + $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); + + @if not index(map-keys($units), $unit) { + $_: log('Invalid unit `#{$unit}`.'); + } + + @return $value * map-get($units, $unit); +} diff --git a/core/scss/utilities/functions/string/index.scss b/core/scss/utilities/functions/string/index.scss new file mode 100644 index 000000000..d6ede258f --- /dev/null +++ b/core/scss/utilities/functions/string/index.scss @@ -0,0 +1,5 @@ +@charset 'UTF-8'; + +@import + "str-replace", + "to-number"; diff --git a/core/scss/utilities/mixins/grid/_grid-item-spans.scss b/core/scss/utilities/mixins/grid/_grid-item-spans.scss index 59319c602..d4dd0a61b 100644 --- a/core/scss/utilities/mixins/grid/_grid-item-spans.scss +++ b/core/scss/utilities/mixins/grid/_grid-item-spans.scss @@ -20,7 +20,13 @@ @if ($col-end != null and $col-start != null) { grid-column: #{$col-start} / #{$col-end}; - -ms-grid-column-span: $col-end - $col-start; + + @if (str-index(#{$col-end}, 'span ')) { + -ms-grid-column-span: str-replace(#{$col-end}, "span ", ''); + } @else { + -ms-grid-column-span: $col-end - $col-start; + } + } @if ($row-start != null) { @@ -29,7 +35,13 @@ @if ($row-end != null and $row-start != null) { grid-row: #{$row-start} / #{$row-end}; - -ms-grid-row-span: $row-end - $row-start; + + @if (str-index(#{$row-end}, "span ")) { + -ms-grid-row-span: str-replace(#{$row-end}, "span ", ''); + } @else { + -ms-grid-row-span: $row-end - $row-start; + } + } } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 31a24667b..6b4898830 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1277,13 +1277,13 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kss-node.kss-home .section--dev-resources h2:first-child { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: span 1-1; + -ms-grid-column-span: 1; text-align: center; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources h2:first-child { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: span 2-2; + -ms-grid-column-span: 2; text-align: center; } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; From b5bb006b2f311420e487ce17dcc1e61a8fb3c535 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 22 Nov 2018 12:54:46 -0800 Subject: [PATCH 048/123] Grid mixin-a-fied the lockup. --- core/css/decanter.css | 82 +++++++++---------- .../components/lockup/_lockup--two-lines.scss | 10 +-- core/scss/components/lockup/_lockup.scss | 59 ++++--------- 3 files changed, 60 insertions(+), 91 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index df2d4a221..437b63c69 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6916,13 +6916,13 @@ button, font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - display: block; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-row: 1 / span 1; -ms-grid-column: 1; - -ms-grid-column-span: 1; grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; + display: block; color: #8c1515; font-size: 36px; line-height: 1; } @@ -6940,13 +6940,13 @@ button, .su-lockup__pipe { margin-top: 7px; margin-bottom: 7px; - display: block; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-row: 3 / span 1; -ms-grid-column: 1; - -ms-grid-column-span: 1; grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 3; + grid-row: 3 / span 1; + -ms-grid-row-span: 1; + display: block; content: ""; width: 118px; height: 1px; @@ -6954,12 +6954,12 @@ button, @media only screen and (min-width: 768px) { .su-lockup__pipe { margin: 0 7px; - grid-row: 1 / span 1; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-column: 2 / span 1; -ms-grid-column: 2; + grid-column: 2 / span 1; -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; display: inline-block; width: 1px; height: 100%; } } @@ -6970,45 +6970,45 @@ button, -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; - grid-column: 1 / span 1; -ms-grid-column: 1; + grid-column: 1 / span 1; -ms-grid-column-span: 1; color: #2e2d29; } .su-lockup__sitename-line1 { - grid-row: 4 / span 1; -ms-grid-row: 4; + grid-row: 4 / span 1; -ms-grid-row-span: 1; font-size: 22px; line-height: .8; } @media only screen and (min-width: 768px) { .su-lockup__sitename-line1 { - grid-row: 1 / span 1; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-column: 3 / span 1; -ms-grid-column: 3; + grid-column: 3 / span 1; -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; font-size: 30px; } } .su-lockup__sitename-line2 { display: none; } .su-lockup__sitename-line5 { - grid-row: 2 / span 1; -ms-grid-row: 2; + grid-row: 2 / span 1; -ms-grid-row-span: 1; font-size: 20px; line-height: 1.1; } @media only screen and (min-width: 768px) { .su-lockup__sitename-line5 { padding-top: 8px; - grid-row: 2 / span 1; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / span 3; -ms-grid-column: 1; + grid-column: 1 / span 3; -ms-grid-column-span: 3; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; font-size: 27px; } } .su-lockup__sitename-line1--uppercase, @@ -7028,14 +7028,14 @@ button, grid-template-rows: auto auto auto; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__wordmark { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } } + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__pipe { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } } + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } } .su-lockup--two-lines .su-lockup__sitename-line1, .su-lockup--two-lines .su-lockup__sitename-line2 { font-size: 22px; } @@ -7046,23 +7046,23 @@ button, .su-lockup--two-lines .su-lockup__sitename-line2 { padding-top: 6px; display: block; - -ms-grid-column: 5; - grid-column: 5 / span 1; - -ms-grid-column-span: 1; + -ms-grid-row: 5; + grid-row: 5 / span 1; + -ms-grid-row-span: 1; line-height: .8; } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__sitename-line2 { - -ms-grid-column: 2; - grid-column: 2 / span 1; + -ms-grid-column: 3; + grid-column: 3 / span 1; -ms-grid-column-span: 1; - -ms-grid-row: 3; - grid-row: 3 / span 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; -ms-grid-row-span: 1; } } @media only screen and (min-width: 768px) { .su-lockup--two-lines .su-lockup__sitename-line5 { - -ms-grid-column: 3; - grid-column: 3 / span 2; - -ms-grid-column-span: 2; } } + -ms-grid-row: 3; + grid-row: 3 / span 1; + -ms-grid-row-span: 1; } } .su-lockup--two-lines .su-lockup__sitename-line1--small, .su-lockup--two-lines .su-lockup__sitename-line1--supersmall { -webkit-font-smoothing: auto; diff --git a/core/scss/components/lockup/_lockup--two-lines.scss b/core/scss/components/lockup/_lockup--two-lines.scss index e704d9e8f..430265542 100644 --- a/core/scss/components/lockup/_lockup--two-lines.scss +++ b/core/scss/components/lockup/_lockup--two-lines.scss @@ -8,14 +8,14 @@ .su-lockup__wordmark { @include grid-media('md') { - @include grid-item-spans(1, span 2); + @include grid-item-spans(null, null, 1, span 2); } } .su-lockup__pipe { @include grid-media('md') { - @include grid-item-spans(1, span 2); + @include grid-item-spans(null, null, 1, span 2); } } @@ -31,18 +31,18 @@ .su-lockup__sitename-line2 { @include padding(6px null null); display: block; - @include grid-item-spans(5, span 1); + @include grid-item-spans(null, null, 5, span 1); line-height: .8; @include grid-media('md') { - @include grid-item-spans(2, span 1, 3, span 1); + @include grid-item-spans(3, span 1, 2, span 1); } } .su-lockup__sitename-line5 { @include grid-media('md') { - @include grid-item-spans(3, span 1); + @include grid-item-spans(null, null, 3, span 1); } } diff --git a/core/scss/components/lockup/_lockup.scss b/core/scss/components/lockup/_lockup.scss index 4a0d30f60..25f395d27 100644 --- a/core/scss/components/lockup/_lockup.scss +++ b/core/scss/components/lockup/_lockup.scss @@ -26,7 +26,7 @@ width: fit-content; text-decoration: none; - @media #{$breakpoint-md} { + @include grid-media('md') { @include grid-columns(auto auto 1fr); @include grid-rows(auto auto); } @@ -34,18 +34,13 @@ .su-lockup__wordmark { @include logo; + @include grid-item-spans(1, span 1, 1, span 1); display: block; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-row: 1 / span 1; - -ms-grid-column: 1; - -ms-grid-column-span: 1; - grid-column: 1 / span 1; color: $color-cardinal-red; font-size: 36px; line-height: 1; - @media #{$breakpoint-md} { + @include grid-media('md') { font-size: 46px; height: 33px; line-height: .96; @@ -55,7 +50,7 @@ + .su-lockup__pipe { display: none; - @media #{$breakpoint-md} { + @include grid-media('md') { display: block; } } @@ -64,26 +59,16 @@ //Put the pipe in its own CSS grid cell so that its height auto adjusts to the tallest part of the lockup .su-lockup__pipe { @include margin(7px null); + @include grid-item-spans(1, span 1, 3, span 1); display: block; - -ms-grid-row: 3; - -ms-grid-row-span: 1; - grid-row: 3 / span 1; - -ms-grid-column: 1; - -ms-grid-column-span: 1; - grid-column: 1 / span 1; content: ""; width: 118px; height: 1px; background-color: $color-black; - @media #{$breakpoint-md} { + @include grid-media('md') { @include margin(0 7px); - grid-row: 1 / span 1; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-column: 2 / span 1; - -ms-grid-column: 2; - -ms-grid-column-span: 1; + @include grid-item-spans(2, span 1, 1, span 1); display: inline-block; width: 1px; height: 100%; @@ -96,27 +81,18 @@ .su-lockup__sitename-line5 { @include font-smoothing; display: block; - grid-column: 1 / span 1; - -ms-grid-column: 1; - -ms-grid-column-span: 1; + @include grid-item-spans(1, span 1); color: $color-black; } .su-lockup__sitename-line1 { - grid-row: 4 / span 1; - -ms-grid-row: 4; - -ms-grid-row-span: 1; + @include grid-item-spans(null, null, 4, span 1); font-size: 22px; line-height: .8; - @media #{$breakpoint-md} { - grid-row: 1 / span 1; - -ms-grid-row: 1; - -ms-grid-row-span: 1; - grid-column: 3 / span 1; - -ms-grid-column: 3; - -ms-grid-column-span: 1; + @include grid-media('md') { + @include grid-item-spans(3, span 1, 1, span 1); font-size: 30px; } } @@ -126,20 +102,13 @@ } .su-lockup__sitename-line5 { - grid-row: 2 / span 1; - -ms-grid-row: 2; - -ms-grid-row-span: 1; + @include grid-item-spans(null, null, 2, span 1); font-size: 20px; line-height: 1.1; - @media #{$breakpoint-md} { + @include grid-media('md') { @include padding(8px null null); - grid-row: 2 / span 1; - -ms-grid-row: 2; - -ms-grid-row-span: 1; - grid-column: 1 / span 3; - -ms-grid-column: 1; - -ms-grid-column-span: 3; + @include grid-item-spans(1, span 3, 2, span 1); font-size: 27px; } } From 14f464d5c3a327289d16e9e773fa4c8c3b69cfe5 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 22 Nov 2018 13:24:08 -0800 Subject: [PATCH 049/123] Solidify layout names. --- core/scss/components/cta/_cta.scss | 2 +- core/scss/core/grid/_flex-grid.scss | 5 ++++- .../functions/flex/_breakpoint-insert.scss | 4 ++++ .../functions/flex/_breakpoint-max.scss | 6 +++++- .../functions/flex/_breakpoint-min.scss | 6 +++++- .../functions/flex/_breakpoint-next.scss | 8 ++++++-- .../functions/flex/_flex-column-ratio.scss | 3 +-- .../functions/flex/_flex-column-width.scss | 2 +- .../functions/string/_to-length.scss | 17 +++++++++++++++++ .../functions/string/_to-number.scss | 19 ------------------- .../utilities/functions/string/index.scss | 1 + .../mixins/button/_button-primary.scss | 2 +- .../mixins/button/_button-secondary.scss | 2 +- .../{_cta--button.scss => _cta-button.scss} | 8 ++++---- core/scss/utilities/mixins/cta/index.scss | 2 +- core/templates/components/cta/cta.twig | 2 +- .../layout/four-column/molive/molive.json | 1 - .../layout/four-column/molive/molive.twig | 2 +- .../layout/full-width/bricks/bricks.json | 1 - .../layout/full-width/bricks/bricks.twig | 2 +- .../layout/full-width/ibeam/ibeam.json | 1 - .../layout/full-width/ibeam/ibeam.twig | 2 +- .../layout/one-column/basic/basic.json | 1 - .../layout/one-column/basic/basic.twig | 2 +- .../layout/three-column/bars/bars.json | 1 - .../layout/three-column/bars/bars.twig | 2 +- .../three-column/battleship/battleship.json | 1 - .../three-column/battleship/battleship.twig | 2 +- .../layout/three-column/chess/chess.json | 1 - .../layout/three-column/chess/chess.twig | 2 +- .../layout/three-column/robot/robot.json | 1 - .../layout/three-column/robot/robot.twig | 2 +- .../space-invader/space-invader.json | 1 - .../space-invader/space-invader.twig | 2 +- .../layout/two-column/donies/donies.json | 1 - .../layout/two-column/donies/donies.twig | 2 +- .../layout/two-column/frogger/frogger.json | 1 - .../layout/two-column/frogger/frogger.twig | 2 +- .../layout/two-column/toucan/toucan.json | 1 - .../layout/two-column/toucan/toucan.twig | 2 +- 40 files changed, 65 insertions(+), 60 deletions(-) create mode 100644 core/scss/utilities/functions/string/_to-length.scss rename core/scss/utilities/mixins/cta/{_cta--button.scss => _cta-button.scss} (84%) diff --git a/core/scss/components/cta/_cta.scss b/core/scss/components/cta/_cta.scss index de1c35774..fab6f1e31 100644 --- a/core/scss/components/cta/_cta.scss +++ b/core/scss/components/cta/_cta.scss @@ -16,7 +16,7 @@ .su-cta--button-bottom, .su-cta { - @include cta--button; + @include cta-button; } .su-cta--button-bottom-icon { diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/grid/_flex-grid.scss index 788037ced..8a452bb4c 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/grid/_flex-grid.scss @@ -72,7 +72,10 @@ // Loop through each column and breakpoint creating a responsive flex column. // The gutter sizes change as the breakpoints change so as the breakpoints -// get larger for each breakpoint class we have to adjust the gutter. +// get larger for each breakpoint class we have to adjust the gutter. For +// example, the flex-md-1-of-12 grid class will need a breakpoint wrapping +// and gutter size for breakpoints md -> 2xl but flex-xl-1-of-12 will only need +// breakpoints wrapping for breakpoints xl -> 2xl. @for $n from 1 through $grid-columns { // Storage for breakpoint codes through each loop of columns. diff --git a/core/scss/utilities/functions/flex/_breakpoint-insert.scss b/core/scss/utilities/functions/flex/_breakpoint-insert.scss index 3cfdf2a6f..6ead72328 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-insert.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-insert.scss @@ -1,5 +1,7 @@ @charset "UTF-8"; +// breakpoint-insert($name, $breakpoints: grid-screens); +// // The $grid-screens map defined in the grid variables file is used as the // $breakpoints argument by default. // @@ -11,6 +13,8 @@ // Returns a blank string // breakpoint-insert(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "-sm" +// +// Style guide: Functions.Flex.breakpoint-insert @function breakpoint-insert($name, $breakpoints: $grid-screens) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } diff --git a/core/scss/utilities/functions/flex/_breakpoint-max.scss b/core/scss/utilities/functions/flex/_breakpoint-max.scss index 1b2afe4c6..44af75994 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-max.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-max.scss @@ -1,14 +1,18 @@ @charset "UTF-8"; +// breakpoint-max($name, $breakpoints; +// // The $grid-screens map defined in the grid variables file is used as the // $breakpoints argument by default. - +// // Maximum breakpoint width. Null for the largest (2xl) breakpoint. // The maximum value is calculated as the minimum of the following breakpoint // minus 1px. // // breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "767px" +// +// Style guide: Functions.Flex.beakpoint-max @function breakpoint-max($name, $breakpoints: $grid-screens) { $next: breakpoint-next($name, $breakpoints); @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); diff --git a/core/scss/utilities/functions/flex/_breakpoint-min.scss b/core/scss/utilities/functions/flex/_breakpoint-min.scss index 56156aadd..db58274d5 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-min.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-min.scss @@ -1,12 +1,16 @@ @charset "UTF-8"; +// breakpoint-min($name, $breakpoints); +// // The $grid-screens map defined in the grid variables file is used as the // $breakpoints argument by default. - +// // Minimum breakpoint width. Null for the smallest (xs) breakpoint. // // breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "576px" +// +// Style guide: Functions.Flex.beakpoint-min @function breakpoint-min($name, $breakpoints: $grid-screens) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); diff --git a/core/scss/utilities/functions/flex/_breakpoint-next.scss b/core/scss/utilities/functions/flex/_breakpoint-next.scss index 48459ed1b..b6b7bdc98 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-next.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-next.scss @@ -1,13 +1,17 @@ @charset "UTF-8"; +// breakpoint-next($name, $breakpoint-names) +// // The $grid-screens map defined in the grid variables file is used as the // $breakpoints argument by default. - +// // Name of the next breakpoint, or null for the last breakpoint. // // breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "md" -@function breakpoint-next($name, $breakpoints: $grid-screens, $breakpoint-names: map-keys($breakpoints)) { +// +// Style guide: Functions.Flex.breakpoint-next +@function breakpoint-next($name, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } diff --git a/core/scss/utilities/functions/flex/_flex-column-ratio.scss b/core/scss/utilities/functions/flex/_flex-column-ratio.scss index a460ab68a..c4cfee377 100644 --- a/core/scss/utilities/functions/flex/_flex-column-ratio.scss +++ b/core/scss/utilities/functions/flex/_flex-column-ratio.scss @@ -12,8 +12,7 @@ // $grid-columns - The number of columns for the item to span // // Style guide: Functions.Flex.flex-column-ratio - -@function flex-column-ratio($columns, $grid-columns: 12) { +@function flex-column-ratio($columns, $grid-columns: $grid-columns) { @if length($columns) > 1 { @return nth($columns, 1) / flex-parse-columns($columns); } @else if $columns { diff --git a/core/scss/utilities/functions/flex/_flex-column-width.scss b/core/scss/utilities/functions/flex/_flex-column-width.scss index 336a7142d..0a117bbce 100644 --- a/core/scss/utilities/functions/flex/_flex-column-width.scss +++ b/core/scss/utilities/functions/flex/_flex-column-width.scss @@ -10,7 +10,7 @@ // // Style guide: Functions.Flex.flex-column-width // -@function flex-column-width($columns, $gutter: $gutter-xs, $grid-columns: 12) { +@function flex-column-width($columns, $gutter: $gutter-xs, $grid-columns: $grid-columns) { $_column-ratio: flex-column-ratio($columns, $grid-columns); // Make note here. diff --git a/core/scss/utilities/functions/string/_to-length.scss b/core/scss/utilities/functions/string/_to-length.scss new file mode 100644 index 000000000..5b58b1f97 --- /dev/null +++ b/core/scss/utilities/functions/string/_to-length.scss @@ -0,0 +1,17 @@ +/// +/// Add `$unit` to `$value` +/// +/// @param {Number} $value - Value to add unit to +/// @param {String} $unit - String representation of the unit +/// +/// @return {Number} - `$value` expressed in `$unit` +/// +@function to-length($value, $unit) { + $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); + + @if not index(map-keys($units), $unit) { + $_: log('Invalid unit `#{$unit}`.'); + } + + @return $value * map-get($units, $unit); +} diff --git a/core/scss/utilities/functions/string/_to-number.scss b/core/scss/utilities/functions/string/_to-number.scss index 15b60dd5e..6cfa3fbcf 100644 --- a/core/scss/utilities/functions/string/_to-number.scss +++ b/core/scss/utilities/functions/string/_to-number.scss @@ -48,22 +48,3 @@ @return if($minus, -$result, $result);; } - - -/// -/// Add `$unit` to `$value` -/// -/// @param {Number} $value - Value to add unit to -/// @param {String} $unit - String representation of the unit -/// -/// @return {Number} - `$value` expressed in `$unit` -/// -@function to-length($value, $unit) { - $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); - - @if not index(map-keys($units), $unit) { - $_: log('Invalid unit `#{$unit}`.'); - } - - @return $value * map-get($units, $unit); -} diff --git a/core/scss/utilities/functions/string/index.scss b/core/scss/utilities/functions/string/index.scss index d6ede258f..cbc925920 100644 --- a/core/scss/utilities/functions/string/index.scss +++ b/core/scss/utilities/functions/string/index.scss @@ -2,4 +2,5 @@ @import "str-replace", + "to-length", "to-number"; diff --git a/core/scss/utilities/mixins/button/_button-primary.scss b/core/scss/utilities/mixins/button/_button-primary.scss index 395f80c90..596752dd4 100644 --- a/core/scss/utilities/mixins/button/_button-primary.scss +++ b/core/scss/utilities/mixins/button/_button-primary.scss @@ -27,7 +27,7 @@ width: 100%; transition: background-color .25s ease-in-out, color .25s ease-in-out; - @media #{$breakpoint-sm} { + @include grid-media('sm') { width: auto; } diff --git a/core/scss/utilities/mixins/button/_button-secondary.scss b/core/scss/utilities/mixins/button/_button-secondary.scss index 9f319a0e5..491f5ae4a 100644 --- a/core/scss/utilities/mixins/button/_button-secondary.scss +++ b/core/scss/utilities/mixins/button/_button-secondary.scss @@ -27,7 +27,7 @@ text-decoration: none; width: 100%; - @media #{$breakpoint-sm} { + @include grid-media('sm') { width: auto; } diff --git a/core/scss/utilities/mixins/cta/_cta--button.scss b/core/scss/utilities/mixins/cta/_cta-button.scss similarity index 84% rename from core/scss/utilities/mixins/cta/_cta--button.scss rename to core/scss/utilities/mixins/cta/_cta-button.scss index 21e793ff7..bf0476c33 100644 --- a/core/scss/utilities/mixins/cta/_cta--button.scss +++ b/core/scss/utilities/mixins/cta/_cta-button.scss @@ -1,14 +1,14 @@ @charset "UTF-8"; // -// @cta--button +// @cta-button // // CTA with an image and a button // -// Style guide: Mixins.CTA.cta--button +// Style guide: Mixins.CTA.cta-button // -@mixin cta--button { +@mixin cta-button { display: flex; flex-direction: column; overflow: hidden; @@ -36,7 +36,7 @@ margin: 0; - @media #{$breakpoint-xs} { + @include grid-media('xs') { width: 100%; z-index: 100; } diff --git a/core/scss/utilities/mixins/cta/index.scss b/core/scss/utilities/mixins/cta/index.scss index 913310cac..0d33c9dcf 100644 --- a/core/scss/utilities/mixins/cta/index.scss +++ b/core/scss/utilities/mixins/cta/index.scss @@ -9,4 +9,4 @@ // @import - 'cta--button'; + 'cta-button'; diff --git a/core/templates/components/cta/cta.twig b/core/templates/components/cta/cta.twig index b1936f503..bcc3514d2 100644 --- a/core/templates/components/cta/cta.twig +++ b/core/templates/components/cta/cta.twig @@ -30,4 +30,4 @@ {% endif %}

    {{ button_text|default("Button text") }}

    - \ No newline at end of file + diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/four-column/molive/molive.json index e159f5e09..93c002d15 100644 --- a/core/templates/layout/four-column/molive/molive.json +++ b/core/templates/layout/four-column/molive/molive.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-molive", "first": "

    First Column

    ", "second": "

    Second Column

    ", "third": "

    Third Column

    ", diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/four-column/molive/molive.twig index dde1f8b98..be8b9fc99 100644 --- a/core/templates/layout/four-column/molive/molive.twig +++ b/core/templates/layout/four-column/molive/molive.twig @@ -14,7 +14,7 @@ * - $content['right']: Content in the right column. */ #} - + {# A centered max-width header region #} {% if header is not empty %} diff --git a/core/templates/layout/full-width/bricks/bricks.json b/core/templates/layout/full-width/bricks/bricks.json index 7dc4518ad..558128ca4 100644 --- a/core/templates/layout/full-width/bricks/bricks.json +++ b/core/templates/layout/full-width/bricks/bricks.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-bricks", "hero": "

    Full Width Hero Column 1

    ", "hero2": "

    Full Width Hero Column 2

    ", "first": "

    First Column

    ", diff --git a/core/templates/layout/full-width/bricks/bricks.twig b/core/templates/layout/full-width/bricks/bricks.twig index 781c32ced..83655a539 100644 --- a/core/templates/layout/full-width/bricks/bricks.twig +++ b/core/templates/layout/full-width/bricks/bricks.twig @@ -17,7 +17,7 @@ * - fourth */ #} - + {# Full width region #} {% if hero is not empty %} diff --git a/core/templates/layout/full-width/ibeam/ibeam.json b/core/templates/layout/full-width/ibeam/ibeam.json index 88d9e5a6a..a9746d5e8 100644 --- a/core/templates/layout/full-width/ibeam/ibeam.json +++ b/core/templates/layout/full-width/ibeam/ibeam.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-ibeam", "full_width": "

    Full width region

    ", "full_width2": "

    Full width region

    ", "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/full-width/ibeam/ibeam.twig b/core/templates/layout/full-width/ibeam/ibeam.twig index 96bae54a0..9b8f3acad 100644 --- a/core/templates/layout/full-width/ibeam/ibeam.twig +++ b/core/templates/layout/full-width/ibeam/ibeam.twig @@ -14,7 +14,7 @@ * - */ #} - + {% if full_width is not empty %}
    diff --git a/core/templates/layout/one-column/basic/basic.json b/core/templates/layout/one-column/basic/basic.json index 6ebe18156..1a723bb68 100644 --- a/core/templates/layout/one-column/basic/basic.json +++ b/core/templates/layout/one-column/basic/basic.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-basic", "header": "

    Header

    ", "footer": "
    This is the footer
    ", "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " diff --git a/core/templates/layout/one-column/basic/basic.twig b/core/templates/layout/one-column/basic/basic.twig index c0836e2a6..c825e576a 100644 --- a/core/templates/layout/one-column/basic/basic.twig +++ b/core/templates/layout/one-column/basic/basic.twig @@ -14,7 +14,7 @@ * - content */ #} - + {% if header is not empty %}
    diff --git a/core/templates/layout/three-column/bars/bars.json b/core/templates/layout/three-column/bars/bars.json index ab72d232f..aa79e4ede 100644 --- a/core/templates/layout/three-column/bars/bars.json +++ b/core/templates/layout/three-column/bars/bars.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-bars", "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " diff --git a/core/templates/layout/three-column/bars/bars.twig b/core/templates/layout/three-column/bars/bars.twig index 93216d9e9..bd8507704 100644 --- a/core/templates/layout/three-column/bars/bars.twig +++ b/core/templates/layout/three-column/bars/bars.twig @@ -13,7 +13,7 @@ * - */ #} - +
    {{ first }} diff --git a/core/templates/layout/three-column/battleship/battleship.json b/core/templates/layout/three-column/battleship/battleship.json index 804712326..71a391251 100644 --- a/core/templates/layout/three-column/battleship/battleship.json +++ b/core/templates/layout/three-column/battleship/battleship.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-battleship", "first": "

    Heading goes here

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", "second": "Example Image", "third": "Example Image", diff --git a/core/templates/layout/three-column/battleship/battleship.twig b/core/templates/layout/three-column/battleship/battleship.twig index f54376353..7673d9a41 100644 --- a/core/templates/layout/three-column/battleship/battleship.twig +++ b/core/templates/layout/three-column/battleship/battleship.twig @@ -14,7 +14,7 @@ * */ #} - +
    {{ first }} diff --git a/core/templates/layout/three-column/chess/chess.json b/core/templates/layout/three-column/chess/chess.json index a60445c51..ef8e9b188 100644 --- a/core/templates/layout/three-column/chess/chess.json +++ b/core/templates/layout/three-column/chess/chess.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-chess", "header": "

    This is the optional full column header.

    ", "footer": "

    Footer is optional.

    ", "first": "

    First Column

    ", diff --git a/core/templates/layout/three-column/chess/chess.twig b/core/templates/layout/three-column/chess/chess.twig index 8145a7b7a..e811828fb 100644 --- a/core/templates/layout/three-column/chess/chess.twig +++ b/core/templates/layout/three-column/chess/chess.twig @@ -14,7 +14,7 @@ * */ #} - + {% if header is not empty %}
    diff --git a/core/templates/layout/three-column/robot/robot.json b/core/templates/layout/three-column/robot/robot.json index e00347446..2ecc22da6 100644 --- a/core/templates/layout/three-column/robot/robot.json +++ b/core/templates/layout/three-column/robot/robot.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-robot", "header": "

    An optional Header Area

    ", "first": "

    First column

    ", "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/three-column/robot/robot.twig b/core/templates/layout/three-column/robot/robot.twig index 708b3bc51..a75b16f29 100644 --- a/core/templates/layout/three-column/robot/robot.twig +++ b/core/templates/layout/three-column/robot/robot.twig @@ -14,7 +14,7 @@ * */ #} - +
    {% if header is not empty %} diff --git a/core/templates/layout/three-column/space-invader/space-invader.json b/core/templates/layout/three-column/space-invader/space-invader.json index 3f6f9924b..2ecc22da6 100644 --- a/core/templates/layout/three-column/space-invader/space-invader.json +++ b/core/templates/layout/three-column/space-invader/space-invader.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-space-invader", "header": "

    An optional Header Area

    ", "first": "

    First column

    ", "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", diff --git a/core/templates/layout/three-column/space-invader/space-invader.twig b/core/templates/layout/three-column/space-invader/space-invader.twig index 708b3bc51..cf1481881 100644 --- a/core/templates/layout/three-column/space-invader/space-invader.twig +++ b/core/templates/layout/three-column/space-invader/space-invader.twig @@ -14,7 +14,7 @@ * */ #} - +
    {% if header is not empty %} diff --git a/core/templates/layout/two-column/donies/donies.json b/core/templates/layout/two-column/donies/donies.json index 8668d400e..8caea6850 100644 --- a/core/templates/layout/two-column/donies/donies.json +++ b/core/templates/layout/two-column/donies/donies.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-donies", "first": "

    First Column

    ", "second": "

    Second Column

    ", "header": "

    Header

    ", diff --git a/core/templates/layout/two-column/donies/donies.twig b/core/templates/layout/two-column/donies/donies.twig index febd64336..9d9214d03 100644 --- a/core/templates/layout/two-column/donies/donies.twig +++ b/core/templates/layout/two-column/donies/donies.twig @@ -14,7 +14,7 @@ * */ #} - + {# Optional header region #} {% if header is not empty %}
    diff --git a/core/templates/layout/two-column/frogger/frogger.json b/core/templates/layout/two-column/frogger/frogger.json index 3d9c4d512..a78aaa491 100644 --- a/core/templates/layout/two-column/frogger/frogger.json +++ b/core/templates/layout/two-column/frogger/frogger.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-frogger", "first": "

    First Column

    ", "second": "

    Second Column

    ", "third": "

    Third Column

    ", diff --git a/core/templates/layout/two-column/frogger/frogger.twig b/core/templates/layout/two-column/frogger/frogger.twig index 4bde6471f..fd6535a5f 100644 --- a/core/templates/layout/two-column/frogger/frogger.twig +++ b/core/templates/layout/two-column/frogger/frogger.twig @@ -14,7 +14,7 @@ * */ #} - + {# Optional Header #} {% if header is not empty %} diff --git a/core/templates/layout/two-column/toucan/toucan.json b/core/templates/layout/two-column/toucan/toucan.json index e19ee1aa8..330be3d05 100644 --- a/core/templates/layout/two-column/toucan/toucan.json +++ b/core/templates/layout/two-column/toucan/toucan.json @@ -1,5 +1,4 @@ { - "modifier_class": "layout-toucan", "first": "

    First Column

    ", "second": "

    Second Column

    " } diff --git a/core/templates/layout/two-column/toucan/toucan.twig b/core/templates/layout/two-column/toucan/toucan.twig index e1656862f..524e5692f 100644 --- a/core/templates/layout/two-column/toucan/toucan.twig +++ b/core/templates/layout/two-column/toucan/toucan.twig @@ -6,7 +6,7 @@ * */ #} - +
    {# Required column #} From 82d78d4c4e6be8c1e5d98fc20a9eb5bbf825a626 Mon Sep 17 00:00:00 2001 From: Sherakama Date: Wed, 28 Nov 2018 12:01:34 -0800 Subject: [PATCH 050/123] Update _sticky-footer.scss --- .../utilities/mixins/layout/_sticky-footer.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index 88d4eaa4c..f9c866ae6 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -1,5 +1,8 @@ @charset 'UTF-8'; +// This file is here until https://github.com/SU-SWS/decanter/pull/261 gets +// merged and pulled in to this project. + // // @sticky-footer // @@ -16,15 +19,18 @@ // // Style guide: Mixins.Layout.Sticky Footer // -@mixin sticky-footer($selector: '> footer') { +@mixin sticky-footer($selector: '> .global-footer') { @include padding(0); @include margin(0); - @include display-grid; - height: 100vh; // Avoid the IE 10-11 `min-height` bug. - z-index: 9999; + height: 100vh; + min-height: 100%; + display: flex; + justify-content: flex-start; + flex-direction: column; + #{$selector} { - align-self: flex-end; + margin-top: auto; } } From 1319b4eaee655242565cb46019106711ad6de493 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 28 Nov 2018 12:34:39 -0800 Subject: [PATCH 051/123] Fix centered column alignment. --- .../scss/components/site-search/_site-search.scss | 15 +++++---------- .../mixins/grid/_centered-grid-container.scss | 10 +++++----- core/scss/utilities/mixins/grid/index.scss | 1 + 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss index 85a8a0a5f..6036092dd 100644 --- a/core/scss/components/site-search/_site-search.scss +++ b/core/scss/components/site-search/_site-search.scss @@ -9,6 +9,11 @@ // // Style guide: Components.Site Search // + +.su-site-search { + position: relative; +} + .su-site-search__input { @include font-smoothing; @include padding(.3em 1em); @@ -23,10 +28,6 @@ color: $color-black; opacity: 1; // For Firefox } - - @include grid-media('lg') { - max-width: 20em; - } } .su-site-search__sr-label { @@ -44,12 +45,6 @@ right: 12px; width: auto; - @include grid-media('lg') { - position: relative; - top: 7px; - right: 40px; - } - img { display: inline-block; max-width: 24px; diff --git a/core/scss/utilities/mixins/grid/_centered-grid-container.scss b/core/scss/utilities/mixins/grid/_centered-grid-container.scss index a928e4db9..fe101f0c8 100644 --- a/core/scss/utilities/mixins/grid/_centered-grid-container.scss +++ b/core/scss/utilities/mixins/grid/_centered-grid-container.scss @@ -17,23 +17,23 @@ } @include grid-media('sm') { - @include grid-columns(auto $screen-sm auto); + @include grid-columns(auto $screen-sm - $gutter-sm auto); } @include grid-media('md') { - @include grid-columns(auto $screen-md auto); + @include grid-columns(auto $screen-md - $gutter-md auto); } @include grid-media('lg') { - @include grid-columns(auto $screen-lg auto); + @include grid-columns(auto $screen-lg - $gutter-lg auto); } @include grid-media('xl') { - @include grid-columns(auto $screen-xl auto); + @include grid-columns(auto $screen-xl - $gutter-xl auto); } @include grid-media('2xl') { - @include grid-columns(auto $screen-2xl auto); + @include grid-columns(auto $screen-2xl - $gutter-2xl auto); } @include grid-columns(auto 100% auto); diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index c9be2bf14..13e90697e 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -15,6 +15,7 @@ 'grid-columns', 'grid-gap', 'grid-item-spans', + 'grid-justify-self', 'grid-row-gap', 'grid-rows', 'responsive-grid-gap', From f94943591cf8610903649634185920fce17f92d6 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 28 Nov 2018 12:44:10 -0800 Subject: [PATCH 052/123] Updates. --- kss/builder/decanter/kss-assets/css/kss.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index e41cbebde..957f5a920 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -990,12 +990,13 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { body { padding: 0; margin: 0; - display: -ms-grid; - display: grid; height: 100vh; - z-index: 9999; } - body > footer { - align-self: flex-end; } + min-height: 100%; + display: flex; + justify-content: flex-start; + flex-direction: column; } + body > .global-footer { + margin-top: auto; } #kss-node.kss-home .kss-main { width: 100%; From c6ab16ddcd0829bacbbf1d10d7388a47c9ff4d8e Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 28 Nov 2018 13:02:34 -0800 Subject: [PATCH 053/123] Conditional regions. --- core/templates/components/alert/alert.twig | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/templates/components/alert/alert.twig b/core/templates/components/alert/alert.twig index 82480f4ba..99c36b59a 100644 --- a/core/templates/components/alert/alert.twig +++ b/core/templates/components/alert/alert.twig @@ -21,7 +21,11 @@ #}
    + {% if alert_header is not empty %}

    {{ alert_header }}

    + {% endif %} + {% if alert_text is not empty %}

    {{ alert_text }}

    + {% endif %}
    From 76dd7debdc36e8ecb8636920c412ceec37daef6d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Wed, 28 Nov 2018 21:59:09 -0800 Subject: [PATCH 054/123] Added type checking and a slightly different parameter to grid-gap. --- core/css/decanter.css | 141 ++++++++++++------ .../components/card/_card--horizontal.scss | 20 ++- core/scss/components/card/_is-number.scss | 13 ++ core/scss/utilities/functions/index.scss | 3 +- .../type-checks/_is-absolute-length.scss | 13 ++ .../functions/type-checks/_is-integer.scss | 13 ++ .../functions/type-checks/_is-length.scss | 13 ++ .../functions/type-checks/_is-number.scss | 13 ++ .../functions/type-checks/_is-percentage.scss | 13 ++ .../functions/type-checks/_is-position.scss | 13 ++ .../type-checks/_is-relative-length.scss | 13 ++ .../functions/type-checks/index.scss | 10 ++ .../scss/utilities/mixins/grid/_grid-gap.scss | 12 +- kss/builder/decanter/kss-assets/css/kss.css | 100 ++++++------- 14 files changed, 287 insertions(+), 103 deletions(-) create mode 100644 core/scss/components/card/_is-number.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-absolute-length.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-integer.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-length.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-number.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-percentage.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-position.scss create mode 100644 core/scss/utilities/functions/type-checks/_is-relative-length.scss create mode 100644 core/scss/utilities/functions/type-checks/index.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 437b63c69..d8fc60e21 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6100,24 +6100,24 @@ dfn { grid-column: 2; } @media only screen and (min-width: 576px) { .centered-container { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { .centered-container { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { .centered-container { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { .centered-container { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { .centered-container { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } .su-alert { padding: 2rem; @@ -6183,24 +6183,24 @@ dfn { grid-column: 2; } @media only screen and (min-width: 576px) { .su-brand-bar { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { .su-brand-bar { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { .su-brand-bar { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { .su-brand-bar { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { .su-brand-bar { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } .su-brand-bar__logo { display: inline-block; @@ -6437,32 +6437,92 @@ button, @media only screen and (min-width: 0) { .su-card--horizontal { -ms-grid-columns: 100%; - grid-template-columns: 100%; } } + grid-template-columns: 100%; } + .su-card--horizontal > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .su-card--horizontal { + grid-column-gap: 32px; } + .su-card--horizontal > * { + margin-right: 0; + margin-left: 0; } } + .su-card--horizontal > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .su-card--horizontal { + grid-row-gap: 32px; } + .su-card--horizontal > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .su-card--horizontal { -ms-grid-columns: 1fr 2fr; - grid-template-columns: 1fr 2fr; } } + grid-template-columns: 1fr 2fr; } + .su-card--horizontal > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .su-card--horizontal { + grid-column-gap: 32px; } + .su-card--horizontal > * { + margin-right: 0; + margin-left: 0; } } + .su-card--horizontal > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .su-card--horizontal { + grid-row-gap: 32px; } + .su-card--horizontal > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 768px) { .su-card--horizontal { -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } } - .su-card--horizontal > img { - margin: 32px 0; } + grid-template-columns: 1fr 1fr; } + .su-card--horizontal > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .su-card--horizontal { + grid-column-gap: 36px; } + .su-card--horizontal > * { + margin-right: 0; + margin-left: 0; } } + .su-card--horizontal > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .su-card--horizontal { + grid-row-gap: 36px; } + .su-card--horizontal > * { + margin-top: 0; + margin-bottom: 0; } } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 32px; } @media only screen and (min-width: 576px) { - .su-card--horizontal > img { - margin: 32px 0; } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 32px; } } @media only screen and (min-width: 768px) { - .su-card--horizontal > img { - margin: 36px 0; } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 36px; } } @media only screen and (min-width: 992px) { - .su-card--horizontal > img { - margin: 36px 0; } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 36px; } } @media only screen and (min-width: 1200px) { - .su-card--horizontal > img { - margin: 36px 0; } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 36px; } } @media only screen and (min-width: 1500px) { - .su-card--horizontal > img { - margin: 38px 0; } } + .su-card--horizontal > img, + .su-card--horizontal .su-card__contents { + margin: 38px; } } .su-cta--button-bottom, .su-cta { @@ -7100,6 +7160,9 @@ button, font-size: 1.5em; font-weight: 600; } +.su-site-search { + position: relative; } + .su-site-search__input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -7121,9 +7184,6 @@ button, .su-site-search__input::placeholder { color: #2e2d29; opacity: 1; } - @media only screen and (min-width: 992px) { - .su-site-search__input { - max-width: 20em; } } .su-site-search__sr-label { position: absolute; @@ -7140,11 +7200,6 @@ button, top: 11px; right: 12px; width: auto; } - @media only screen and (min-width: 992px) { - .su-site-search__submit { - position: relative; - top: 7px; - right: 40px; } } .su-site-search__submit img { display: inline-block; max-width: 24px; diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 702fe2535..1f2e9523a 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -10,41 +10,45 @@ // One column on smallest screen sizes. @include grid-media("xs") { @include grid-columns(100%); + @include grid-gap('xs'); } // 33/66 for small. @include grid-media("sm") { @include grid-columns(1fr 2fr); + @include grid-gap('sm'); } // 50/50 side by side on all screen sizes above small. @include grid-media("md") { @include grid-columns(1fr 1fr); + @include grid-gap('md'); } - // Modular padding on images too. - > img { + // Modular padding. + > img, + .su-card__contents { @include grid-media('sm') { - margin: modular-spacing-get-value('sm') 0; + margin: modular-spacing-get-value('sm'); } @include grid-media('md') { - margin: modular-spacing-get-value('md') 0; + margin: modular-spacing-get-value('md'); } @include grid-media('lg') { - margin: modular-spacing-get-value('lg') 0; + margin: modular-spacing-get-value('lg'); } @include grid-media('xl') { - margin: modular-spacing-get-value('xl') 0; + margin: modular-spacing-get-value('xl'); } @include grid-media('2xl') { - margin: modular-spacing-get-value('2xl') 0; + margin: modular-spacing-get-value('2xl'); } - margin: modular-spacing-get-value('xs') 0; + margin: modular-spacing-get-value('xs'); } diff --git a/core/scss/components/card/_is-number.scss b/core/scss/components/card/_is-number.scss new file mode 100644 index 000000000..8e9056f98 --- /dev/null +++ b/core/scss/components/card/_is-number.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-number($value) +// +// Validates wether something is a number +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-number +// +@function is-number($value) { + @return type-of($value) == 'number'; +} diff --git a/core/scss/utilities/functions/index.scss b/core/scss/utilities/functions/index.scss index 6af8ea5b0..d4dd7b7b3 100644 --- a/core/scss/utilities/functions/index.scss +++ b/core/scss/utilities/functions/index.scss @@ -7,4 +7,5 @@ @import 'flex/index', 'modular-scale/index', - 'string/index'; + 'string/index', + 'type-checks/index'; diff --git a/core/scss/utilities/functions/type-checks/_is-absolute-length.scss b/core/scss/utilities/functions/type-checks/_is-absolute-length.scss new file mode 100644 index 000000000..14ef01484 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-absolute-length.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-absolute-length($value) +// +// Validates wether something is an absolute unit. +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-absolute-length +// +@function is-absolute-length($value) { + @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null; +} diff --git a/core/scss/utilities/functions/type-checks/_is-integer.scss b/core/scss/utilities/functions/type-checks/_is-integer.scss new file mode 100644 index 000000000..67336e65d --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-integer.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-integer($value) +// +// Validates wether something is an integer +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-integer +// +@function is-integer($value) { + @return is-number($value) and round($value) == $value; +} diff --git a/core/scss/utilities/functions/type-checks/_is-length.scss b/core/scss/utilities/functions/type-checks/_is-length.scss new file mode 100644 index 000000000..ad5fdb237 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-length.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-length($value) +// +// Validates wether something is an length unit +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-length +// +@function is-length($value) { + @return is-relative-length($value) or is-absolute-length($value); +} diff --git a/core/scss/utilities/functions/type-checks/_is-number.scss b/core/scss/utilities/functions/type-checks/_is-number.scss new file mode 100644 index 000000000..8e9056f98 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-number.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-number($value) +// +// Validates wether something is a number +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-number +// +@function is-number($value) { + @return type-of($value) == 'number'; +} diff --git a/core/scss/utilities/functions/type-checks/_is-percentage.scss b/core/scss/utilities/functions/type-checks/_is-percentage.scss new file mode 100644 index 000000000..507d9bf70 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-percentage.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-percentage($value) +// +// Validates wether something is a percentage unit +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-percentage +// +@function is-percentage($value) { + @return is-number($value) and unit($value) == '%'; +} diff --git a/core/scss/utilities/functions/type-checks/_is-position.scss b/core/scss/utilities/functions/type-checks/_is-position.scss new file mode 100644 index 000000000..d4a300318 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-position.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-position($value) +// +// Validates wether something is a position name +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-position +// +@function is-position($value) { + @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null; +} diff --git a/core/scss/utilities/functions/type-checks/_is-relative-length.scss b/core/scss/utilities/functions/type-checks/_is-relative-length.scss new file mode 100644 index 000000000..a916fb076 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/_is-relative-length.scss @@ -0,0 +1,13 @@ +@charset 'UTF-8'; + +// is-relative-length($value) +// +// Validates wether something is a relative length unit +// +// $value - the value to type check +// +// Style guide: functions.type-checks.is-relative-length +// +@function is-relative-length($value) { + @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null; +} diff --git a/core/scss/utilities/functions/type-checks/index.scss b/core/scss/utilities/functions/type-checks/index.scss new file mode 100644 index 000000000..03c3e6649 --- /dev/null +++ b/core/scss/utilities/functions/type-checks/index.scss @@ -0,0 +1,10 @@ +@charset 'UTF-8'; + +@import + 'is-absolute-length', + 'is-integer', + 'is-length', + 'is-number', + 'is-percentage', + 'is-position', + 'is-relative-length'; diff --git a/core/scss/utilities/mixins/grid/_grid-gap.scss b/core/scss/utilities/mixins/grid/_grid-gap.scss index f7f4b0c5e..973ce4ca7 100644 --- a/core/scss/utilities/mixins/grid/_grid-gap.scss +++ b/core/scss/utilities/mixins/grid/_grid-gap.scss @@ -5,11 +5,21 @@ // // Mixin to render cssGrid column gaps in all modern browsers, including IE11. // -// $gap - unit: A unit of space for the column gap between columns. +// $gap - unit|string: A unit of space for the column gap between columns. // // Style guide: Mixins.Grid.grid-gap // @mixin grid-gap($gap: $gutter-xs) { + + $val: is-length($gap); + @debug $val; + + // If the caller passes in a breakpoint shortcode eg: xs, sm, md, etc + // return back the appropriate gap from the global map. + @if map-has-key($grid-gutters, $gap) { + $gap: map-get($grid-gutters, $gap); + } + @include grid-column-gap($gap); @include grid-row-gap($gap); } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 6b4898830..ad0fca80a 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1046,24 +1046,24 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column: 2; } @media only screen and (min-width: 576px) { #kss-node.kss-home header { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home header { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home header { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home header { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home header { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } #kss-node.kss-home header div { display: grid; display: -ms-grid; @@ -1130,24 +1130,24 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column: 2; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--welcome h1, #kss-node.kss-home .section--welcome h2, #kss-node.kss-home .section--welcome h3, @@ -1193,24 +1193,24 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column: 2; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--ui-components .su-card { box-shadow: none; border: 0; } @@ -1230,24 +1230,24 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column: 2; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--dev-resources > * { margin-right: 16px; margin-left: 16px; } @@ -1311,24 +1311,24 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { grid-column: 2; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 576px auto; - grid-template-columns: auto 576px auto; } } + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 768px auto; - grid-template-columns: auto 768px auto; } } + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 992px auto; - grid-template-columns: auto 992px auto; } } + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1200px auto; - grid-template-columns: auto 1200px auto; } } + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1500px auto; - grid-template-columns: auto 1500px auto; } } + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--more-info h2 { text-align: center; } #kss-node.kss-home .section--more-info ul { From a3d6942c71481a04bcc159ebd95aa63a8c38df70 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 29 Nov 2018 11:32:28 -0800 Subject: [PATCH 055/123] wip with kss theme. --- kss/builder/decanter/index.twig | 32 +- kss/builder/decanter/kss-assets/css/kss.css | 864 +++++++------------- kss/builder/decanter/scss/_builder.scss | 733 +---------------- kss/builder/decanter/scss/_original.scss | 724 ++++++++++++++++ kss/builder/decanter/scss/_prettify.scss | 58 ++ kss/builder/decanter/scss/_toolbar.scss | 87 ++ kss/builder/decanter/scss/kss.scss | 4 +- 7 files changed, 1220 insertions(+), 1282 deletions(-) create mode 100644 kss/builder/decanter/scss/_original.scss create mode 100644 kss/builder/decanter/scss/_prettify.scss create mode 100644 kss/builder/decanter/scss/_toolbar.scss diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 93748db54..c09146740 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -12,16 +12,17 @@ {{ styles|raw }} -{% include "@decanter/components/brand-bar/brand-bar.twig" with + +{% + include "@decanter/components/brand-bar/brand-bar.twig" with { "modifier_class": "su-brand-bar--bright", - } - only - %} - - - {% if not template.isHomepage %} + } + only +%} +
    +{% if not template.isHomepage %}

    {{ options.title }}

    @@ -30,22 +31,23 @@
    - - {% endif %} +{% endif %}
    {% if template.isHomepage %} @@ -226,7 +227,8 @@ {% endfor %} {% endif %} -
    + +
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index e2b482f74..1ad9ecc14 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -374,558 +374,160 @@ template { top: 0; z-index: 9999; } -.kss-style { - color: #3D3D3D; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: 20px; - line-height: 30px; } - .kss-style a { - color: #006cb8; - text-decoration: none; - transition-property: color; - transition-duration: 0.5s; } - .kss-style a:visited { - color: #006cb8; } - .kss-style a:hover, .kss-style a:focus { - color: #00548f; } - .kss-style a:active { - color: #00548f; } - .kss-style a:hover, .kss-style a:active { - outline: 0; } - .kss-style blockquote { - color: #666; - margin: 0; - padding-left: 30px; - border-left: 0.5em #cccccc solid; } - .kss-style hr { - display: block; - height: 2px; - border: 0; - border-top: 1px solid #d6d6d6; - border-bottom: 1px solid #d5d4d4; - margin: 30px 0; - padding: 0; } - .kss-style pre, .kss-style code, .kss-style kbd, .kss-style samp { - font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; - color: #363533; - font-size: 1em; } - .kss-style pre { - white-space: pre; - overflow: scroll; } - .kss-style ins { - color: #2e2d29; - background: #ff9; - text-decoration: none; } - .kss-style mark { - color: #2e2d29; - background: #ff0; - font-weight: bold; } - .kss-style sub, .kss-style sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - .kss-style sup { - top: -0.5em; } - .kss-style sub { - bottom: -0.25em; } - .kss-style ul, .kss-style ol { - margin: 30px 0; - padding: 0 0 0 30px; } - .kss-style li p:last-child { - margin: 0; } - .kss-style dd { - margin: 0 0 0 30px; } - .kss-style img { - max-width: 100%; - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; } - .kss-style table { - border-collapse: collapse; - border-spacing: 0; } - .kss-style td { - vertical-align: top; } - @media print { - .kss-style a, .kss-style a:visited { - text-decoration: underline; } - .kss-style hr { - height: 1px; - border: 0; - border-bottom: 1px solid black; } - .kss-style a[href]:after { - content: " (" attr(href) ")"; } - .kss-style a[href^="javascript:"]:after, .kss-style a[href^="#"]:after { - content: ""; } - .kss-style abbr[title]:after { - content: " (" attr(title) ")"; } - .kss-style pre, .kss-style blockquote { - border: 1px solid #999; - padding-right: 1em; - page-break-inside: avoid; } - .kss-style tr, .kss-style img { - page-break-inside: avoid; } - .kss-style img { - max-width: 100% !important; } - .kss-style p, .kss-style h2, .kss-style h3 { - orphans: 3; - widows: 3; } - .kss-style h2, .kss-style h3 { - page-break-after: avoid; } } - -body > div { - position: relative; } - -#kss-node { - margin: 0; - padding: 20px; - background: #fff; } - #kss-node.kss-fullscreen-mode .kss-sidebar, - #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen), - #kss-node.kss-fullscreen-mode .kss-github { - display: none; } - @media screen and (min-width: 769px) { - #kss-node { - padding: 0; } - #kss-node .kss-main, - #kss-node .kss-sidebar { - float: left; - margin-right: -100%; - box-sizing: border-box; } } - #kss-node .kss-main { - width: 100%; - margin: 40px auto 0 auto; } - @media screen and (min-width: 769px) { - #kss-node .kss-main { - width: 80%; - margin-left: 20%; - padding: 0 20px 0 30px; } } - #kss-node .kss-sidebar { - border-bottom: 1px solid #ddd; } - @media screen and (min-width: 769px) { - #kss-node .kss-sidebar { - position: absolute; - top: 0px; - left: 0px; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; - border-bottom: 0; - background-color: #f9f6ef; - box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.7); } } - -#kss-node .kss-doc-title { - margin: 0; } - @media screen and (min-width: 769px) { - #kss-node .kss-doc-title { - font-size: 1.5em; } } - -@media screen and (min-width: 769px) { - #kss-node .kss-header, - #kss-node .kss-nav { - margin-top: 2em; } } - -#kss-node .kss-nav__menu { - margin-top: 15px; - margin-bottom: 15px; - padding: 0; - list-style-type: none; } - -#kss-node .kss-nav__menu-item { - display: inline-block; - padding-right: 30px; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-item { - display: list-item; - padding-right: 0; } } - -#kss-node .kss-nav__menu-link { - position: relative; - display: inline-block; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-link:before { - content: ' '; - position: absolute; - left: -20px; - width: 0; - height: 100%; - background-color: rgba(0, 0, 0, 0); } } - #kss-node .kss-nav__menu-link.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; } - -#kss-node .kss-nav__menu-child { - display: none; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-child { - display: block; - list-style-type: none; - margin: 0; - padding: 0; } - #kss-node .kss-nav__menu-child li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; } - #kss-node .kss-nav__menu-child li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; } } - -#kss-node .kss-nav__ref { - color: #333; - font-weight: bold; } - #kss-node .kss-nav__ref:after { - content: ' '; } - -#kss-node .kss-nav__ref-child { - font-weight: normal; } - -#kss-node { - /* SPAN elements with the classes below are added by prettyprint. */ - /* plain text */ - /* string content */ - /* a keyword */ - /* a comment */ - /* a type name */ - /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - /* a markup tag name */ - /* a markup attribute name */ - /* a markup attribute value */ - /* a declaration; a variable name */ - /* a function name */ - /* Use higher contrast and text-weight for printable form. */ - /* Specify class=linenums on a pre to get line numbering */ } - #kss-node .kss-section { - margin-bottom: 60px; } - #kss-node .kss-section.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; - overflow: auto !important; - padding: 20px; } - #kss-node .kss-title { - margin-bottom: 0; } - #kss-node .is-fullscreen .kss-title { - margin-top: 0; } - #kss-node .kss-title__ref { - display: block; - font-size: 20px; - line-height: 20px; - color: #666; } - #kss-node .kss-title__ref:before { - content: 'Section '; } - #kss-node .kss-title__permalink { - display: block; - color: #000; - text-decoration: none; } - #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active { - color: #006cb8; } - @media screen and (min-width: 607px) { - #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash { - display: inline; } } - #kss-node .kss-title__permalink-hash { - display: none; - color: #ccc; } - #kss-node .kss-toolbar { - margin: 6px 0 24px; - display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; - line-height: 1; - padding: 3px; } - #kss-node .kss-toolbar a { - box-sizing: content-box; - display: inline-block; - width: 16px; - height: 16px; - padding: 3px; - vertical-align: top; - position: relative; - overflow: visible; } - #kss-node .kss-toolbar a + a { - margin-left: 6px; } - #kss-node .kss-toolbar a .kss-toolbar__icon-fill { - fill: #ccc; } - #kss-node .kss-toolbar a svg.on { - display: none; } - #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover { - border-color: #000; } - #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill { - fill: #000; } - #kss-node .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; - bottom: 100%; - left: -10px; - margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; - opacity: 0; - transition: opacity 0.25s; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - word-wrap: normal; } - #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; - border-width: 7px 5px 0; - border-color: #666 transparent; - border-style: solid; } - #kss-node .kss-toolbar__tooltip:after { - bottom: -6px; - border-top-color: #fff; } - #kss-node a:focus > .kss-toolbar__tooltip, - #kss-node a:hover > .kss-toolbar__tooltip { - opacity: 1; - clip: auto; - height: auto; - width: auto; - overflow: visible; } - #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen], - #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides], - #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; } - #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill, - #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill, - #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill { - fill: #fff; } - #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on, - #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on, - #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on { - display: block; } - #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off, - #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off, - #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off { - display: none; } - #kss-node .kss-parameters { - display: table; - list-style-type: none; - margin-top: 0; - margin-left: 0; - padding-left: 0; } - #kss-node .kss-parameters__title { - font-weight: bold; } - #kss-node .kss-parameters__item { - display: table-row; } - #kss-node .kss-parameters__name { - display: table-cell; - padding-right: 20px; - white-space: nowrap; } - #kss-node .kss-parameters__description { - display: table-cell; } - #kss-node .kss-parameters__default-value code { - white-space: nowrap; } - #kss-node .kss-modifier__wrapper { - border: 1px solid #ccc; - padding: 0 10px 10px; } - #kss-node .is-fullscreen .kss-modifier__wrapper { - margin-left: -20px; - margin-right: -20px; - padding-left: 0; - padding-right: 0; - border: none; } - #kss-node .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; - font-weight: bold; } - #kss-node .is-fullscreen .kss-modifier__heading { - margin: 0 20px 10px; - border: 1px solid #ccc; } - #kss-node .kss-modifier__default-name { - font-weight: bold; - margin-bottom: 15px; } - #kss-node .is-fullscreen .kss-modifier__default-name { - margin-left: 20px; - margin-right: 20px; } - #kss-node .kss-modifier__name { - float: left; - padding-right: 10px; - font-weight: bold; } - #kss-node .is-fullscreen .kss-modifier__name { - margin-left: 20px; } - #kss-node .kss-modifier__description { - margin-bottom: 15px; } - #kss-node .is-fullscreen .kss-modifier__description { - margin-right: 20px; } - #kss-node .kss-modifier__example { - clear: left; - border: 2px dashed transparent; - position: relative; - z-index: 0; - margin: -2px -2px 28px; } - #kss-node .kss-modifier__example:last-child { - margin-bottom: 0; } - #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, - #kss-node.kss-guides-mode .kss-modifier__example-footer:before, - #kss-node.kss-guides-mode .kss-modifier__example-footer:after { - z-index: -1; - box-sizing: border-box; - content: ''; - position: absolute; - width: 5px; - height: 5px; - border: 2px solid #000; } - #kss-node.kss-guides-mode .kss-modifier__example { - border-color: #000; } - #kss-node.kss-guides-mode .kss-modifier__example:before { - top: -5px; - left: -5px; - border-top: 0; - border-left: 0; } - #kss-node.kss-guides-mode .kss-modifier__example:after { - top: -5px; - right: -5px; - border-top: 0; - border-right: 0; } - #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before { - left: auto; - right: 0; } - #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after { - right: auto; - left: 0; } - #kss-node .kss-modifier__example-footer { - clear: both; } - #kss-node.kss-guides-mode .kss-modifier__example-footer:before { - bottom: -5px; - left: -5px; - border-bottom: 0; - border-left: 0; } - #kss-node.kss-guides-mode .kss-modifier__example-footer:after { - bottom: -5px; - right: -5px; - border-right: 0; - border-bottom: 0; } - #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before { - left: auto; - right: 0; } - #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after { - right: auto; - left: 0; } - #kss-node .kss-markup { - margin: 30px 0; - border: 1px solid #ccc; } - #kss-node .kss-markup[open] summary { - border-bottom: 1px solid #ccc; - margin-bottom: 3px; } - #kss-node .kss-markup summary { - padding-left: 10px; } - #kss-node .kss-markup pre { - margin: 0; } - #kss-node .kss-source { - font-size: 80%; } - #kss-node .kss-github { - display: none; } - @media screen and (min-width: 501px) { - #kss-node .kss-github { - display: block; - position: absolute; - top: 0; - right: 0; } } - #kss-node .kss-github img { - border: 0; } - #kss-node .pln { - color: #000; } - #kss-node .str { - color: #080; } - #kss-node .kwd { - color: #008; } - #kss-node .com { - color: #800; } - #kss-node .typ { - color: #606; } - #kss-node .lit { - color: #066; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #660; } - #kss-node .tag { - color: #008; } - #kss-node .atn { - color: #606; } - #kss-node .atv { - color: #080; } - #kss-node .dec, #kss-node .var { - color: #606; } - #kss-node .fun { - color: red; } - @media print, projection { - #kss-node .str { - color: #060; } - #kss-node .kwd { - color: #006; - font-weight: bold; } - #kss-node .com { - color: #600; - font-style: italic; } - #kss-node .typ { - color: #404; - font-weight: bold; } - #kss-node .lit { - color: #044; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #440; } - #kss-node .tag { - color: #006; - font-weight: bold; } - #kss-node .atn { - color: #404; } - #kss-node .atv { - color: #060; } } - #kss-node ol.linenums { - margin: 0; - padding: 0 0 3px 0; - list-style-type: none; - /* Alternate shading for lines */ } - #kss-node ol.linenums li { - min-height: 30px; - border-bottom: 1px solid #eee; - padding: 0 10px; - background: #fff; } - #kss-node ol.linenums li:first-child { - padding-top: 3px; } - #kss-node ol.linenums li.L0, - #kss-node ol.linenums li.L2, - #kss-node ol.linenums li.L4, - #kss-node ol.linenums li.L6, - #kss-node ol.linenums li.L8 { - background: #fcfcfc; } - -body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { - padding: 22px; } - -#kssref-core-grid h4 { - text-align: center; } +.main-page-layout { + display: grid; + display: -ms-grid; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .main-page-layout { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .main-page-layout > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 32px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 32px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .main-page-layout { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .main-page-layout > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 32px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 32px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .main-page-layout { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .main-page-layout > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 36px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 36px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .main-page-layout { + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + .main-page-layout > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 36px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 36px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .main-page-layout { + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + .main-page-layout > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 36px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 36px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .main-page-layout { + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + .main-page-layout > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .main-page-layout { + grid-column-gap: 38px; } + .main-page-layout > * { + margin-right: 0; + margin-left: 0; } } + .main-page-layout > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .main-page-layout { + grid-row-gap: 38px; } + .main-page-layout > * { + margin-top: 0; + margin-bottom: 0; } } } + +.kss-sidebar { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; } + +@media only screen and (min-width: 576px) { + .kss-main { + -ms-grid-column: 2; + grid-column: 2 / span 3; + -ms-grid-column-span: 3; } } + +@media only screen and (min-width: 992px) { + .kss-main { + -ms-grid-column: 2; + grid-column: 2 / span 5; + -ms-grid-column-span: 5; } } .flex-container { margin-bottom: 20px; } @@ -1417,4 +1019,162 @@ body { .layout aside { border: dashed 1px #2e2d29; } +/* SPAN elements with the classes below are added by prettyprint. */ +.pln { + color: #000; } + +/* plain text */ +.str { + color: #080; } + +/* string content */ +.kwd { + color: #008; } + +/* a keyword */ +.com { + color: #800; } + +/* a comment */ +.typ { + color: #606; } + +/* a type name */ +.lit { + color: #066; } + +/* a literal value */ +/* punctuation, lisp open bracket, lisp close bracket */ +.pun, .opn, .clo { + color: #660; } + +.tag { + color: #008; } + +/* a markup tag name */ +.atn { + color: #606; } + +/* a markup attribute name */ +.atv { + color: #080; } + +/* a markup attribute value */ +.dec, .var { + color: #606; } + +/* a declaration; a variable name */ +.fun { + color: red; } + +/* a function name */ +/* Use higher contrast and text-weight for printable form. */ +@media print, projection { + .str { + color: #060; } + .kwd { + color: #006; + font-weight: bold; } + .com { + color: #600; + font-style: italic; } + .typ { + color: #404; + font-weight: bold; } + .lit { + color: #044; } + .pun, .opn, .clo { + color: #440; } + .tag { + color: #006; + font-weight: bold; } + .atn { + color: #404; } + .atv { + color: #060; } } + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin: 0; + padding: 0 0 3px 0; + list-style-type: none; + /* Alternate shading for lines */ } + ol.linenums li { + min-height: 30px; + border-bottom: 1px solid #eee; + padding: 0 10px; + background: #fff; } + ol.linenums li:first-child { + padding-top: 3px; } + ol.linenums li.L0, + ol.linenums li.L2, + ol.linenums li.L4, + ol.linenums li.L6, + ol.linenums li.L8 { + background: #fcfcfc; } + +.kss-toolbar { + margin: 6px 0 24px; + display: inline-block; + border: 1px solid #eee; + background-color: #f9f9f9; + border-right-color: #e0e0e0; + border-bottom-color: #e0e0e0; + line-height: 1; + padding: 3px; } + .kss-toolbar a { + box-sizing: content-box; + display: inline-block; + width: 16px; + height: 16px; + padding: 3px; + vertical-align: top; + position: relative; + overflow: visible; } + .kss-toolbar a + a { + margin-left: 6px; } + .kss-toolbar a .kss-toolbar__icon-fill { + fill: #ccc; } + .kss-toolbar a svg.on { + display: none; } + .kss-toolbar a:focus, .kss-toolbar a:hover { + border-color: #000; } + .kss-toolbar a:focus .kss-toolbar__icon-fill, .kss-toolbar a:hover .kss-toolbar__icon-fill { + fill: #000; } + +.kss-toolbar__tooltip { + position: absolute; + z-index: 1; + display: inline-block; + bottom: 100%; + left: -10px; + margin-bottom: 5px; + border: solid 1px #666; + padding: 8px 10px 6px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + white-space: nowrap; + color: #000; + background: #fff; + cursor: help; + opacity: 0; + transition: opacity 0.25s; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + word-wrap: normal; } + .kss-toolbar__tooltip:before, .kss-toolbar__tooltip:after { + content: ''; + position: absolute; + bottom: -8px; + left: 15px; + width: 0; + height: 0; + border-width: 7px 5px 0; + border-color: #666 transparent; + border-style: solid; } + .kss-toolbar__tooltip:after { + bottom: -6px; + border-top-color: #fff; } + /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index bd3bd2045..d911360d6 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -1,724 +1,29 @@ @charset "UTF-8"; - -// ------------------------------------------------------------------------------ -// Wrap all of this builder's base HTML styling inside a .kss-style selector. -// ------------------------------------------------------------------------------ - -.kss-style { - color: $kss-colors-foreground; - font-family: $kss-font-body; - font-size: $kss-font-size; - line-height: $kss-vertical-rhythm; - - a { - color: $kss-colors-link; - text-decoration: none; - transition-property: color; - transition-duration: 0.5s; - - &:visited { color: $kss-colors-link-visited; } - &:hover, - &:focus { color: $kss-colors-link-hover; } - &:active { color: $kss-colors-link-active; } - - &:hover, - &:active { - outline: 0; - } - } - - blockquote { - color: $kss-colors-quotes; - margin: 0; - padding-left: $kss-vertical-rhythm; - border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; - } - - hr { - display: block; - height: 2px; - border: 0; - border-top: 1px solid lighten($kss-colors-foreground, 60%); - border-bottom: 1px solid darken($kss-colors-background, 10%); - margin: $kss-vertical-rhythm 0; - padding: 0; - } - - pre, code, kbd, samp { - font-family: $kss-font-code; - color: mix($kss-colors-foreground, $kss-colors-heading, 50%); - font-size: 1em; - } - - pre { - white-space: pre; - overflow: scroll; - } - - ins { - color: $kss-colors-heading; - background: #ff9; - text-decoration: none; - } - - mark { - color: $kss-colors-heading; - background: #ff0; - font-weight: bold; - } - - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sup { top: -0.5em; } - sub { bottom: -0.25em; } - - ul, ol { - margin: $kss-vertical-rhythm 0; - padding: 0 0 0 $kss-vertical-rhythm; - } - li p:last-child { - margin: 0; - } - dd { - margin: 0 0 0 $kss-vertical-rhythm; - } - - img { - max-width:100%; - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - td { - vertical-align: top; - } - - @media print { - a, a:visited { text-decoration: underline; } - hr { height: 1px; border:0; border-bottom:1px solid black; } - a[href]:after { content: " (" attr(href) ")"; } - a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - abbr[title]:after { content: " (" attr(title) ")"; } - pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } - tr, img { page-break-inside: avoid; } - img { max-width: 100% !important; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } - } +$grid-columns: ( + $breakpoint-xs: 1fr, + $breakpoint-sm: 1fr 1fr 1fr 1fr, + $breakpoint-md: 1fr 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr, +); + +.main-page-layout { + @include display-grid; + @include responsive-grid-columns($grid-columns); } -// ------------------------------------------------------------------------------ -// Layout and page background -// ------------------------------------------------------------------------------ - -body > div { - position: relative; +.kss-sidebar { + @include grid-item-spans(1, span 1); } -#kss-node { - margin: 0; - padding: 20px; - background: #fff; - - &.kss-fullscreen-mode { - .kss-sidebar, - .kss-section:not(.is-fullscreen), - .kss-github { - display: none; - } +.kss-main { + @include grid-media('sm') { + @include grid-item-spans(2, span 3); } - @media screen and (min-width: 769px) { - padding: 0; - - .kss-main, - .kss-sidebar { - float: left; - margin-right: -100%; - box-sizing: border-box; - } - } - - .kss-main { - width: 100%; - margin: 40px auto 0 auto; - - @media screen and (min-width: 769px) { - width: 80%; - margin-left: 20%; - padding: 0 20px 0 30px; - } - } - - .kss-sidebar { - border-bottom:1px solid #ddd; - - @media screen and (min-width: 769px) { - position: absolute; - top: 0px; - left: 0px; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; - border-bottom: 0; - background-color: $color-light-sandstone; - box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7); - } - } -} - -// ------------------------------------------------------------------------------ -// Sidebar-area components -// ------------------------------------------------------------------------------ - -#kss-node { - - .kss-doc-title { - margin: 0; - - @media screen and (min-width: 769px) { - font-size: 1.5em; - } - } - - .kss-header, - .kss-nav { - @media screen and (min-width: 769px) { - margin-top: 2em; - } - } - - .kss-nav__menu { - margin-top: ($kss-vertical-rhythm/2); - margin-bottom: ($kss-vertical-rhythm/2); - padding: 0; - list-style-type: none; - } - - .kss-nav__menu-item { - display: inline-block; - padding-right: $kss-vertical-rhythm; - - @media screen and (min-width: 769px) { - display: list-item; - padding-right: 0; - } - } - - .kss-nav__menu-link { - position: relative; - display: inline-block; - - &:before { - @media screen and (min-width: 769px) { - content: ' '; - position: absolute; - left: -20px; - width: 0; - height: 100%; - background-color: rgba(#000, 0); - } - } - - &.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; - } - } - - .kss-nav__menu-child { - display: none; - - @media screen and (min-width: 769px) { - display: block; - list-style-type: none; - margin: 0; - padding: 0; - - // @TODO: The ul is output even when there are no children. Fix this, so - // we can put these :first-child and :last child styles back on the ul. - li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; - } - - li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; - } - } - } - - .kss-nav__ref { - color: #333; - font-weight: bold; - - &:after { - content: ' '; - } - } - .kss-nav__ref-child { - font-weight: normal; - } -} - -// ------------------------------------------------------------------------------ -// Content-area components -// ------------------------------------------------------------------------------ - -#kss-node { - - .kss-section { - margin-bottom: ($kss-vertical-rhythm * 2); - - // "fullscreen" styles copied from Mozilla's default stylesheet. - &.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; - // Turn on scrolling if needed. - overflow: auto !important; - padding: 20px; - } - } - - .kss-title { - margin-bottom: 0; - } - .is-fullscreen .kss-title { - margin-top: 0; + @include grid-media('lg') { + @include grid-item-spans(2, span 5); } - .kss-title__ref { - display: block; - font-size: $kss-font-size; - line-height: $kss-font-size; - color: #666; - - &:before { - content: 'Section '; - } - } - .kss-title__permalink { - display: block; - color: #000; - text-decoration: none; - - &:hover, - &:focus, - &:active { - color: $kss-colors-link; - - @media screen and (min-width: 607px) { - .kss-title__permalink-hash { - display: inline; - } - } - } - } - .kss-title__permalink-hash { - display: none; - color: #ccc; - } - - .kss-toolbar { - margin: 6px 0 24px; - display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; - line-height: 1; - padding: 3px; - - a { - box-sizing: content-box; - display: inline-block; - width: 16px; - height: 16px; - padding: 3px; - vertical-align: top; - // Tooltip wrapper styles: - position: relative; - overflow: visible; - - + a { - margin-left: 6px; - } - - .kss-toolbar__icon-fill { - fill: #ccc; - } - - svg.on { - display: none; - } - - &:focus, - &:hover { - border-color: #000; - - .kss-toolbar__icon-fill { - fill: #000; - } - } - } - } - .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; - bottom: 100%; - left: -10px; - margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; - opacity: 0; - transition: opacity 0.25s; - // Visually hidden - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - word-wrap: normal; - - // Solid grey triangle. - &:before, - &:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; - border-width: 7px 5px 0; - border-color: #666 transparent; - border-style: solid; - } - - // White triangle knock-out. - &:after { - bottom: -6px; - border-top-color: #fff; - } - } - a:focus, - a:hover { - > .kss-toolbar__tooltip { - opacity: 1; - // Visually hidden off - clip: auto; - height: auto; - width: auto; - overflow: visible; - } - } - .is-fullscreen .kss-toolbar a[data-kss-fullscreen], - &.kss-guides-mode .kss-toolbar a[data-kss-guides], - &.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; - - .kss-toolbar__icon-fill { - fill: #fff; - } - - svg.on { - display: block; - } - - svg.off { - display: none; - } - } - - .kss-parameters { - display: table; - list-style-type: none; - margin-top: 0; - margin-left: 0; - padding-left: 0; - } - .kss-parameters__title { - font-weight: bold; - } - .kss-parameters__item { - display: table-row; - } - .kss-parameters__name { - display: table-cell; - padding-right: 20px; - white-space: nowrap; - } - .kss-parameters__description { - display: table-cell; - } - .kss-parameters__default-value code { - white-space: nowrap; - } - - .kss-modifier__wrapper { - border: 1px solid #ccc; - padding: 0 10px 10px; - } - .is-fullscreen .kss-modifier__wrapper { - // Un-do padding on .kss-section. - margin-left: -20px; - margin-right: -20px; - // Remove all padding on the wrapper - padding-left: 0; - padding-right: 0; - border: none; - } - .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; - font-weight: bold; - } - .is-fullscreen .kss-modifier__heading { - margin: 0 20px 10px; - border: 1px solid #ccc; - } - .kss-modifier__default-name { - font-weight: bold; - margin-bottom: ($kss-vertical-rhythm / 2); - } - .is-fullscreen .kss-modifier__default-name { - margin-left: 20px; - margin-right: 20px; - } - .kss-modifier__name { - float: left; - padding-right: 10px; - font-weight: bold; - } - .is-fullscreen .kss-modifier__name { - margin-left: 20px; - } - .kss-modifier__description { - margin-bottom: ($kss-vertical-rhythm / 2); - } - .is-fullscreen .kss-modifier__description { - margin-right: 20px; - } - .kss-modifier__example { - clear: left; - border: 2px dashed transparent; - position: relative; // Contain the example's absolute positioning. - z-index: 0; // Establishes a local stacking context. - margin: -2px -2px ($kss-vertical-rhythm - 2px); - - &:last-child { - margin-bottom: 0; - } - } - &.kss-guides-mode .kss-modifier__example, - &.kss-guides-mode .kss-modifier__example-footer { - &:before, - &:after { - z-index: -1; - box-sizing: border-box; - content: ''; - position: absolute; - width: 5px; - height: 5px; - border: 2px solid #000; - } - } - &.kss-guides-mode .kss-modifier__example { - border-color: #000; - - &:before { - top: -5px; - left: -5px; - border-top: 0; - border-left: 0; - } - &:after { - top: -5px; - right: -5px; - border-top: 0; - border-right: 0; - } - } - &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { - &:before { - left: auto; - right: 0; - } - &:after { - right: auto; - left: 0; - } - } - .kss-modifier__example-footer { - clear: both; - } - &.kss-guides-mode .kss-modifier__example-footer { - &:before { - bottom: -5px; - left: -5px; - border-bottom: 0; - border-left: 0; - } - &:after { - bottom: -5px; - right: -5px; - border-right: 0; - border-bottom: 0; - } - } - &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { - &:before { - left: auto; - right: 0; - } - &:after { - right: auto; - left: 0; - } - } - - .kss-markup { - margin: $kss-vertical-rhythm 0; - border: 1px solid #ccc; - - &[open] summary { - border-bottom: 1px solid #ccc; - margin-bottom: 3px; - } - - summary { - padding-left: 10px; - } - - pre { - margin: 0; - } - } - - .kss-source { - font-size: 80%; - } - - .kss-github { - display:none; - - @media screen and (min-width: 501px) { - display: block; - position: absolute; - top: 0; - right: 0; - } - - img { - border: 0; - } - } - - // ------------------------------------------------------------------------------ - // prettify.js styles - // ------------------------------------------------------------------------------ - - /* SPAN elements with the classes below are added by prettyprint. */ - .pln { color: #000 } /* plain text */ - - .str { color: #080 } /* string content */ - .kwd { color: #008 } /* a keyword */ - .com { color: #800 } /* a comment */ - .typ { color: #606 } /* a type name */ - .lit { color: #066 } /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - .pun, .opn, .clo { color: #660 } - .tag { color: #008 } /* a markup tag name */ - .atn { color: #606 } /* a markup attribute name */ - .atv { color: #080 } /* a markup attribute value */ - .dec, .var { color: #606 } /* a declaration; a variable name */ - .fun { color: red } /* a function name */ - - /* Use higher contrast and text-weight for printable form. */ - @media print, projection { - .str { color: #060 } - .kwd { color: #006; font-weight: bold } - .com { color: #600; font-style: italic } - .typ { color: #404; font-weight: bold } - .lit { color: #044 } - .pun, .opn, .clo { color: #440 } - .tag { color: #006; font-weight: bold } - .atn { color: #404 } - .atv { color: #060 } - } - - /* Specify class=linenums on a pre to get line numbering */ - ol.linenums { - margin: 0; - padding: 0 0 3px 0; - list-style-type: none; - - li { - min-height: $kss-vertical-rhythm; - border-bottom: 1px solid #eee; - padding: 0 10px; - background: #fff; - - &:first-child { - padding-top: 3px; - } - } - /* Alternate shading for lines */ - li.L0, - li.L2, - li.L4, - li.L6, - li.L8 { - background: #fcfcfc; - } - } -} - -// -// KSS Fullscreen Scrolling Fix -// -// Adding 2px to the default kss fullscreen padding. This resolves the 1-2px -// horizontal scrolling issue. -// - -body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { - padding: 22px; -} - -#kssref-core-grid h4 { - text-align: center; } diff --git a/kss/builder/decanter/scss/_original.scss b/kss/builder/decanter/scss/_original.scss new file mode 100644 index 000000000..fa33384ae --- /dev/null +++ b/kss/builder/decanter/scss/_original.scss @@ -0,0 +1,724 @@ +@charset "UTF-8"; + + +// ------------------------------------------------------------------------------ +// Wrap all of this builder's base HTML styling inside a .kss-style selector. +// ------------------------------------------------------------------------------ + +.kss-style { + color: $kss-colors-foreground; + font-family: $kss-font-body; + font-size: $kss-font-size; + line-height: $kss-vertical-rhythm; + + a { + color: $kss-colors-link; + text-decoration: none; + transition-property: color; + transition-duration: 0.5s; + + &:visited { color: $kss-colors-link-visited; } + &:hover, + &:focus { color: $kss-colors-link-hover; } + &:active { color: $kss-colors-link-active; } + + &:hover, + &:active { + outline: 0; + } + } + + blockquote { + color: $kss-colors-quotes; + margin: 0; + padding-left: $kss-vertical-rhythm; + border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; + } + + hr { + display: block; + height: 2px; + border: 0; + border-top: 1px solid lighten($kss-colors-foreground, 60%); + border-bottom: 1px solid darken($kss-colors-background, 10%); + margin: $kss-vertical-rhythm 0; + padding: 0; + } + + pre, code, kbd, samp { + font-family: $kss-font-code; + color: mix($kss-colors-foreground, $kss-colors-heading, 50%); + font-size: 1em; + } + + pre { + white-space: pre; + overflow: scroll; + } + + ins { + color: $kss-colors-heading; + background: #ff9; + text-decoration: none; + } + + mark { + color: $kss-colors-heading; + background: #ff0; + font-weight: bold; + } + + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sup { top: -0.5em; } + sub { bottom: -0.25em; } + + ul, ol { + margin: $kss-vertical-rhythm 0; + padding: 0 0 0 $kss-vertical-rhythm; + } + li p:last-child { + margin: 0; + } + dd { + margin: 0 0 0 $kss-vertical-rhythm; + } + + img { + max-width:100%; + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + td { + vertical-align: top; + } + + @media print { + a, a:visited { text-decoration: underline; } + hr { height: 1px; border:0; border-bottom:1px solid black; } + a[href]:after { content: " (" attr(href) ")"; } + a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + abbr[title]:after { content: " (" attr(title) ")"; } + pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3 { page-break-after: avoid; } + } +} + +// ------------------------------------------------------------------------------ +// Layout and page background +// ------------------------------------------------------------------------------ + +body > div { + position: relative; +} + +#kss-node { + margin: 0; + padding: 20px; + background: #fff; + + &.kss-fullscreen-mode { + .kss-sidebar, + .kss-section:not(.is-fullscreen), + .kss-github { + display: none; + } + } + + // @media screen and (min-width: 769px) { + // padding: 0; + // + // .kss-main, + // .kss-sidebar { + // float: left; + // margin-right: -100%; + // box-sizing: border-box; + // } + // } + + // .kss-main { + // width: 100%; + // margin: 40px auto 0 auto; + // + // @media screen and (min-width: 769px) { + // width: 80%; + // margin-left: 20%; + // padding: 0 20px 0 30px; + // } + // } + + // .kss-sidebar { + // border-bottom:1px solid #ddd; + // + // @media screen and (min-width: 769px) { + // position: absolute; + // top: 0px; + // left: 0px; + // width: 20%; + // height: 100%; + // overflow: auto; + // padding: 0 10px 0 20px; + // border-bottom: 0; + // background-color: $color-light-sandstone; + // box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7); + // } + // } +} + +// ------------------------------------------------------------------------------ +// Sidebar-area components +// ------------------------------------------------------------------------------ + +#kss-node { + + .kss-doc-title { + margin: 0; + + @media screen and (min-width: 769px) { + font-size: 1.5em; + } + } + + .kss-header, + .kss-nav { + @media screen and (min-width: 769px) { + margin-top: 2em; + } + } + + .kss-nav__menu { + margin-top: ($kss-vertical-rhythm/2); + margin-bottom: ($kss-vertical-rhythm/2); + padding: 0; + list-style-type: none; + } + + .kss-nav__menu-item { + display: inline-block; + padding-right: $kss-vertical-rhythm; + + @media screen and (min-width: 769px) { + display: list-item; + padding-right: 0; + } + } + + .kss-nav__menu-link { + position: relative; + display: inline-block; + + &:before { + @media screen and (min-width: 769px) { + content: ' '; + position: absolute; + left: -20px; + width: 0; + height: 100%; + background-color: rgba(#000, 0); + } + } + + &.is-in-viewport:before { + background-color: #000; + width: 5px; + transition: background-color .4s, width .6s; + } + } + + .kss-nav__menu-child { + display: none; + + @media screen and (min-width: 769px) { + display: block; + list-style-type: none; + margin: 0; + padding: 0; + + // @TODO: The ul is output even when there are no children. Fix this, so + // we can put these :first-child and :last child styles back on the ul. + li:first-child { + margin-top: 10px; + border-top: 1px solid #ccc; + padding: 10px 0 0; + } + + li:last-child { + margin-bottom: 10px; + border-bottom: 1px solid #ccc; + padding: 0 0 10px; + } + } + } + + .kss-nav__ref { + color: #333; + font-weight: bold; + + &:after { + content: ' '; + } + } + .kss-nav__ref-child { + font-weight: normal; + } +} + +// ------------------------------------------------------------------------------ +// Content-area components +// ------------------------------------------------------------------------------ + +#kss-node { + + .kss-section { + margin-bottom: ($kss-vertical-rhythm * 2); + + // "fullscreen" styles copied from Mozilla's default stylesheet. + &.is-fullscreen { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; + margin: 0 !important; + min-width: 0 !important; + max-width: none !important; + min-height: 0 !important; + max-height: none !important; + box-sizing: border-box !important; + object-fit: contain !important; + transform: none !important; + // Turn on scrolling if needed. + overflow: auto !important; + padding: 20px; + } + } + + .kss-title { + margin-bottom: 0; + } + .is-fullscreen .kss-title { + margin-top: 0; + } + .kss-title__ref { + display: block; + font-size: $kss-font-size; + line-height: $kss-font-size; + color: #666; + + &:before { + content: 'Section '; + } + } + .kss-title__permalink { + display: block; + color: #000; + text-decoration: none; + + &:hover, + &:focus, + &:active { + color: $kss-colors-link; + + @media screen and (min-width: 607px) { + .kss-title__permalink-hash { + display: inline; + } + } + } + } + .kss-title__permalink-hash { + display: none; + color: #ccc; + } + + .kss-toolbar { + margin: 6px 0 24px; + display: inline-block; + border: 1px solid #eee; + background-color: #f9f9f9; + border-right-color: #e0e0e0; + border-bottom-color: #e0e0e0; + line-height: 1; + padding: 3px; + + a { + box-sizing: content-box; + display: inline-block; + width: 16px; + height: 16px; + padding: 3px; + vertical-align: top; + // Tooltip wrapper styles: + position: relative; + overflow: visible; + + + a { + margin-left: 6px; + } + + .kss-toolbar__icon-fill { + fill: #ccc; + } + + svg.on { + display: none; + } + + &:focus, + &:hover { + border-color: #000; + + .kss-toolbar__icon-fill { + fill: #000; + } + } + } + } + .kss-toolbar__tooltip { + position: absolute; + z-index: 1; + display: inline-block; + bottom: 100%; + left: -10px; + margin-bottom: 5px; + border: solid 1px #666; + padding: 8px 10px 6px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); + white-space: nowrap; + color: #000; + background: #fff; + cursor: help; + opacity: 0; + transition: opacity 0.25s; + // Visually hidden + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + word-wrap: normal; + + // Solid grey triangle. + &:before, + &:after { + content: ''; + position: absolute; + bottom: -8px; + left: 15px; + width: 0; + height: 0; + border-width: 7px 5px 0; + border-color: #666 transparent; + border-style: solid; + } + + // White triangle knock-out. + &:after { + bottom: -6px; + border-top-color: #fff; + } + } + a:focus, + a:hover { + > .kss-toolbar__tooltip { + opacity: 1; + // Visually hidden off + clip: auto; + height: auto; + width: auto; + overflow: visible; + } + } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen], + &.kss-guides-mode .kss-toolbar a[data-kss-guides], + &.kss-markup-mode .kss-toolbar a[data-kss-markup] { + border-color: #666; + background-color: #666; + + .kss-toolbar__icon-fill { + fill: #fff; + } + + svg.on { + display: block; + } + + svg.off { + display: none; + } + } + + .kss-parameters { + display: table; + list-style-type: none; + margin-top: 0; + margin-left: 0; + padding-left: 0; + } + .kss-parameters__title { + font-weight: bold; + } + .kss-parameters__item { + display: table-row; + } + .kss-parameters__name { + display: table-cell; + padding-right: 20px; + white-space: nowrap; + } + .kss-parameters__description { + display: table-cell; + } + .kss-parameters__default-value code { + white-space: nowrap; + } + + .kss-modifier__wrapper { + border: 1px solid #ccc; + padding: 0 10px 10px; + } + .is-fullscreen .kss-modifier__wrapper { + // Un-do padding on .kss-section. + margin-left: -20px; + margin-right: -20px; + // Remove all padding on the wrapper + padding-left: 0; + padding-right: 0; + border: none; + } + .kss-modifier__heading { + margin: 0 -10px 10px -10px; + padding: 10px; + border-bottom: 1px solid #ccc; + background-color: #eee; + font-weight: bold; + } + .is-fullscreen .kss-modifier__heading { + margin: 0 20px 10px; + border: 1px solid #ccc; + } + .kss-modifier__default-name { + font-weight: bold; + margin-bottom: ($kss-vertical-rhythm / 2); + } + .is-fullscreen .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; + } + .kss-modifier__name { + float: left; + padding-right: 10px; + font-weight: bold; + } + .is-fullscreen .kss-modifier__name { + margin-left: 20px; + } + .kss-modifier__description { + margin-bottom: ($kss-vertical-rhythm / 2); + } + .is-fullscreen .kss-modifier__description { + margin-right: 20px; + } + .kss-modifier__example { + clear: left; + border: 2px dashed transparent; + position: relative; // Contain the example's absolute positioning. + z-index: 0; // Establishes a local stacking context. + margin: -2px -2px ($kss-vertical-rhythm - 2px); + + &:last-child { + margin-bottom: 0; + } + } + &.kss-guides-mode .kss-modifier__example, + &.kss-guides-mode .kss-modifier__example-footer { + &:before, + &:after { + z-index: -1; + box-sizing: border-box; + content: ''; + position: absolute; + width: 5px; + height: 5px; + border: 2px solid #000; + } + } + &.kss-guides-mode .kss-modifier__example { + border-color: #000; + + &:before { + top: -5px; + left: -5px; + border-top: 0; + border-left: 0; + } + &:after { + top: -5px; + right: -5px; + border-top: 0; + border-right: 0; + } + } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } + } + .kss-modifier__example-footer { + clear: both; + } + &.kss-guides-mode .kss-modifier__example-footer { + &:before { + bottom: -5px; + left: -5px; + border-bottom: 0; + border-left: 0; + } + &:after { + bottom: -5px; + right: -5px; + border-right: 0; + border-bottom: 0; + } + } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } + } + + .kss-markup { + margin: $kss-vertical-rhythm 0; + border: 1px solid #ccc; + + &[open] summary { + border-bottom: 1px solid #ccc; + margin-bottom: 3px; + } + + summary { + padding-left: 10px; + } + + pre { + margin: 0; + } + } + + .kss-source { + font-size: 80%; + } + + .kss-github { + display:none; + + @media screen and (min-width: 501px) { + display: block; + position: absolute; + top: 0; + right: 0; + } + + img { + border: 0; + } + } + + // ------------------------------------------------------------------------------ + // prettify.js styles + // ------------------------------------------------------------------------------ + + /* SPAN elements with the classes below are added by prettyprint. */ + .pln { color: #000 } /* plain text */ + + .str { color: #080 } /* string content */ + .kwd { color: #008 } /* a keyword */ + .com { color: #800 } /* a comment */ + .typ { color: #606 } /* a type name */ + .lit { color: #066 } /* a literal value */ + /* punctuation, lisp open bracket, lisp close bracket */ + .pun, .opn, .clo { color: #660 } + .tag { color: #008 } /* a markup tag name */ + .atn { color: #606 } /* a markup attribute name */ + .atv { color: #080 } /* a markup attribute value */ + .dec, .var { color: #606 } /* a declaration; a variable name */ + .fun { color: red } /* a function name */ + + /* Use higher contrast and text-weight for printable form. */ + @media print, projection { + .str { color: #060 } + .kwd { color: #006; font-weight: bold } + .com { color: #600; font-style: italic } + .typ { color: #404; font-weight: bold } + .lit { color: #044 } + .pun, .opn, .clo { color: #440 } + .tag { color: #006; font-weight: bold } + .atn { color: #404 } + .atv { color: #060 } + } + + /* Specify class=linenums on a pre to get line numbering */ + ol.linenums { + margin: 0; + padding: 0 0 3px 0; + list-style-type: none; + + li { + min-height: $kss-vertical-rhythm; + border-bottom: 1px solid #eee; + padding: 0 10px; + background: #fff; + + &:first-child { + padding-top: 3px; + } + } + /* Alternate shading for lines */ + li.L0, + li.L2, + li.L4, + li.L6, + li.L8 { + background: #fcfcfc; + } + } +} + +// +// KSS Fullscreen Scrolling Fix +// +// Adding 2px to the default kss fullscreen padding. This resolves the 1-2px +// horizontal scrolling issue. +// + +body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { + padding: 22px; +} + +#kssref-core-grid h4 { + text-align: center; +} diff --git a/kss/builder/decanter/scss/_prettify.scss b/kss/builder/decanter/scss/_prettify.scss new file mode 100644 index 000000000..f7b072e18 --- /dev/null +++ b/kss/builder/decanter/scss/_prettify.scss @@ -0,0 +1,58 @@ +// ------------------------------------------------------------------------------ +// prettify.js styles +// ------------------------------------------------------------------------------ + +/* SPAN elements with the classes below are added by prettyprint. */ +.pln { color: #000 } /* plain text */ + +.str { color: #080 } /* string content */ +.kwd { color: #008 } /* a keyword */ +.com { color: #800 } /* a comment */ +.typ { color: #606 } /* a type name */ +.lit { color: #066 } /* a literal value */ +/* punctuation, lisp open bracket, lisp close bracket */ +.pun, .opn, .clo { color: #660 } +.tag { color: #008 } /* a markup tag name */ +.atn { color: #606 } /* a markup attribute name */ +.atv { color: #080 } /* a markup attribute value */ +.dec, .var { color: #606 } /* a declaration; a variable name */ +.fun { color: red } /* a function name */ + +/* Use higher contrast and text-weight for printable form. */ +@media print, projection { + .str { color: #060 } + .kwd { color: #006; font-weight: bold } + .com { color: #600; font-style: italic } + .typ { color: #404; font-weight: bold } + .lit { color: #044 } + .pun, .opn, .clo { color: #440 } + .tag { color: #006; font-weight: bold } + .atn { color: #404 } + .atv { color: #060 } +} + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin: 0; + padding: 0 0 3px 0; + list-style-type: none; + + li { + min-height: $kss-vertical-rhythm; + border-bottom: 1px solid #eee; + padding: 0 10px; + background: #fff; + + &:first-child { + padding-top: 3px; + } + } + /* Alternate shading for lines */ + li.L0, + li.L2, + li.L4, + li.L6, + li.L8 { + background: #fcfcfc; + } +} diff --git a/kss/builder/decanter/scss/_toolbar.scss b/kss/builder/decanter/scss/_toolbar.scss new file mode 100644 index 000000000..4865c3e87 --- /dev/null +++ b/kss/builder/decanter/scss/_toolbar.scss @@ -0,0 +1,87 @@ +.kss-toolbar { + margin: 6px 0 24px; + display: inline-block; + border: 1px solid #eee; + background-color: #f9f9f9; + border-right-color: #e0e0e0; + border-bottom-color: #e0e0e0; + line-height: 1; + padding: 3px; + + a { + box-sizing: content-box; + display: inline-block; + width: 16px; + height: 16px; + padding: 3px; + vertical-align: top; + // Tooltip wrapper styles: + position: relative; + overflow: visible; + + + a { + margin-left: 6px; + } + + .kss-toolbar__icon-fill { + fill: #ccc; + } + + svg.on { + display: none; + } + + &:focus, + &:hover { + border-color: #000; + + .kss-toolbar__icon-fill { + fill: #000; + } + } + } +} + +.kss-toolbar__tooltip { + position: absolute; + z-index: 1; + display: inline-block; + bottom: 100%; + left: -10px; + margin-bottom: 5px; + border: solid 1px #666; + padding: 8px 10px 6px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); + white-space: nowrap; + color: #000; + background: #fff; + cursor: help; + opacity: 0; + transition: opacity 0.25s; + // Visually hidden + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + word-wrap: normal; + + // Solid grey triangle. + &:before, + &:after { + content: ''; + position: absolute; + bottom: -8px; + left: 15px; + width: 0; + height: 0; + border-width: 7px 5px 0; + border-color: #666 transparent; + border-style: solid; + } + + // White triangle knock-out. + &:after { + bottom: -6px; + border-top-color: #fff; + } +} diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index e73cab819..4783ea579 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -41,4 +41,6 @@ 'colors-demo', 'global-footer', 'home', - 'layout-colors'; + 'layout-colors', + 'prettify', + 'toolbar'; From 48891d560465116099882edf4433320f813ae407 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Thu, 29 Nov 2018 16:21:34 -0800 Subject: [PATCH 056/123] comment and general cleanup and additions --- core/css/decanter.css | 233 ++++++++---------- .../brand-bar/_brand-bar--bright.scss | 3 +- .../brand-bar/_brand-bar--dark.scss | 3 +- .../brand-bar/_brand-bar--white.scss | 3 +- .../scss/components/brand-bar/_brand-bar.scss | 1 - core/scss/components/button/_button--big.scss | 6 + .../components/button/_button--secondary.scss | 6 + .../components/button/_button--unstyled.scss | 6 + core/scss/components/button/_button.scss | 12 - core/scss/components/button/index.scss | 5 +- core/scss/components/card/_is-number.scss | 13 - core/scss/components/cta/_cta.scss | 1 - core/scss/components/link/_link--button.scss | 11 - core/scss/components/link/_link.scss | 3 +- core/scss/components/link/index.scss | 1 - core/scss/components/lockup/index.scss | 4 +- core/scss/components/quote/_quote.scss | 30 ++- .../components/site-search/_site-search.scss | 1 - core/scss/components/site-search/index.scss | 2 +- core/scss/core/_base.scss | 1 - .../core/{grid => flex-grid}/_flex-grid.scss | 6 +- core/scss/core/{grid => flex-grid}/index.scss | 0 core/scss/core/fonts/_fonts.scss | 3 + core/scss/core/index.scss | 8 +- core/scss/decanter-grid.scss | 2 +- core/scss/elements/index.scss | 1 - core/scss/elements/link/_link.scss | 14 -- core/scss/elements/link/index.scss | 8 - .../table/_table--borderless.scss} | 10 +- core/scss/elements/table/_table.scss | 36 ++- core/scss/elements/table/index.scss | 3 +- .../scss/elements/typography/_typography.scss | 1 - core/scss/layout/four-column/_molive.scss | 1 - core/scss/layout/full-width/_bricks.scss | 1 - core/scss/layout/full-width/_ibeam.scss | 1 - core/scss/layout/one-column/basic.scss | 1 - core/scss/layout/three-column/_bars.scss | 1 - .../scss/layout/three-column/_battleship.scss | 1 - core/scss/layout/two-column/_donies.scss | 1 - core/scss/layout/two-column/_frogger.scss | 1 - core/scss/layout/two-column/_pacman.scss | 1 - core/scss/layout/two-column/_plakes.scss | 1 - core/scss/layout/two-column/_toucan.scss | 1 - core/scss/layout/two-column/_trunks.scss | 1 - core/scss/layout/two-column/_wedge.scss | 1 - .../functions/flex/_breakpoint-insert.scss | 1 + .../functions/flex/_breakpoint-max.scss | 1 + .../functions/flex/_breakpoint-min.scss | 1 + .../functions/flex/_breakpoint-next.scss | 1 + .../functions/flex/_flex-column-ratio.scss | 1 + .../functions/flex/_flex-column-width.scss | 1 + .../functions/flex/_flex-parse-columns.scss | 1 + .../_modular-spacing-get-value.scss | 2 +- .../functions/string/_str-replace.scss | 8 + .../functions/string/_to-length.scss | 6 + .../functions/string/_to-number.scss | 11 +- .../utilities/functions/string/index.scss | 6 + .../type-checks/_is-absolute-length.scss | 2 +- .../functions/type-checks/_is-integer.scss | 2 +- .../functions/type-checks/_is-length.scss | 2 +- .../functions/type-checks/_is-number.scss | 2 +- .../functions/type-checks/_is-percentage.scss | 2 +- .../functions/type-checks/_is-position.scss | 2 +- .../type-checks/_is-relative-length.scss | 2 +- .../functions/type-checks/index.scss | 6 + .../breakpoint/_grid-media-between.scss | 4 +- .../mixins/breakpoint/_grid-media-max.scss | 4 +- .../mixins/breakpoint/_grid-media-min.scss | 3 +- .../utilities/mixins/breakpoint/index.scss | 8 +- .../utilities/mixins/cta/_cta-button.scss | 1 - core/scss/utilities/mixins/display/index.scss | 1 - .../{display => grid}/_centered-column.scss | 1 - .../utilities/mixins/grid/_display-grid.scss | 1 - .../mixins/grid/_grid-align-self.scss | 1 + .../mixins/grid/_grid-justify-self.scss | 1 + .../utilities/mixins/grid/_grid-rows.scss | 1 - core/scss/utilities/mixins/grid/index.scss | 1 + core/scss/utilities/mixins/index.scss | 2 - core/scss/utilities/mixins/quote/_quote.scss | 40 --- core/scss/utilities/mixins/quote/index.scss | 12 - core/scss/utilities/mixins/table/_table.scss | 46 ---- core/scss/utilities/mixins/table/index.scss | 13 - .../grid.json => flex-grid/flex-grid.json} | 0 core/templates/core/flex-grid/flex-grid.twig | 90 +++++++ core/templates/core/grid/grid.twig | 91 ------- core/templates/core/grid/zzz-flex-grid.html | 132 ---------- kss/builder/decanter/kss-assets/css/kss.css | 17 +- .../decanter/scss/_class-based-grid.scss | 17 -- kss/builder/decanter/scss/_flex-grid.scss | 14 ++ kss/builder/decanter/scss/kss.scss | 2 +- 90 files changed, 377 insertions(+), 636 deletions(-) create mode 100644 core/scss/components/button/_button--big.scss create mode 100644 core/scss/components/button/_button--secondary.scss create mode 100644 core/scss/components/button/_button--unstyled.scss delete mode 100644 core/scss/components/card/_is-number.scss delete mode 100644 core/scss/components/link/_link--button.scss rename core/scss/core/{grid => flex-grid}/_flex-grid.scss (95%) rename core/scss/core/{grid => flex-grid}/index.scss (100%) delete mode 100644 core/scss/elements/link/_link.scss delete mode 100644 core/scss/elements/link/index.scss rename core/scss/{utilities/mixins/table/_table-borderless.scss => elements/table/_table--borderless.scss} (56%) rename core/scss/utilities/mixins/{display => grid}/_centered-column.scss (99%) delete mode 100644 core/scss/utilities/mixins/quote/_quote.scss delete mode 100644 core/scss/utilities/mixins/quote/index.scss delete mode 100644 core/scss/utilities/mixins/table/_table.scss delete mode 100644 core/scss/utilities/mixins/table/index.scss rename core/templates/core/{grid/grid.json => flex-grid/flex-grid.json} (100%) create mode 100644 core/templates/core/flex-grid/flex-grid.twig delete mode 100644 core/templates/core/grid/grid.twig delete mode 100644 core/templates/core/grid/zzz-flex-grid.html delete mode 100644 kss/builder/decanter/scss/_class-based-grid.scss create mode 100644 kss/builder/decanter/scss/_flex-grid.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index e952e0863..33a7f2e62 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -303,65 +303,6 @@ template { [hidden] { display: none; } -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); - font-style: normal; - font-weight: 200; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 200; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont.woff") format("woff"); - font-style: normal; - font-weight: 300; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 300; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 400; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 600; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 700; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont.woff") format("woff"); - font-style: normal; - font-weight: 900; } - -@font-face { - font-family: "Source Serif Pro"; - src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont.woff") format("woff"); - font-style: italic; - font-weight: 900; } - -@font-face { - font-family: "Stanford"; - src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); - font-weight: 300; } - .flex-container { display: flex; flex-direction: row; @@ -1850,6 +1791,65 @@ template { flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); + font-style: normal; + font-weight: 200; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 200; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont.woff") format("woff"); + font-style: normal; + font-weight: 300; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 300; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 400; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 600; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 700; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont.woff") format("woff"); + font-style: normal; + font-weight: 900; } + +@font-face { + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont.woff") format("woff"); + font-style: italic; + font-weight: 900; } + +@font-face { + font-family: "Stanford"; + src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); + font-weight: 300; } + .su-sr-only { position: absolute; left: -999em; } @@ -2092,14 +2092,6 @@ fieldset { [type=range]:focus::-ms-thumb { border: 2px solid #b6b1a9; } -a { - color: #b1040e; - text-decoration: underline; } - a:hover, a:active { - color: #2e2d29; } - a:focus { - outline: 0; } - ul, ol { margin-top: 1em; @@ -2137,13 +2129,13 @@ p + ol { margin-bottom: 0; } table { + margin: 2em 0; border-spacing: 0; - min-width: 100%; - margin: 2em 0; } + min-width: 100%; } table th, table td { - border: 1px solid #b6b1a9; - padding: 1.5rem; } + padding: 1.5rem; + border: 1px solid #b6b1a9; } table th { background-color: #dad7cb; color: #2e2d29; @@ -6296,23 +6288,22 @@ button, background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.su-button--secondary { +.su-button--big { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; - padding: 1rem 2rem; + padding: 1.5rem 3rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; - background-color: #ffffff; + background-color: #b1040e; border: 0; - box-shadow: inset 0 0 0 2px #b1040e; - color: #b1040e; + color: #ffffff; cursor: pointer; display: inline-block; - font-size: 2rem; + font-size: 2.3rem; font-weight: 600; line-height: 1; outline: none; @@ -6320,35 +6311,34 @@ button, text-decoration: none; width: 100%; } @media only screen and (min-width: 576px) { - .su-button--secondary { + .su-button--big { width: auto; } } - .su-button--secondary:hover { - background-color: #ffffff; + .su-button--big:hover { + background-color: #2e2d29; border-bottom: 0; - box-shadow: inset 0 0 0 2px #2e2d29; - color: #2e2d29; + color: #ffffff; text-decoration: none; } - .su-button--secondary:focus { - background-color: #ffffff; - box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; - color: #2e2d29; } + .su-button--big:focus { + background-color: #2e2d29; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.su-button--big { +.su-button--secondary { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; - padding: 1.5rem 3rem; + padding: 1rem 2rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; - background-color: #b1040e; + background-color: #ffffff; border: 0; - color: #ffffff; + box-shadow: inset 0 0 0 2px #b1040e; + color: #b1040e; cursor: pointer; display: inline-block; - font-size: 2.3rem; + font-size: 2rem; font-weight: 600; line-height: 1; outline: none; @@ -6356,16 +6346,18 @@ button, text-decoration: none; width: 100%; } @media only screen and (min-width: 576px) { - .su-button--big { + .su-button--secondary { width: auto; } } - .su-button--big:hover { - background-color: #2e2d29; + .su-button--secondary:hover { + background-color: #ffffff; border-bottom: 0; - color: #ffffff; + box-shadow: inset 0 0 0 2px #2e2d29; + color: #2e2d29; text-decoration: none; } - .su-button--big:focus { - background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + .su-button--secondary:focus { + background-color: #ffffff; + box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; + color: #2e2d29; } .su-button--unstyled { background-color: transparent; @@ -6891,12 +6883,16 @@ button, .su-hero--youtube .su-hero__media iframe { height: 100%; } } -.su-link { +.su-link, +a { color: #b1040e; text-decoration: underline; } - .su-link:hover, .su-link:active { + .su-link:hover, .su-link:active, + a:hover, + a:active { color: #2e2d29; } - .su-link:focus { + .su-link:focus, + a:focus { outline: 0; } .su-link--action { @@ -6913,41 +6909,6 @@ button, .su-link--action:hover::after { left: 3px; } -.su-link--button { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin-top: 0.5em; - margin-right: 0.5em; - margin-bottom: 0.5em; - padding: 1rem 2rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #b1040e; - border: 0; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-size: 2rem; - font-weight: 600; - line-height: 1; - outline: none; - text-align: center; - text-decoration: none; - width: 100%; - transition: background-color .25s ease-in-out, color .25s ease-in-out; } - @media only screen and (min-width: 576px) { - .su-link--button { - width: auto; } } - .su-link--button:hover { - background-color: #2e2d29; - border-bottom: 0; - color: #ffffff; - text-decoration: none; } - .su-link--button:focus { - background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } - .su-link--external::after { margin-bottom: -1px; margin-left: 4px; diff --git a/core/scss/components/brand-bar/_brand-bar--bright.scss b/core/scss/components/brand-bar/_brand-bar--bright.scss index dd4923420..c7981d953 100644 --- a/core/scss/components/brand-bar/_brand-bar--bright.scss +++ b/core/scss/components/brand-bar/_brand-bar--bright.scss @@ -1,7 +1,6 @@ @charset "UTF-8"; -// Brand bar with white wordmark on bright red background - +// Brand bar with white wordmark on bright red background. .su-brand-bar--bright { background-color: $color-bright-red; } diff --git a/core/scss/components/brand-bar/_brand-bar--dark.scss b/core/scss/components/brand-bar/_brand-bar--dark.scss index 3ab66e7b9..2b31ee460 100644 --- a/core/scss/components/brand-bar/_brand-bar--dark.scss +++ b/core/scss/components/brand-bar/_brand-bar--dark.scss @@ -1,7 +1,6 @@ @charset "UTF-8"; -// Brand bar with white wordmark on dark grey background - +// Brand bar with white wordmark on dark grey background. .su-brand-bar--dark { background-color: $color-black; } diff --git a/core/scss/components/brand-bar/_brand-bar--white.scss b/core/scss/components/brand-bar/_brand-bar--white.scss index 70aa99350..50d569378 100644 --- a/core/scss/components/brand-bar/_brand-bar--white.scss +++ b/core/scss/components/brand-bar/_brand-bar--white.scss @@ -1,7 +1,6 @@ @charset "UTF-8"; -// Brand bar with cardinal red wordmark on white background - +// Brand bar with cardinal red wordmark on white background. .su-brand-bar--white { background-color: $color-white; diff --git a/core/scss/components/brand-bar/_brand-bar.scss b/core/scss/components/brand-bar/_brand-bar.scss index 254a05b0a..209c511e9 100644 --- a/core/scss/components/brand-bar/_brand-bar.scss +++ b/core/scss/components/brand-bar/_brand-bar.scss @@ -13,7 +13,6 @@ // // Style guide: Components.Brand Bar // - .su-brand-bar { @include centered-grid-container; width: 100%; diff --git a/core/scss/components/button/_button--big.scss b/core/scss/components/button/_button--big.scss new file mode 100644 index 000000000..62b352034 --- /dev/null +++ b/core/scss/components/button/_button--big.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +// Big button. +.su-button--big { + @include button-big; +} diff --git a/core/scss/components/button/_button--secondary.scss b/core/scss/components/button/_button--secondary.scss new file mode 100644 index 000000000..5658060cd --- /dev/null +++ b/core/scss/components/button/_button--secondary.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +// Secondary button. +.su-button--secondary { + @include button-secondary; +} diff --git a/core/scss/components/button/_button--unstyled.scss b/core/scss/components/button/_button--unstyled.scss new file mode 100644 index 000000000..2ecee99df --- /dev/null +++ b/core/scss/components/button/_button--unstyled.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +// Remove styles from button. +.su-button--unstyled { + @include button-unstyled; +} diff --git a/core/scss/components/button/_button.scss b/core/scss/components/button/_button.scss index 8a8e32fdf..5590f185a 100644 --- a/core/scss/components/button/_button.scss +++ b/core/scss/components/button/_button.scss @@ -21,15 +21,3 @@ button, [type=image] { @include button-primary; } - -.su-button--secondary { - @include button-secondary; -} - -.su-button--big { - @include button-big; -} - -.su-button--unstyled { - @include button-unstyled; -} diff --git a/core/scss/components/button/index.scss b/core/scss/components/button/index.scss index 2bcf3e141..698d2f609 100644 --- a/core/scss/components/button/index.scss +++ b/core/scss/components/button/index.scss @@ -5,4 +5,7 @@ /// @import - 'button'; + 'button', + 'button--big', + 'button--secondary', + 'button--unstyled'; diff --git a/core/scss/components/card/_is-number.scss b/core/scss/components/card/_is-number.scss deleted file mode 100644 index 8e9056f98..000000000 --- a/core/scss/components/card/_is-number.scss +++ /dev/null @@ -1,13 +0,0 @@ -@charset 'UTF-8'; - -// is-number($value) -// -// Validates wether something is a number -// -// $value - the value to type check -// -// Style guide: functions.type-checks.is-number -// -@function is-number($value) { - @return type-of($value) == 'number'; -} diff --git a/core/scss/components/cta/_cta.scss b/core/scss/components/cta/_cta.scss index fab6f1e31..c73b938a7 100644 --- a/core/scss/components/cta/_cta.scss +++ b/core/scss/components/cta/_cta.scss @@ -13,7 +13,6 @@ // // Style guide: Components.CTA // - .su-cta--button-bottom, .su-cta { @include cta-button; diff --git a/core/scss/components/link/_link--button.scss b/core/scss/components/link/_link--button.scss deleted file mode 100644 index 3e087465c..000000000 --- a/core/scss/components/link/_link--button.scss +++ /dev/null @@ -1,11 +0,0 @@ -@charset "UTF-8"; - -// -// Button link. -// -// @see scss/components/link/_link.scss -// @see scss/utilities/mixins/button/_button-primary.scss -// -.su-link--button { - @include button-primary; -} diff --git a/core/scss/components/link/_link.scss b/core/scss/components/link/_link.scss index 78d49a799..0e53ba9a7 100644 --- a/core/scss/components/link/_link.scss +++ b/core/scss/components/link/_link.scss @@ -14,6 +14,7 @@ // // Style guide: Components.Link // -.su-link { +.su-link, +a { @include link; } diff --git a/core/scss/components/link/index.scss b/core/scss/components/link/index.scss index b8ba5c82e..016d4216f 100644 --- a/core/scss/components/link/index.scss +++ b/core/scss/components/link/index.scss @@ -3,6 +3,5 @@ @import 'link', 'link--action', - 'link--button', 'link--external', 'link--more'; diff --git a/core/scss/components/lockup/index.scss b/core/scss/components/lockup/index.scss index e5f9d7385..e913c3606 100644 --- a/core/scss/components/lockup/index.scss +++ b/core/scss/components/lockup/index.scss @@ -5,5 +5,5 @@ /// @import -'lockup', -'lockup--two-lines'; + 'lockup', + 'lockup--two-lines'; diff --git a/core/scss/components/quote/_quote.scss b/core/scss/components/quote/_quote.scss index 2f5e13cb8..fffd35bce 100644 --- a/core/scss/components/quote/_quote.scss +++ b/core/scss/components/quote/_quote.scss @@ -10,5 +10,33 @@ // Style guide: Components.Quote // .su-quote { - @include quote; + @include padding(1em); + overflow: hidden; + + .su-quote__img { + border-radius: 150px; + border: 7px solid; + float: left; + height: 300px; + width: 300px; + + @include margin(null 2em null null); + } + + .su-quote__body { + .su-quote__heading { + font-size: 2em; + font-weight: 600; + margin-bottom: .5em; + } + + .su-quote__bio { + @include margin(0); + } + + .su-quote__quote { + font-size: 1.5em; + font-weight: 600; + } + } } diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss index 6036092dd..8bbb0b25f 100644 --- a/core/scss/components/site-search/_site-search.scss +++ b/core/scss/components/site-search/_site-search.scss @@ -9,7 +9,6 @@ // // Style guide: Components.Site Search // - .su-site-search { position: relative; } diff --git a/core/scss/components/site-search/index.scss b/core/scss/components/site-search/index.scss index 5eb31f61a..a5c39c508 100644 --- a/core/scss/components/site-search/index.scss +++ b/core/scss/components/site-search/index.scss @@ -5,4 +5,4 @@ /// @import -'site-search'; + 'site-search'; diff --git a/core/scss/core/_base.scss b/core/scss/core/_base.scss index b2a9be71c..3f2742d8f 100644 --- a/core/scss/core/_base.scss +++ b/core/scss/core/_base.scss @@ -6,7 +6,6 @@ // Apply a natural box layout model to all elements, but // allowing components to change. - html { box-sizing: border-box; } diff --git a/core/scss/core/grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss similarity index 95% rename from core/scss/core/grid/_flex-grid.scss rename to core/scss/core/flex-grid/_flex-grid.scss index 8a452bb4c..e425f6a72 100644 --- a/core/scss/core/grid/_flex-grid.scss +++ b/core/scss/core/flex-grid/_flex-grid.scss @@ -1,8 +1,9 @@ @charset "UTF-8"; +// // Flex Grid // -// Markup: ../../templates/core/grid/grid.twig +// Markup: ../../templates/core/flex-grid/flex-grid.twig // // Style guide: Core.FlexGrid @@ -52,7 +53,8 @@ max-width: 100%; } - // @jgknox: Fix this comment. + // Sizes the item based on its width/height properties + // (or its content if not set). .flex#{$_insert}-auto { flex: 0 0 auto; width: auto; diff --git a/core/scss/core/grid/index.scss b/core/scss/core/flex-grid/index.scss similarity index 100% rename from core/scss/core/grid/index.scss rename to core/scss/core/flex-grid/index.scss diff --git a/core/scss/core/fonts/_fonts.scss b/core/scss/core/fonts/_fonts.scss index f1d96a5f8..149bb3335 100644 --- a/core/scss/core/fonts/_fonts.scss +++ b/core/scss/core/fonts/_fonts.scss @@ -3,6 +3,9 @@ // // Fonts // +// Markup: ../../templates/core/fonts/fonts.twig +// +// Style guide: Core.Fonts // Sans font: Source Sans Pro. @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i'); diff --git a/core/scss/core/index.scss b/core/scss/core/index.scss index 2679be84b..ea06b4dad 100644 --- a/core/scss/core/index.scss +++ b/core/scss/core/index.scss @@ -7,12 +7,6 @@ // // Style guide: Core -// Fonts -// -// Markup: ../../templates/core/fonts/fonts.twig -// -// Style guide: Core.Fonts - // Helpers // // Helper partials. @@ -22,7 +16,7 @@ @import 'colors/index', + 'flex-grid/index', 'fonts/index', - 'grid/index', 'helpers/index', 'base'; diff --git a/core/scss/decanter-grid.scss b/core/scss/decanter-grid.scss index f5bd19c5c..1f776402d 100644 --- a/core/scss/decanter-grid.scss +++ b/core/scss/decanter-grid.scss @@ -32,4 +32,4 @@ $border-box-sizing: false; // 4. Grid. @import 'core/base', - 'core/grid/index'; + 'core/flex-grid/index'; diff --git a/core/scss/elements/index.scss b/core/scss/elements/index.scss index a325b7e4a..cfc3fbe5c 100644 --- a/core/scss/elements/index.scss +++ b/core/scss/elements/index.scss @@ -13,7 +13,6 @@ 'embed/index', 'image/index', 'input/index', - 'link/index', 'list/index', 'table/index', 'typography/index'; diff --git a/core/scss/elements/link/_link.scss b/core/scss/elements/link/_link.scss deleted file mode 100644 index 948866996..000000000 --- a/core/scss/elements/link/_link.scss +++ /dev/null @@ -1,14 +0,0 @@ -@charset "UTF-8"; - -// -// Link -// -// Default link styling, as well as special link treatment styling. -// -// Markup: ../templates/elements/link/link.twig -// -// Style guide: Elements.Link -// -a { - @include link; -} diff --git a/core/scss/elements/link/index.scss b/core/scss/elements/link/index.scss deleted file mode 100644 index 769e27de3..000000000 --- a/core/scss/elements/link/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -/// -/// ROLL UP -/// - -@import - 'link'; diff --git a/core/scss/utilities/mixins/table/_table-borderless.scss b/core/scss/elements/table/_table--borderless.scss similarity index 56% rename from core/scss/utilities/mixins/table/_table-borderless.scss rename to core/scss/elements/table/_table--borderless.scss index 5858e4a58..e72fbcc3a 100644 --- a/core/scss/utilities/mixins/table/_table-borderless.scss +++ b/core/scss/elements/table/_table--borderless.scss @@ -1,13 +1,7 @@ @charset "UTF-8"; -// -// @table-borderless -// -// Tables without borders styling. -// -// Style guide: Mixins.Table.table-borderless -// -@mixin table-borderless { +// Table without borders. +.su-table--borderless { thead { tr { background-color: transparent; diff --git a/core/scss/elements/table/_table.scss b/core/scss/elements/table/_table.scss index 03186db33..6a27c3ffa 100644 --- a/core/scss/elements/table/_table.scss +++ b/core/scss/elements/table/_table.scss @@ -14,9 +14,37 @@ // Style guide: Elements.Table // table { - @include tables; -} + @include margin(2em 0); + border-spacing: 0; + min-width: 100%; + + th, + td { + @include padding(1.5rem); + border: 1px solid $color-driftwood; + } + + th { + background-color: $color-cloud; + color: $color-black; + font-weight: $font-normal; + text-align: left; + } + + td { + background-color: $color-white; + } + + thead { + th, + td { + background-color: $color-cloud; + } + } -.su-table--borderless { - @include table-borderless; + tbody { + th { + font-weight: $font-normal; + } + } } diff --git a/core/scss/elements/table/index.scss b/core/scss/elements/table/index.scss index f775e1654..5c84a663b 100644 --- a/core/scss/elements/table/index.scss +++ b/core/scss/elements/table/index.scss @@ -5,4 +5,5 @@ /// @import - 'table'; + 'table', + 'table--borderless'; diff --git a/core/scss/elements/typography/_typography.scss b/core/scss/elements/typography/_typography.scss index 5b3548c4d..b5c9e49b2 100644 --- a/core/scss/elements/typography/_typography.scss +++ b/core/scss/elements/typography/_typography.scss @@ -16,7 +16,6 @@ // // Style guide: Elements.Typography // - html { font-family: $font-sans; font-size: $root-font-size; diff --git a/core/scss/layout/four-column/_molive.scss b/core/scss/layout/four-column/_molive.scss index 5cce03537..437769925 100644 --- a/core/scss/layout/four-column/_molive.scss +++ b/core/scss/layout/four-column/_molive.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.4Column.Molive // - .layout-molive { // A centered column that spans the max-width of the breakpoint. diff --git a/core/scss/layout/full-width/_bricks.scss b/core/scss/layout/full-width/_bricks.scss index 1b10c98aa..7512c0c61 100644 --- a/core/scss/layout/full-width/_bricks.scss +++ b/core/scss/layout/full-width/_bricks.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.FullWidth.Bricks // - .layout-bricks { // A centered column broken in to four equal parts. diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/full-width/_ibeam.scss index 36d65a892..445639675 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/full-width/_ibeam.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.FullWidth.IBeam // - .layout-ibeam { > section { @include centered-column; diff --git a/core/scss/layout/one-column/basic.scss b/core/scss/layout/one-column/basic.scss index 42a9cb9db..a620c440c 100644 --- a/core/scss/layout/one-column/basic.scss +++ b/core/scss/layout/one-column/basic.scss @@ -10,7 +10,6 @@ // // Style guide: Layout.1Column.Basic // - .layout-basic { > header, diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/three-column/_bars.scss index c42b2512c..d52d7ba78 100644 --- a/core/scss/layout/three-column/_bars.scss +++ b/core/scss/layout/three-column/_bars.scss @@ -10,7 +10,6 @@ // // Style guide: Layout.3Column.Bars // - .layout-bars { > div { @include centered-column; diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/three-column/_battleship.scss index f28a271ed..3a1c17e93 100644 --- a/core/scss/layout/three-column/_battleship.scss +++ b/core/scss/layout/three-column/_battleship.scss @@ -10,7 +10,6 @@ // // Style guide: Layout.3Column.Battleship // - .layout-battleship { > div { @include centered-column; diff --git a/core/scss/layout/two-column/_donies.scss b/core/scss/layout/two-column/_donies.scss index 1f28b4601..350c6810d 100644 --- a/core/scss/layout/two-column/_donies.scss +++ b/core/scss/layout/two-column/_donies.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.2Column.Donies // - .layout-donies { > section, diff --git a/core/scss/layout/two-column/_frogger.scss b/core/scss/layout/two-column/_frogger.scss index 974443049..aa9322140 100644 --- a/core/scss/layout/two-column/_frogger.scss +++ b/core/scss/layout/two-column/_frogger.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.2Column.Frogger // - .layout-frogger { > div, diff --git a/core/scss/layout/two-column/_pacman.scss b/core/scss/layout/two-column/_pacman.scss index ecb85ebfb..1e5d12671 100644 --- a/core/scss/layout/two-column/_pacman.scss +++ b/core/scss/layout/two-column/_pacman.scss @@ -11,7 +11,6 @@ // // Style guide: Layout.2Column.Pacman // - $_layout-pacman-columns: ( $breakpoint-xs: 1fr, $breakpoint-sm: 1fr 1fr 1fr, diff --git a/core/scss/layout/two-column/_plakes.scss b/core/scss/layout/two-column/_plakes.scss index dc3648aef..9f641ff33 100644 --- a/core/scss/layout/two-column/_plakes.scss +++ b/core/scss/layout/two-column/_plakes.scss @@ -11,7 +11,6 @@ // // Style guide: Layout.2Column.Plakes // - $_layout-plakes-columns: ( $breakpoint-xs: 1fr, $breakpoint-sm: 1fr 1fr 1fr, diff --git a/core/scss/layout/two-column/_toucan.scss b/core/scss/layout/two-column/_toucan.scss index f50852322..b9bb8da58 100644 --- a/core/scss/layout/two-column/_toucan.scss +++ b/core/scss/layout/two-column/_toucan.scss @@ -9,7 +9,6 @@ // // Style guide: Layout.2Column.Toucan // - .layout-toucan { > div { @include centered-column; diff --git a/core/scss/layout/two-column/_trunks.scss b/core/scss/layout/two-column/_trunks.scss index 7cf07f412..e390ff3d3 100644 --- a/core/scss/layout/two-column/_trunks.scss +++ b/core/scss/layout/two-column/_trunks.scss @@ -11,7 +11,6 @@ // // Style guide: Layout.2Column.Trunks // - $_layout-trunks-columns: ( $breakpoint-xs: 1fr, $breakpoint-sm: 1fr 1fr 1fr, diff --git a/core/scss/layout/two-column/_wedge.scss b/core/scss/layout/two-column/_wedge.scss index 2a787daaa..97b7c3353 100644 --- a/core/scss/layout/two-column/_wedge.scss +++ b/core/scss/layout/two-column/_wedge.scss @@ -11,7 +11,6 @@ // // Style guide: Layout.2Column.Wedge // - $_layout-wedge-columns: ( $breakpoint-xs: 1fr, $breakpoint-sm: 1fr 1fr 1fr, diff --git a/core/scss/utilities/functions/flex/_breakpoint-insert.scss b/core/scss/utilities/functions/flex/_breakpoint-insert.scss index 6ead72328..4ad67e278 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-insert.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-insert.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // breakpoint-insert($name, $breakpoints: grid-screens); // // The $grid-screens map defined in the grid variables file is used as the diff --git a/core/scss/utilities/functions/flex/_breakpoint-max.scss b/core/scss/utilities/functions/flex/_breakpoint-max.scss index 44af75994..6382f3e15 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-max.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-max.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // breakpoint-max($name, $breakpoints; // // The $grid-screens map defined in the grid variables file is used as the diff --git a/core/scss/utilities/functions/flex/_breakpoint-min.scss b/core/scss/utilities/functions/flex/_breakpoint-min.scss index db58274d5..26dacf337 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-min.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-min.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // breakpoint-min($name, $breakpoints); // // The $grid-screens map defined in the grid variables file is used as the diff --git a/core/scss/utilities/functions/flex/_breakpoint-next.scss b/core/scss/utilities/functions/flex/_breakpoint-next.scss index b6b7bdc98..f79962d7d 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-next.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-next.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // breakpoint-next($name, $breakpoint-names) // // The $grid-screens map defined in the grid variables file is used as the diff --git a/core/scss/utilities/functions/flex/_flex-column-ratio.scss b/core/scss/utilities/functions/flex/_flex-column-ratio.scss index c4cfee377..721b99615 100644 --- a/core/scss/utilities/functions/flex/_flex-column-ratio.scss +++ b/core/scss/utilities/functions/flex/_flex-column-ratio.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // flex-column-ratio($columns, $grid-columns: 12) // // Determine the ratio of `$columns` to the total $grid-column count. diff --git a/core/scss/utilities/functions/flex/_flex-column-width.scss b/core/scss/utilities/functions/flex/_flex-column-width.scss index 0a117bbce..261f322f1 100644 --- a/core/scss/utilities/functions/flex/_flex-column-width.scss +++ b/core/scss/utilities/functions/flex/_flex-column-width.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // flex-column-width($columns, $gutter: $gutter-xs, $grid-columns: 12) // // Return a calulated column width that can then be passed in to a `calc()`. diff --git a/core/scss/utilities/functions/flex/_flex-parse-columns.scss b/core/scss/utilities/functions/flex/_flex-parse-columns.scss index 6639a185c..661fc5f7b 100644 --- a/core/scss/utilities/functions/flex/_flex-parse-columns.scss +++ b/core/scss/utilities/functions/flex/_flex-parse-columns.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // flex-parse-columns($span) // // Parse a column count like `3 of 5` and return the total column count. diff --git a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss index 4b8cb3427..cb2c0ba10 100644 --- a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss +++ b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss @@ -8,7 +8,7 @@ // // $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl // -// Style guide: Functions.ModularScale.modular-spacing-get-value +// Style guide: Functions.Modular Scale.modular-spacing-get-value // @function modular-spacing-get-value($breakpoint: 'xs') { @return map-get($modular-spacing, $breakpoint); diff --git a/core/scss/utilities/functions/string/_str-replace.scss b/core/scss/utilities/functions/string/_str-replace.scss index 9497bb6c4..9f06ae2c1 100644 --- a/core/scss/utilities/functions/string/_str-replace.scss +++ b/core/scss/utilities/functions/string/_str-replace.scss @@ -1,5 +1,13 @@ @charset 'UTF-8'; +// +// str-replace($string, $search, $replace: '') +// +// Replaces a substring with another string. +// +// Style guide: Functions.String.str-replace +// + /// Replace `$search` with `$replace` in `$string` /// @author Hugo Giraudel /// @param {String} $string - Initial string diff --git a/core/scss/utilities/functions/string/_to-length.scss b/core/scss/utilities/functions/string/_to-length.scss index 5b58b1f97..27831159a 100644 --- a/core/scss/utilities/functions/string/_to-length.scss +++ b/core/scss/utilities/functions/string/_to-length.scss @@ -1,3 +1,9 @@ +// +// to-length($value, $unit) +// +// Style guide: Functions.String.to-length +// + /// /// Add `$unit` to `$value` /// diff --git a/core/scss/utilities/functions/string/_to-number.scss b/core/scss/utilities/functions/string/_to-number.scss index 6cfa3fbcf..fd6851216 100644 --- a/core/scss/utilities/functions/string/_to-number.scss +++ b/core/scss/utilities/functions/string/_to-number.scss @@ -1,7 +1,10 @@ -// ---- -// Sass (v3.4.13) -// Compass (v1.0.3) -// ---- +// +// to-number($value) +// +// Converts a string to number. +// +// Style guide: Functions.String.to-number +// //// /// String to number converter diff --git a/core/scss/utilities/functions/string/index.scss b/core/scss/utilities/functions/string/index.scss index cbc925920..704668dc6 100644 --- a/core/scss/utilities/functions/string/index.scss +++ b/core/scss/utilities/functions/string/index.scss @@ -1,5 +1,11 @@ @charset 'UTF-8'; +// +// String +// +// Style guide: Functions.String +// + @import "str-replace", "to-length", diff --git a/core/scss/utilities/functions/type-checks/_is-absolute-length.scss b/core/scss/utilities/functions/type-checks/_is-absolute-length.scss index 14ef01484..a009ce3db 100644 --- a/core/scss/utilities/functions/type-checks/_is-absolute-length.scss +++ b/core/scss/utilities/functions/type-checks/_is-absolute-length.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-absolute-length +// Style guide: Functions.Type Checks.is-absolute-length // @function is-absolute-length($value) { @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null; diff --git a/core/scss/utilities/functions/type-checks/_is-integer.scss b/core/scss/utilities/functions/type-checks/_is-integer.scss index 67336e65d..9e4fd49bc 100644 --- a/core/scss/utilities/functions/type-checks/_is-integer.scss +++ b/core/scss/utilities/functions/type-checks/_is-integer.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-integer +// Style guide: Functions.Type Checks.is-integer // @function is-integer($value) { @return is-number($value) and round($value) == $value; diff --git a/core/scss/utilities/functions/type-checks/_is-length.scss b/core/scss/utilities/functions/type-checks/_is-length.scss index ad5fdb237..17a4f5da3 100644 --- a/core/scss/utilities/functions/type-checks/_is-length.scss +++ b/core/scss/utilities/functions/type-checks/_is-length.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-length +// Style guide: Functions.Type Checks.is-length // @function is-length($value) { @return is-relative-length($value) or is-absolute-length($value); diff --git a/core/scss/utilities/functions/type-checks/_is-number.scss b/core/scss/utilities/functions/type-checks/_is-number.scss index 8e9056f98..e11eac8eb 100644 --- a/core/scss/utilities/functions/type-checks/_is-number.scss +++ b/core/scss/utilities/functions/type-checks/_is-number.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-number +// Style guide: Functions.Type Checks.is-number // @function is-number($value) { @return type-of($value) == 'number'; diff --git a/core/scss/utilities/functions/type-checks/_is-percentage.scss b/core/scss/utilities/functions/type-checks/_is-percentage.scss index 507d9bf70..405511dc8 100644 --- a/core/scss/utilities/functions/type-checks/_is-percentage.scss +++ b/core/scss/utilities/functions/type-checks/_is-percentage.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-percentage +// Style guide: Functions.Type Checks.is-percentage // @function is-percentage($value) { @return is-number($value) and unit($value) == '%'; diff --git a/core/scss/utilities/functions/type-checks/_is-position.scss b/core/scss/utilities/functions/type-checks/_is-position.scss index d4a300318..10cf12820 100644 --- a/core/scss/utilities/functions/type-checks/_is-position.scss +++ b/core/scss/utilities/functions/type-checks/_is-position.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-position +// Style guide: Functions.Type Checks.is-position // @function is-position($value) { @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null; diff --git a/core/scss/utilities/functions/type-checks/_is-relative-length.scss b/core/scss/utilities/functions/type-checks/_is-relative-length.scss index a916fb076..561b9c396 100644 --- a/core/scss/utilities/functions/type-checks/_is-relative-length.scss +++ b/core/scss/utilities/functions/type-checks/_is-relative-length.scss @@ -6,7 +6,7 @@ // // $value - the value to type check // -// Style guide: functions.type-checks.is-relative-length +// Style guide: Functions.Type Checks.is-relative-length // @function is-relative-length($value) { @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null; diff --git a/core/scss/utilities/functions/type-checks/index.scss b/core/scss/utilities/functions/type-checks/index.scss index 03c3e6649..def0d3610 100644 --- a/core/scss/utilities/functions/type-checks/index.scss +++ b/core/scss/utilities/functions/type-checks/index.scss @@ -1,5 +1,11 @@ @charset 'UTF-8'; +// +// Type Checks +// +// Style guide: Functions.Type Checks +// + @import 'is-absolute-length', 'is-integer', diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss index 281680843..492b9fa30 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-between.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; -// grid-media-between($lower, $upper, $breakpoints: $grid-screens) +// +// @grid-media-between($lower, $upper, $breakpoints: $grid-screens) // // Media query that spans multiple breakpoint widths (between the min and max breakpoints). // @@ -9,7 +10,6 @@ // $breakpoints - A map of each of the screen breakpoint sizes. // // Style guide: Mixins.Breakpoint.grid-media-between - @mixin grid-media-between($lower: 'xs', $upper: 'sm', $breakpoints: $grid-screens) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss index d59e7c3fc..b28a35fa0 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-max.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; -// grid-media-max($name, $breakpoints: $grid-screens) +// +// @grid-media-max($name, $breakpoints: $grid-screens) // // Media query of at most the maximum breakpoint width. No query for the largest breakpoint. // Applies to the passed through breakpoint and below. @@ -9,7 +10,6 @@ // $breakpoints - A map of each of the screen breakpoint sizes. // // Style guide: Mixins.Breakpoint.grid-media-max - @mixin grid-media-max($name: 'xs', $breakpoints: $grid-screens) { $max: breakpoint-max($name, $breakpoints); @if $max { diff --git a/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss b/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss index 35fb2dd68..13197f1a6 100755 --- a/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss +++ b/core/scss/utilities/mixins/breakpoint/_grid-media-min.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; -// grid-media-max($name, $breakpoints: $grid-screens) +// +// @grid-media-max($name, $breakpoints: $grid-screens) // // Media query of at least the minimum breakpoint width. // No query for the smallest breakpoint. diff --git a/core/scss/utilities/mixins/breakpoint/index.scss b/core/scss/utilities/mixins/breakpoint/index.scss index 691e9728c..60216779f 100644 --- a/core/scss/utilities/mixins/breakpoint/index.scss +++ b/core/scss/utilities/mixins/breakpoint/index.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; -// Roll up index file. +// +// Breakpoint +// +// Mixins for Breakpoints +// +// Style guide: Mixins.Breakpoint +// @import 'grid-media-between', diff --git a/core/scss/utilities/mixins/cta/_cta-button.scss b/core/scss/utilities/mixins/cta/_cta-button.scss index bf0476c33..35f10bdab 100644 --- a/core/scss/utilities/mixins/cta/_cta-button.scss +++ b/core/scss/utilities/mixins/cta/_cta-button.scss @@ -7,7 +7,6 @@ // // Style guide: Mixins.CTA.cta-button // - @mixin cta-button { display: flex; flex-direction: column; diff --git a/core/scss/utilities/mixins/display/index.scss b/core/scss/utilities/mixins/display/index.scss index bb8d8d616..418bb6cda 100644 --- a/core/scss/utilities/mixins/display/index.scss +++ b/core/scss/utilities/mixins/display/index.scss @@ -9,6 +9,5 @@ // @import - 'centered-column', 'display-icon', 'embed-container'; diff --git a/core/scss/utilities/mixins/display/_centered-column.scss b/core/scss/utilities/mixins/grid/_centered-column.scss similarity index 99% rename from core/scss/utilities/mixins/display/_centered-column.scss rename to core/scss/utilities/mixins/grid/_centered-column.scss index ee8aafef2..02b3f1347 100644 --- a/core/scss/utilities/mixins/display/_centered-column.scss +++ b/core/scss/utilities/mixins/grid/_centered-column.scss @@ -17,5 +17,4 @@ max-width: $max-width - $gutter; } } - } diff --git a/core/scss/utilities/mixins/grid/_display-grid.scss b/core/scss/utilities/mixins/grid/_display-grid.scss index da501ac79..cb26a18b9 100644 --- a/core/scss/utilities/mixins/grid/_display-grid.scss +++ b/core/scss/utilities/mixins/grid/_display-grid.scss @@ -7,7 +7,6 @@ // // Style guide: Mixins.Grid.display-grid // - @mixin display-grid { display: grid; display: -ms-grid; diff --git a/core/scss/utilities/mixins/grid/_grid-align-self.scss b/core/scss/utilities/mixins/grid/_grid-align-self.scss index 15fba92e4..230defb8d 100644 --- a/core/scss/utilities/mixins/grid/_grid-align-self.scss +++ b/core/scss/utilities/mixins/grid/_grid-align-self.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // @grid-align-self($value) // // $value - string: value for css property align-self. diff --git a/core/scss/utilities/mixins/grid/_grid-justify-self.scss b/core/scss/utilities/mixins/grid/_grid-justify-self.scss index a14948a0a..a427e2248 100644 --- a/core/scss/utilities/mixins/grid/_grid-justify-self.scss +++ b/core/scss/utilities/mixins/grid/_grid-justify-self.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +// // @grid-justify-self($value) // // A cross browser mixin to justify the grid. diff --git a/core/scss/utilities/mixins/grid/_grid-rows.scss b/core/scss/utilities/mixins/grid/_grid-rows.scss index 779adcb67..b8f87856c 100644 --- a/core/scss/utilities/mixins/grid/_grid-rows.scss +++ b/core/scss/utilities/mixins/grid/_grid-rows.scss @@ -9,7 +9,6 @@ // // Style guide: Mixins.Grid.grid-rows // - @mixin grid-rows($rows) { -ms-grid-rows: $rows; grid-template-rows: $rows; diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index 13e90697e..15d8a516b 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -9,6 +9,7 @@ // @import + 'centered-column', 'centered-grid-container', 'display-grid', 'grid-column-gap', diff --git a/core/scss/utilities/mixins/index.scss b/core/scss/utilities/mixins/index.scss index c0d7ed919..ed9d6958b 100644 --- a/core/scss/utilities/mixins/index.scss +++ b/core/scss/utilities/mixins/index.scss @@ -18,7 +18,5 @@ 'link/index', 'list/index', 'modular-scale/index', - 'quote/index', 'shadow/index', - 'table/index', 'typography/index'; diff --git a/core/scss/utilities/mixins/quote/_quote.scss b/core/scss/utilities/mixins/quote/_quote.scss deleted file mode 100644 index cb8b3391f..000000000 --- a/core/scss/utilities/mixins/quote/_quote.scss +++ /dev/null @@ -1,40 +0,0 @@ -@charset "UTF-8"; - -// -// @quote -// -// Default styling for a quote element. -// -// Style guide: Mixins.Quote.quote -// -@mixin quote { - @include padding(1em); - overflow: hidden; - - .su-quote__img { - border-radius: 150px; - border: 7px solid; - float: left; - height: 300px; - width: 300px; - - @include margin(null 2em null null); - } - - .su-quote__body { - .su-quote__heading { - font-size: 2em; - font-weight: 600; - margin-bottom: .5em; - } - - .su-quote__bio { - @include margin(0); - } - - .su-quote__quote { - font-size: 1.5em; - font-weight: 600; - } - } -} diff --git a/core/scss/utilities/mixins/quote/index.scss b/core/scss/utilities/mixins/quote/index.scss deleted file mode 100644 index 075f0acdd..000000000 --- a/core/scss/utilities/mixins/quote/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@charset "UTF-8"; - -// -// Quote -// -// Mixins for Quote -// -// Style guide: Mixins.Quote -// - -@import -'quote'; diff --git a/core/scss/utilities/mixins/table/_table.scss b/core/scss/utilities/mixins/table/_table.scss deleted file mode 100644 index 56f227576..000000000 --- a/core/scss/utilities/mixins/table/_table.scss +++ /dev/null @@ -1,46 +0,0 @@ -@charset "UTF-8"; - -// -// @tables -// -// Default table styling. -// -// Style guide: Mixins.Table.tables -// -@mixin tables { - border-spacing: 0; - min-width: 100%; - - @include margin(2em 0); - - th, - td { - border: 1px solid $color-driftwood; - - @include padding(1.5rem); - } - - th { - background-color: $color-cloud; - color: $color-black; - font-weight: $font-normal; - text-align: left; - } - - td { - background-color: $color-white; - } - - thead { - th, - td { - background-color: $color-cloud; - } - } - - tbody { - th { - font-weight: $font-normal; - } - } -} diff --git a/core/scss/utilities/mixins/table/index.scss b/core/scss/utilities/mixins/table/index.scss deleted file mode 100644 index 51b0884c0..000000000 --- a/core/scss/utilities/mixins/table/index.scss +++ /dev/null @@ -1,13 +0,0 @@ -@charset "UTF-8"; - -// -// Table -// -// Mixins for Tables -// -// Style guide: Mixins.Table -// - -@import - 'table-borderless', - 'table'; diff --git a/core/templates/core/grid/grid.json b/core/templates/core/flex-grid/flex-grid.json similarity index 100% rename from core/templates/core/grid/grid.json rename to core/templates/core/flex-grid/flex-grid.json diff --git a/core/templates/core/flex-grid/flex-grid.twig b/core/templates/core/flex-grid/flex-grid.twig new file mode 100644 index 000000000..a8103990c --- /dev/null +++ b/core/templates/core/flex-grid/flex-grid.twig @@ -0,0 +1,90 @@ +
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    .flex-2-of-12
    +
    + +
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    .flex-sm-2-of-12
    +
    + +
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    .flex-md-2-of-12
    +
    + +
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    .flex-lg-2-of-12
    +
    + +
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    .flex-xl-2-of-12
    +
    + +
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    .flex-2xl-2-of-12
    +
    + + +
    +
    .flex-4-of-12
    +
    .flex-4-of-12
    +
    .flex-4-of-12
    +
    + +
    +
    .flex-sm-4-of-12
    +
    .flex-sm-4-of-12
    +
    .flex-sm-4-of-12
    +
    + +
    +
    .flex-md-4-of-12
    +
    .flex-md-4-of-12
    +
    .flex-md-4-of-12
    +
    + +
    +
    .flex-lg-4-of-12
    +
    .flex-lg-4-of-12
    +
    .flex-lg-4-of-12
    +
    + +
    +
    .flex-xl-4-of-12
    +
    .flex-xl-4-of-12
    +
    .flex-xl-4-of-12
    +
    + +
    +
    .flex-2xl-4-of-12
    +
    .flex-2xl-4-of-12
    +
    .flex-2xl-4-of-12
    +
    diff --git a/core/templates/core/grid/grid.twig b/core/templates/core/grid/grid.twig deleted file mode 100644 index b3cd0329c..000000000 --- a/core/templates/core/grid/grid.twig +++ /dev/null @@ -1,91 +0,0 @@ -

    Whole & Halves

    -
    -
    12/12
    -
    - -
    -
    6/12
    -
    6/12
    -
    -
    - -

    Thirds

    -
    -
    4/12
    -
    4/12
    -
    4/12
    -
    - -
    -
    4/12
    -
    8/12
    -
    - -

    Fourths & Halves

    -
    -
    3/12
    -
    3/12
    -
    3/12
    -
    3/12
    -
    - -
    -
    3/12
    -
    9/12
    -
    - -
    -
    3/12
    -
    9/12
    -
    3/12
    -
    - -

    Sixths, Halves, and Thirds

    -
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    2/12
    -
    - -
    -
    2/12
    -
    6/12
    -
    4/12
    -
    - -
    -
    2/12
    -
    8/12
    -
    2/12
    -
    - -
    -
    2/12
    -
    10/12
    -
    - - - -

    Twelfths

    -
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    1/12
    -
    - -
    -
    5/12
    -
    7/12
    -
    diff --git a/core/templates/core/grid/zzz-flex-grid.html b/core/templates/core/grid/zzz-flex-grid.html deleted file mode 100644 index c23d837e3..000000000 --- a/core/templates/core/grid/zzz-flex-grid.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - Flex Grid - - - - - - - - - -
    - -
    -

    Flex Grid

    -
    - -
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    - -
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    - -
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    - -
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    - -
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    - -
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    - - -
    -
    .flex-4-of-12
    -
    .flex-4-of-12
    -
    .flex-4-of-12
    -
    - -
    -
    .flex-sm-4-of-12
    -
    .flex-sm-4-of-12
    -
    .flex-sm-4-of-12
    -
    - -
    -
    .flex-md-4-of-12
    -
    .flex-md-4-of-12
    -
    .flex-md-4-of-12
    -
    - -
    -
    .flex-lg-4-of-12
    -
    .flex-lg-4-of-12
    -
    .flex-lg-4-of-12
    -
    - -
    -
    .flex-xl-4-of-12
    -
    .flex-xl-4-of-12
    -
    .flex-xl-4-of-12
    -
    - -
    -
    .flex-2xl-4-of-12
    -
    .flex-2xl-4-of-12
    -
    .flex-2xl-4-of-12
    -
    - - -
    - - diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index e2b482f74..096cfd304 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -927,16 +927,6 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { #kssref-core-grid h4 { text-align: center; } -.flex-container { - margin-bottom: 20px; } - -.flex-item { - padding: 10px; - overflow: hidden; - background-color: rgba(0, 0, 0, 0.125); } - .flex-item:nth-child(even) { - background-color: rgba(0, 0, 0, 0.25); } - .kss-colors-container { margin: 0; padding-left: 0; } @@ -990,6 +980,13 @@ body#kss-node.kss-fullscreen-mode .kss-section.is-fullscreen { .kss-color code { display: none; } +.kss-modifier__wrapper .flex-container { + margin-bottom: 20px; } + +.kss-modifier__wrapper .flex-item { + background-color: #4d4f53; + color: #ffffff; } + body { padding: 0; margin: 0; diff --git a/kss/builder/decanter/scss/_class-based-grid.scss b/kss/builder/decanter/scss/_class-based-grid.scss deleted file mode 100644 index 779684461..000000000 --- a/kss/builder/decanter/scss/_class-based-grid.scss +++ /dev/null @@ -1,17 +0,0 @@ -@charset "UTF-8"; - -// Margins to aid in demonstration of markup. -.flex-container { - margin-bottom: 20px; -} - -// Colors to distinguish odd vs. even cells. -.flex-item { - padding: 10px; - overflow: hidden; - background-color: rgba(black, .125); - - &:nth-child(even) { - background-color: rgba(black, .25); - } -} diff --git a/kss/builder/decanter/scss/_flex-grid.scss b/kss/builder/decanter/scss/_flex-grid.scss new file mode 100644 index 000000000..9cd13b459 --- /dev/null +++ b/kss/builder/decanter/scss/_flex-grid.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +.kss-modifier__wrapper { + // Margins to aid in demonstration of markup. + .flex-container { + margin-bottom: 20px; + } + + // Colors to aid in visuals of columns. + .flex-item { + background-color: #4d4f53; + color: #ffffff; + } +} diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index e73cab819..c03763ca9 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -37,8 +37,8 @@ 'visible-grid', 'brand-bar', 'builder', - 'class-based-grid', 'colors-demo', + 'flex-grid', 'global-footer', 'home', 'layout-colors'; From 860535413df22e6437fa5dd01bf4cde321907f69 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 29 Nov 2018 19:59:40 -0800 Subject: [PATCH 057/123] Refactor KSS theme scss. --- core/scss/homepage.md | 14 - kss/builder/decanter/index.twig | 15 + kss/builder/decanter/kss-assets/css/kss.css | 330 ++++++++++++++++++ kss/builder/decanter/scss/_base-elements.scss | 38 ++ kss/builder/decanter/scss/_builder.scss | 14 + kss/builder/decanter/scss/_content.scss | 129 +++++++ kss/builder/decanter/scss/_fullscreen.scss | 100 ++++++ kss/builder/decanter/scss/_guides.scss | 66 ++++ kss/builder/decanter/scss/_home.scss | 2 + kss/builder/decanter/scss/_markup-source.scss | 21 ++ kss/builder/decanter/scss/_print.scss | 14 + kss/builder/decanter/scss/_sidebar.scss | 82 +++++ kss/builder/decanter/scss/_toolbar.scss | 12 + kss/builder/decanter/scss/kss.scss | 14 +- 14 files changed, 834 insertions(+), 17 deletions(-) create mode 100644 kss/builder/decanter/scss/_base-elements.scss create mode 100644 kss/builder/decanter/scss/_content.scss create mode 100644 kss/builder/decanter/scss/_fullscreen.scss create mode 100644 kss/builder/decanter/scss/_guides.scss create mode 100644 kss/builder/decanter/scss/_markup-source.scss create mode 100644 kss/builder/decanter/scss/_print.scss create mode 100644 kss/builder/decanter/scss/_sidebar.scss diff --git a/core/scss/homepage.md b/core/scss/homepage.md index 3dc3d3ca6..07974ecd9 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -1,17 +1,3 @@ -
    -
    -

    Decanter

    - -
    -
    -

    Welcome to the Decanter Style Guide and Pattern Library.

    diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index c09146740..453170b24 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -21,7 +21,22 @@ only %} +
    +
    + + +
    +
    +
    + {% if not template.isHomepage %}
    diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 1ad9ecc14..22e5f2677 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -367,6 +367,40 @@ template { --color-text: hsla(104, 40%, 32%, 1); --media-query: '2xl'; } } +a, a:link, a:visited, a:hover { + text-decoration: none; } + +pre, code, kbd, samp { + font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; + color: #363533; + font-size: 1em; } + +pre { + white-space: pre; + overflow: scroll; } + +ins { + color: #2e2d29; + background: #ff9; + text-decoration: none; } + +mark { + color: #2e2d29; + background: #ff0; + font-weight: bold; } + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + #kss-node { padding-top: 20px !important; } #kss-node > .su-brand-bar { @@ -529,6 +563,9 @@ template { grid-column: 2 / span 5; -ms-grid-column-span: 5; } } +.kss-home .main-page-layout { + display: block; } + .flex-container { margin-bottom: 20px; } @@ -592,6 +629,137 @@ template { .kss-color code { display: none; } +.kss-section { + margin-bottom: 60px; } + +.kss-title { + margin-bottom: 0; } + +.kss-title__ref { + display: block; + font-size: 20px; + line-height: 20px; } + .kss-title__ref:before { + content: 'Section '; } + +.kss-title__permalink { + display: block; + text-decoration: none; } + @media screen and (min-width: 607px) { + .kss-title__permalink:hover .kss-title__permalink-hash, .kss-title__permalink:focus .kss-title__permalink-hash, .kss-title__permalink:active .kss-title__permalink-hash { + display: inline; } } + +.kss-title__permalink-hash { + display: none; + color: #ccc; } + +.kss-parameters { + display: table; + list-style-type: none; + margin-top: 0; + margin-left: 0; + padding-left: 0; } + +.kss-parameters__title { + font-weight: bold; } + +.kss-parameters__item { + display: table-row; } + +.kss-parameters__name { + display: table-cell; + padding-right: 20px; + white-space: nowrap; } + +.kss-parameters__description { + display: table-cell; } + +.kss-parameters__default-value code { + white-space: nowrap; } + +.kss-modifier__wrapper { + border: 1px solid #ccc; + padding: 0 10px 10px; } + +.kss-modifier__heading { + margin: 0 -10px 10px -10px; + padding: 10px; + border-bottom: 1px solid #ccc; + background-color: #eee; + font-weight: bold; } + +.kss-modifier__default-name { + font-weight: bold; + margin-bottom: 15px; } + +.kss-modifier__name { + float: left; + padding-right: 10px; + font-weight: bold; } + +.kss-modifier__description { + margin-bottom: 15px; } + +.kss-modifier__example { + clear: left; + border: 2px dashed transparent; + position: relative; + z-index: 0; + margin: -2px -2px 28px; } + .kss-modifier__example:last-child { + margin-bottom: 0; } + +.kss-modifier__example-footer { + clear: both; } + +#kss-node.kss-fullscreen-mode .kss-sidebar, +#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen), +#kss-node.kss-fullscreen-mode .kss-github { + display: none; } + +#kss-node.kss-fullscreen-mode .main-page-layout { + display: block; } + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before { + left: auto; + right: 0; } + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after { + right: auto; + left: 0; } + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before { + left: auto; + right: 0; } + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after { + right: auto; + left: 0; } + +.is-fullscreen .kss-title { + margin-top: 0; } + +.is-fullscreen .kss-modifier__wrapper { + margin-left: -20px; + margin-right: -20px; + padding-left: 0; + padding-right: 0; + border: none; } + +.is-fullscreen .kss-modifier__heading { + margin: 0 20px 10px; + border: 1px solid #ccc; } + +.is-fullscreen .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; } + +.is-fullscreen .is-fullscreen .kss-modifier__name { + margin-left: 20px; } + +.is-fullscreen .kss-modifier__description { + margin-right: 20px; } + body { padding: 0; margin: 0; @@ -603,6 +771,60 @@ body { body > .global-footer { margin-top: auto; } +.is-fullscreen .kss-toolbar a[data-kss-fullscreen], +.kss-guides-mode .kss-toolbar a[data-kss-guides], +.kss-markup-mode .kss-toolbar a[data-kss-markup] { + border-color: #666; + background-color: #666; } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill, + .kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill, + .kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill { + fill: #fff; } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on, + .kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on, + .kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on { + display: block; } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off, + .kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off, + .kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off { + display: none; } + +.kss-guides-mode .kss-modifier__example:before, .kss-guides-mode .kss-modifier__example:after, +.kss-guides-mode .kss-modifier__example-footer:before, +.kss-guides-mode .kss-modifier__example-footer:after { + z-index: -1; + box-sizing: border-box; + content: ''; + position: absolute; + width: 5px; + height: 5px; + border: 2px solid #000; } + +.kss-guides-mode .kss-modifier__example { + border-color: #000; } + .kss-guides-mode .kss-modifier__example:before { + top: -5px; + left: -5px; + border-top: 0; + border-left: 0; } + .kss-guides-mode .kss-modifier__example:after { + top: -5px; + right: -5px; + border-top: 0; + border-right: 0; } + +.kss-guides-mode .kss-modifier__example-footer:before { + bottom: -5px; + left: -5px; + border-bottom: 0; + border-left: 0; } + +.kss-guides-mode .kss-modifier__example-footer:after { + bottom: -5px; + right: -5px; + border-right: 0; + border-bottom: 0; } + #kss-node.kss-home .kss-main { width: 100%; margin: 30px 0 0; @@ -1019,6 +1241,20 @@ body { .layout aside { border: dashed 1px #2e2d29; } +.kss-markup { + margin: 30px 0; + border: 1px solid #ccc; } + .kss-markup[open] summary { + border-bottom: 1px solid #ccc; + margin-bottom: 3px; } + .kss-markup summary { + padding-left: 10px; } + .kss-markup pre { + margin: 0; } + +.kss-source { + font-size: 80%; } + /* SPAN elements with the classes below are added by prettyprint. */ .pln { color: #000; } @@ -1113,6 +1349,92 @@ ol.linenums { ol.linenums li.L8 { background: #fcfcfc; } +@media print { + a, a:visited { + text-decoration: underline; } + hr { + height: 1px; + border: 0; + border-bottom: 1px solid black; } + a[href]:after { + content: " (" attr(href) ")"; } + a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; } + abbr[title]:after { + content: " (" attr(title) ")"; } + pre, blockquote { + border: 1px solid #999; + padding-right: 1em; + page-break-inside: avoid; } + tr, img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + p, h2, h3 { + orphans: 3; + widows: 3; } + h2, h3 { + page-break-after: avoid; } } + +.kss-doc-title { + display: none; } + +.kss-nav__menu { + margin-top: 15px; + margin-bottom: 15px; + padding: 10px; + list-style-type: none; } + +.kss-nav__menu-item { + display: inline-block; + padding-right: 30px; } + @media screen and (min-width: 769px) { + .kss-nav__menu-item { + display: list-item; + padding-right: 0; } } + +.kss-nav__menu-link { + position: relative; + display: inline-block; } + @media screen and (min-width: 769px) { + .kss-nav__menu-link:before { + content: ' '; + position: absolute; + left: -10px; + width: 0; + height: 100%; + background-color: rgba(0, 0, 0, 0); } } + .kss-nav__menu-link.is-in-viewport:before { + background-color: #000; + width: 5px; + transition: background-color .4s, width .6s; } + +.kss-nav__menu-child { + display: none; } + @media screen and (min-width: 769px) { + .kss-nav__menu-child { + display: block; + list-style-type: none; + margin: 0; + padding: 0; } + .kss-nav__menu-child li:first-child { + margin-top: 10px; + border-top: 1px solid #ccc; + padding: 10px 0 0; } + .kss-nav__menu-child li:last-child { + margin-bottom: 10px; + border-bottom: 1px solid #ccc; + padding: 0 0 10px; } } + +.kss-nav__ref { + color: #333; + font-weight: bold; } + .kss-nav__ref:after { + content: ' '; } + +.kss-nav__ref-child { + font-weight: normal; } + .kss-toolbar { margin: 6px 0 24px; display: inline-block; @@ -1177,4 +1499,12 @@ ol.linenums { bottom: -6px; border-top-color: #fff; } +a:focus > .kss-toolbar__tooltip, +a:hover > .kss-toolbar__tooltip { + opacity: 1; + clip: auto; + height: auto; + width: auto; + overflow: visible; } + /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_base-elements.scss b/kss/builder/decanter/scss/_base-elements.scss new file mode 100644 index 000000000..4b75d3e4c --- /dev/null +++ b/kss/builder/decanter/scss/_base-elements.scss @@ -0,0 +1,38 @@ +@charset 'UTF-8'; + +a, a:link, a:visited, a:hover { + text-decoration: none; +} + +pre, code, kbd, samp { + font-family: $kss-font-code; + color: mix($kss-colors-foreground, $kss-colors-heading, 50%); + font-size: 1em; +} + +pre { + white-space: pre; + overflow: scroll; +} + +ins { + color: $kss-colors-heading; + background: #ff9; + text-decoration: none; +} + +mark { + color: $kss-colors-heading; + background: #ff0; + font-weight: bold; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { top: -0.5em; } +sub { bottom: -0.25em; } diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index d911360d6..2a7d41405 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -1,5 +1,9 @@ @charset "UTF-8"; +// ----------------------------------------------------------------------------- +// Main page scaffolding structure. +// ----------------------------------------------------------------------------- + $grid-columns: ( $breakpoint-xs: 1fr, $breakpoint-sm: 1fr 1fr 1fr 1fr, @@ -27,3 +31,13 @@ $grid-columns: ( @include grid-item-spans(2, span 5); } } + +// ----------------------------------------------------------------------------- +// Home Page Layout +// ----------------------------------------------------------------------------- + +.kss-home { + .main-page-layout { + display: block; + } +} diff --git a/kss/builder/decanter/scss/_content.scss b/kss/builder/decanter/scss/_content.scss new file mode 100644 index 000000000..bbd3f5079 --- /dev/null +++ b/kss/builder/decanter/scss/_content.scss @@ -0,0 +1,129 @@ +@charset 'UTF-8'; + +// ----------------------------------------------------------------------------- +// Section +// ----------------------------------------------------------------------------- + +.kss-section { + margin-bottom: ($kss-vertical-rhythm * 2); +} + +.kss-title { + margin-bottom: 0; +} + +.kss-title__ref { + display: block; + font-size: $kss-font-size; + line-height: $kss-font-size; + + &:before { + content: 'Section '; + } +} + +// ----------------------------------------------------------------------------- +// Permalink +// ----------------------------------------------------------------------------- + +.kss-title__permalink { + display: block; + text-decoration: none; + + &:hover, + &:focus, + &:active { + @media screen and (min-width: 607px) { + .kss-title__permalink-hash { + display: inline; + } + } + } +} + +.kss-title__permalink-hash { + display: none; + color: #ccc; +} + +// ----------------------------------------------------------------------------- +// Parameters +// ----------------------------------------------------------------------------- + +.kss-parameters { + display: table; + list-style-type: none; + margin-top: 0; + margin-left: 0; + padding-left: 0; +} + +.kss-parameters__title { + font-weight: bold; +} + +.kss-parameters__item { + display: table-row; +} + +.kss-parameters__name { + display: table-cell; + padding-right: 20px; + white-space: nowrap; +} + +.kss-parameters__description { + display: table-cell; +} + +.kss-parameters__default-value code { + white-space: nowrap; +} + +// ----------------------------------------------------------------------------- +// Modifier - Wrapper +// ----------------------------------------------------------------------------- + +.kss-modifier__wrapper { + border: 1px solid #ccc; + padding: 0 10px 10px; +} + +.kss-modifier__heading { + margin: 0 -10px 10px -10px; + padding: 10px; + border-bottom: 1px solid #ccc; + background-color: #eee; + font-weight: bold; +} + +.kss-modifier__default-name { + font-weight: bold; + margin-bottom: ($kss-vertical-rhythm / 2); +} + +.kss-modifier__name { + float: left; + padding-right: 10px; + font-weight: bold; +} + +.kss-modifier__description { + margin-bottom: ($kss-vertical-rhythm / 2); +} + +.kss-modifier__example { + clear: left; + border: 2px dashed transparent; + position: relative; // Contain the example's absolute positioning. + z-index: 0; // Establishes a local stacking context. + margin: -2px -2px ($kss-vertical-rhythm - 2px); + + &:last-child { + margin-bottom: 0; + } +} + +.kss-modifier__example-footer { + clear: both; +} diff --git a/kss/builder/decanter/scss/_fullscreen.scss b/kss/builder/decanter/scss/_fullscreen.scss new file mode 100644 index 000000000..8fbf18722 --- /dev/null +++ b/kss/builder/decanter/scss/_fullscreen.scss @@ -0,0 +1,100 @@ +@charset 'UTF-8'; + +// +// Full Page Layout +// +#kss-node { + &.kss-fullscreen-mode { + .kss-sidebar, + .kss-section:not(.is-fullscreen), + .kss-github { + display: none; + } + .main-page-layout { + display: block; + } + } +} + +.kss-section { + + // "fullscreen" styles copied from Mozilla's default stylesheet. + &.is-fullscreen { + // position: fixed !important; + // top: 0 !important; + // left: 0 !important; + // right: 0 !important; + // bottom: 0 !important; + // width: 100% !important; + // height: 100% !important; + // margin: 0 !important; + // min-width: 0 !important; + // max-width: none !important; + // min-height: 0 !important; + // max-height: none !important; + // box-sizing: border-box !important; + // object-fit: contain !important; + // transform: none !important; + // // Turn on scrolling if needed. + // overflow: auto !important; + // padding: 20px; + } +} + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } +} + +.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } +} + +.is-fullscreen { + + .kss-title { + margin-top: 0; + } + + .kss-modifier__wrapper { + // Un-do padding on .kss-section. + margin-left: -20px; + margin-right: -20px; + // Remove all padding on the wrapper + padding-left: 0; + padding-right: 0; + border: none; + } + + .kss-modifier__heading { + margin: 0 20px 10px; + border: 1px solid #ccc; + } + + .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; + } + + .is-fullscreen .kss-modifier__name { + margin-left: 20px; + } + + .kss-modifier__description { + margin-right: 20px; + } + +} diff --git a/kss/builder/decanter/scss/_guides.scss b/kss/builder/decanter/scss/_guides.scss new file mode 100644 index 000000000..626bcdfbc --- /dev/null +++ b/kss/builder/decanter/scss/_guides.scss @@ -0,0 +1,66 @@ +@charset 'UTF-8'; + +.is-fullscreen .kss-toolbar a[data-kss-fullscreen], +.kss-guides-mode .kss-toolbar a[data-kss-guides], +.kss-markup-mode .kss-toolbar a[data-kss-markup] { + border-color: #666; + background-color: #666; + + .kss-toolbar__icon-fill { + fill: #fff; + } + + svg.on { + display: block; + } + + svg.off { + display: none; + } +} + +.kss-guides-mode .kss-modifier__example, +.kss-guides-mode .kss-modifier__example-footer { + &:before, + &:after { + z-index: -1; + box-sizing: border-box; + content: ''; + position: absolute; + width: 5px; + height: 5px; + border: 2px solid #000; + } +} + +.kss-guides-mode .kss-modifier__example { + border-color: #000; + + &:before { + top: -5px; + left: -5px; + border-top: 0; + border-left: 0; + } + &:after { + top: -5px; + right: -5px; + border-top: 0; + border-right: 0; + } +} + +.kss-guides-mode .kss-modifier__example-footer { + &:before { + bottom: -5px; + left: -5px; + border-bottom: 0; + border-left: 0; + } + &:after { + bottom: -5px; + right: -5px; + border-right: 0; + border-bottom: 0; + } +} diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 8ad732b37..fa32b15c1 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -1,3 +1,5 @@ +@charset 'UTF-8'; + #kss-node.kss-home .kss-main { width: 100%; diff --git a/kss/builder/decanter/scss/_markup-source.scss b/kss/builder/decanter/scss/_markup-source.scss new file mode 100644 index 000000000..cefea3092 --- /dev/null +++ b/kss/builder/decanter/scss/_markup-source.scss @@ -0,0 +1,21 @@ +.kss-markup { + margin: $kss-vertical-rhythm 0; + border: 1px solid #ccc; + + &[open] summary { + border-bottom: 1px solid #ccc; + margin-bottom: 3px; + } + + summary { + padding-left: 10px; + } + + pre { + margin: 0; + } +} + +.kss-source { + font-size: 80%; +} diff --git a/kss/builder/decanter/scss/_print.scss b/kss/builder/decanter/scss/_print.scss new file mode 100644 index 000000000..b129d874c --- /dev/null +++ b/kss/builder/decanter/scss/_print.scss @@ -0,0 +1,14 @@ +@charset 'UTF-8'; + +@media print { + a, a:visited { text-decoration: underline; } + hr { height: 1px; border:0; border-bottom:1px solid black; } + a[href]:after { content: " (" attr(href) ")"; } + a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + abbr[title]:after { content: " (" attr(title) ")"; } + pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3 { page-break-after: avoid; } +} diff --git a/kss/builder/decanter/scss/_sidebar.scss b/kss/builder/decanter/scss/_sidebar.scss new file mode 100644 index 000000000..dc0d90f41 --- /dev/null +++ b/kss/builder/decanter/scss/_sidebar.scss @@ -0,0 +1,82 @@ +@charset 'UTF-8'; + +.kss-doc-title { + display: none; +} + +.kss-nav__menu { + margin-top: ($kss-vertical-rhythm/2); + margin-bottom: ($kss-vertical-rhythm/2); + padding: 10px; + list-style-type: none; +} + +.kss-nav__menu-item { + display: inline-block; + padding-right: $kss-vertical-rhythm; + + @media screen and (min-width: 769px) { + display: list-item; + padding-right: 0; + } +} + +.kss-nav__menu-link { + position: relative; + display: inline-block; + + &:before { + @media screen and (min-width: 769px) { + content: ' '; + position: absolute; + left: -10px; + width: 0; + height: 100%; + background-color: rgba(#000, 0); + } + } + + &.is-in-viewport:before { + background-color: #000; + width: 5px; + transition: background-color .4s, width .6s; + } +} + + +.kss-nav__menu-child { + display: none; + + @media screen and (min-width: 769px) { + display: block; + list-style-type: none; + margin: 0; + padding: 0; + + // @TODO: The ul is output even when there are no children. Fix this, so + // we can put these :first-child and :last child styles back on the ul. + li:first-child { + margin-top: 10px; + border-top: 1px solid #ccc; + padding: 10px 0 0; + } + + li:last-child { + margin-bottom: 10px; + border-bottom: 1px solid #ccc; + padding: 0 0 10px; + } + } +} + +.kss-nav__ref { + color: #333; + font-weight: bold; + + &:after { + content: ' '; + } +} +.kss-nav__ref-child { + font-weight: normal; +} diff --git a/kss/builder/decanter/scss/_toolbar.scss b/kss/builder/decanter/scss/_toolbar.scss index 4865c3e87..5728bc74b 100644 --- a/kss/builder/decanter/scss/_toolbar.scss +++ b/kss/builder/decanter/scss/_toolbar.scss @@ -85,3 +85,15 @@ border-top-color: #fff; } } + +a:focus, +a:hover { + > .kss-toolbar__tooltip { + opacity: 1; + // Visually hidden off + clip: auto; + height: auto; + width: auto; + overflow: visible; + } +} diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index 4783ea579..5fcf1f028 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -13,7 +13,6 @@ // 5. KSS - // 1. Pre-vendor settings. @import 'utilities/variables/pre-vendor/index'; @@ -26,21 +25,30 @@ // 3. Utilities. @import 'utilities/variables/index', - 'kss-variables'; + 'kss-variables', + 'visible-grid'; // 4. Decanter. @import 'decanter-no-markup'; +// Base styles below. +@import 'base-elements'; + // 5. KSS. @import - 'visible-grid', 'brand-bar', 'builder', 'class-based-grid', 'colors-demo', + 'content', + 'fullscreen', 'global-footer', + 'guides', 'home', 'layout-colors', + 'markup-source', 'prettify', + 'print', + 'sidebar', 'toolbar'; From 4cdeee1d9702c1456840c45494ee27801865b32d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 29 Nov 2018 23:47:26 -0800 Subject: [PATCH 058/123] Sort of working new theme. --- core/css/decanter.css | 15 +- .../components/card/_card--horizontal.scss | 9 +- .../scss/elements/typography/_typography.scss | 2 +- core/scss/homepage.md | 36 +- .../functions/flex/_breakpoint-max.scss | 3 +- .../functions/flex/_breakpoint-next.scss | 10 +- .../utilities/mixins/link/_action-link.scss | 8 +- .../mixins/typography/_headings.scss | 2 +- core/templates/components/card/card.twig | 2 +- kss/builder/decanter/index.twig | 80 +-- kss/builder/decanter/kss-assets/css/kss.css | 665 ++++++++++++------ .../decanter/kss-assets/js/main-nav.js | 29 + kss/builder/decanter/scss/_brand-bar.scss | 3 +- kss/builder/decanter/scss/_builder.scss | 14 +- kss/builder/decanter/scss/_content.scss | 15 + kss/builder/decanter/scss/_home.scss | 149 +--- kss/builder/decanter/scss/_main-nav.scss | 42 ++ kss/builder/decanter/scss/_masthead.scss | 29 + kss/builder/decanter/scss/_sidebar.scss | 60 +- kss/builder/decanter/scss/kss.scss | 2 + 20 files changed, 721 insertions(+), 454 deletions(-) create mode 100644 kss/builder/decanter/kss-assets/js/main-nav.js create mode 100644 kss/builder/decanter/scss/_main-nav.scss create mode 100644 kss/builder/decanter/scss/_masthead.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index e952e0863..757bf0740 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2178,7 +2178,6 @@ body { p { line-height: 1.4; - margin-top: 1em; margin-bottom: 1em; } h1, @@ -2189,7 +2188,6 @@ h5, h6 { clear: both; line-height: 1.2; - margin-top: 1.5em; margin-bottom: 0.5em; } .su-sans h1, .su-sans h2, .su-sans @@ -6559,7 +6557,7 @@ button, margin-bottom: 0; } } } .su-card--horizontal > img, .su-card--horizontal .su-card__contents { - margin: 32px; } + margin: 0; } @media only screen and (min-width: 576px) { .su-card--horizontal > img, .su-card--horizontal .su-card__contents { @@ -6580,6 +6578,9 @@ button, .su-card--horizontal > img, .su-card--horizontal .su-card__contents { margin: 38px; } } + @media (max-width: 767px) { + .su-card--horizontal .su-card__contents > h2 { + margin-top: 0; } } .su-cta--button-bottom, .su-cta { @@ -6904,14 +6905,14 @@ button, color: #006cb8; } .su-link--action::after { content: ' ›'; - font-size: 1.25em; - left: 0; + left: 1px; position: relative; - transition: left .4s ease-in-out; } + transition: left .2s ease-in-out; + text-decoration: none; } .su-link--action:hover { color: #2e2d29; } .su-link--action:hover::after { - left: 3px; } + left: 4px; } .su-link--button { -webkit-font-smoothing: antialiased; diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 823d5580a..25055f779 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -60,8 +60,15 @@ margin: modular-spacing-get-value('2xl'); } - margin: modular-spacing-get-value('xs'); + margin: 0; + } + .su-card__contents { + > h2 { + @include grid-media-max('sm') { + margin-top: 0; + } + } } } diff --git a/core/scss/elements/typography/_typography.scss b/core/scss/elements/typography/_typography.scss index 5b3548c4d..e64d1c5cb 100644 --- a/core/scss/elements/typography/_typography.scss +++ b/core/scss/elements/typography/_typography.scss @@ -30,7 +30,7 @@ body { p { line-height: $base-line-height; - @include margin(1em null); + @include margin(null null 1em null); } h1, diff --git a/core/scss/homepage.md b/core/scss/homepage.md index 07974ecd9..35f3fdbec 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -15,52 +15,46 @@
    -

    Developer Resources

    - -
    - Cubes -
    -

    Components

    -

    Browse our catalog of components and view the markup.

    - Browse +
    +
    + Cubes +
    +

    Components

    +

    Browse our catalog of components and view the markup.

    + Browse +
    -
    - -
    - File -
    -

    Documentation

    -

    From coding standards to best practices follow the link to find out more.

    - Wiki Docs +
    + File +
    +

    Documentation

    +

    From coding standards to best practices follow the link to find out more.

    + Wiki Docs +
    -

    More from Stanford University

      -

    • Stanford University Communications

      Providing information about Stanford University; coordinating the university's public and media relations efforts; and producing the university's main web pages, social media channels and central publications.

      Learn more about Stanford University Communications

      • -

    • Stanford Identity Toolkit

      If you’re inside Stanford, and looking for guidelines applying the identity, emblem files, policies, or support, this is your resource.

      Use the Identity Toolkit

      • -

    • Stanford Web Services

      Providing the Stanford community a full range of website planning, design, development, and maintenance support at below-market rates.

      Learn more about Stanford Web Services

      • -
    diff --git a/core/scss/utilities/functions/flex/_breakpoint-max.scss b/core/scss/utilities/functions/flex/_breakpoint-max.scss index 44af75994..58a044c07 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-max.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-max.scss @@ -14,6 +14,7 @@ // // Style guide: Functions.Flex.beakpoint-max @function breakpoint-max($name, $breakpoints: $grid-screens) { - $next: breakpoint-next($name, $breakpoints); + $next: breakpoint-next($name, map-keys($breakpoints)); + @debug $next; @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } diff --git a/core/scss/utilities/functions/flex/_breakpoint-next.scss b/core/scss/utilities/functions/flex/_breakpoint-next.scss index b6b7bdc98..46784ac43 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-next.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-next.scss @@ -11,7 +11,11 @@ // Returns "md" // // Style guide: Functions.Flex.breakpoint-next -@function breakpoint-next($name, $breakpoint-names: map-keys($breakpoints)) { - $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +@function breakpoint-next($name, $breakpoints: map-keys($grid-screens)) { + $n: index($breakpoints, $name); + @if is-integer($n) { + @return if($n < length($breakpoints), nth($breakpoints, $n + 1), null); + } @else { + @error "Could not find breakpoint shortcode in breakpoint-next mixin"; + } } diff --git a/core/scss/utilities/mixins/link/_action-link.scss b/core/scss/utilities/mixins/link/_action-link.scss index e287c8c42..d9cca0eb7 100644 --- a/core/scss/utilities/mixins/link/_action-link.scss +++ b/core/scss/utilities/mixins/link/_action-link.scss @@ -16,17 +16,17 @@ &::after { content: ' ›'; - font-size: 1.25em; - left: 0; + left: 1px; position: relative; - transition: left .4s ease-in-out; + transition: left .2s ease-in-out; + text-decoration: none; } &:hover { color: $hover; &::after { - left: 3px; + left: 4px; } } } diff --git a/core/scss/utilities/mixins/typography/_headings.scss b/core/scss/utilities/mixins/typography/_headings.scss index 31e2c0f71..40682ac2f 100644 --- a/core/scss/utilities/mixins/typography/_headings.scss +++ b/core/scss/utilities/mixins/typography/_headings.scss @@ -11,7 +11,7 @@ clear: both; line-height: $heading-line-height; - @include margin(1.5em null 0.5em); + @include margin(null null 0.5em); .su-sans & { font-family: $font-sans; diff --git a/core/templates/components/card/card.twig b/core/templates/components/card/card.twig index 395c7f789..d4d76da71 100644 --- a/core/templates/components/card/card.twig +++ b/core/templates/components/card/card.twig @@ -74,7 +74,7 @@ } only %} -
    +
    {% endif %}
    {# /su-card__contents #} diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig index 453170b24..77db433f5 100644 --- a/kss/builder/decanter/index.twig +++ b/kss/builder/decanter/index.twig @@ -21,16 +21,16 @@ only %} -
    +
    @@ -39,39 +39,38 @@ {% if not template.isHomepage %}
    -
    -

    {{ options.title }}

    -
    - +
    + +
    {% endif %} @@ -248,6 +247,7 @@ + diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 22e5f2677..8f0dba8bd 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -402,7 +402,7 @@ sub { bottom: -0.25em; } #kss-node { - padding-top: 20px !important; } + padding-top: 30px; } #kss-node > .su-brand-bar { position: fixed; top: 0; @@ -437,8 +437,8 @@ sub { margin-bottom: 0; } } } @media only screen and (min-width: 576px) { .main-page-layout { - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } .main-page-layout > * { margin-right: 16px; margin-left: 16px; } @@ -481,8 +481,8 @@ sub { margin-bottom: 0; } } } @media only screen and (min-width: 992px) { .main-page-layout { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .main-page-layout > * { margin-right: 18px; margin-left: 18px; } @@ -503,8 +503,8 @@ sub { margin-bottom: 0; } } } @media only screen and (min-width: 1200px) { .main-page-layout { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .main-page-layout > * { margin-right: 18px; margin-left: 18px; } @@ -525,8 +525,8 @@ sub { margin-bottom: 0; } } } @media only screen and (min-width: 1500px) { .main-page-layout { - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .main-page-layout > * { margin-right: 19px; margin-left: 19px; } @@ -549,9 +549,12 @@ sub { .kss-sidebar { -ms-grid-column: 1; grid-column: 1 / span 1; - -ms-grid-column-span: 1; } + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / 1; + -ms-grid-row-span: 0; } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 768px) { .kss-main { -ms-grid-column: 2; grid-column: 2 / span 3; @@ -560,8 +563,8 @@ sub { @media only screen and (min-width: 992px) { .kss-main { -ms-grid-column: 2; - grid-column: 2 / span 5; - -ms-grid-column-span: 5; } } + grid-column: 2 / span 4; + -ms-grid-column-span: 4; } } .kss-home .main-page-layout { display: block; } @@ -630,7 +633,22 @@ sub { display: none; } .kss-section { - margin-bottom: 60px; } + margin-bottom: 60px; + margin-top: 30px; } + .kss-section h1, + .kss-section h2, + .kss-section h3, + .kss-section h4, + .kss-section h5, + .kss-section h6 { + font-family: "Roboto Slab", "Georgia", "Times", "Times New Roman", serif; } + .kss-section h1 > a, + .kss-section h2 > a, + .kss-section h3 > a, + .kss-section h4 > a, + .kss-section h5 > a, + .kss-section h6 > a { + color: #2e2d29; } .kss-title { margin-bottom: 0; } @@ -826,9 +844,9 @@ body { border-bottom: 0; } #kss-node.kss-home .kss-main { - width: 100%; margin: 30px 0 0; - padding: 0; } + padding: 0; + width: 100%; } #kss-node.kss-home { background: #2e2d29; } @@ -871,93 +889,11 @@ body { @media only screen and (min-width: 1500px) { #kss-node.kss-home h2 { font-size: 3.7109375rem; } } - #kss-node.kss-home header { - border: 0; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; - padding-top: 15px; } - #kss-node.kss-home header > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home header { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home header { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home header { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home header { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home header { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } - #kss-node.kss-home header div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 11fr; - grid-template-columns: 1fr 11fr; - align-items: center; } - @media only screen and (min-width: 0) { - #kss-node.kss-home header div { - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } } - #kss-node.kss-home header h1 { - font-size: 2.5rem; - color: #ffffff; - font-weight: 700; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home header h1 { - font-size: 2.5rem; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home header h1 { - font-size: 2.8125rem; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home header h1 { - font-size: 2.8125rem; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home header h1 { - font-size: 2.8125rem; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home header h1 { - font-size: 2.96875rem; } } - #kss-node.kss-home .main-nav { - margin: 0; - padding: 0; - text-align: center; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .main-nav { - text-align: right; } } - #kss-node.kss-home .main-nav li { - padding: 0; - display: inline-block; } - #kss-node.kss-home .main-nav li a { - margin-right: 20px; - padding: 5px; - display: inline-block; - color: #b3b2b2; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: em(16px); - border-bottom: solid 3px #2e2d29; } - #kss-node.kss-home .main-nav li:first-child > a, - #kss-node.kss-home .main-nav li a:hover { - color: #ffffff; - border-bottom: solid 3px #ffffff; } - #kss-node.kss-home .main-nav li:last-child > a { - margin: 0; } #kss-node.kss-home .section { - padding: 60px; } + padding: 20px; } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section { + padding: 60px; } } #kss-node.kss-home .section--welcome { display: grid; display: -ms-grid; @@ -1021,123 +957,163 @@ body { #kss-node.kss-home .section--welcome h2 { margin: 0; } #kss-node.kss-home .section--ui-components { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; background: #ffffff; } - #kss-node.kss-home .section--ui-components > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--ui-components { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--ui-components .su-card { box-shadow: none; border: 0; } + #kss-node.kss-home .section--ui-components .su-card > img { + display: block; } #kss-node.kss-home .section--ui-components p { max-width: 55%; } #kss-node.kss-home .section--dev-resources { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; background: #f9f6ef; } - #kss-node.kss-home .section--dev-resources > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } - #kss-node.kss-home .section--dev-resources > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - #kss-node.kss-home .section--dev-resources { - grid-column-gap: 32px; } - #kss-node.kss-home .section--dev-resources > * { - margin-right: 0; - margin-left: 0; } } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 256px 256px auto; - grid-template-columns: auto 256px 256px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 348px 348px auto; - grid-template-columns: auto 348px 348px auto; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 212px 212px auto; - grid-template-columns: auto 212px 212px auto; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--dev-resources { - -ms-grid-columns: auto 264px 264px auto; - grid-template-columns: auto 264px 264px auto; } } - @media only screen and (min-width: 0) { - #kss-node.kss-home .section--dev-resources h2:first-child { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - text-align: center; } } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources h2:first-child { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; - text-align: center; } } + #kss-node.kss-home .section--dev-resources h2 { + text-align: center; } + #kss-node.kss-home .section--dev-resources .cards-container { + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 32px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 32px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 32px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 32px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 36px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources .cards-container { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-column-gap: 38px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--dev-resources .cards-container { + grid-row-gap: 38px; } + #kss-node.kss-home .section--dev-resources .cards-container > * { + margin-top: 0; + margin-bottom: 0; } } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; box-shadow: none; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources .su-card { - grid-row-start: row2-start; - grid-column-start: 2; } } #kss-node.kss-home .section--dev-resources .su-card img { max-width: 100px; - margin: 36px auto; } + margin: 36px auto; + display: block; } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources .su-card h3 { text-align: center; } } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--dev-resources .card-2 { - grid-column-start: 3; } } #kss-node.kss-home .section--more-info { display: grid; display: -ms-grid; @@ -1171,12 +1147,138 @@ body { #kss-node.kss-home .section--more-info ul { display: grid; display: -ms-grid; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 32px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 32px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 32px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 32px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; - padding-left: 200px; - padding-right: 200px; } } + grid-template-columns: 1fr 1fr 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 36px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--more-info ul { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-column-gap: 38px; } + #kss-node.kss-home .section--more-info ul > * { + margin-right: 0; + margin-left: 0; } } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + #kss-node.kss-home .section--more-info ul { + grid-row-gap: 38px; } + #kss-node.kss-home .section--more-info ul > * { + margin-top: 0; + margin-bottom: 0; } } } #kss-node.kss-home .section--more-info li { list-style: none; list-style-type: none; } @@ -1185,6 +1287,8 @@ body { text-decoration: underline; } #kss-node.kss-home .section--more-info a:hover { color: #ffffff; } + #kss-node.kss-home .section--more-info a::after { + text-decoration-color: #009b76; } .layout { position: relative; @@ -1241,6 +1345,36 @@ body { .layout aside { border: dashed 1px #2e2d29; } +.main-nav { + margin: 0; + padding: 0; + text-align: center; + vertical-align: middle; } + @media only screen and (min-width: 576px) { + .main-nav { + text-align: right; } } + .main-nav li { + padding: 0; + margin: 0; + line-height: 69px; + vertical-align: middle; + display: inline-block; } + .main-nav li a { + margin: 0 20px 0 0; + padding: 5px; + display: block; + color: #b3b2b2; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: em(16px); + border-bottom: solid 3px #2e2d29; + height: 69px; } + .main-nav li a.active, + .main-nav li a:hover { + color: #ffffff; + border-bottom: solid 3px #ffffff; } + .main-nav li:last-child > a { + margin: 0; } + .kss-markup { margin: 30px 0; border: 1px solid #ccc; } @@ -1255,6 +1389,70 @@ body { .kss-source { font-size: 80%; } +.masthead { + border: 0; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + display: grid; + display: -ms-grid; + -ms-grid-columns: auto 100% auto; + grid-template-columns: auto 100% auto; + padding: 0; + background: #2e2d29; + position: relative; + z-index: 20; } + .masthead > :first-child { + grid-column: 2; } + @media only screen and (min-width: 576px) { + .masthead { + -ms-grid-columns: auto 544px auto; + grid-template-columns: auto 544px auto; } } + @media only screen and (min-width: 768px) { + .masthead { + -ms-grid-columns: auto 732px auto; + grid-template-columns: auto 732px auto; } } + @media only screen and (min-width: 992px) { + .masthead { + -ms-grid-columns: auto 956px auto; + grid-template-columns: auto 956px auto; } } + @media only screen and (min-width: 1200px) { + .masthead { + -ms-grid-columns: auto 1164px auto; + grid-template-columns: auto 1164px auto; } } + @media only screen and (min-width: 1500px) { + .masthead { + -ms-grid-columns: auto 1462px auto; + grid-template-columns: auto 1462px auto; } } + @media only screen and (min-width: 576px) { + .masthead div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 11fr; + grid-template-columns: 1fr 11fr; } } + .masthead .brand-logo { + font-size: 3.125rem; + color: #ffffff; + font-weight: 700; + display: block; + vertical-align: middle; + height: 100%; + line-height: 69px; + text-align: center; } + @media only screen and (min-width: 576px) { + .masthead .brand-logo { + font-size: 3.125rem; } } + @media only screen and (min-width: 768px) { + .masthead .brand-logo { + font-size: 3.515625rem; } } + @media only screen and (min-width: 992px) { + .masthead .brand-logo { + font-size: 3.515625rem; } } + @media only screen and (min-width: 1200px) { + .masthead .brand-logo { + font-size: 3.515625rem; } } + @media only screen and (min-width: 1500px) { + .masthead .brand-logo { + font-size: 3.7109375rem; } } + /* SPAN elements with the classes below are added by prettyprint. */ .pln { color: #000; } @@ -1376,31 +1574,42 @@ ol.linenums { h2, h3 { page-break-after: avoid; } } -.kss-doc-title { - display: none; } +.kss-sidebar { + position: relative; + overflow: hidden; + background: #f4f4f4; } + +.scrollable { + width: 100%; } + @media only screen and (min-width: 768px) { + .scrollable { + padding-bottom: 160px; + height: 100vh; + position: absolute; + top: 0px; + overflow-y: scroll; } } .kss-nav__menu { margin-top: 15px; margin-bottom: 15px; - padding: 10px; + padding: 10px 30px 10px 31px; list-style-type: none; } .kss-nav__menu-item { - display: inline-block; - padding-right: 30px; } - @media screen and (min-width: 769px) { + display: inline-block; } + @media only screen and (min-width: 768px) { .kss-nav__menu-item { - display: list-item; - padding-right: 0; } } + display: list-item; } } .kss-nav__menu-link { position: relative; - display: inline-block; } - @media screen and (min-width: 769px) { + display: inline-block; + font-weight: bold; } + @media only screen and (min-width: 768px) { .kss-nav__menu-link:before { content: ' '; position: absolute; - left: -10px; + left: -31px; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0); } } @@ -1411,23 +1620,27 @@ ol.linenums { .kss-nav__menu-child { display: none; } - @media screen and (min-width: 769px) { + .kss-nav__menu-child .kss-nav__menu-item { + margin-bottom: 6px; } + .kss-nav__menu-child .kss-nav__menu-link { + font-weight: normal; } + @media only screen and (min-width: 768px) { .kss-nav__menu-child { display: block; list-style-type: none; margin: 0; padding: 0; } .kss-nav__menu-child li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; } + margin-top: 20px; + border-top: 2px solid #ccc; + padding: 20px 0 0; } .kss-nav__menu-child li:last-child { - margin-bottom: 10px; + margin-bottom: 20px; border-bottom: 1px solid #ccc; - padding: 0 0 10px; } } + padding: 0 0 20px; } } .kss-nav__ref { - color: #333; + color: #2e2d29; font-weight: bold; } .kss-nav__ref:after { content: ' '; } @@ -1435,6 +1648,10 @@ ol.linenums { .kss-nav__ref-child { font-weight: normal; } +.kss-nav__menu-child .kss-nav__ref { + font-weight: normal; + color: #56554d; } + .kss-toolbar { margin: 6px 0 24px; display: inline-block; diff --git a/kss/builder/decanter/kss-assets/js/main-nav.js b/kss/builder/decanter/kss-assets/js/main-nav.js new file mode 100644 index 000000000..831f13bf0 --- /dev/null +++ b/kss/builder/decanter/kss-assets/js/main-nav.js @@ -0,0 +1,29 @@ +/** + * [navmap description] + * @type {[type]} + */ +(function($) { + + // Set the active nav item in the main menu. + var pathname = window.location.pathname; + if (pathname.length && pathname !== "/") { + $(".main-nav").find("a[href*='" + pathname + "']").addClass('active'); + } + else { + $(".main-nav a").eq(0).addClass('active'); + } + + // Scroll the sidebar to stay in the window. + // Todo: move this to a file not called main-nav.js + $(window).scroll(function() { + var offset = $("html")[0].getBoundingClientRect().top * -1; + if (offset > 99) { + $(".kss-sidebar .scrollable").css('top', (offset - 79) + "px"); + } + else { + $(".kss-sidebar .scrollable").css('top', "0px"); + } + }); + + $(window).scroll(); +})(jQuery); diff --git a/kss/builder/decanter/scss/_brand-bar.scss b/kss/builder/decanter/scss/_brand-bar.scss index 46dc5e91f..a7c95e66d 100644 --- a/kss/builder/decanter/scss/_brand-bar.scss +++ b/kss/builder/decanter/scss/_brand-bar.scss @@ -1,7 +1,8 @@ @charset "UTF-8"; #kss-node { - padding-top: 20px !important; + padding-top: 30px; + > .su-brand-bar { position: fixed; top: 0; diff --git a/kss/builder/decanter/scss/_builder.scss b/kss/builder/decanter/scss/_builder.scss index 2a7d41405..3f162c284 100644 --- a/kss/builder/decanter/scss/_builder.scss +++ b/kss/builder/decanter/scss/_builder.scss @@ -6,11 +6,11 @@ $grid-columns: ( $breakpoint-xs: 1fr, - $breakpoint-sm: 1fr 1fr 1fr 1fr, + $breakpoint-sm: 1fr, $breakpoint-md: 1fr 1fr 1fr 1fr, - $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr 1fr, - $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr, - $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr, + $breakpoint-lg: 1fr 1fr 1fr 1fr 1fr, + $breakpoint-xl: 1fr 1fr 1fr 1fr 1fr, + $breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr, ); .main-page-layout { @@ -19,16 +19,16 @@ $grid-columns: ( } .kss-sidebar { - @include grid-item-spans(1, span 1); + @include grid-item-spans(1, span 1, 1, 1); } .kss-main { - @include grid-media('sm') { + @include grid-media('md') { @include grid-item-spans(2, span 3); } @include grid-media('lg') { - @include grid-item-spans(2, span 5); + @include grid-item-spans(2, span 4); } } diff --git a/kss/builder/decanter/scss/_content.scss b/kss/builder/decanter/scss/_content.scss index bbd3f5079..851d861f7 100644 --- a/kss/builder/decanter/scss/_content.scss +++ b/kss/builder/decanter/scss/_content.scss @@ -6,6 +6,21 @@ .kss-section { margin-bottom: ($kss-vertical-rhythm * 2); + margin-top: 30px; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: $font-slab; + + > a { + color: $color-black; + } + } + } .kss-title { diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index fa32b15c1..f320c2e01 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -1,17 +1,16 @@ @charset 'UTF-8'; #kss-node.kss-home .kss-main { - width: 100%; - @include margin(30px 0 0 0); @include padding(0); + width: 100%; } #kss-node.kss-home { background: $color-black; .kss-section { - @include margin(null null 0); + @include margin(null null 0); } p { @@ -24,77 +23,18 @@ h2 { @include modular-typography(3); - font-weight: $font-x-bold; } - // The logo and the nav wrapper. - header { - @include box-shadow("shallow", "0"); - @include centered-grid-container; - @include padding(15px null null null); - - div { - @include display-grid; - @include grid-columns(1fr 11fr); - align-items: center; - - @media #{$breakpoint-xs} { - @include grid-columns(1fr); - @include grid-rows(auto auto); - } - } - - h1 { - @include modular-typography(2); - color: $color-white; - font-weight: $font-x-bold; - } - } - - // Main navigation. - .main-nav { - @include margin(0); - @include padding(0); - text-align: center; - - @media #{$breakpoint-sm} { - text-align: right; - } - - - li { - @include padding(0); - display: inline-block; - - a { - @include margin(null 20px null null); - @include padding(5px); - display: inline-block; - color: darken($color-white, 30%); - font-family: $font-sans; - font-size: em(16px); - border-bottom: solid 3px $color-black; - } - - &:first-child > a, - a:hover { - color: $color-white; - border-bottom: solid 3px $color-white; - } - - &:last-child > a { - @include margin(0); - } - } - } - // -------------------------------- // SECTIONS // -------------------------------- .section { - @include padding(60px); + @include padding(20px); + @include grid-media('md') { + @include padding(60px); + } } // Welcome Section. @@ -109,7 +49,7 @@ p { color: $color-white; - @media #{$breakpoint-sm} { + @include grid-media('sm') { max-width: 65%; } } @@ -126,91 +66,50 @@ // UI Components Section. .section--ui-components { - @include centered-grid-container; - background: $color-white; .su-card { box-shadow: none; border: 0; + > img { + display: block; + } } p { max-width: 55%; } + } // Developer Resources Section .section--dev-resources { - @include centered-grid-container; - @include display-grid; - @include grid-column-gap; - @include grid-columns(1fr); - - @include grid-media("sm") { - $width: $screen-sm / 2 - $gutter-sm; - - @include grid-columns(auto $width $width auto); - } - - @include grid-media("md") { - $width: $screen-md / 2 - $gutter-md; - - @include grid-columns(auto $width $width auto); - } - - @include grid-media("lg") { - $width: $screen-lg / 4 - $gutter-lg; - - @include grid-columns(auto $width $width auto); - } - - @include grid-media("xl") { - $width: $screen-xl / 4 - $gutter-xl; - - @include grid-columns(auto $width $width auto); - } - background: $color-light-sandstone; - h2:first-child { - @include grid-media("xs") { - @include grid-item-spans(1, span 1); - text-align: center; - } + h2 { + text-align: center; + } - @include grid-media("sm") { - @include grid-item-spans(2, span 2); - text-align: center; - } + .cards-container { + @include responsive-grid-columns($responsive-columns-default); } .su-card { - @media #{$breakpoint-sm} { - grid-row-start: row2-start; - grid-column-start: 2; - } - border: 0; box-shadow: none; img { max-width: 100px; margin: $gutter-md auto; + display: block; } h3 { - @media #{$breakpoint-sm} { + @include grid-media('sm') { text-align: center; } } } - - .card-2 { - @media #{$breakpoint-sm} { - grid-column-start: 3; - } - } } // More Info Section @@ -223,12 +122,7 @@ } ul { - @include display-grid; - @include grid-media("lg") { - @include grid-columns(1fr 1fr 1fr); - padding-left: 200px; - padding-right: 200px; - }; + @include responsive-grid-columns($responsive-columns-three); } li { @@ -243,6 +137,11 @@ &:hover { color: $color-white; } + + &::after { + text-decoration-color: $color-mint; + } + } } } diff --git a/kss/builder/decanter/scss/_main-nav.scss b/kss/builder/decanter/scss/_main-nav.scss new file mode 100644 index 000000000..136d9e233 --- /dev/null +++ b/kss/builder/decanter/scss/_main-nav.scss @@ -0,0 +1,42 @@ +@charset 'UTF-8'; + +// Main navigation. +.main-nav { + @include margin(0); + @include padding(0); + text-align: center; + vertical-align: middle; + + @include grid-media("sm") { + text-align: right; + } + + li { + @include padding(0); + @include margin(0); + line-height: 69px; + vertical-align: middle; + display: inline-block; + + a { + @include margin(0 20px 0 0); + @include padding(5px); + display: block; + color: darken($color-white, 30%); + font-family: $font-sans; + font-size: em(16px); + border-bottom: solid 3px $color-black; + height: 69px; + } + + a.active, + a:hover { + color: $color-white; + border-bottom: solid 3px $color-white; + } + + &:last-child > a { + @include margin(0); + } + } +} diff --git a/kss/builder/decanter/scss/_masthead.scss b/kss/builder/decanter/scss/_masthead.scss new file mode 100644 index 000000000..7da888d5c --- /dev/null +++ b/kss/builder/decanter/scss/_masthead.scss @@ -0,0 +1,29 @@ +@charset 'UTF-8'; + +// The logo and the nav wrapper. +.masthead { + @include box-shadow("shallow", "0"); + @include centered-grid-container; + @include padding(0); + background: $color-black; + position: relative; + z-index: 20; + + div { + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 11fr); + } + } + + .brand-logo { + @include modular-typography(3); + color: $color-white; + font-weight: $font-x-bold; + display: block; + vertical-align: middle; + height: 100%; + line-height: 69px; + text-align: center; + } +} diff --git a/kss/builder/decanter/scss/_sidebar.scss b/kss/builder/decanter/scss/_sidebar.scss index dc0d90f41..c05393ae0 100644 --- a/kss/builder/decanter/scss/_sidebar.scss +++ b/kss/builder/decanter/scss/_sidebar.scss @@ -1,35 +1,46 @@ @charset 'UTF-8'; -.kss-doc-title { - display: none; +.kss-sidebar { + position: relative; + overflow: hidden; + background: $color-fog; +} + +.scrollable { + width: 100%; + @include grid-media('md') { + @include padding(null null 160px); + height: 100vh; + position: absolute; + top: 0px; + overflow-y: scroll; + } } .kss-nav__menu { margin-top: ($kss-vertical-rhythm/2); margin-bottom: ($kss-vertical-rhythm/2); - padding: 10px; + padding: 10px 30px 10px 31px; list-style-type: none; } .kss-nav__menu-item { display: inline-block; - padding-right: $kss-vertical-rhythm; - - @media screen and (min-width: 769px) { + @include grid-media('md') { display: list-item; - padding-right: 0; } } .kss-nav__menu-link { position: relative; display: inline-block; + font-weight: bold; &:before { - @media screen and (min-width: 769px) { + @include grid-media('md') { content: ' '; position: absolute; - left: -10px; + left: -31px; width: 0; height: 100%; background-color: rgba(#000, 0); @@ -43,11 +54,18 @@ } } - .kss-nav__menu-child { display: none; - @media screen and (min-width: 769px) { + .kss-nav__menu-item { + margin-bottom: 6px; + } + + .kss-nav__menu-link { + font-weight: normal; + } + + @include grid-media('md') { display: block; list-style-type: none; margin: 0; @@ -56,27 +74,35 @@ // @TODO: The ul is output even when there are no children. Fix this, so // we can put these :first-child and :last child styles back on the ul. li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; + margin-top: 20px; + border-top: 2px solid #ccc; + padding: 20px 0 0; } li:last-child { - margin-bottom: 10px; + margin-bottom: 20px; border-bottom: 1px solid #ccc; - padding: 0 0 10px; + padding: 0 0 20px; } } } .kss-nav__ref { - color: #333; + color: $color-black; font-weight: bold; &:after { content: ' '; } } + .kss-nav__ref-child { font-weight: normal; } + +.kss-nav__menu-child { + .kss-nav__ref { + font-weight: normal; + color: lighten($color-black, 15%); + } +} diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss index 5fcf1f028..aaaac1976 100644 --- a/kss/builder/decanter/scss/kss.scss +++ b/kss/builder/decanter/scss/kss.scss @@ -47,7 +47,9 @@ 'guides', 'home', 'layout-colors', + 'main-nav', 'markup-source', + 'masthead', 'prettify', 'print', 'sidebar', From 2387aa11f514aeef21a154e21389ea400d62460c Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 30 Nov 2018 00:58:48 -0800 Subject: [PATCH 059/123] More KSS theme tweaks. --- .../centered-container.json | 2 +- .../layout/four-column/molive/molive.json | 12 ++++---- kss/builder/decanter/kss-assets/css/kss.css | 14 ++++++++- .../decanter/kss-assets/js/main-nav.js | 29 +++++++++++++++++++ kss/builder/decanter/scss/_sidebar.scss | 23 ++++++++++++++- 5 files changed, 71 insertions(+), 9 deletions(-) diff --git a/core/templates/layout/centered-container/centered-container.json b/core/templates/layout/centered-container/centered-container.json index fd754da53..39711e9e0 100644 --- a/core/templates/layout/centered-container/centered-container.json +++ b/core/templates/layout/centered-container/centered-container.json @@ -1,3 +1,3 @@ { - "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " + "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " } diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/four-column/molive/molive.json index 93c002d15..6d04cab3c 100644 --- a/core/templates/layout/four-column/molive/molive.json +++ b/core/templates/layout/four-column/molive/molive.json @@ -1,8 +1,8 @@ { - "first": "

    First Column

    ", - "second": "

    Second Column

    ", - "third": "

    Third Column

    ", - "fourth": "

    Fourth Column

    ", - "header": "

    Header Column

    ", - "footer": "

    Footer Column

    " + "first": "

    First column

    Example Image", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    This is your header column

    ", + "footer": "

    This is your footer column

    " } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index bf816e924..2fb9f58f8 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1638,7 +1638,7 @@ ol.linenums { .kss-nav__menu-child li:last-child { margin-bottom: 20px; border-bottom: 1px solid #ccc; - padding: 0 0 20px; } } + padding-bottom: 20px; } } .kss-nav__ref { color: #2e2d29; @@ -1646,6 +1646,18 @@ ol.linenums { .kss-nav__ref:after { content: ' '; } +.child-nav-level-2 a { + padding-left: 10px; } + +.child-nav-level-3 a { + padding-left: 20px; } + +.separator-child { + margin-top: 10px; } + +.separator-parent { + background: #F0F; } + .kss-nav__ref-child { font-weight: normal; } diff --git a/kss/builder/decanter/kss-assets/js/main-nav.js b/kss/builder/decanter/kss-assets/js/main-nav.js index 831f13bf0..c0200ae36 100644 --- a/kss/builder/decanter/kss-assets/js/main-nav.js +++ b/kss/builder/decanter/kss-assets/js/main-nav.js @@ -25,5 +25,34 @@ } }); + // Indent third level items a bit. + var last_child = 1; + $(".kss-nav__ref-child, .kss-nav__ref").each(function(i, v) { + var count = $(v).text().match(/\./g); + var depth = 0; + + if (count !== null) { + depth = count.length; + } + + if (depth >= 1) { + $(v).parent().parent().addClass('child-nav-level-' + depth); + } + + if (depth == 4 && last_child == 3) { + $(v).parent().parent().prev().find("a").addClass("separator-child"); + } + + if (depth == 3 && last_child == 2) { + $(v).parent().parent().prev().find("a").addClass("separator-child"); + } + + if (depth == 2 && last_child == 1) { + $(v).parent().parent().prev().find("a").addClass("separator-child"); + } + + last_child = depth; + }); + $(window).scroll(); })(jQuery); diff --git a/kss/builder/decanter/scss/_sidebar.scss b/kss/builder/decanter/scss/_sidebar.scss index c05393ae0..aef767734 100644 --- a/kss/builder/decanter/scss/_sidebar.scss +++ b/kss/builder/decanter/scss/_sidebar.scss @@ -82,7 +82,7 @@ li:last-child { margin-bottom: 20px; border-bottom: 1px solid #ccc; - padding: 0 0 20px; + padding-bottom: 20px; } } } @@ -96,6 +96,27 @@ } } +.child-nav-level-2 { + a { + padding-left: 10px; + + } +} + +.child-nav-level-3 { + a { + padding-left: 20px; + } +} + +.separator-child { + margin-top: 10px; +} + +.separator-parent { + background: #F0F; +} + .kss-nav__ref-child { font-weight: normal; } From 0373e4b57395410827ce75fcf152808a1056856f Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 30 Nov 2018 01:11:11 -0800 Subject: [PATCH 060/123] More KSS theme tweaks. --- core/css/decanter.css | 14 ++-- .../components/card/_card--horizontal.scss | 22 +------ kss/builder/decanter/kss-assets/css/kss.css | 64 ++++++++++++++++++- kss/builder/decanter/scss/_home.scss | 12 ++++ kss/builder/decanter/scss/_sidebar.scss | 1 - 5 files changed, 83 insertions(+), 30 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 18d1ba054..ac88828ad 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6550,12 +6550,12 @@ button, margin-bottom: 0; } } } .su-card--horizontal > img, .su-card--horizontal .su-card__contents { - margin: 0; } - @media only screen and (min-width: 576px) { + margin: 32px; } + @media only screen and (min-width: 1500px) { .su-card--horizontal > img, .su-card--horizontal .su-card__contents { - margin: 32px; } } - @media only screen and (min-width: 768px) { + margin: 38px; } } + @media only screen and (min-width: 1200px) { .su-card--horizontal > img, .su-card--horizontal .su-card__contents { margin: 36px; } } @@ -6563,14 +6563,14 @@ button, .su-card--horizontal > img, .su-card--horizontal .su-card__contents { margin: 36px; } } - @media only screen and (min-width: 1200px) { + @media only screen and (min-width: 768px) { .su-card--horizontal > img, .su-card--horizontal .su-card__contents { margin: 36px; } } - @media only screen and (min-width: 1500px) { + @media only screen and (min-width: 576px) { .su-card--horizontal > img, .su-card--horizontal .su-card__contents { - margin: 38px; } } + margin: 32px; } } @media (max-width: 767px) { .su-card--horizontal .su-card__contents > h2 { margin-top: 0; } } diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 25055f779..02559ba51 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -40,27 +40,7 @@ // Modular padding. > img, .su-card__contents { - @include grid-media('sm') { - margin: modular-spacing-get-value('sm'); - } - - @include grid-media('md') { - margin: modular-spacing-get-value('md'); - } - - @include grid-media('lg') { - margin: modular-spacing-get-value('lg'); - } - - @include grid-media('xl') { - margin: modular-spacing-get-value('xl'); - } - - @include grid-media('2xl') { - margin: modular-spacing-get-value('2xl'); - } - - margin: 0; + @include modular-margin(); } .su-card__contents { diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 2fb9f58f8..ea1c2beef 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -960,19 +960,78 @@ body { #kss-node.kss-home .section--ui-components { background: #ffffff; } #kss-node.kss-home .section--ui-components .su-card { + margin: 0 auto; box-shadow: none; border: 0; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--ui-components .su-card { + max-width: 1462px; } } #kss-node.kss-home .section--ui-components .su-card > img { - display: block; } + display: block; + margin-left: 0; + margin-right: 0; } #kss-node.kss-home .section--ui-components p { max-width: 55%; } #kss-node.kss-home .section--dev-resources { background: #f9f6ef; } #kss-node.kss-home .section--dev-resources h2 { + margin: 0 auto; text-align: center; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources h2 { + max-width: 1462px; } } #kss-node.kss-home .section--dev-resources .cards-container { + margin: 0 auto; display: grid; display: -ms-grid; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--dev-resources .cards-container { + max-width: 1462px; } } @media only screen and (min-width: 0) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr; @@ -1115,6 +1174,9 @@ body { @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources .su-card h3 { text-align: center; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--dev-resources .su-card .su-card__contents { + text-align: center; } } #kss-node.kss-home .section--more-info { display: grid; display: -ms-grid; diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index f320c2e01..ea16bf8d0 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -69,10 +69,13 @@ background: $color-white; .su-card { + @include centered-column; box-shadow: none; border: 0; > img { display: block; + margin-left: 0; + margin-right: 0; } } @@ -87,10 +90,12 @@ background: $color-light-sandstone; h2 { + @include centered-column; text-align: center; } .cards-container { + @include centered-column; @include responsive-grid-columns($responsive-columns-default); } @@ -109,6 +114,13 @@ text-align: center; } } + + @include grid-media('xl') { + .su-card__contents { + text-align: center; + } + } + } } diff --git a/kss/builder/decanter/scss/_sidebar.scss b/kss/builder/decanter/scss/_sidebar.scss index aef767734..f311cc9c1 100644 --- a/kss/builder/decanter/scss/_sidebar.scss +++ b/kss/builder/decanter/scss/_sidebar.scss @@ -99,7 +99,6 @@ .child-nav-level-2 { a { padding-left: 10px; - } } From 09cc1d3a472bf2e16fd3c9c653deb1e4c3ab3626 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 30 Nov 2018 01:13:43 -0800 Subject: [PATCH 061/123] More KSS theme tweaks. --- kss/builder/decanter/kss-assets/css/kss.css | 3 ++- kss/builder/decanter/scss/_home.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index ea1c2beef..5f47f86f2 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1206,7 +1206,8 @@ body { -ms-grid-columns: auto 1462px auto; grid-template-columns: auto 1462px auto; } } #kss-node.kss-home .section--more-info h2 { - text-align: center; } + text-align: center; + margin-bottom: 60px; } #kss-node.kss-home .section--more-info ul { display: grid; display: -ms-grid; } diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index ea16bf8d0..528847fee 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -131,6 +131,7 @@ h2 { text-align: center; + margin-bottom: 60px; } ul { From 4956ed29aacefd4462fe0fad06679f65f42c1bff Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 30 Nov 2018 08:49:48 -0800 Subject: [PATCH 062/123] Removed debug. --- core/scss/utilities/functions/flex/_breakpoint-max.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/core/scss/utilities/functions/flex/_breakpoint-max.scss b/core/scss/utilities/functions/flex/_breakpoint-max.scss index 4e4fc15e8..01af48a15 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-max.scss +++ b/core/scss/utilities/functions/flex/_breakpoint-max.scss @@ -16,6 +16,5 @@ // Style guide: Functions.Flex.beakpoint-max @function breakpoint-max($name, $breakpoints: $grid-screens) { $next: breakpoint-next($name, map-keys($breakpoints)); - @debug $next; @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } From f9111ca70fa8a0d85c367953d5e1b864899718dc Mon Sep 17 00:00:00 2001 From: Sherakama Date: Fri, 30 Nov 2018 08:52:38 -0800 Subject: [PATCH 063/123] Update _modular-spacing-get-value.scss --- .../functions/modular-scale/_modular-spacing-get-value.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss index cb2c0ba10..4b8cb3427 100644 --- a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss +++ b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss @@ -8,7 +8,7 @@ // // $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl // -// Style guide: Functions.Modular Scale.modular-spacing-get-value +// Style guide: Functions.ModularScale.modular-spacing-get-value // @function modular-spacing-get-value($breakpoint: 'xs') { @return map-get($modular-spacing, $breakpoint); From 58c84a2a7e4fe6429c4fa5b3bc736928e85baf9b Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 10:47:16 -0800 Subject: [PATCH 064/123] breakpoints functions folder --- .../{flex => breakpoint}/_breakpoint-insert.scss | 3 +-- .../{flex => breakpoint}/_breakpoint-max.scss | 2 +- .../{flex => breakpoint}/_breakpoint-min.scss | 2 +- .../{flex => breakpoint}/_breakpoint-next.scss | 2 +- core/scss/utilities/functions/breakpoint/index.scss | 13 +++++++++++++ core/scss/utilities/functions/flex/index.scss | 4 ---- core/scss/utilities/functions/index.scss | 1 + 7 files changed, 18 insertions(+), 9 deletions(-) rename core/scss/utilities/functions/{flex => breakpoint}/_breakpoint-insert.scss (92%) rename core/scss/utilities/functions/{flex => breakpoint}/_breakpoint-max.scss (92%) rename core/scss/utilities/functions/{flex => breakpoint}/_breakpoint-min.scss (90%) rename core/scss/utilities/functions/{flex => breakpoint}/_breakpoint-next.scss (92%) create mode 100644 core/scss/utilities/functions/breakpoint/index.scss diff --git a/core/scss/utilities/functions/flex/_breakpoint-insert.scss b/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss similarity index 92% rename from core/scss/utilities/functions/flex/_breakpoint-insert.scss rename to core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss index 4ad67e278..eb8171974 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-insert.scss +++ b/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss @@ -9,13 +9,12 @@ // Returns the breakpoint name with a dash in front. If the smallest breakpoint // (xs) is passed through, a blank string is returned. // - // breakpoint-insert(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns a blank string // breakpoint-insert(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "-sm" // -// Style guide: Functions.Flex.breakpoint-insert +// Style guide: Functions.Breakpoint.breakpoint-insert @function breakpoint-insert($name, $breakpoints: $grid-screens) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } diff --git a/core/scss/utilities/functions/flex/_breakpoint-max.scss b/core/scss/utilities/functions/breakpoint/_breakpoint-max.scss similarity index 92% rename from core/scss/utilities/functions/flex/_breakpoint-max.scss rename to core/scss/utilities/functions/breakpoint/_breakpoint-max.scss index 01af48a15..c9d206098 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-max.scss +++ b/core/scss/utilities/functions/breakpoint/_breakpoint-max.scss @@ -13,7 +13,7 @@ // breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "767px" // -// Style guide: Functions.Flex.beakpoint-max +// Style guide: Functions.Breakpoint.beakpoint-max @function breakpoint-max($name, $breakpoints: $grid-screens) { $next: breakpoint-next($name, map-keys($breakpoints)); @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); diff --git a/core/scss/utilities/functions/flex/_breakpoint-min.scss b/core/scss/utilities/functions/breakpoint/_breakpoint-min.scss similarity index 90% rename from core/scss/utilities/functions/flex/_breakpoint-min.scss rename to core/scss/utilities/functions/breakpoint/_breakpoint-min.scss index 26dacf337..b1e687b73 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-min.scss +++ b/core/scss/utilities/functions/breakpoint/_breakpoint-min.scss @@ -11,7 +11,7 @@ // breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "576px" // -// Style guide: Functions.Flex.beakpoint-min +// Style guide: Functions.Breakpoint.beakpoint-min @function breakpoint-min($name, $breakpoints: $grid-screens) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); diff --git a/core/scss/utilities/functions/flex/_breakpoint-next.scss b/core/scss/utilities/functions/breakpoint/_breakpoint-next.scss similarity index 92% rename from core/scss/utilities/functions/flex/_breakpoint-next.scss rename to core/scss/utilities/functions/breakpoint/_breakpoint-next.scss index 4360f4973..8c811a6aa 100644 --- a/core/scss/utilities/functions/flex/_breakpoint-next.scss +++ b/core/scss/utilities/functions/breakpoint/_breakpoint-next.scss @@ -11,7 +11,7 @@ // breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) // Returns "md" // -// Style guide: Functions.Flex.breakpoint-next +// Style guide: Functions.Breakpoint.breakpoint-next @function breakpoint-next($name, $breakpoints: map-keys($grid-screens)) { $n: index($breakpoints, $name); @if is-integer($n) { diff --git a/core/scss/utilities/functions/breakpoint/index.scss b/core/scss/utilities/functions/breakpoint/index.scss new file mode 100644 index 000000000..d26936f1c --- /dev/null +++ b/core/scss/utilities/functions/breakpoint/index.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// Breakpoint +// +// Style guide: Functions.Breakpoint +// + +@import + 'breakpoint-insert', + 'breakpoint-max', + 'breakpoint-min', + 'breakpoint-next'; diff --git a/core/scss/utilities/functions/flex/index.scss b/core/scss/utilities/functions/flex/index.scss index 34ee02882..3d6461a68 100644 --- a/core/scss/utilities/functions/flex/index.scss +++ b/core/scss/utilities/functions/flex/index.scss @@ -7,10 +7,6 @@ // @import - 'breakpoint-insert', - 'breakpoint-max', - 'breakpoint-min', - 'breakpoint-next', 'flex-column-ratio', 'flex-column-width', 'flex-parse-columns'; diff --git a/core/scss/utilities/functions/index.scss b/core/scss/utilities/functions/index.scss index d4dd7b7b3..b2bd69966 100644 --- a/core/scss/utilities/functions/index.scss +++ b/core/scss/utilities/functions/index.scss @@ -5,6 +5,7 @@ /// @import + 'breakpoint/index', 'flex/index', 'modular-scale/index', 'string/index', From 4ed6b8f7207ca3aab62d223d66f51d6e9a800622 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 11:03:48 -0800 Subject: [PATCH 065/123] link variants for button options --- core/css/decanter.css | 28 +++++++++++++------ core/scss/components/button/_button--big.scss | 3 +- .../components/button/_button--secondary.scss | 3 +- core/scss/components/button/_button.scss | 1 + core/scss/components/link/_link.scss | 6 ++-- 5 files changed, 29 insertions(+), 12 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index ac88828ad..7ad876d7f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6233,6 +6233,7 @@ dfn { color: #8c1515; } .su-button, +.su-button.su-link, button, [type=button], [type=submit], @@ -6262,6 +6263,7 @@ button, transition: background-color .25s ease-in-out, color .25s ease-in-out; } @media only screen and (min-width: 576px) { .su-button, + .su-button.su-link, button, [type=button], [type=submit], @@ -6269,6 +6271,7 @@ button, [type=image] { width: auto; } } .su-button:hover, + .su-button.su-link:hover, button:hover, [type=button]:hover, [type=submit]:hover, @@ -6279,6 +6282,7 @@ button, color: #ffffff; text-decoration: none; } .su-button:focus, + .su-button.su-link:focus, button:focus, [type=button]:focus, [type=submit]:focus, @@ -6287,7 +6291,8 @@ button, background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.su-button--big { +.su-button--big, +.su-button--big.su-link { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0.5em; @@ -6310,18 +6315,22 @@ button, text-decoration: none; width: 100%; } @media only screen and (min-width: 576px) { - .su-button--big { + .su-button--big, + .su-button--big.su-link { width: auto; } } - .su-button--big:hover { + .su-button--big:hover, + .su-button--big.su-link:hover { background-color: #2e2d29; border-bottom: 0; color: #ffffff; text-decoration: none; } - .su-button--big:focus { + .su-button--big:focus, + .su-button--big.su-link:focus { background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.su-button--secondary { +.su-button--secondary, +.su-button--secondary.su-link { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 0.5em; @@ -6345,15 +6354,18 @@ button, text-decoration: none; width: 100%; } @media only screen and (min-width: 576px) { - .su-button--secondary { + .su-button--secondary, + .su-button--secondary.su-link { width: auto; } } - .su-button--secondary:hover { + .su-button--secondary:hover, + .su-button--secondary.su-link:hover { background-color: #ffffff; border-bottom: 0; box-shadow: inset 0 0 0 2px #2e2d29; color: #2e2d29; text-decoration: none; } - .su-button--secondary:focus { + .su-button--secondary:focus, + .su-button--secondary.su-link:focus { background-color: #ffffff; box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; color: #2e2d29; } diff --git a/core/scss/components/button/_button--big.scss b/core/scss/components/button/_button--big.scss index 62b352034..714670675 100644 --- a/core/scss/components/button/_button--big.scss +++ b/core/scss/components/button/_button--big.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; // Big button. -.su-button--big { +.su-button--big, +.su-button--big.su-link { @include button-big; } diff --git a/core/scss/components/button/_button--secondary.scss b/core/scss/components/button/_button--secondary.scss index 5658060cd..311ee18c6 100644 --- a/core/scss/components/button/_button--secondary.scss +++ b/core/scss/components/button/_button--secondary.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; // Secondary button. -.su-button--secondary { +.su-button--secondary, +.su-button--secondary.su-link { @include button-secondary; } diff --git a/core/scss/components/button/_button.scss b/core/scss/components/button/_button.scss index 5590f185a..a5dee5d22 100644 --- a/core/scss/components/button/_button.scss +++ b/core/scss/components/button/_button.scss @@ -14,6 +14,7 @@ // Style guide: Components.Button // .su-button, +.su-button.su-link, button, [type=button], [type=submit], diff --git a/core/scss/components/link/_link.scss b/core/scss/components/link/_link.scss index 0e53ba9a7..7a024d59a 100644 --- a/core/scss/components/link/_link.scss +++ b/core/scss/components/link/_link.scss @@ -7,8 +7,10 @@ // // .su-link--more - More info link // .su-link--external - Link to external site -// .su-link--button - Button style link -// .su-link--action - call to action link +// .su-link--action - Call to action link +// .su-button - Button style link +// .su-button--secondary - Secondary button style link +// .su-button--big - Big button style link // // Markup: ../templates/components/link/link.twig // From 9d91d62aa89dcd326ac05c092a37a6be83e7e1e9 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 11:09:37 -0800 Subject: [PATCH 066/123] rm unstyled button --- core/css/decanter.css | 12 ---------- .../components/button/_button--unstyled.scss | 6 ----- core/scss/components/button/_button.scss | 1 - core/scss/components/button/index.scss | 3 +-- .../mixins/button/_button-unstyled.scss | 24 ------------------- core/scss/utilities/mixins/button/index.scss | 3 +-- 6 files changed, 2 insertions(+), 47 deletions(-) delete mode 100644 core/scss/components/button/_button--unstyled.scss delete mode 100644 core/scss/utilities/mixins/button/_button-unstyled.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 7ad876d7f..1812b2dad 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6370,18 +6370,6 @@ button, box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; color: #2e2d29; } -.su-button--unstyled { - background-color: transparent; - border: 0; - font-weight: 400; - outline: 0; - text-align: left; - -webkit-font-smoothing: auto; - margin: 0; - padding: 0; } - .su-button--unstyled:hover { - background-color: transparent; } - .su-card { border: 1px solid #C6C6C6; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); } diff --git a/core/scss/components/button/_button--unstyled.scss b/core/scss/components/button/_button--unstyled.scss deleted file mode 100644 index 2ecee99df..000000000 --- a/core/scss/components/button/_button--unstyled.scss +++ /dev/null @@ -1,6 +0,0 @@ -@charset "UTF-8"; - -// Remove styles from button. -.su-button--unstyled { - @include button-unstyled; -} diff --git a/core/scss/components/button/_button.scss b/core/scss/components/button/_button.scss index a5dee5d22..0bd51d531 100644 --- a/core/scss/components/button/_button.scss +++ b/core/scss/components/button/_button.scss @@ -7,7 +7,6 @@ // // .su-button--secondary - Secondary button // .su-button--big - Big button -// .su-button--unstyled - Unstyled button // // Markup: ../../templates/components/button/button.twig // diff --git a/core/scss/components/button/index.scss b/core/scss/components/button/index.scss index 698d2f609..b40274637 100644 --- a/core/scss/components/button/index.scss +++ b/core/scss/components/button/index.scss @@ -7,5 +7,4 @@ @import 'button', 'button--big', - 'button--secondary', - 'button--unstyled'; + 'button--secondary'; diff --git a/core/scss/utilities/mixins/button/_button-unstyled.scss b/core/scss/utilities/mixins/button/_button-unstyled.scss deleted file mode 100644 index ea2f599c4..000000000 --- a/core/scss/utilities/mixins/button/_button-unstyled.scss +++ /dev/null @@ -1,24 +0,0 @@ -@charset "UTF-8"; - -// -// @button-unstyled -// -// Removes styling from a button. -// -// Style guide: Mixins.Button.button-unstyled -// -@mixin button-unstyled { - background-color: transparent; - border: 0; - font-weight: $font-normal; - outline: 0; - text-align: left; - -webkit-font-smoothing: auto; - - @include margin(0); - @include padding(0); - - &:hover { - background-color: transparent; - } -} diff --git a/core/scss/utilities/mixins/button/index.scss b/core/scss/utilities/mixins/button/index.scss index 10e8de1e3..f43ad77cb 100644 --- a/core/scss/utilities/mixins/button/index.scss +++ b/core/scss/utilities/mixins/button/index.scss @@ -11,5 +11,4 @@ @import 'button-big', 'button-primary', - 'button-secondary', - 'button-unstyled'; + 'button-secondary'; From 8b1e92e6d10715d6b1e7c7b5b56420ecf06f29c8 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 11:20:10 -0800 Subject: [PATCH 067/123] empty line CC FIXUP --- core/scss/layout/two-column/_plakes-right.scss | 2 ++ core/scss/layout/two-column/_wedge-right.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/two-column/_plakes-right.scss index f96b03625..7b814e3c1 100644 --- a/core/scss/layout/two-column/_plakes-right.scss +++ b/core/scss/layout/two-column/_plakes-right.scss @@ -9,6 +9,7 @@ @include grid-media('sm') { @include grid-item-spans(3, span 1); } + @include grid-media('lg') { @include grid-item-spans(4, span 1); } @@ -18,6 +19,7 @@ @include grid-media('sm') { @include grid-item-spans(1, span 2, 1, span 1); } + @include grid-media('lg') { @include grid-item-spans(1, span 3, 1, span 1); } diff --git a/core/scss/layout/two-column/_wedge-right.scss b/core/scss/layout/two-column/_wedge-right.scss index b9a3ba2e9..a80ecccbe 100644 --- a/core/scss/layout/two-column/_wedge-right.scss +++ b/core/scss/layout/two-column/_wedge-right.scss @@ -8,6 +8,7 @@ @include grid-media('sm') { @include grid-item-spans(3, span 1); } + @include grid-media('md') { @include grid-item-spans(4, span 1); } @@ -17,6 +18,7 @@ @include grid-media('sm') { @include grid-item-spans(1, span 2); } + @include grid-media('md') { @include grid-item-spans(1, span 3); } From 2f7bc4d23bfb358c4335bd7e0759993774449dde Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 11:22:29 -0800 Subject: [PATCH 068/123] CC FIXUP --- core/scss/layout/two-column/_plakes-right.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/two-column/_plakes-right.scss index 7b814e3c1..5a1da1def 100644 --- a/core/scss/layout/two-column/_plakes-right.scss +++ b/core/scss/layout/two-column/_plakes-right.scss @@ -9,7 +9,7 @@ @include grid-media('sm') { @include grid-item-spans(3, span 1); } - + @include grid-media('lg') { @include grid-item-spans(4, span 1); } From 6341f57fa1955212980f937c1217ec87c1c914f7 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 30 Nov 2018 11:24:36 -0800 Subject: [PATCH 069/123] CC FIXUP --- core/scss/layout/two-column/_wedge-right.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/layout/two-column/_wedge-right.scss b/core/scss/layout/two-column/_wedge-right.scss index a80ecccbe..dcbd077f4 100644 --- a/core/scss/layout/two-column/_wedge-right.scss +++ b/core/scss/layout/two-column/_wedge-right.scss @@ -8,7 +8,7 @@ @include grid-media('sm') { @include grid-item-spans(3, span 1); } - + @include grid-media('md') { @include grid-item-spans(4, span 1); } From 96355623a3fbd7f5ac2a16efe53ff6eaed5c9c21 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 3 Dec 2018 23:15:10 -0800 Subject: [PATCH 070/123] Added more documentation. --- .../layout/four-column/molive/molive.twig | 15 ++++---- .../layout/full-width/bricks/bricks.twig | 26 +++++++------- .../layout/full-width/ibeam/ibeam.twig | 19 +++++----- .../layout/one-column/basic/basic.twig | 17 +++++---- .../layout/three-column/bars/bars.twig | 17 ++++----- .../three-column/battleship/battleship.twig | 30 +++++++++++----- .../three-column/blastila/blastila.twig | 24 +++++++++---- .../layout/three-column/chess/chess.twig | 36 ++++++++++++++----- .../three-column/cuttoner/cuttoner.twig | 28 ++++++++++----- .../layout/three-column/percles/percles.twig | 32 +++++++++++++---- .../layout/three-column/robot/robot.twig | 23 ++++++++---- .../space-invader/space-invader.twig | 24 ++++++++----- .../sunset-delorean/sunset-delorean.twig | 26 +++++++++----- 13 files changed, 210 insertions(+), 107 deletions(-) diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/four-column/molive/molive.twig index be8b9fc99..9f1121b3e 100644 --- a/core/templates/layout/four-column/molive/molive.twig +++ b/core/templates/layout/four-column/molive/molive.twig @@ -1,17 +1,20 @@ {# /** * @file - * Template for a 4 column panel layout. + * Molive - Template for a 4 column panel layout. * * This template provides a four column panel display layout, with * each column roughly equal in width. * * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['left']: Content in the left column. - * - $content['right']: Content in the right column. + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A four column span header area + * first - First of four columns + * second - Second of four columns + * third - Third of four columns + * fourth - Fourth of four columns + * footer - A four column span footer area */ #} diff --git a/core/templates/layout/full-width/bricks/bricks.twig b/core/templates/layout/full-width/bricks/bricks.twig index 83655a539..0e97be8b8 100644 --- a/core/templates/layout/full-width/bricks/bricks.twig +++ b/core/templates/layout/full-width/bricks/bricks.twig @@ -1,20 +1,18 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * Bricks + * A two column 50/50 centered row followed by a full width region. * * Variables: - * - attributes - * - modifier_class - * - hero - * - first - * - second - * - hero2 - * - third - * - fourth + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * hero - The top most full width region. + * first - First of a 50/50 centered column + * second - Second of a 50/50 centered column + * hero2 - Second full width region + * third - First of a 50/50 centered column + * fourth - Second of a 50/50 centered column */ #} @@ -27,6 +25,7 @@ {% endif %} {# Required two equal column centered content area. #} + {% if first is not empty or second is not empty %}
    {{ first }} @@ -36,6 +35,7 @@ {{ second}}
    + {% endif %} {# Full width region #} {% if hero2 is not empty %} @@ -45,7 +45,7 @@ {% endif %} {# Optional two equal column centered content area. #} - {% if third is not empty %} + {% if third is not empty or fourth is not empty %}
    {{ third }} diff --git a/core/templates/layout/full-width/ibeam/ibeam.twig b/core/templates/layout/full-width/ibeam/ibeam.twig index 9b8f3acad..7181b1004 100644 --- a/core/templates/layout/full-width/ibeam/ibeam.twig +++ b/core/templates/layout/full-width/ibeam/ibeam.twig @@ -1,17 +1,16 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * I-Beam + * A full width single column alternative with a single centered column layou. * * Variables: - * - - * - - * - - * - - * - + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * full_width - Full width content region + * content - Single column centered content region + * full_width2 - Full width content region + * content2 - Single column centered content region */ #} @@ -22,9 +21,11 @@
    {% endif %} + {% if content is not empty %}
    {{ content }}
    + {% endif %} {% if full_width2 is not empty %}
    diff --git a/core/templates/layout/one-column/basic/basic.twig b/core/templates/layout/one-column/basic/basic.twig index c825e576a..34426632a 100644 --- a/core/templates/layout/one-column/basic/basic.twig +++ b/core/templates/layout/one-column/basic/basic.twig @@ -1,17 +1,14 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * Template for a single celled centered content layout. * * Variables: - * - attributes - * - modifier_class - * - header - * - footer - * - content + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - Centered single column open content area + * footer - Centered single column open content area + * content - Centered single column open content area */ #} @@ -22,9 +19,11 @@
    {% endif %} + {% if content is not empty %}
    {{ content}}
    + {% endif %} {% if footer is not empty %}
    diff --git a/core/templates/layout/three-column/bars/bars.twig b/core/templates/layout/three-column/bars/bars.twig index bd8507704..1a6407f0c 100644 --- a/core/templates/layout/three-column/bars/bars.twig +++ b/core/templates/layout/three-column/bars/bars.twig @@ -1,20 +1,20 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * Template for a three equal column layout. 33/33/33 * * Variables: - * - - * - - * - - * - + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - First of three equal columns + * second - Second of three equal columns + * third - third of three equal columns + * body - A block area to allow for others to change wrappers around regions. */ #}
    + {% block body %}
    {{ first }}
    @@ -26,5 +26,6 @@
    {{ third }}
    + {% endblock %}
    diff --git a/core/templates/layout/three-column/battleship/battleship.twig b/core/templates/layout/three-column/battleship/battleship.twig index 7673d9a41..d8426e86a 100644 --- a/core/templates/layout/three-column/battleship/battleship.twig +++ b/core/templates/layout/three-column/battleship/battleship.twig @@ -1,28 +1,39 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * Template for a three row three column layout. + * 66/33 + * 33/33/33 + * 33/33/33 * * Variables: - * - - * - - * - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - a two column span content region + * second - a single column span content region + * third - a single column 1/3 width content region + * fourth - a single column 1/3 width content region + * fifth - a single column 1/3 width content region + * sixth - a single column 1/3 width content region + * seventh - a single column 1/3 width content region + * eighth - a single column 1/3 width content region + * body - a block area for changing the wrappers on the content regions */ #}
    + {% block body %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} {% if third is not empty %}
    @@ -59,5 +70,6 @@ {{ eighth }}
    {% endif %} + {% endblock %}
    diff --git a/core/templates/layout/three-column/blastila/blastila.twig b/core/templates/layout/three-column/blastila/blastila.twig index 6451193b1..7ed71ad26 100644 --- a/core/templates/layout/three-column/blastila/blastila.twig +++ b/core/templates/layout/three-column/blastila/blastila.twig @@ -3,14 +3,18 @@ * @file * Template for a complex column panel layout. * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * This template provides a complex column panel display layout with a single + * cell top most column followed by a 3 column layout where a 2 column span + * header region is above two single column regions and a right sidebar. * * Variables: - * - - * - - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single cell centered columns + * sidebar - A 1/3 row right sidebar open content region + * first - A 2/3 row section below the header and to the left of the sidebar. + * second - A 1/3 column content region below the first region. + * third - A 1/3 column content region below the first region. * */ #} @@ -26,24 +30,32 @@
    {# Sidebar #} + {% if sidebar is not empty %} + {% endif %} {# Mini header area #} + {% if first is not empty %}
    {{ first }}
    + {% endif %} {# Left content column #} + {% if second is not empty %}
    {{ second }}
    + {% endif %} {# Right content column #} + {% if third is not empty %}
    {{ third }}
    + {% endif %}
    {# end grid container #} diff --git a/core/templates/layout/three-column/chess/chess.twig b/core/templates/layout/three-column/chess/chess.twig index e811828fb..3ca17c867 100644 --- a/core/templates/layout/three-column/chess/chess.twig +++ b/core/templates/layout/three-column/chess/chess.twig @@ -1,17 +1,21 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * A two row three column layout bookended by single column centered header + * and footer content regions. * * Variables: - * - - * - - * - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single cell centered column header + * first - First row 1/3 width column + * second - First row 1/3 width column + * third - First row 1/3 width column + * fourth - Second row 1/3 width column + * fifth - Second row 1/3 width column + * sixth - Second row 1/3 width column + * footer - A single cell centered column content area + * body - An overridable block region. */ #} @@ -23,29 +27,43 @@ {% endif %}
    + {% block body %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} + {% if third is not empty %}
    {{ third }}
    + {% endif %} + {% if fourth is not empty %}
    {{ fourth }}
    + {% endif %} + {% if fifth is not empty %}
    {{ fifth }}
    + {% endif %} + {% if sixth is not empty %}
    {{ sixth }}
    + {% endif %} + {% endblock %}
    {% if footer is not empty %} diff --git a/core/templates/layout/three-column/cuttoner/cuttoner.twig b/core/templates/layout/three-column/cuttoner/cuttoner.twig index 4d089427b..7bbf03135 100644 --- a/core/templates/layout/three-column/cuttoner/cuttoner.twig +++ b/core/templates/layout/three-column/cuttoner/cuttoner.twig @@ -1,21 +1,27 @@ {# /** * @file - * Template for a complex column panel layout. + * A three column layout with a two column content area topped with a 2 span + * header area and footed by a two span content aread and a top to bottom + * of content sidebar region. * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * Variants: + * layout-cuttoner--right - A right sidebar variant to the layout. * * Variables: - * - - * - - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A two span 66% topper for the first and second columns. + * first - A single 33% width column + * second - A single 33% width column + * footer - A two span 66% footer for the first and second columns + * sidebar - A 33% multiple row spanning sidebar * */ #}
    +
    {% if header is not empty %}
    @@ -23,24 +29,30 @@
    {% endif %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} {% if footer is not empty %}
    {{ footer }}
    {% endif %} -
    + {% if sidebar is not empty %} + {% endif %} +
    diff --git a/core/templates/layout/three-column/percles/percles.twig b/core/templates/layout/three-column/percles/percles.twig index c6c4611ed..d298e743c 100644 --- a/core/templates/layout/three-column/percles/percles.twig +++ b/core/templates/layout/three-column/percles/percles.twig @@ -1,39 +1,57 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * + * A three column layout with a two rows. The first two features two cells, one + * that spans 2 columns and one that is a single column. The second row + * features three equal column content areas * + * 66/33 + * 33/33/33 * + * Variants: + * layout-precles--right - A right side weighted header variant to the layout. * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - A single cell single row content area + * second - A two span content column in the first row + * third - A single column 33% content area in the second row + * fourth - A single column 33% content area in the second row + * fifth - A single column 33% content area in the second row * */ #}
    + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} + {% if third is not empty %}
    {{ third }}
    + {% endif %} + {% if fourth is not empty %}
    {{ fourth }}
    + {% endif %} + {% if fifth is not empty %}
    {{ fifth }}
    + {% endif %}
    diff --git a/core/templates/layout/three-column/robot/robot.twig b/core/templates/layout/three-column/robot/robot.twig index a75b16f29..601e5fe6f 100644 --- a/core/templates/layout/three-column/robot/robot.twig +++ b/core/templates/layout/three-column/robot/robot.twig @@ -1,16 +1,19 @@ {# /** * @file - * Template for a complex column panel layout. + * A three column layout with a 3 span header and an unequal three column layout + * below it where the center column is 50% * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * 100 + * 25/50/25 * * Variables: - * - - * - - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A skinny 25% width left sidebar. + * second - A larger 50% width centered column. + * third - A skinny 25% width right sidebar * */ #} @@ -23,17 +26,23 @@
    {% endif %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} + {% if third is not empty %}
    {{ third }}
    + {% endif %}
    diff --git a/core/templates/layout/three-column/space-invader/space-invader.twig b/core/templates/layout/three-column/space-invader/space-invader.twig index cf1481881..bea9b42ec 100644 --- a/core/templates/layout/three-column/space-invader/space-invader.twig +++ b/core/templates/layout/three-column/space-invader/space-invader.twig @@ -1,17 +1,19 @@ {# /** * @file - * Template for a complex column panel layout. + * A three column layout with a 3 span header and an equal three column layout + * below it. * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * 100 + * 33/33/33 * * Variables: - * - - * - - * - * - * + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A 33% width content column. + * second - A 33% width content column. + * third - A 33% width content column. */ #} @@ -23,17 +25,23 @@
    {% endif %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} + {% if third is not empty %}
    {{ third }}
    + {% endif %} diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig index edd6c60a7..e0eb16534 100644 --- a/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig +++ b/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig @@ -1,36 +1,46 @@ {# /** * @file - * Template for a complex column panel layout. + * A three column layout with a 2 span header and an equal three column layout. * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. + * AA BB BB + * AA CC DD + * AA CC DD * * Variables: - * - $id: An optional CSS id to use for the layout. - * - $content: An array of content, each item in the array is keyed to one - * panel of the layout. This layout supports the following sections: - * - $content['first']: Content in the left column. - * - $content['second']: Content in the right column. + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A 33% width content column. + * second - A 33% width content column. + * third - A 33% width content column. */ #}
    + {% if header is not empty %}
    {{ header }}
    + {% endif %} + {% if first is not empty %}
    {{ first }}
    + {% endif %} + {% if second is not empty %}
    {{ second }}
    + {% endif %} {# Sidebar #} + {% if sidebar is not empty %} + {% endif %}
    From 17beaf3a7a079087adf57f0556bcc81edc0535da Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Wed, 5 Dec 2018 10:47:31 -0800 Subject: [PATCH 071/123] worked string comments into kss --- .../functions/string/_str-replace.scss | 12 +++++------ .../functions/string/_to-length.scss | 14 +++++-------- .../functions/string/_to-number.scss | 20 +++++-------------- 3 files changed, 15 insertions(+), 31 deletions(-) diff --git a/core/scss/utilities/functions/string/_str-replace.scss b/core/scss/utilities/functions/string/_str-replace.scss index 9f06ae2c1..1f9d995aa 100644 --- a/core/scss/utilities/functions/string/_str-replace.scss +++ b/core/scss/utilities/functions/string/_str-replace.scss @@ -4,16 +4,14 @@ // str-replace($string, $search, $replace: '') // // Replaces a substring with another string. +// Replaces $search with $replace in $string +// +// $string - Initial string +// $search - Substring to replace +// $replace ('') - New value // // Style guide: Functions.String.str-replace // - -/// Replace `$search` with `$replace` in `$string` -/// @author Hugo Giraudel -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); diff --git a/core/scss/utilities/functions/string/_to-length.scss b/core/scss/utilities/functions/string/_to-length.scss index 27831159a..4a1bd2b6d 100644 --- a/core/scss/utilities/functions/string/_to-length.scss +++ b/core/scss/utilities/functions/string/_to-length.scss @@ -1,17 +1,13 @@ // // to-length($value, $unit) // +// Returns $value (a number) expressed in $unit +// +// $value - Number value to add unit to +// $unit - String representation of the unit +// // Style guide: Functions.String.to-length // - -/// -/// Add `$unit` to `$value` -/// -/// @param {Number} $value - Value to add unit to -/// @param {String} $unit - String representation of the unit -/// -/// @return {Number} - `$value` expressed in `$unit` -/// @function to-length($value, $unit) { $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); diff --git a/core/scss/utilities/functions/string/_to-number.scss b/core/scss/utilities/functions/string/_to-number.scss index fd6851216..4b4c64e9c 100644 --- a/core/scss/utilities/functions/string/_to-number.scss +++ b/core/scss/utilities/functions/string/_to-number.scss @@ -3,23 +3,13 @@ // // Converts a string to number. // +// String to number converter. +// Returns a number value. +// +// $value - Value to be parsed +// // Style guide: Functions.String.to-number // - -//// -/// String to number converter -/// @author Hugo Giraudel -/// @access private -//// - - -/// -/// Casts a string into a number -/// -/// @param {String | Number} $value - Value to be parsed -/// -/// @return {Number} -/// @function to-number($value) { @if type-of($value) == 'number' { @return $value; From 21c442962d612306a7c510d5c4591f0ca3f85fd4 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Wed, 5 Dec 2018 10:55:03 -0800 Subject: [PATCH 072/123] layout FIXUP --- core/css/decanter.css | 4 ++-- core/scss/layout/three-column/_blastila-right.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 1812b2dad..4b5bb6f1d 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -3172,8 +3172,8 @@ dfn { .layout-blastila--right > div > aside { -ms-grid-column: 3; - grid-column: 3 / span 3; - -ms-grid-column-span: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 2; -ms-grid-row-span: 2; } diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/three-column/_blastila-right.scss index d6a19f4d4..1daf8a482 100644 --- a/core/scss/layout/three-column/_blastila-right.scss +++ b/core/scss/layout/three-column/_blastila-right.scss @@ -9,7 +9,7 @@ > aside { // First column, for 1 column, but down two columns. - @include grid-item-spans(3, span 3, 1, span 2); + @include grid-item-spans(3, span 1, 1, span 2); } > section { From f4c251d7a157db57d6f101e13819b277e8a97f11 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Wed, 5 Dec 2018 11:30:08 -0800 Subject: [PATCH 073/123] minor layout comment FIXUPs --- core/scss/layout/three-column/_cuttoner-right.scss | 4 +++- core/scss/layout/three-column/_percles-right.scss | 2 +- core/scss/layout/three-column/_sunset-delorean-right.scss | 2 +- core/scss/layout/three-column/_thions-bottom.scss | 2 +- core/scss/layout/three-column/_valmer-right.scss | 2 +- core/scss/layout/two-column/_pacman-right.scss | 4 +++- core/scss/layout/two-column/_plakes-right.scss | 4 +++- core/scss/layout/two-column/_trunks-right.scss | 4 +++- core/scss/layout/two-column/_wedge-right.scss | 4 +++- 9 files changed, 19 insertions(+), 9 deletions(-) diff --git a/core/scss/layout/three-column/_cuttoner-right.scss b/core/scss/layout/three-column/_cuttoner-right.scss index 71cdab361..3a6c3a5e2 100644 --- a/core/scss/layout/three-column/_cuttoner-right.scss +++ b/core/scss/layout/three-column/_cuttoner-right.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; -// Right side variant. +// +// Cuttoner Right - Variant +// .layout-cuttoner--right { > div { diff --git a/core/scss/layout/three-column/_percles-right.scss b/core/scss/layout/three-column/_percles-right.scss index 49e8b800e..356b25450 100644 --- a/core/scss/layout/three-column/_percles-right.scss +++ b/core/scss/layout/three-column/_percles-right.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Right side variant. +// Percles Right - Variant // .layout-percles--right { diff --git a/core/scss/layout/three-column/_sunset-delorean-right.scss b/core/scss/layout/three-column/_sunset-delorean-right.scss index 9ea628917..64f61bd4a 100644 --- a/core/scss/layout/three-column/_sunset-delorean-right.scss +++ b/core/scss/layout/three-column/_sunset-delorean-right.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Right side variant. +// Sunset Delorean Right - Variant // .layout-sunset-delorean--right { diff --git a/core/scss/layout/three-column/_thions-bottom.scss b/core/scss/layout/three-column/_thions-bottom.scss index 8ca93b9d6..acf29ecbe 100644 --- a/core/scss/layout/three-column/_thions-bottom.scss +++ b/core/scss/layout/three-column/_thions-bottom.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Right side variant. +// Thions Bottom - Variant // .layout-thions--bottom { > div { diff --git a/core/scss/layout/three-column/_valmer-right.scss b/core/scss/layout/three-column/_valmer-right.scss index 8a5ba676a..cb962bd4d 100644 --- a/core/scss/layout/three-column/_valmer-right.scss +++ b/core/scss/layout/three-column/_valmer-right.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// Right side variant. +// Valmer Right - Variant // .layout-valmer--right { > section { diff --git a/core/scss/layout/two-column/_pacman-right.scss b/core/scss/layout/two-column/_pacman-right.scss index 8d440be0f..855284b8f 100644 --- a/core/scss/layout/two-column/_pacman-right.scss +++ b/core/scss/layout/two-column/_pacman-right.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; -// Right side variant. +// +// PacMan Right - Variant +// .layout-pacman--right { > div { diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/two-column/_plakes-right.scss index 5a1da1def..f36dcbed1 100644 --- a/core/scss/layout/two-column/_plakes-right.scss +++ b/core/scss/layout/two-column/_plakes-right.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; -// Right side variant. +// +// Plakes Right - Variant +// .layout-plakes--right { > div { diff --git a/core/scss/layout/two-column/_trunks-right.scss b/core/scss/layout/two-column/_trunks-right.scss index 4ef492c50..c905c3d8d 100644 --- a/core/scss/layout/two-column/_trunks-right.scss +++ b/core/scss/layout/two-column/_trunks-right.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; -// Right sidebar variant of Trunks. +// +// Trunks Right - Variant +// .layout-trunks--right { > section { div { diff --git a/core/scss/layout/two-column/_wedge-right.scss b/core/scss/layout/two-column/_wedge-right.scss index dcbd077f4..f3c025c2a 100644 --- a/core/scss/layout/two-column/_wedge-right.scss +++ b/core/scss/layout/two-column/_wedge-right.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; -// Right sidebar variant of Trunks. +// +// Wedge Right - Variant +// .layout-wedge--right { > section { div { From db19391617741b55ac6748a267ea6d3618c8faef Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 6 Dec 2018 09:16:23 -0800 Subject: [PATCH 074/123] wip!. --- core/templates/layout/three-column/blastila/blastila.twig | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/templates/layout/three-column/blastila/blastila.twig b/core/templates/layout/three-column/blastila/blastila.twig index 7ed71ad26..56cae6b26 100644 --- a/core/templates/layout/three-column/blastila/blastila.twig +++ b/core/templates/layout/three-column/blastila/blastila.twig @@ -7,6 +7,9 @@ * cell top most column followed by a 3 column layout where a 2 column span * header region is above two single column regions and a right sidebar. * + * Variants: + * layout-blastila--right - A right sidebar variant to the layout. + * * Variables: * attributes - html attributes for the template wrapper tag * modifier_class - Variant modifier css classes From 7e8b85350cac732180cd33a64493e97242ba2a3c Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 6 Dec 2018 10:42:28 -0800 Subject: [PATCH 075/123] Fixers to autoprefixer and updates for IE 11 compatibility. --- Gruntfile.js | 9 +- core/css/decanter-grid.css | 1094 +++++++--- core/css/decanter.css | 1856 +++++++++++++---- .../scss/components/brand-bar/_brand-bar.scss | 6 +- .../one-column/_centered-container.scss | 2 +- .../utilities/functions/string/_to-list.scss | 10 + .../functions/string/_to-string.scss | 10 + .../utilities/functions/string/index.scss | 4 +- .../mixins/grid/_centered-grid-container.scss | 40 - .../utilities/mixins/grid/_grid-columns.scss | 11 +- .../utilities/mixins/grid/_ie-autocolumn.scss | 20 + core/scss/utilities/mixins/grid/index.scss | 2 +- .../layout/two-column/wedge/wedge.twig | 21 +- kss/builder/decanter/kss-assets/css/kss.css | 394 ++-- kss/builder/decanter/scss/_home.scss | 9 +- kss/builder/decanter/scss/_masthead.scss | 9 +- 16 files changed, 2588 insertions(+), 909 deletions(-) create mode 100644 core/scss/utilities/functions/string/_to-list.scss create mode 100644 core/scss/utilities/functions/string/_to-string.scss delete mode 100644 core/scss/utilities/mixins/grid/_centered-grid-container.scss create mode 100644 core/scss/utilities/mixins/grid/_ie-autocolumn.scss diff --git a/Gruntfile.js b/Gruntfile.js index 3eedaa3e3..f30be0045 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -55,13 +55,16 @@ module.exports = function(grunt) { }, postcss: { options: { - map: true, + map: true, // inline sourcemaps processors: [ - require('autoprefixer') + require('autoprefixer')({ grid: true, browsers: ['last 2 versions', 'ie 11']}) // add vendor prefixes ] }, dist: { - src: 'core/css/*.css' + src: [ + 'core/css/*.css', + 'kss/builder/decanter/kss-assets/css/*.css' + ] } }, watch: { diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 24f300130..6c75f548e 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -1,10 +1,12 @@ html { - box-sizing: border-box; } + -webkit-box-sizing: border-box; + box-sizing: border-box; } *, *::before, *::after { - box-sizing: inherit; } + -webkit-box-sizing: inherit; + box-sizing: inherit; } body { background-color: #ffffff; @@ -18,10 +20,18 @@ body { display: none !important; } .flex-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin: auto; max-width: 1500px; padding-right: 1.5rem; @@ -45,11 +55,16 @@ body { @media only screen and (min-width: 0) { .flex-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-1 { @@ -77,11 +92,16 @@ body { @media only screen and (min-width: 576px) { .flex-sm-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-sm-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-sm-0 { @@ -111,11 +131,16 @@ body { @media only screen and (min-width: 768px) { .flex-md-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-md-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-md-0 { @@ -145,11 +170,16 @@ body { @media only screen and (min-width: 992px) { .flex-lg-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-lg-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-lg-0 { @@ -179,11 +209,16 @@ body { @media only screen and (min-width: 1200px) { .flex-xl-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-xl-0 { @@ -213,11 +248,16 @@ body { @media only screen and (min-width: 1500px) { .flex-2xl-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-2xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-2xl-0 { @@ -247,1261 +287,1765 @@ body { @media only screen and (min-width: 0) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 768px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 0) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 768px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 0) { .flex-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 576px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 768px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 992px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 1200px) { .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 1500px) { .flex-2xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 0) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 768px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 0) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 576px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 768px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 0) { .flex-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 576px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 768px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 992px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 1200px) { .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 1500px) { .flex-2xl-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 0) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 768px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 0) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 768px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 0) { .flex-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 576px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 576px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 768px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 992px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 1200px) { .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 1500px) { .flex-2xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 0) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 768px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 0) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 768px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 0) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 576px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 576px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-2xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/core/css/decanter.css b/core/css/decanter.css index 1812b2dad..345434f9b 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -39,7 +39,8 @@ h1 { * 2. Show the overflow in Edge and IE. */ hr { - box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ height: 0; /* 1 */ @@ -206,7 +207,8 @@ fieldset { * `fieldset` elements in all browsers. */ legend { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ @@ -237,7 +239,8 @@ textarea { */ [type="checkbox"], [type="radio"] { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -304,10 +307,18 @@ template { display: none; } .flex-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin: auto; max-width: 1500px; padding-right: 1.5rem; @@ -331,11 +342,16 @@ template { @media only screen and (min-width: 0) { .flex-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-1 { @@ -363,11 +379,16 @@ template { @media only screen and (min-width: 576px) { .flex-sm-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-sm-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-sm-0 { @@ -397,11 +418,16 @@ template { @media only screen and (min-width: 768px) { .flex-md-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-md-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-md-0 { @@ -431,11 +457,16 @@ template { @media only screen and (min-width: 992px) { .flex-lg-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-lg-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-lg-0 { @@ -465,11 +496,16 @@ template { @media only screen and (min-width: 1200px) { .flex-xl-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-xl-0 { @@ -499,11 +535,16 @@ template { @media only screen and (min-width: 1500px) { .flex-2xl-of-12 { - flex-basis: 0; - flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; max-width: 100%; } .flex-2xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; max-width: none; } .flex-push-2xl-0 { @@ -533,1262 +574,1766 @@ template { @media only screen and (min-width: 0) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 29.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-sm-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 768px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 992px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-md-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1200px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-lg-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 33px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 33px); + flex: 0 0 calc(8.3333333333% - 33px); max-width: calc(8.3333333333% - 33px); } } @media only screen and (min-width: 1500px) { .flex-xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-1-of-12 { - flex: 0 0 calc(8.3333333333% - 34.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); + flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } @media only screen and (min-width: 0) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 26.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-sm-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 768px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 992px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-md-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1200px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-lg-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 30px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 30px); + flex: 0 0 calc(16.6666666667% - 30px); max-width: calc(16.6666666667% - 30px); } } @media only screen and (min-width: 1500px) { .flex-xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-2-of-12 { - flex: 0 0 calc(16.6666666667% - 31.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); + flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } @media only screen and (min-width: 0) { .flex-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 576px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } @media only screen and (min-width: 768px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-sm-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 768px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 992px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-md-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 992px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1200px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-lg-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 1200px) { .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 27px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 27px); + flex: 0 0 calc(25% - 27px); max-width: calc(25% - 27px); } } @media only screen and (min-width: 1500px) { .flex-xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 1500px) { .flex-2xl-3-of-12 { - flex: 0 0 calc(25% - 28.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 28.5px); + flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } @media only screen and (min-width: 0) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 21.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-sm-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 768px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 992px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-md-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1200px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-lg-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 24px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 24px); + flex: 0 0 calc(33.3333333333% - 24px); max-width: calc(33.3333333333% - 24px); } } @media only screen and (min-width: 1500px) { .flex-xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-4-of-12 { - flex: 0 0 calc(33.3333333333% - 25.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); + flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } @media only screen and (min-width: 0) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 576px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 18.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-sm-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 768px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 992px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-md-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1200px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-lg-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 21px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 21px); + flex: 0 0 calc(41.6666666667% - 21px); max-width: calc(41.6666666667% - 21px); } } @media only screen and (min-width: 1500px) { .flex-xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-5-of-12 { - flex: 0 0 calc(41.6666666667% - 22.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); + flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } @media only screen and (min-width: 0) { .flex-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 576px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 16px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-sm-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 768px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-md-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 992px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-lg-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 1200px) { .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 18px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { .flex-xl-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 1500px) { .flex-2xl-6-of-12 { - flex: 0 0 calc(50% - 19px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } @media only screen and (min-width: 0) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 13.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-sm-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 768px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 992px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-md-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1200px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-lg-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15px); + flex: 0 0 calc(58.3333333333% - 15px); max-width: calc(58.3333333333% - 15px); } } @media only screen and (min-width: 1500px) { .flex-xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-7-of-12 { - flex: 0 0 calc(58.3333333333% - 15.8333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); + flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } @media only screen and (min-width: 0) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 10.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-sm-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 768px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-md-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-lg-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { .flex-xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-8-of-12 { - flex: 0 0 calc(66.6666666667% - 12.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } @media only screen and (min-width: 0) { .flex-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 576px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 576px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 8px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-sm-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 768px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-md-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 992px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-lg-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 1200px) { .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { .flex-xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 1500px) { .flex-2xl-9-of-12 { - flex: 0 0 calc(75% - 9.5px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } @media only screen and (min-width: 0) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 576px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 5.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-sm-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 768px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-md-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 992px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-lg-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 1200px) { .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { .flex-xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-10-of-12 { - flex: 0 0 calc(83.3333333333% - 6.3333333333px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } @media only screen and (min-width: 0) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 576px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 2.6666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-sm-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 768px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-md-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 992px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-lg-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 1200px) { .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { .flex-xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-11-of-12 { - flex: 0 0 calc(91.6666666667% - 3.1666666667px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } @media only screen and (min-width: 0) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 576px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 576px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-sm-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 768px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-md-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 992px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-lg-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1200px) { .flex-xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @media only screen and (min-width: 1500px) { .flex-2xl-12-of-12 { - flex: 0 0 calc(100% - 0px); + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } @font-face { @@ -1855,12 +2400,14 @@ template { left: -999em; } html { - box-sizing: border-box; } + -webkit-box-sizing: border-box; + box-sizing: border-box; } *, *::before, *::after { - box-sizing: inherit; } + -webkit-box-sizing: inherit; + box-sizing: inherit; } body { background-color: #ffffff; @@ -1903,7 +2450,8 @@ select { appearance: none; border: 0.1rem solid #b6b1a9; border-radius: 0; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; color: #2e2d29; display: block; font-size: 2rem; @@ -1917,7 +2465,8 @@ select { input:focus, textarea:focus, select:focus { - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } label { display: block; @@ -1970,7 +2519,8 @@ fieldset { [type=radio] + label::before { background: #ffffff; border-radius: 3px; - box-shadow: 0 0 0 1px #b6b1a9; + -webkit-box-shadow: 0 0 0 1px #b6b1a9; + box-shadow: 0 0 0 1px #b6b1a9; content: '\a0'; display: inline-block; height: 1.8rem; @@ -1981,7 +2531,8 @@ fieldset { width: 1.8rem; } [type=radio] + label::before { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #b6b1a9; + -webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #b6b1a9; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #b6b1a9; height: 1.6rem; line-height: 1.6rem; width: 1.6rem; @@ -1990,13 +2541,16 @@ fieldset { [type=checkbox]:checked + label::before, [type=radio]:checked + label::before { background-color: #b1040e; - box-shadow: 0 0 0 1px #b1040e; } + -webkit-box-shadow: 0 0 0 1px #b1040e; + box-shadow: 0 0 0 1px #b1040e; } [type=radio]:checked + label::before { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e; } + -webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e; } [type=radio]:focus + label::before { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e, 0 0 3px 4px #2e2d29, 0 0 7px 4px #2e2d29; } + -webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e, 0 0 3px 4px #2e2d29, 0 0 7px 4px #2e2d29; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1040e, 0 0 3px 4px #2e2d29, 0 0 7px 4px #2e2d29; } [type=checkbox]:checked + label::before, [type=checkbox]:checked:disabled + label::before { @@ -2006,7 +2560,8 @@ fieldset { background-repeat: no-repeat; } [type=checkbox]:focus + label::before { - box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #b1040e; } + -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #b1040e; + box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #b1040e; } [type=checkbox]:disabled + label { color: #b6b1a9; } @@ -2023,7 +2578,8 @@ fieldset { width: 100%; } [type=range]:focus { - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; outline: none; } [type=range]::-webkit-slider-runnable-track { @@ -2359,7 +2915,9 @@ dfn { grid-row-gap: 32px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; @@ -2381,7 +2939,11 @@ dfn { grid-row-gap: 32px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bricks .layout__columns > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; @@ -2403,7 +2965,11 @@ dfn { grid-row-gap: 36px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bricks .layout__columns > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; @@ -2425,7 +2991,11 @@ dfn { grid-row-gap: 36px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bricks .layout__columns > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1200px) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; @@ -2447,7 +3017,11 @@ dfn { grid-row-gap: 36px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bricks .layout__columns > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1500px) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr 1fr; @@ -2469,7 +3043,11 @@ dfn { grid-row-gap: 38px; } .layout-bricks .layout__columns > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bricks .layout__columns > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bricks .layout__columns > *:nth-child(2) { + -ms-grid-column: 2; } } .layout-molive > header { margin: 0 auto; } @@ -2535,7 +3113,9 @@ dfn { grid-row-gap: 32px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-molive > section { -ms-grid-columns: 1fr 1fr; @@ -2557,7 +3137,11 @@ dfn { grid-row-gap: 32px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-molive > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-molive > section { -ms-grid-columns: 1fr 1fr; @@ -2579,7 +3163,11 @@ dfn { grid-row-gap: 36px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-molive > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -2601,7 +3189,15 @@ dfn { grid-row-gap: 36px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-molive > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-molive > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-molive > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1200px) { .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -2623,7 +3219,15 @@ dfn { grid-row-gap: 36px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-molive > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-molive > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-molive > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1500px) { .layout-molive > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -2645,7 +3249,15 @@ dfn { grid-row-gap: 38px; } .layout-molive > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-molive > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-molive > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-molive > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-molive > section > *:nth-child(4) { + -ms-grid-column: 4; } } .layout-molive > footer { margin: 0 auto; } @@ -2711,7 +3323,9 @@ dfn { grid-row-gap: 32px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-bars > div { -ms-grid-columns: 1fr 1fr; @@ -2733,7 +3347,11 @@ dfn { grid-row-gap: 32px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-bars > div { -ms-grid-columns: 1fr 1fr; @@ -2755,7 +3373,11 @@ dfn { grid-row-gap: 36px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2777,7 +3399,13 @@ dfn { grid-row-gap: 36px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1200px) { .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2799,7 +3427,13 @@ dfn { grid-row-gap: 36px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1500px) { .layout-bars > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2821,7 +3455,13 @@ dfn { grid-row-gap: 38px; } .layout-bars > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-battleship > div { margin: 0 auto; @@ -2866,7 +3506,9 @@ dfn { grid-row-gap: 32px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-battleship > div { -ms-grid-columns: 1fr 1fr; @@ -2888,7 +3530,11 @@ dfn { grid-row-gap: 32px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-battleship > div { -ms-grid-columns: 1fr 1fr; @@ -2910,7 +3556,11 @@ dfn { grid-row-gap: 36px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2932,7 +3582,13 @@ dfn { grid-row-gap: 36px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1200px) { .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2954,7 +3610,13 @@ dfn { grid-row-gap: 36px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1500px) { .layout-battleship > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -2976,7 +3638,13 @@ dfn { grid-row-gap: 38px; } .layout-battleship > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-battleship > div :first-child { -ms-grid-column: 1; grid-column: 1 / span 2; @@ -3142,7 +3810,13 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-blastila > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-blastila > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-blastila > div > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-blastila > div > aside { -ms-grid-column: 1; grid-column: 1 / span 1; @@ -3367,11 +4041,21 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } } + grid-template-columns: 1fr 1fr; } + .layout-chess > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-chess > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-chess > section { -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-chess > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-chess > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-chess > section > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-cuttoner > div { margin: 0 auto; } @@ -3512,7 +4196,13 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-cuttoner > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-cuttoner > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-cuttoner > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 0) { .layout-cuttoner > div > section > * { margin-right: 16px; @@ -3635,7 +4325,11 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } } + grid-template-columns: 1fr 1fr; } + .layout-cuttoner > div > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-cuttoner > div > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 576px) { .layout-cuttoner > div > section > header, .layout-cuttoner > div > section > footer { @@ -3802,7 +4496,13 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-percles > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-percles > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-percles > div > *:nth-child(3) { + -ms-grid-column: 3; } } > .layout-percles > div:first-child { -ms-grid-column: 1; grid-column: 1 / span 1; @@ -3967,7 +4667,15 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-robot > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-robot > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-robot > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-robot > div > *:nth-child(4) { + -ms-grid-column: 4; } } .layout-robot > div > header { -ms-grid-column: 1; grid-column: 1 / span 4; @@ -4116,7 +4824,13 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-space-invader > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-space-invader > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-space-invader > div > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-space-invader > div > header { -ms-grid-column: 1; grid-column: 1 / span 3; @@ -4261,7 +4975,13 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr; } + .layout-sunset-delorean > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-sunset-delorean > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-sunset-delorean > div > *:nth-child(3) { + -ms-grid-column: 3; } } .layout-sunset-delorean > div > header { -ms-grid-column: 2; grid-column: 2 / span 2; @@ -4441,7 +5161,31 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + .layout-thions > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-thions > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-thions > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-thions > div > *:nth-child(4) { + -ms-grid-column: 4; } + .layout-thions > div > *:nth-child(5) { + -ms-grid-column: 5; } + .layout-thions > div > *:nth-child(6) { + -ms-grid-column: 6; } + .layout-thions > div > *:nth-child(7) { + -ms-grid-column: 7; } + .layout-thions > div > *:nth-child(8) { + -ms-grid-column: 8; } + .layout-thions > div > *:nth-child(9) { + -ms-grid-column: 9; } + .layout-thions > div > *:nth-child(10) { + -ms-grid-column: 10; } + .layout-thions > div > *:nth-child(11) { + -ms-grid-column: 11; } + .layout-thions > div > *:nth-child(12) { + -ms-grid-column: 12; } } .layout-thions > div > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 6; @@ -4744,7 +5488,15 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } } + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-valmer > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-valmer > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-valmer > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-valmer > section > *:nth-child(4) { + -ms-grid-column: 4; } } .layout-valmer > section > div:nth-of-type(1) { -ms-grid-column: 1; @@ -4820,7 +5572,9 @@ dfn { grid-row-gap: 32px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-donies > section { -ms-grid-columns: 1fr 1fr; @@ -4842,7 +5596,11 @@ dfn { grid-row-gap: 32px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-donies > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-donies > section { -ms-grid-columns: 1fr 1fr; @@ -4864,7 +5622,11 @@ dfn { grid-row-gap: 36px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-donies > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-donies > section { -ms-grid-columns: 1fr 1fr; @@ -4886,7 +5648,11 @@ dfn { grid-row-gap: 36px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-donies > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1200px) { .layout-donies > section { -ms-grid-columns: 1fr 1fr; @@ -4908,7 +5674,11 @@ dfn { grid-row-gap: 36px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-donies > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1500px) { .layout-donies > section { -ms-grid-columns: 1fr 1fr; @@ -4930,7 +5700,11 @@ dfn { grid-row-gap: 38px; } .layout-donies > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-donies > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-donies > section > *:nth-child(2) { + -ms-grid-column: 2; } } .layout-frogger > div, .layout-frogger > section, @@ -4998,7 +5772,9 @@ dfn { grid-row-gap: 32px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-frogger > section { -ms-grid-columns: 1fr 1fr; @@ -5020,7 +5796,11 @@ dfn { grid-row-gap: 32px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-frogger > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-frogger > section { -ms-grid-columns: 1fr 1fr; @@ -5042,7 +5822,11 @@ dfn { grid-row-gap: 36px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-frogger > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-frogger > section { -ms-grid-columns: 1fr 1fr; @@ -5064,7 +5848,11 @@ dfn { grid-row-gap: 36px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-frogger > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1200px) { .layout-frogger > section { -ms-grid-columns: 1fr 1fr; @@ -5086,7 +5874,11 @@ dfn { grid-row-gap: 36px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-frogger > section > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1500px) { .layout-frogger > section { -ms-grid-columns: 1fr 1fr; @@ -5108,7 +5900,11 @@ dfn { grid-row-gap: 38px; } .layout-frogger > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-frogger > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-frogger > section > *:nth-child(2) { + -ms-grid-column: 2; } } .layout-pacman > div, .layout-pacman > header, @@ -5169,7 +5965,9 @@ dfn { grid-row-gap: 32px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5191,7 +5989,13 @@ dfn { grid-row-gap: 32px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-pacman > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-pacman > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 768px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5213,7 +6017,13 @@ dfn { grid-row-gap: 36px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-pacman > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-pacman > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 992px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5235,7 +6045,13 @@ dfn { grid-row-gap: 36px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-pacman > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-pacman > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1200px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5257,7 +6073,13 @@ dfn { grid-row-gap: 36px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-pacman > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-pacman > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1500px) { .layout-pacman > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5279,7 +6101,13 @@ dfn { grid-row-gap: 38px; } .layout-pacman > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-pacman > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-pacman > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-pacman > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 576px) { .layout-pacman > div aside { -ms-grid-column: 1; @@ -5365,7 +6193,9 @@ dfn { grid-row-gap: 32px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5387,7 +6217,13 @@ dfn { grid-row-gap: 32px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-plakes > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-plakes > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 768px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr; @@ -5409,7 +6245,13 @@ dfn { grid-row-gap: 36px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-plakes > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-plakes > div > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 992px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5431,7 +6273,15 @@ dfn { grid-row-gap: 36px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-plakes > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-plakes > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-plakes > div > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1200px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5453,7 +6303,15 @@ dfn { grid-row-gap: 36px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-plakes > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-plakes > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-plakes > div > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1500px) { .layout-plakes > div { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5475,7 +6333,15 @@ dfn { grid-row-gap: 38px; } .layout-plakes > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-plakes > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-plakes > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-plakes > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-plakes > div > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 576px) { .layout-plakes > div aside { -ms-grid-column: 1; @@ -5563,7 +6429,9 @@ dfn { grid-row-gap: 32px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-toucan > div { -ms-grid-columns: 1fr 1fr; @@ -5585,7 +6453,11 @@ dfn { grid-row-gap: 32px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-toucan > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .layout-toucan > div { -ms-grid-columns: 1fr 1fr; @@ -5607,7 +6479,11 @@ dfn { grid-row-gap: 36px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-toucan > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-toucan > div { -ms-grid-columns: 1fr 1fr; @@ -5629,7 +6505,11 @@ dfn { grid-row-gap: 36px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-toucan > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1200px) { .layout-toucan > div { -ms-grid-columns: 1fr 1fr; @@ -5651,7 +6531,11 @@ dfn { grid-row-gap: 36px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-toucan > div > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1500px) { .layout-toucan > div { -ms-grid-columns: 1fr 1fr; @@ -5673,7 +6557,11 @@ dfn { grid-row-gap: 38px; } .layout-toucan > div > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-toucan > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-toucan > div > *:nth-child(2) { + -ms-grid-column: 2; } } .layout-trunks > section { margin: 0 auto; @@ -5718,7 +6606,9 @@ dfn { grid-row-gap: 32px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5740,7 +6630,13 @@ dfn { grid-row-gap: 32px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-trunks > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-trunks > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 768px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5762,7 +6658,13 @@ dfn { grid-row-gap: 36px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-trunks > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-trunks > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 992px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5784,7 +6686,13 @@ dfn { grid-row-gap: 36px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-trunks > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-trunks > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1200px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5806,7 +6714,13 @@ dfn { grid-row-gap: 36px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-trunks > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-trunks > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1500px) { .layout-trunks > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5828,7 +6742,13 @@ dfn { grid-row-gap: 38px; } .layout-trunks > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-trunks > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-trunks > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-trunks > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 576px) { .layout-trunks > section div:first-child { -ms-grid-column: 1; @@ -5898,7 +6818,9 @@ dfn { grid-row-gap: 32px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr; @@ -5920,7 +6842,13 @@ dfn { grid-row-gap: 32px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-wedge > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-wedge > section > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 768px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5942,7 +6870,15 @@ dfn { grid-row-gap: 36px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-wedge > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-wedge > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-wedge > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 992px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5964,7 +6900,15 @@ dfn { grid-row-gap: 36px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-wedge > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-wedge > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-wedge > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1200px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -5986,7 +6930,15 @@ dfn { grid-row-gap: 36px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-wedge > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-wedge > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-wedge > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 1500px) { .layout-wedge > section { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -6008,7 +6960,15 @@ dfn { grid-row-gap: 38px; } .layout-wedge > section > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .layout-wedge > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-wedge > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-wedge > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-wedge > section > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 576px) { .layout-wedge > section div:first-child { -ms-grid-column: 1; @@ -6083,32 +7043,25 @@ dfn { max-width: 1462px; } } .centered-container { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; } - .centered-container > :first-child { - grid-column: 2; } + margin: 0 auto; } + @media only screen and (min-width: 0) { + .centered-container { + max-width: -32px; } } @media only screen and (min-width: 576px) { .centered-container { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } + max-width: 544px; } } @media only screen and (min-width: 768px) { .centered-container { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } + max-width: 732px; } } @media only screen and (min-width: 992px) { .centered-container { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } + max-width: 956px; } } @media only screen and (min-width: 1200px) { .centered-container { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } + max-width: 1164px; } } @media only screen and (min-width: 1500px) { .centered-container { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } + max-width: 1462px; } } .su-alert { padding: 2rem; @@ -6163,35 +7116,30 @@ dfn { background-image: url("../img/alert-warning.svg"); } .su-brand-bar { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; width: 100%; height: 30px; background-color: #8c1515; } - .su-brand-bar > :first-child { - grid-column: 2; } + +.su-brand-bar__container { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .su-brand-bar__container { + max-width: -32px; } } @media only screen and (min-width: 576px) { - .su-brand-bar { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } + .su-brand-bar__container { + max-width: 544px; } } @media only screen and (min-width: 768px) { - .su-brand-bar { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } + .su-brand-bar__container { + max-width: 732px; } } @media only screen and (min-width: 992px) { - .su-brand-bar { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } + .su-brand-bar__container { + max-width: 956px; } } @media only screen and (min-width: 1200px) { - .su-brand-bar { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } + .su-brand-bar__container { + max-width: 1164px; } } @media only screen and (min-width: 1500px) { - .su-brand-bar { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } + .su-brand-bar__container { + max-width: 1462px; } } .su-brand-bar__logo { display: inline-block; @@ -6215,7 +7163,8 @@ dfn { margin-top: 8px; white-space: nowrap; color: #ffffff; - font-size: 20px; } + font-size: 20px; + -ms-grid-column: 2; } .su-brand-bar__logo:hover, .su-brand-bar__logo:active, .su-brand-bar__logo:focus { color: #ffffff; } @@ -6260,6 +7209,7 @@ button, text-align: center; text-decoration: none; width: 100%; + -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out; transition: background-color .25s ease-in-out, color .25s ease-in-out; } @media only screen and (min-width: 576px) { .su-button, @@ -6289,7 +7239,8 @@ button, [type=reset]:focus, [type=image]:focus { background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } .su-button--big, .su-button--big.su-link { @@ -6327,7 +7278,8 @@ button, .su-button--big:focus, .su-button--big.su-link:focus { background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } .su-button--secondary, .su-button--secondary.su-link { @@ -6342,7 +7294,8 @@ button, appearance: none; background-color: #ffffff; border: 0; - box-shadow: inset 0 0 0 2px #b1040e; + -webkit-box-shadow: inset 0 0 0 2px #b1040e; + box-shadow: inset 0 0 0 2px #b1040e; color: #b1040e; cursor: pointer; display: inline-block; @@ -6361,18 +7314,21 @@ button, .su-button--secondary.su-link:hover { background-color: #ffffff; border-bottom: 0; - box-shadow: inset 0 0 0 2px #2e2d29; + -webkit-box-shadow: inset 0 0 0 2px #2e2d29; + box-shadow: inset 0 0 0 2px #2e2d29; color: #2e2d29; text-decoration: none; } .su-button--secondary:focus, .su-button--secondary.su-link:focus { background-color: #ffffff; - box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; + -webkit-box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; color: #2e2d29; } .su-card { border: 1px solid #C6C6C6; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); } + -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); } @media only screen and (min-width: 0) and (max-width: 575px) { .su-card > img { display: none; } } @@ -6429,6 +7385,8 @@ button, .su-card--horizontal { -ms-grid-columns: 100%; grid-template-columns: 100%; } + .su-card--horizontal > *:nth-child(1) { + -ms-grid-column: 1; } .su-card--horizontal > * { margin-right: 16px; margin-left: 16px; } @@ -6451,6 +7409,10 @@ button, .su-card--horizontal { -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; } + .su-card--horizontal > *:nth-child(1) { + -ms-grid-column: 1; } + .su-card--horizontal > *:nth-child(2) { + -ms-grid-column: 2; } .su-card--horizontal > * { margin-right: 16px; margin-left: 16px; } @@ -6473,6 +7435,10 @@ button, .su-card--horizontal { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } + .su-card--horizontal > *:nth-child(1) { + -ms-grid-column: 1; } + .su-card--horizontal > *:nth-child(2) { + -ms-grid-column: 2; } .su-card--horizontal > * { margin-right: 18px; margin-left: 18px; } @@ -6577,8 +7543,13 @@ button, .su-cta--button-bottom, .su-cta { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; overflow: hidden; line-height: 0; } .su-cta--button-bottom:hover .su-cta__img, @@ -6593,6 +7564,7 @@ button, .su-cta .su-cta__img { width: 100%; z-index: 0; + -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .su-cta--button-bottom .su-cta__button, .su-cta .su-cta__button { @@ -6631,7 +7603,8 @@ button, .su-cta--button-bottom .su-cta__button:focus, .su-cta .su-cta__button:focus { background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } @media only screen and (min-width: 0) { .su-cta--button-bottom .su-cta__button, .su-cta .su-cta__button { @@ -6711,17 +7684,27 @@ button, grid-template-columns: 100%; -ms-grid-rows: auto auto; grid-template-rows: auto auto; - justify-items: center; } } + justify-items: center; } + .global-footer .global-footer__container > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .global-footer .global-footer__container { -ms-grid-columns: 15rem auto; grid-template-columns: 15rem auto; - justify-items: left; } } + justify-items: left; } + .global-footer .global-footer__container > *:nth-child(1) { + -ms-grid-column: 1; } + .global-footer .global-footer__container > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { -ms-grid-columns: 11rem auto; grid-template-columns: 11rem auto; - justify-items: left; } } + justify-items: left; } + .global-footer .global-footer__container > *:nth-child(1) { + -ms-grid-column: 1; } + .global-footer .global-footer__container > *:nth-child(2) { + -ms-grid-column: 2; } } .global-footer .global-footer__brand { margin: 0 0 1.25rem; padding-top: 5px; @@ -6759,16 +7742,26 @@ button, @media only screen and (min-width: 0) { .global-footer nav { -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } } + grid-template-columns: 1fr 1fr; } + .global-footer nav > *:nth-child(1) { + -ms-grid-column: 1; } + .global-footer nav > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 576px) { .global-footer nav { -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } } + grid-template-columns: 1fr 1fr; } + .global-footer nav > *:nth-child(1) { + -ms-grid-column: 1; } + .global-footer nav > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .global-footer nav { -ms-grid-columns: 1fr; grid-template-columns: 1fr; - margin-bottom: 0.75rem; } } + margin-bottom: 0.75rem; } + .global-footer nav > *:nth-child(1) { + -ms-grid-column: 1; } } .global-footer .global-footer__menu { margin: 0 0 1.5rem; padding: 0; @@ -6810,9 +7803,16 @@ button, position: relative; } @media only screen and (min-width: 768px) { .su-hero { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; min-height: 320px; } } @media only screen and (min-width: 992px) { .su-hero { @@ -6904,6 +7904,7 @@ a { content: ' ›'; left: 1px; position: relative; + -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; text-decoration: none; } .su-link--action:hover { @@ -6965,17 +7966,27 @@ a { grid-template-columns: 1fr; -ms-grid-rows: auto auto auto auto; grid-template-rows: auto auto auto auto; - align-items: end; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-decoration: none; } + .su-lockup > *:nth-child(1) { + -ms-grid-column: 1; } @media only screen and (min-width: 768px) { .su-lockup { -ms-grid-columns: auto auto 1fr; grid-template-columns: auto auto 1fr; -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } } + grid-template-rows: auto auto; } + .su-lockup > *:nth-child(1) { + -ms-grid-column: 1; } + .su-lockup > *:nth-child(2) { + -ms-grid-column: 2; } + .su-lockup > *:nth-child(3) { + -ms-grid-column: 3; } } .su-lockup__wordmark { display: inline-block; @@ -7228,7 +8239,8 @@ a { background-color: transparent; opacity: 1; } .su-site-search__submit:active, .su-site-search__submit:focus { - box-shadow: none; } + -webkit-box-shadow: none; + box-shadow: none; } .su-site-search__submit:focus { outline: #aaa solid 3px; outline: -webkit-focus-ring-color auto 5px; } @@ -7239,6 +8251,7 @@ a { left: 0; position: absolute; top: -4.2rem; + -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; z-index: 100; padding: 1rem 1.5rem; } @@ -7248,5 +8261,6 @@ a { outline: 0; position: absolute; top: 0; + -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /*# sourceMappingURL=decanter.css.map */ \ No newline at end of file diff --git a/core/scss/components/brand-bar/_brand-bar.scss b/core/scss/components/brand-bar/_brand-bar.scss index 209c511e9..b0d3c87bc 100644 --- a/core/scss/components/brand-bar/_brand-bar.scss +++ b/core/scss/components/brand-bar/_brand-bar.scss @@ -14,18 +14,22 @@ // Style guide: Components.Brand Bar // .su-brand-bar { - @include centered-grid-container; width: 100%; height: 30px; background-color: $color-cardinal-red; } +.su-brand-bar__container { + @include centered-column; +} + .su-brand-bar__logo { @include logo; @include margin(8px null null); white-space: nowrap; color: $color-white; font-size: 20px; + -ms-grid-column: 2; &:hover, &:active, diff --git a/core/scss/layout/one-column/_centered-container.scss b/core/scss/layout/one-column/_centered-container.scss index 04ea07b4b..80f8cbf7b 100644 --- a/core/scss/layout/one-column/_centered-container.scss +++ b/core/scss/layout/one-column/_centered-container.scss @@ -12,5 +12,5 @@ // Style guide: Layout.Centered Container // .centered-container { - @include centered-grid-container; + @include centered-column; } diff --git a/core/scss/utilities/functions/string/_to-list.scss b/core/scss/utilities/functions/string/_to-list.scss new file mode 100644 index 000000000..5f3641550 --- /dev/null +++ b/core/scss/utilities/functions/string/_to-list.scss @@ -0,0 +1,10 @@ +// +// to-list($value) +// +// Converts a value to a list. +// +// Style guide: Functions.String.to-list +// +@function to-list($value) { + @return if(type-of($value) != list, ($value,), $value); +} diff --git a/core/scss/utilities/functions/string/_to-string.scss b/core/scss/utilities/functions/string/_to-string.scss new file mode 100644 index 000000000..a9196d051 --- /dev/null +++ b/core/scss/utilities/functions/string/_to-string.scss @@ -0,0 +1,10 @@ +// +// to-string($value) +// +// Converts a value to a string. +// +// Style guide: Functions.String.to-string +// +@function to-string($value) { + @return inspect($value); +} diff --git a/core/scss/utilities/functions/string/index.scss b/core/scss/utilities/functions/string/index.scss index 704668dc6..186743f2e 100644 --- a/core/scss/utilities/functions/string/index.scss +++ b/core/scss/utilities/functions/string/index.scss @@ -9,4 +9,6 @@ @import "str-replace", "to-length", - "to-number"; + "to-list", + "to-number", + "to-string"; diff --git a/core/scss/utilities/mixins/grid/_centered-grid-container.scss b/core/scss/utilities/mixins/grid/_centered-grid-container.scss deleted file mode 100644 index fe101f0c8..000000000 --- a/core/scss/utilities/mixins/grid/_centered-grid-container.scss +++ /dev/null @@ -1,40 +0,0 @@ -@charset 'UTF-8'; - -// -// @centered-grid-container -// -// Creates a responsive centered grid for all breakpoints by using CSS grid. -// This creates a three column row and places the first html element in to the -// second column with a max width of the current breakpoint screen size. -// -// Style guide: Mixins.Grid.centered-grid-container -// -@mixin centered-grid-container { - @include display-grid; - - > :first-child { - grid-column: 2; - } - - @include grid-media('sm') { - @include grid-columns(auto $screen-sm - $gutter-sm auto); - } - - @include grid-media('md') { - @include grid-columns(auto $screen-md - $gutter-md auto); - } - - @include grid-media('lg') { - @include grid-columns(auto $screen-lg - $gutter-lg auto); - } - - @include grid-media('xl') { - @include grid-columns(auto $screen-xl - $gutter-xl auto); - } - - @include grid-media('2xl') { - @include grid-columns(auto $screen-2xl - $gutter-2xl auto); - } - - @include grid-columns(auto 100% auto); -} diff --git a/core/scss/utilities/mixins/grid/_grid-columns.scss b/core/scss/utilities/mixins/grid/_grid-columns.scss index 7c272c24f..346d244cb 100644 --- a/core/scss/utilities/mixins/grid/_grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_grid-columns.scss @@ -6,10 +6,19 @@ // Mixin to render cssGrid template columns in all modern browsers, including IE11. // // $columns - list: A value for grid-template-columns. +// $ie-autocolumn - boolean: True or False for wether to include the autocolumn +// mixin for IE rows. // // Style guide: Mixins.Grid.grid-columns // -@mixin grid-columns($columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) { +@mixin grid-columns($columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr, $ie-autocolumn: true) { -ms-grid-columns: $columns; grid-template-columns: $columns; + + // Try to guess the first row for ie. + @if ($ie-autocolumn) { + $cells: length(to-list($columns)); + @include ie-autocolumn($cells); + } + } diff --git a/core/scss/utilities/mixins/grid/_ie-autocolumn.scss b/core/scss/utilities/mixins/grid/_ie-autocolumn.scss new file mode 100644 index 000000000..3bb8d2fd5 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_ie-autocolumn.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// +// ie-autocolumn($children: 4) +// +// Mixin to generate ms-ie compatible 'auto flow' settings. In IE 11 you have to +// specifically tell the browser what row and column each cell is in. This +// allows you to do that with a multidimenionsal map. +// +// $children - number of children in order for column; +// +// Style guide: Mixins.Grid.grid-gap +// +@mixin ie-autocolumn($children: 4) { + @for $i from 1 through $children { + > *:nth-child(#{$i}) { + -ms-grid-column: $i; + } + } +} diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index 15d8a516b..cafe29645 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -10,8 +10,8 @@ @import 'centered-column', - 'centered-grid-container', 'display-grid', + 'ie-autocolumn', 'grid-column-gap', 'grid-columns', 'grid-gap', diff --git a/core/templates/layout/two-column/wedge/wedge.twig b/core/templates/layout/two-column/wedge/wedge.twig index 7b8d3f4aa..bc54556a1 100644 --- a/core/templates/layout/two-column/wedge/wedge.twig +++ b/core/templates/layout/two-column/wedge/wedge.twig @@ -1,15 +1,18 @@ {# /** * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * - * - * - * + * Wedge 2 column layout + * + * A 33/66 style two column layout. + * + * Variants: + * layout-cuttoner--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - First column and 33% width + * second - Second Column and 66% width * * */ diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 5f47f86f2..cd40a7421 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -34,7 +34,8 @@ h1 { * 2. Show the overflow in Edge and IE. */ hr { - box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ height: 0; /* 1 */ @@ -68,7 +69,8 @@ abbr[title] { /* 1 */ text-decoration: underline; /* 2 */ - text-decoration: underline dotted; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ } /** @@ -200,7 +202,8 @@ fieldset { * `fieldset` elements in all browsers. */ legend { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ @@ -231,7 +234,8 @@ textarea { */ [type="checkbox"], [type="radio"] { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -434,7 +438,9 @@ sub { grid-row-gap: 32px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { .main-page-layout { -ms-grid-columns: 1fr; @@ -456,7 +462,9 @@ sub { grid-row-gap: 32px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 768px) { .main-page-layout { -ms-grid-columns: 1fr 1fr 1fr 1fr; @@ -478,7 +486,15 @@ sub { grid-row-gap: 36px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } + .main-page-layout > *:nth-child(2) { + -ms-grid-column: 2; } + .main-page-layout > *:nth-child(3) { + -ms-grid-column: 3; } + .main-page-layout > *:nth-child(4) { + -ms-grid-column: 4; } } @media only screen and (min-width: 992px) { .main-page-layout { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; @@ -500,7 +516,17 @@ sub { grid-row-gap: 36px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } + .main-page-layout > *:nth-child(2) { + -ms-grid-column: 2; } + .main-page-layout > *:nth-child(3) { + -ms-grid-column: 3; } + .main-page-layout > *:nth-child(4) { + -ms-grid-column: 4; } + .main-page-layout > *:nth-child(5) { + -ms-grid-column: 5; } } @media only screen and (min-width: 1200px) { .main-page-layout { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; @@ -522,7 +548,17 @@ sub { grid-row-gap: 36px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } + .main-page-layout > *:nth-child(2) { + -ms-grid-column: 2; } + .main-page-layout > *:nth-child(3) { + -ms-grid-column: 3; } + .main-page-layout > *:nth-child(4) { + -ms-grid-column: 4; } + .main-page-layout > *:nth-child(5) { + -ms-grid-column: 5; } } @media only screen and (min-width: 1500px) { .main-page-layout { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; @@ -544,7 +580,17 @@ sub { grid-row-gap: 38px; } .main-page-layout > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + .main-page-layout > *:nth-child(1) { + -ms-grid-column: 1; } + .main-page-layout > *:nth-child(2) { + -ms-grid-column: 2; } + .main-page-layout > *:nth-child(3) { + -ms-grid-column: 3; } + .main-page-layout > *:nth-child(4) { + -ms-grid-column: 4; } + .main-page-layout > *:nth-child(5) { + -ms-grid-column: 5; } } .kss-sidebar { display: none; @@ -586,7 +632,8 @@ sub { .kss-color { position: relative; display: block; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; width: 100%; height: 147px; margin: 0 auto; @@ -604,7 +651,8 @@ sub { bottom: 0; left: 0; display: block; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; width: 100%; padding: 5px; background: #ffffff; } @@ -784,9 +832,16 @@ body { margin: 0; height: 100vh; min-height: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: flex-start; - flex-direction: column; } + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } body > .global-footer { margin-top: auto; } @@ -812,7 +867,8 @@ body { .kss-guides-mode .kss-modifier__example-footer:before, .kss-guides-mode .kss-modifier__example-footer:after { z-index: -1; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; content: ''; position: absolute; width: 5px; @@ -895,73 +951,67 @@ body { @media only screen and (min-width: 768px) { #kss-node.kss-home .section { padding: 60px; } } - #kss-node.kss-home .section--welcome { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; } - #kss-node.kss-home .section--welcome > :first-child { - grid-column: 2; } + #kss-node.kss-home .section--welcome:first-child { + margin: 0 auto; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--welcome:first-child { + max-width: -32px; } } @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } + #kss-node.kss-home .section--welcome:first-child { + max-width: 544px; } } @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } + #kss-node.kss-home .section--welcome:first-child { + max-width: 732px; } } @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } + #kss-node.kss-home .section--welcome:first-child { + max-width: 956px; } } @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } + #kss-node.kss-home .section--welcome:first-child { + max-width: 1164px; } } @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--welcome { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } - #kss-node.kss-home .section--welcome h1, - #kss-node.kss-home .section--welcome h2, - #kss-node.kss-home .section--welcome h3, - #kss-node.kss-home .section--welcome h4, - #kss-node.kss-home .section--welcome h5, - #kss-node.kss-home .section--welcome p { - color: #ffffff; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--welcome h1, - #kss-node.kss-home .section--welcome h2, - #kss-node.kss-home .section--welcome h3, - #kss-node.kss-home .section--welcome h4, - #kss-node.kss-home .section--welcome h5, - #kss-node.kss-home .section--welcome p { - max-width: 65%; } } - #kss-node.kss-home .section--welcome p { - font-size: 2rem; - font-weight: 200; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--welcome p { - font-size: 2rem; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.375rem; } } - #kss-node.kss-home .section--welcome h2 { - margin: 0; } + #kss-node.kss-home .section--welcome:first-child { + max-width: 1462px; } } + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + color: #ffffff; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome h1, + #kss-node.kss-home .section--welcome h2, + #kss-node.kss-home .section--welcome h3, + #kss-node.kss-home .section--welcome h4, + #kss-node.kss-home .section--welcome h5, + #kss-node.kss-home .section--welcome p { + max-width: 65%; } } + #kss-node.kss-home .section--welcome p { + font-size: 2rem; + font-weight: 200; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--welcome p { + font-size: 2rem; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--welcome p { + font-size: 2.25rem; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--welcome p { + font-size: 2.25rem; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--welcome p { + font-size: 2.25rem; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--welcome p { + font-size: 2.375rem; } } + #kss-node.kss-home .section--welcome h2 { + margin: 0; } #kss-node.kss-home .section--ui-components { background: #ffffff; } #kss-node.kss-home .section--ui-components .su-card { margin: 0 auto; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; border: 0; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--ui-components .su-card { @@ -1053,7 +1103,9 @@ body { grid-row-gap: 32px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr 1fr; @@ -1075,7 +1127,11 @@ body { grid-row-gap: 32px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr 1fr; @@ -1097,7 +1153,11 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr 1fr; @@ -1119,7 +1179,11 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr 1fr; @@ -1141,7 +1205,11 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr 1fr; @@ -1163,10 +1231,15 @@ body { grid-row-gap: 38px; } #kss-node.kss-home .section--dev-resources .cards-container > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { + -ms-grid-column: 2; } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; - box-shadow: none; } + -webkit-box-shadow: none; + box-shadow: none; } #kss-node.kss-home .section--dev-resources .su-card img { max-width: 100px; margin: 36px auto; @@ -1178,33 +1251,27 @@ body { #kss-node.kss-home .section--dev-resources .su-card .su-card__contents { text-align: center; } } #kss-node.kss-home .section--more-info { - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; background: #00b589; } - #kss-node.kss-home .section--more-info > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--more-info { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } + #kss-node.kss-home .section--more-info:first-child { + margin: 0 auto; } + @media only screen and (min-width: 0) { + #kss-node.kss-home .section--more-info:first-child { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info:first-child { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + #kss-node.kss-home .section--more-info:first-child { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--more-info:first-child { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + #kss-node.kss-home .section--more-info:first-child { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + #kss-node.kss-home .section--more-info:first-child { + max-width: 1462px; } } #kss-node.kss-home .section--more-info h2 { text-align: center; margin-bottom: 60px; } @@ -1232,7 +1299,9 @@ body { grid-row-gap: 32px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr; @@ -1254,7 +1323,11 @@ body { grid-row-gap: 32px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--more-info ul > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr; @@ -1276,7 +1349,11 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--more-info ul > *:nth-child(2) { + -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; @@ -1298,7 +1375,13 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--more-info ul > *:nth-child(2) { + -ms-grid-column: 2; } + #kss-node.kss-home .section--more-info ul > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; @@ -1320,7 +1403,13 @@ body { grid-row-gap: 36px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--more-info ul > *:nth-child(2) { + -ms-grid-column: 2; } + #kss-node.kss-home .section--more-info ul > *:nth-child(3) { + -ms-grid-column: 3; } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr 1fr 1fr; @@ -1342,7 +1431,13 @@ body { grid-row-gap: 38px; } #kss-node.kss-home .section--more-info ul > * { margin-top: 0; - margin-bottom: 0; } } } + margin-bottom: 0; } } + #kss-node.kss-home .section--more-info ul > *:nth-child(1) { + -ms-grid-column: 1; } + #kss-node.kss-home .section--more-info ul > *:nth-child(2) { + -ms-grid-column: 2; } + #kss-node.kss-home .section--more-info ul > *:nth-child(3) { + -ms-grid-column: 3; } } #kss-node.kss-home .section--more-info li { list-style: none; list-style-type: none; } @@ -1352,7 +1447,8 @@ body { #kss-node.kss-home .section--more-info a:hover { color: #ffffff; } #kss-node.kss-home .section--more-info a::after { - text-decoration-color: #009b76; } + -webkit-text-decoration-color: #009b76; + text-decoration-color: #009b76; } .layout { position: relative; @@ -1455,43 +1551,40 @@ body { .masthead { border: 0; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); - display: grid; - display: -ms-grid; - -ms-grid-columns: auto 100% auto; - grid-template-columns: auto 100% auto; + -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); padding: 0; background: #2e2d29; position: relative; z-index: 20; } - .masthead > :first-child { - grid-column: 2; } - @media only screen and (min-width: 576px) { - .masthead { - -ms-grid-columns: auto 544px auto; - grid-template-columns: auto 544px auto; } } - @media only screen and (min-width: 768px) { - .masthead { - -ms-grid-columns: auto 732px auto; - grid-template-columns: auto 732px auto; } } - @media only screen and (min-width: 992px) { - .masthead { - -ms-grid-columns: auto 956px auto; - grid-template-columns: auto 956px auto; } } - @media only screen and (min-width: 1200px) { - .masthead { - -ms-grid-columns: auto 1164px auto; - grid-template-columns: auto 1164px auto; } } - @media only screen and (min-width: 1500px) { - .masthead { - -ms-grid-columns: auto 1462px auto; - grid-template-columns: auto 1462px auto; } } - @media only screen and (min-width: 576px) { - .masthead div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 11fr; - grid-template-columns: 1fr 11fr; } } + .masthead div { + margin: 0 auto; + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 11fr; + grid-template-columns: 1fr 11fr; } + @media only screen and (min-width: 0) { + .masthead div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .masthead div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .masthead div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .masthead div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .masthead div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .masthead div { + max-width: 1462px; } } + .masthead div > *:nth-child(1) { + -ms-grid-column: 1; } + .masthead div > *:nth-child(2) { + -ms-grid-column: 2; } .masthead .brand-logo { font-size: 3.125rem; color: #ffffff; @@ -1680,6 +1773,7 @@ ol.linenums { .kss-nav__menu-link.is-in-viewport:before { background-color: #000; width: 5px; + -webkit-transition: background-color .4s, width .6s; transition: background-color .4s, width .6s; } .kss-nav__menu-child { @@ -1738,7 +1832,8 @@ ol.linenums { line-height: 1; padding: 3px; } .kss-toolbar a { - box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; display: inline-block; width: 16px; height: 16px; @@ -1766,12 +1861,14 @@ ol.linenums { margin-bottom: 5px; border: solid 1px #666; padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); white-space: nowrap; color: #000; background: #fff; cursor: help; opacity: 0; + -webkit-transition: opacity 0.25s; transition: opacity 0.25s; height: 1px; width: 1px; @@ -1799,5 +1896,4 @@ a:hover > .kss-toolbar__tooltip { height: auto; width: auto; overflow: visible; } - /*# sourceMappingURL=kss.css.map */ \ No newline at end of file diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index 528847fee..bf738e678 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -39,7 +39,10 @@ // Welcome Section. .section--welcome { - @include centered-grid-container; + + &:first-child { + @include centered-column; + } h1, h2, @@ -126,7 +129,9 @@ // More Info Section .section--more-info { - @include centered-grid-container; + &:first-child { + @include centered-column; + } background: lighten($color-mint, 5%); h2 { diff --git a/kss/builder/decanter/scss/_masthead.scss b/kss/builder/decanter/scss/_masthead.scss index 7da888d5c..e13f94cf6 100644 --- a/kss/builder/decanter/scss/_masthead.scss +++ b/kss/builder/decanter/scss/_masthead.scss @@ -3,17 +3,15 @@ // The logo and the nav wrapper. .masthead { @include box-shadow("shallow", "0"); - @include centered-grid-container; @include padding(0); background: $color-black; position: relative; z-index: 20; div { - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 11fr); - } + @include centered-column; + @include display-grid; + @include grid-columns(1fr 11fr); } .brand-logo { @@ -26,4 +24,5 @@ line-height: 69px; text-align: center; } + } From 89058c675be6c99b4fdb47bfc5283a01e44525bd Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Thu, 6 Dec 2018 23:28:57 -0800 Subject: [PATCH 076/123] More IE Fixes. --- core/css/decanter.css | 152 +++++++++--------- .../scss/components/brand-bar/_brand-bar.scss | 3 + .../global-footer/_global-footer.scss | 100 +++++++----- .../utilities/mixins/grid/_ie-autocolumn.scss | 4 +- .../utilities/mixins/grid/_ie-autorow.scss | 20 +++ core/scss/utilities/mixins/grid/index.scss | 3 +- kss/builder/decanter/kss-assets/css/kss.css | 59 ++++--- .../decanter/kss-assets/js/kss-fullscreen.js | 11 +- .../decanter/kss-assets/js/kss-guides.js | 9 +- .../decanter/kss-assets/js/kss-markup.js | 9 +- kss/builder/decanter/scss/_home.scss | 33 +++- kss/builder/decanter/scss/_main-nav.scss | 2 +- kss/builder/decanter/scss/_masthead.scss | 11 +- 13 files changed, 267 insertions(+), 149 deletions(-) create mode 100644 core/scss/utilities/mixins/grid/_ie-autorow.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index bd27a4d6f..08b4e1c1d 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -7140,6 +7140,10 @@ dfn { @media only screen and (min-width: 1500px) { .su-brand-bar__container { max-width: 1462px; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-brand-bar__container { + padding-right: 20px; + padding-left: 20px; } } .su-brand-bar__logo { display: inline-block; @@ -7652,9 +7656,7 @@ button, color: #ffffff; text-decoration: underline; } .global-footer .global-footer__container { - margin: 0 auto; - display: grid; - display: -ms-grid; } + margin: 0 auto; } @media only screen and (min-width: 0) { .global-footer .global-footer__container { max-width: -32px; } } @@ -7673,50 +7675,19 @@ button, @media only screen and (min-width: 1500px) { .global-footer .global-footer__container { max-width: 1462px; } } - .global-footer .global-footer__container > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .global-footer .global-footer__container { - grid-column-gap: 32px; } - .global-footer .global-footer__container > * { - margin-right: 0; - margin-left: 0; } } - @media only screen and (min-width: 0) { - .global-footer .global-footer__container { - -ms-grid-columns: 100%; - grid-template-columns: 100%; - -ms-grid-rows: auto auto; - grid-template-rows: auto auto; - justify-items: center; } - .global-footer .global-footer__container > *:nth-child(1) { - -ms-grid-column: 1; } } - @media only screen and (min-width: 576px) { - .global-footer .global-footer__container { - -ms-grid-columns: 15rem auto; - grid-template-columns: 15rem auto; - justify-items: left; } - .global-footer .global-footer__container > *:nth-child(1) { - -ms-grid-column: 1; } - .global-footer .global-footer__container > *:nth-child(2) { - -ms-grid-column: 2; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { - -ms-grid-columns: 11rem auto; - grid-template-columns: 11rem auto; - justify-items: left; } - .global-footer .global-footer__container > *:nth-child(1) { - -ms-grid-column: 1; } - .global-footer .global-footer__container > *:nth-child(2) { - -ms-grid-column: 2; } } + display: -webkit-box; + display: -ms-flexbox; + display: flex; } } .global-footer .global-footer__brand { margin: 0 0 1.25rem; padding-top: 5px; - width: 16rem; } - @media only screen and (min-width: 576px) { + text-align: center; } + @media only screen and (min-width: 768px) { .global-footer .global-footer__brand { margin-bottom: 0; - width: 100%; } } + text-align: left; } } .global-footer .global-footer__brand a { display: inline-block; font-family: Stanford, 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif; @@ -7740,66 +7711,97 @@ button, @media only screen and (min-width: 0) and (max-width: 575px) { .global-footer .global-footer__brand a { font-size: 3.2rem; } } + .global-footer .global-footer__content { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } + @media only screen and (min-width: 1200px) { + .global-footer .global-footer__content { + padding-left: 52px; } } + @media only screen and (min-width: 768px) { + .global-footer .global-footer__content { + padding-left: 45px; } } + @media only screen and (min-width: 576px) and (max-width: 767px) { + .global-footer .global-footer__content { + text-align: center; } } .global-footer nav { - display: grid; - display: -ms-grid; } - @media only screen and (min-width: 0) { - .global-footer nav { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .global-footer nav > *:nth-child(1) { - -ms-grid-column: 1; } - .global-footer nav > *:nth-child(2) { - -ms-grid-column: 2; } } + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } @media only screen and (min-width: 576px) { .global-footer nav { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .global-footer nav > *:nth-child(1) { - -ms-grid-column: 1; } - .global-footer nav > *:nth-child(2) { - -ms-grid-column: 2; } } + display: block; + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + margin-bottom: 0.75rem; } } @media only screen and (min-width: 768px) { .global-footer nav { - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - margin-bottom: 0.75rem; } - .global-footer nav > *:nth-child(1) { - -ms-grid-column: 1; } } + margin: 0; } } .global-footer .global-footer__menu { margin: 0 0 1.5rem; padding: 0; list-style-type: none; } + @media (max-width: 767px) { + .global-footer .global-footer__menu { + padding-right: 20px; + padding-left: 20px; } } + @media only screen and (min-width: 576px) { + .global-footer .global-footer__menu { + margin: 0 0 0.5rem; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__menu { - margin-bottom: 0.625rem; } } + margin-bottom: 0; } } .global-footer .global-footer__menu li { margin: 0; padding: 0; - display: block; - text-align: center; } - @media only screen and (min-width: 0) and (max-width: 575px) { + padding: 0.25em 0; + display: block; } + @media only screen and (min-width: 576px) and (max-width: 767px) { .global-footer .global-footer__menu li { - padding: 0.25em 0; - font-weight: normal; - text-align: left; } } + margin-right: 1rem; + display: inline-block; + font-size: 0.9em; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__menu li { - margin-right: 2rem; - display: inline-block; } } + margin-right: 1rem; + padding: 0 0 1em; + text-align: left; + display: inline-block; + line-height: 0; } } + @media only screen and (min-width: 992px) { + .global-footer .global-footer__menu li { + margin-right: 2rem; } } + .global-footer .global-footer__menu li:last-child { + margin-right: 0; + margin-left: 0; } .global-footer .global-footer__menu--global { - font-size: 1.75rem; } + font-size: 1.75rem; + font-weight: normal; } + @media only screen and (min-width: 768px) { + .global-footer .global-footer__menu--global { + font-size: 1.85rem; } } .global-footer .global-footer__menu--policy { - font-size: 1.6rem; - font-weight: 300; } + font-size: 1.6rem; } + @media only screen and (min-width: 576px) { + .global-footer .global-footer__menu--policy { + font-weight: 300; } } .global-footer .global-footer__copyright { font-size: 1.6rem; font-weight: 300; line-height: 1.5; - text-align: center; } + text-align: center; + -ms-grid-row: 2; + -ms-grid-column: 1; } .global-footer .global-footer__copyright span { white-space: nowrap; } - @media only screen and (min-width: 576px) { + @media only screen and (min-width: 768px) { .global-footer .global-footer__copyright { text-align: left; } } diff --git a/core/scss/components/brand-bar/_brand-bar.scss b/core/scss/components/brand-bar/_brand-bar.scss index b0d3c87bc..979367c70 100644 --- a/core/scss/components/brand-bar/_brand-bar.scss +++ b/core/scss/components/brand-bar/_brand-bar.scss @@ -21,6 +21,9 @@ .su-brand-bar__container { @include centered-column; + @include grid-media-only('xs') { + @include padding(null 20px); + } } .su-brand-bar__logo { diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index dd5ed3ce8..0a8d70820 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -29,42 +29,25 @@ // Grid settings for footer container. .global-footer__container { @include centered-column; - @include display-grid; - @include grid-column-gap; - - @include grid-media("xs") { - @include grid-columns(100%); - @include grid-rows(auto auto); - justify-items: center; - } - - @include grid-media("sm") { - @include grid-columns(15rem auto); - justify-items: left; - } - - @include grid-media("md") { - @include grid-columns(11rem auto); - justify-items: left; + @include grid-media('md') { + display: flex; } } .global-footer__brand { @include margin(0 0 1.25rem); @include padding(5px null null); - - width: 16rem; + text-align: center; // Logo should have no margin at higher breakpoints. - @include grid-media('sm') { + @include grid-media('md') { @include margin(null null 0); - width: 100%; + text-align: left; } // The Logo. a { @include logo; - @include grid-media-only('xs') { font-size: 3.2rem; } @@ -74,21 +57,33 @@ } + .global-footer__content { + flex-grow: 1; + @include grid-media('xl') { + padding-left: 52px; + } + @include grid-media('md') { + padding-left: 45px; + } + @include grid-media-only('sm') { + text-align: center; + } + } + // Grid settings for footer nav region; passing 0 for no outer gutters. nav { - @include display-grid; - - @include grid-media('xs') { - @include grid-columns(1fr 1fr); - } + display: flex; + flex: 0 0 auto; + justify-content: center; @include grid-media('sm') { - @include grid-columns(1fr 1fr); + display: block; + justify-content: left; + @include margin(null null .75rem); } @include grid-media('md') { - @include grid-columns(1fr); - @include margin(null null .75rem); + @include margin(0); } } @@ -97,36 +92,61 @@ @include padding(0); list-style-type: none; + @include grid-media-max('sm') { + @include padding(null 20px); + } + + @include grid-media('sm') { + @include margin(0 0 0.5rem); + } + @include grid-media('md') { - @include margin(null null .625rem); + @include margin(null null 0); } li { @include margin(0); @include padding(0); + @include padding(.25em 0); display: block; - text-align: center; - @include grid-media-only('xs') { - @include padding(.25em 0); - font-weight: normal; - text-align: left; + @include grid-media-only('sm') { + @include margin(null 1rem null null); + display: inline-block; + font-size: 0.9em; } @include grid-media('md') { - @include margin(null 2rem null null); + @include margin(null 1rem null null); + @include padding(0 0 1em); + text-align: left; display: inline-block; + line-height: 0; + } + + @include grid-media('lg') { + @include margin(null 2rem null null); + } + + &:last-child { + @include margin(null 0); } } } .global-footer__menu--global { font-size: 1.75rem; + font-weight: normal; + @include grid-media('md') { + font-size: 1.85rem; + } } .global-footer__menu--policy { font-size: 1.6rem; - font-weight: 300; + @include grid-media('sm') { + font-weight: 300; + } } .global-footer__copyright { @@ -134,12 +154,14 @@ font-weight: 300; line-height: 1.5; text-align: center; + -ms-grid-row: 2; + -ms-grid-column: 1; span { white-space: nowrap; } - @include grid-media('sm') { + @include grid-media('md') { text-align: left; } diff --git a/core/scss/utilities/mixins/grid/_ie-autocolumn.scss b/core/scss/utilities/mixins/grid/_ie-autocolumn.scss index 3bb8d2fd5..2b055ca62 100644 --- a/core/scss/utilities/mixins/grid/_ie-autocolumn.scss +++ b/core/scss/utilities/mixins/grid/_ie-autocolumn.scss @@ -5,11 +5,11 @@ // // Mixin to generate ms-ie compatible 'auto flow' settings. In IE 11 you have to // specifically tell the browser what row and column each cell is in. This -// allows you to do that with a multidimenionsal map. +// allows you to do that with a mixin and some assumptions. // // $children - number of children in order for column; // -// Style guide: Mixins.Grid.grid-gap +// Style guide: Mixins.Grid.ie-autocolumn // @mixin ie-autocolumn($children: 4) { @for $i from 1 through $children { diff --git a/core/scss/utilities/mixins/grid/_ie-autorow.scss b/core/scss/utilities/mixins/grid/_ie-autorow.scss new file mode 100644 index 000000000..005f568d0 --- /dev/null +++ b/core/scss/utilities/mixins/grid/_ie-autorow.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// +// ie-autorow($children: 4) +// +// Mixin to generate ms-ie compatible 'auto flow' settings. In IE 11 you have to +// specifically tell the browser what row and column each cell is in. This +// allows you to do that with some asumptions. +// +// $children - number of children in order for row; +// +// Style guide: Mixins.Grid.ie-autorow +// +@mixin ie-autorow($children: 2) { + @for $i from 1 through $children { + > *:nth-child(#{$i}) { + -ms-grid-row: $i; + } + } +} diff --git a/core/scss/utilities/mixins/grid/index.scss b/core/scss/utilities/mixins/grid/index.scss index cafe29645..c8dcb5a83 100644 --- a/core/scss/utilities/mixins/grid/index.scss +++ b/core/scss/utilities/mixins/grid/index.scss @@ -9,9 +9,10 @@ // @import + 'ie-autocolumn', + 'ie-autorow', 'centered-column', 'display-grid', - 'ie-autocolumn', 'grid-column-gap', 'grid-columns', 'grid-gap', diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index cd40a7421..0ca89facf 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -950,7 +950,7 @@ body { padding: 20px; } @media only screen and (min-width: 768px) { #kss-node.kss-home .section { - padding: 60px; } } + padding: 60px 20px; } } #kss-node.kss-home .section--welcome:first-child { margin: 0 auto; } @media only screen and (min-width: 0) { @@ -1236,6 +1236,9 @@ body { -ms-grid-column: 1; } #kss-node.kss-home .section--dev-resources .cards-container > *:nth-child(2) { -ms-grid-column: 2; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home .section--dev-resources .cards-container { + display: block; } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; -webkit-box-shadow: none; @@ -1252,32 +1255,34 @@ body { text-align: center; } } #kss-node.kss-home .section--more-info { background: #00b589; } - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { margin: 0 auto; } @media only screen and (min-width: 0) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: -32px; } } @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: 544px; } } @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: 732px; } } @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: 956px; } } @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: 1164px; } } @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--more-info:first-child { + #kss-node.kss-home .section--more-info > div { max-width: 1462px; } } #kss-node.kss-home .section--more-info h2 { text-align: center; margin-bottom: 60px; } #kss-node.kss-home .section--more-info ul { display: grid; - display: -ms-grid; } + display: -ms-grid; + margin: 0; + padding: 0; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--more-info ul { -ms-grid-columns: 1fr; @@ -1438,9 +1443,20 @@ body { -ms-grid-column: 2; } #kss-node.kss-home .section--more-info ul > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home .section--more-info ul { + display: block; } } #kss-node.kss-home .section--more-info li { list-style: none; list-style-type: none; } + @media only screen and (min-width: 576px) { + #kss-node.kss-home .section--more-info li:nth-of-type(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } } + @media only screen and (min-width: 992px) { + #kss-node.kss-home .section--more-info li:nth-of-type(3) { + -ms-grid-row: 1; + -ms-grid-column: 3; } } #kss-node.kss-home .section--more-info a { color: #2e2d29; text-decoration: underline; } @@ -1510,7 +1526,7 @@ body { padding: 0; text-align: center; vertical-align: middle; } - @media only screen and (min-width: 576px) { + @media only screen and (min-width: 768px) { .main-nav { text-align: right; } } .main-nav li { @@ -1560,9 +1576,7 @@ body { .masthead div { margin: 0 auto; display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 11fr; - grid-template-columns: 1fr 11fr; } + display: -ms-grid; } @media only screen and (min-width: 0) { .masthead div { max-width: -32px; } } @@ -1581,10 +1595,14 @@ body { @media only screen and (min-width: 1500px) { .masthead div { max-width: 1462px; } } - .masthead div > *:nth-child(1) { - -ms-grid-column: 1; } - .masthead div > *:nth-child(2) { - -ms-grid-column: 2; } + @media only screen and (min-width: 768px) { + .masthead div { + -ms-grid-columns: 1fr 11fr; + grid-template-columns: 1fr 11fr; } + .masthead div > *:nth-child(1) { + -ms-grid-column: 1; } + .masthead div > *:nth-child(2) { + -ms-grid-column: 2; } } .masthead .brand-logo { font-size: 3.125rem; color: #ffffff; @@ -1593,7 +1611,9 @@ body { vertical-align: middle; height: 100%; line-height: 69px; - text-align: center; } + text-align: center; + -ms-grid-row: 1; + -ms-grid-column: 1; } @media only screen and (min-width: 576px) { .masthead .brand-logo { font-size: 3.125rem; } } @@ -1609,6 +1629,9 @@ body { @media only screen and (min-width: 1500px) { .masthead .brand-logo { font-size: 3.7109375rem; } } + .masthead .main-nav { + -ms-grid-row: 1; + -ms-grid-column: 2; } /* SPAN elements with the classes below are added by prettyprint. */ .pln { diff --git a/kss/builder/decanter/kss-assets/js/kss-fullscreen.js b/kss/builder/decanter/kss-assets/js/kss-fullscreen.js index ca932d057..4de4d890b 100644 --- a/kss/builder/decanter/kss-assets/js/kss-fullscreen.js +++ b/kss/builder/decanter/kss-assets/js/kss-fullscreen.js @@ -26,10 +26,13 @@ var self = this; // Initialize all fullscreen toggle buttons. - document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) { - // Get the section reference from the data attribute. - button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); - }); + var fulls = document.querySelectorAll('a[data-kss-fullscreen]'); + if (fulls.length) { + fulls.forEach(function (button) { + // Get the section reference from the data attribute. + button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); + }); + } }; // Activation function that takes the ID of the element that will receive diff --git a/kss/builder/decanter/kss-assets/js/kss-guides.js b/kss/builder/decanter/kss-assets/js/kss-guides.js index 4806ca45d..b1966274a 100644 --- a/kss/builder/decanter/kss-assets/js/kss-guides.js +++ b/kss/builder/decanter/kss-assets/js/kss-guides.js @@ -10,9 +10,12 @@ KssGuides.prototype.init = function () { var self = this; // Initialize all guides toggle buttons. - document.querySelectorAll('a[data-kss-guides]').forEach(function (el) { - el.onclick = self.showGuides.bind(self); - }); + var guides = document.querySelectorAll('a[data-kss-guides]'); + if (guides.length) { + guides.forEach(function (el) { + el.onclick = self.showGuides.bind(self); + }); + } }; // Toggle the guides mode. diff --git a/kss/builder/decanter/kss-assets/js/kss-markup.js b/kss/builder/decanter/kss-assets/js/kss-markup.js index 6e11ff6ba..26753b76e 100644 --- a/kss/builder/decanter/kss-assets/js/kss-markup.js +++ b/kss/builder/decanter/kss-assets/js/kss-markup.js @@ -11,9 +11,12 @@ KssMarkup.prototype.init = function () { var self = this; // Initialize all markup toggle buttons. - document.querySelectorAll('a[data-kss-markup]').forEach(function (el) { - el.onclick = self.showGuides.bind(self); - }); + var mkup = document.querySelectorAll('a[data-kss-markup]'); + if (mkup.length) { + mkup.forEach(function (el) { + el.onclick = self.showGuides.bind(self); + }); + } }; // Activation function that takes the ID of the element that will receive diff --git a/kss/builder/decanter/scss/_home.scss b/kss/builder/decanter/scss/_home.scss index bf738e678..e839e0368 100644 --- a/kss/builder/decanter/scss/_home.scss +++ b/kss/builder/decanter/scss/_home.scss @@ -33,7 +33,7 @@ .section { @include padding(20px); @include grid-media('md') { - @include padding(60px); + @include padding(60px 20px); } } @@ -100,6 +100,11 @@ .cards-container { @include centered-column; @include responsive-grid-columns($responsive-columns-default); + + // Set to block for IE. + @include grid-media-only('xs') { + display: block; + } } .su-card { @@ -129,9 +134,11 @@ // More Info Section .section--more-info { - &:first-child { + + > div { @include centered-column; } + background: lighten($color-mint, 5%); h2 { @@ -141,6 +148,14 @@ ul { @include responsive-grid-columns($responsive-columns-three); + @include margin(0); + @include padding(0); + } + + @include grid-media-only('xs') { + ul { + display: block; + } } li { @@ -148,6 +163,20 @@ list-style-type: none; } + @include grid-media('sm') { + li:nth-of-type(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; + } + } + + @include grid-media('lg') { + li:nth-of-type(3) { + -ms-grid-row: 1; + -ms-grid-column: 3; + } + } + a { color: $color-black; text-decoration: underline; diff --git a/kss/builder/decanter/scss/_main-nav.scss b/kss/builder/decanter/scss/_main-nav.scss index 136d9e233..dfd42efe6 100644 --- a/kss/builder/decanter/scss/_main-nav.scss +++ b/kss/builder/decanter/scss/_main-nav.scss @@ -7,7 +7,7 @@ text-align: center; vertical-align: middle; - @include grid-media("sm") { + @include grid-media("md") { text-align: right; } diff --git a/kss/builder/decanter/scss/_masthead.scss b/kss/builder/decanter/scss/_masthead.scss index e13f94cf6..ec23138e4 100644 --- a/kss/builder/decanter/scss/_masthead.scss +++ b/kss/builder/decanter/scss/_masthead.scss @@ -11,7 +11,9 @@ div { @include centered-column; @include display-grid; - @include grid-columns(1fr 11fr); + @include grid-media('md') { + @include grid-columns(1fr 11fr); + } } .brand-logo { @@ -23,6 +25,13 @@ height: 100%; line-height: 69px; text-align: center; + -ms-grid-row: 1; + -ms-grid-column: 1; + } + + .main-nav { + -ms-grid-row: 1; + -ms-grid-column: 2; } } From 9a70cd81150eafaddf8bbe61a99ce2900d178622 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 7 Dec 2018 08:59:52 -0800 Subject: [PATCH 077/123] More IE Fixes. --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 6 +++--- kss/builder/decanter/kss-assets/css/kss.css | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index f9c866ae6..c524c71b0 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -23,13 +23,13 @@ @include padding(0); @include margin(0); - height: 100vh; - min-height: 100%; + height: 100%; + min-height: 100vh; display: flex; + flex-basis: 100%; justify-content: flex-start; flex-direction: column; - #{$selector} { margin-top: auto; } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 0ca89facf..85eb59f07 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -830,11 +830,13 @@ sub { body { padding: 0; margin: 0; - height: 100vh; - min-height: 100%; + height: 100%; + min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; From 212b1a88626cda03f57449819ba18c151ee63e00 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 7 Dec 2018 09:07:19 -0800 Subject: [PATCH 078/123] More IE Fixes. --- core/scss/utilities/mixins/layout/_sticky-footer.scss | 6 ++++++ kss/builder/decanter/kss-assets/css/kss.css | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index c524c71b0..fa326da54 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -19,6 +19,7 @@ // // Style guide: Mixins.Layout.Sticky Footer // + @mixin sticky-footer($selector: '> .global-footer') { @include padding(0); @include margin(0); @@ -33,4 +34,9 @@ #{$selector} { margin-top: auto; } + + // IE 11 needs html to be flex in order to work. + @at-root html { + display: flex; + } } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 85eb59f07..858db8247 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -846,6 +846,10 @@ body { flex-direction: column; } body > .global-footer { margin-top: auto; } + html { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .is-fullscreen .kss-toolbar a[data-kss-fullscreen], .kss-guides-mode .kss-toolbar a[data-kss-guides], From 3228b6c481d0a78daece026f1426083341675b2d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 7 Dec 2018 09:17:31 -0800 Subject: [PATCH 079/123] More IE Fixes. --- core/css/decanter.css | 16 +++++++++++++--- core/scss/components/card/_card--horizontal.scss | 13 +++++++++++++ core/scss/homepage.md | 2 +- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 08b4e1c1d..0327011e8 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -7541,9 +7541,19 @@ button, .su-card--horizontal > img, .su-card--horizontal .su-card__contents { margin: 32px; } } - @media (max-width: 767px) { - .su-card--horizontal .su-card__contents > h2 { - margin-top: 0; } } + .su-card--horizontal img { + -ms-grid-row: 1; + -ms-grid-column: 1; } + .su-card--horizontal .su-card__contents { + -ms-grid-row: 2; + -ms-grid-column: 1; } + @media only screen and (min-width: 576px) { + .su-card--horizontal .su-card__contents { + -ms-grid-row: 1; + -ms-grid-column: 2; } } + @media (max-width: 767px) { + .su-card--horizontal .su-card__contents > h2 { + margin-top: 0; } } .su-cta--button-bottom, .su-cta { diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 02559ba51..010451dba 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -43,7 +43,20 @@ @include modular-margin(); } + img { + -ms-grid-row: 1; + -ms-grid-column: 1; + } + .su-card__contents { + -ms-grid-row: 2; + -ms-grid-column: 1; + + @include grid-media('sm') { + -ms-grid-row: 1; + -ms-grid-column: 2; + } + > h2 { @include grid-media-max('sm') { margin-top: 0; diff --git a/core/scss/homepage.md b/core/scss/homepage.md index 35f3fdbec..a1ae5d430 100644 --- a/core/scss/homepage.md +++ b/core/scss/homepage.md @@ -7,7 +7,7 @@
    - UI-Components + UI-Components

    Explore our UI components

    From buttons, to rows of cards, to full article level pages, Decanter breaks down and builds components thoughtfully, allowing your content to be displayed exactly the way you want.

    From 48eb572fa5814d0152e39cdda3e0ab1f64d2fb7d Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Fri, 7 Dec 2018 11:27:55 -0800 Subject: [PATCH 080/123] More IE Fixes. --- core/css/decanter.css | 568 ++++++++++-------- core/scss/layout/three-column/_bars.scss | 8 + .../scss/layout/three-column/_battleship.scss | 42 ++ .../layout/three-column/_blastila-right.scss | 23 +- core/scss/layout/three-column/_blastila.scss | 29 +- core/scss/layout/three-column/_chess.scss | 33 +- core/scss/layout/three-column/_cuttoner.scss | 32 +- .../layout/three-column/_percles-right.scss | 3 +- core/scss/layout/three-column/_percles.scss | 24 +- core/scss/layout/three-column/_robot.scss | 8 + .../layout/three-column/_space-invader.scss | 17 + .../three-column/_sunset-delorean-right.scss | 5 + .../layout/three-column/_sunset-delorean.scss | 9 +- .../layout/three-column/_valmer-right.scss | 4 + core/scss/layout/three-column/_valmer.scss | 10 +- .../mixins/grid/_responsive-grid-columns.scss | 10 +- kss/builder/decanter/kss-assets/css/kss.css | 9 + kss/builder/decanter/kss-assets/js/kss.js | 10 + 18 files changed, 558 insertions(+), 286 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 0327011e8..1e36174af 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -3048,6 +3048,9 @@ dfn { -ms-grid-column: 1; } .layout-bricks .layout__columns > *:nth-child(2) { -ms-grid-column: 2; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-bricks .layout__columns { + display: block; } } .layout-molive > header { margin: 0 auto; } @@ -3258,6 +3261,9 @@ dfn { -ms-grid-column: 3; } .layout-molive > section > *:nth-child(4) { -ms-grid-column: 4; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-molive > section { + display: block; } } .layout-molive > footer { margin: 0 auto; } @@ -3462,6 +3468,13 @@ dfn { -ms-grid-column: 2; } .layout-bars > div > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-bars > div { + display: block; } } + @media (min-width: 576px) and (max-width: 991px) { + .layout-bars > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } } .layout-battleship > div { margin: 0 auto; @@ -3645,10 +3658,39 @@ dfn { -ms-grid-column: 2; } .layout-battleship > div > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-battleship > div { + display: block; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-battleship > div { + display: block; } } .layout-battleship > div :first-child { -ms-grid-column: 1; grid-column: 1 / span 2; - -ms-grid-column-span: 2; } + -ms-grid-column-span: 2; + -ms-grid-row: 1; + -ms-grid-column: 1; } + .layout-battleship > div :nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 3; } + .layout-battleship > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-battleship > div :nth-child(4) { + -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-battleship > div :nth-child(5) { + -ms-grid-row: 2; + -ms-grid-column: 3; } + .layout-battleship > div :nth-child(6) { + -ms-grid-row: 3; + -ms-grid-column: 1; } + .layout-battleship > div :nth-child(7) { + -ms-grid-row: 3; + -ms-grid-column: 2; } + .layout-battleship > div :nth-child(8) { + -ms-grid-row: 3; + -ms-grid-column: 3; } .layout-blastila > header { margin: 0 auto; } @@ -3672,7 +3714,12 @@ dfn { max-width: 1462px; } } .layout-blastila > div { - margin: 0 auto; } + margin: 0 auto; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + -ms-grid-rows: auto; + grid-template-rows: auto; + grid-template-areas: "sidebar head head" "sidebar A B"; } @media only screen and (min-width: 0) { .layout-blastila > div { max-width: -32px; } } @@ -3805,74 +3852,31 @@ dfn { .layout-blastila > div > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { + @media only screen and (min-width: 576px) { .layout-blastila > div { display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-blastila > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-blastila > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-blastila > div > *:nth-child(3) { - -ms-grid-column: 3; } } + display: -ms-grid; } } .layout-blastila > div > aside { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } + -ms-grid-row-span: 2; + -ms-grid-column: 3; + grid-area: sidebar; } .layout-blastila > div > section { - -ms-grid-column: 2; - grid-column: 2 / span 2; + -ms-grid-row: 1; + -ms-grid-column: 1; -ms-grid-column-span: 2; - -ms-grid-row: 2; } - .layout-blastila > div > div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; + grid-area: head; } + .layout-blastila > div :nth-child(3) { -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - .layout-blastila > div div ~ div { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; + -ms-grid-column: 1; + grid-area: A; } + .layout-blastila > div :nth-child(4) { -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-blastila--right > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - -.layout-blastila--right > div > section { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; } - -.layout-blastila--right > div > div { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-column: 2; + grid-area: B; } -.layout-blastila--right > div div ~ div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } +.layout-blastila--right > div { + grid-template-areas: "head head sidebar" "A B sidebar"; } .layout-chess > header, .layout-chess > footer { @@ -4036,7 +4040,7 @@ dfn { .layout-chess > section > * { margin-top: 0; margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { + @media (max-width: 991px) { .layout-chess > section { display: grid; display: -ms-grid; @@ -4045,9 +4049,21 @@ dfn { .layout-chess > section > *:nth-child(1) { -ms-grid-column: 1; } .layout-chess > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-chess > section :nth-child(3), + .layout-chess > section :nth-child(4) { + -ms-grid-row: 2; } + .layout-chess > section :nth-child(4) { + -ms-grid-column: 2; } + .layout-chess > section :nth-child(5), + .layout-chess > section :nth-child(6) { + -ms-grid-row: 3; } + .layout-chess > section :nth-child(6) { -ms-grid-column: 2; } } @media only screen and (min-width: 992px) { .layout-chess > section { + display: grid; + display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .layout-chess > section > *:nth-child(1) { @@ -4055,6 +4071,15 @@ dfn { .layout-chess > section > *:nth-child(2) { -ms-grid-column: 2; } .layout-chess > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-chess > section :nth-child(4), + .layout-chess > section :nth-child(5), + .layout-chess > section :nth-child(6) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-chess > section :nth-child(5) { + -ms-grid-column: 2; } + .layout-chess > section :nth-child(6) { -ms-grid-column: 3; } } .layout-cuttoner > div { @@ -4196,151 +4221,183 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-cuttoner > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-cuttoner > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-cuttoner > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 0) { - .layout-cuttoner > div > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-cuttoner > div > section > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 38px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { + grid-template-columns: 1fr 1fr 1fr; } } + .layout-cuttoner > div > section { + -ms-flex-line-pack: start; + align-content: start; } + @media only screen and (min-width: 0) { + .layout-cuttoner > div > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div > section > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 38px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 38px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { .layout-cuttoner > div > section { - grid-row-gap: 38px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section { + display: grid; + display: -ms-grid; + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: auto; + grid-template-rows: auto; + grid-template-areas: "head head" "A B" "foot foot"; } + .layout-blastila > div > section { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-blastila > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-blastila > div :nth-child(4) { + -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-cuttoner > div > section > header { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-cuttoner > div > section > footer { + -ms-grid-row: 3; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-cuttoner > div > section :nth-child(2) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-cuttoner > div > section :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 2; } } + .layout-cuttoner > div > section > header { + -ms-grid-row: 1; -ms-grid-column: 1; - grid-column: 1 / span 2; -ms-grid-column-span: 2; - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-cuttoner > div > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-cuttoner > div > section > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section > header, + grid-area: head; } .layout-cuttoner > div > section > footer { + grid-area: foot; } + .layout-cuttoner > div > section :nth-child(2) { + -ms-grid-row: 2; -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; } } + grid-area: A; } + .layout-cuttoner > div > section :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 2; + grid-area: B; } + .layout-cuttoner > div > aside { + -ms-grid-row: 1; + -ms-grid-column: 3; } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-cuttoner--right > div > section { @@ -4496,23 +4553,24 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-percles > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-percles > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-percles > div > *:nth-child(3) { - -ms-grid-column: 3; } } - > .layout-percles > div:first-child { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; } + grid-template-columns: 1fr 1fr 1fr; } } .layout-percles > div > header { -ms-grid-column: 2; grid-column: 2 / span 2; - -ms-grid-column-span: 2; } + -ms-grid-column-span: 2; + -ms-grid-row: 1; + -ms-grid-column: 2; } + .layout-percles > div :nth-child(3), + .layout-percles > div :nth-child(4), + .layout-percles > div :nth-child(5) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-percles > div :nth-child(4) { + -ms-grid-column: 2; } + .layout-percles > div :nth-child(5) { + -ms-grid-column: 3; } -> .layout-percles--right > div:first-child { +.layout-percles--right > div > :first-child { -ms-grid-column: 3; grid-column: 3 / span 1; -ms-grid-column-span: 1; @@ -4526,7 +4584,8 @@ dfn { -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-column: 1; } .layout-robot > div { margin: 0 auto; } @@ -4680,6 +4739,10 @@ dfn { -ms-grid-column: 1; grid-column: 1 / span 4; -ms-grid-column-span: 4; } + .layout-robot > div > div { + -ms-grid-row: 2; } + .layout-robot > div > div:nth-of-type(1) { + -ms-grid-column: 1; } .layout-robot > div > div:nth-of-type(2) { -ms-grid-column: 2; grid-column: 2 / span 2; @@ -4835,6 +4898,14 @@ dfn { -ms-grid-column: 1; grid-column: 1 / span 3; -ms-grid-column-span: 3; } + .layout-space-invader > div > div { + -ms-grid-row: 2; } + .layout-space-invader > div > div:nth-of-type(1) { + -ms-grid-column: 1; } + .layout-space-invader > div > div:nth-of-type(2) { + -ms-grid-column: 2; } + .layout-space-invader > div > div:nth-of-type(3) { + -ms-grid-column: 3; } .layout-sunset-delorean > div { margin: 0 auto; } @@ -4975,20 +5046,15 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-sunset-delorean > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-sunset-delorean > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-sunset-delorean > div > *:nth-child(3) { - -ms-grid-column: 3; } } + grid-template-columns: 1fr 1fr 1fr; } } .layout-sunset-delorean > div > header { -ms-grid-column: 2; grid-column: 2 / span 2; -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-column: 2; } .layout-sunset-delorean > div > aside { -ms-grid-column: 1; grid-column: 1 / span 1; @@ -4999,7 +5065,11 @@ dfn { .layout-sunset-delorean > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-sunset-delorean > div section:nth-of-type(2) { + -ms-grid-column: 3; } .layout-sunset-delorean--right > div > header { -ms-grid-column: 1; @@ -5020,7 +5090,11 @@ dfn { .layout-sunset-delorean--right > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-column: 1; } + +.layout-sunset-delorean--right > div section:nth-of-type(2) { + -ms-grid-column: 2; } .layout-thions > div { margin: 0 auto; } @@ -5488,26 +5562,29 @@ dfn { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout-valmer > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-valmer > section > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-valmer > section > *:nth-child(3) { - -ms-grid-column: 3; } - .layout-valmer > section > *:nth-child(4) { - -ms-grid-column: 4; } } + grid-template-columns: 1fr 1fr 1fr 1fr; } } .layout-valmer > section > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; } +.layout-valmer > section > div:nth-of-type(2) { + -ms-grid-column: 3; } + +.layout-valmer > section > div:nth-of-type(3) { + -ms-grid-column: 4; } + .layout-valmer--right > section > div:nth-of-type(1) { -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; } +.layout-valmer--right > section > div:nth-of-type(2) { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; } + .layout-valmer--right > section > div:nth-of-type(3) { -ms-grid-column: 3; grid-column: 3 / span 2; @@ -5705,6 +5782,9 @@ dfn { -ms-grid-column: 1; } .layout-donies > section > *:nth-child(2) { -ms-grid-column: 2; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-donies > section { + display: block; } } .layout-frogger > div, .layout-frogger > section, @@ -5905,6 +5985,9 @@ dfn { -ms-grid-column: 1; } .layout-frogger > section > *:nth-child(2) { -ms-grid-column: 2; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-frogger > section { + display: block; } } .layout-pacman > div, .layout-pacman > header, @@ -6108,6 +6191,9 @@ dfn { -ms-grid-column: 2; } .layout-pacman > div > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-pacman > div { + display: block; } } @media only screen and (min-width: 576px) { .layout-pacman > div aside { -ms-grid-column: 1; @@ -6342,6 +6428,9 @@ dfn { -ms-grid-column: 3; } .layout-plakes > div > *:nth-child(4) { -ms-grid-column: 4; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-plakes > div { + display: block; } } @media only screen and (min-width: 576px) { .layout-plakes > div aside { -ms-grid-column: 1; @@ -6562,6 +6651,9 @@ dfn { -ms-grid-column: 1; } .layout-toucan > div > *:nth-child(2) { -ms-grid-column: 2; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-toucan > div { + display: block; } } .layout-trunks > section { margin: 0 auto; @@ -6749,6 +6841,9 @@ dfn { -ms-grid-column: 2; } .layout-trunks > section > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-trunks > section { + display: block; } } @media only screen and (min-width: 576px) { .layout-trunks > section div:first-child { -ms-grid-column: 1; @@ -6969,6 +7064,9 @@ dfn { -ms-grid-column: 3; } .layout-wedge > section > *:nth-child(4) { -ms-grid-column: 4; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-wedge > section { + display: block; } } @media only screen and (min-width: 576px) { .layout-wedge > section div:first-child { -ms-grid-column: 1; diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/three-column/_bars.scss index d52d7ba78..63c87e948 100644 --- a/core/scss/layout/three-column/_bars.scss +++ b/core/scss/layout/three-column/_bars.scss @@ -14,5 +14,13 @@ > div { @include centered-column; @include responsive-grid-columns($responsive-columns-three); + + // IE 11 fix. + @include grid-media-between('sm', 'md') { + :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; + } + } } } diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/three-column/_battleship.scss index 3a1c17e93..52667bfa7 100644 --- a/core/scss/layout/three-column/_battleship.scss +++ b/core/scss/layout/three-column/_battleship.scss @@ -15,8 +15,50 @@ @include centered-column; @include responsive-grid-columns($responsive-columns-three); + // Collapse to rows on IE 11. + @include grid-media-only('xs') { + display: block; + } + :first-child { @include grid-item-spans(1, span 2); + -ms-grid-row: 1; + -ms-grid-column: 1; + } + + :nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 3; + } + + :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; + } + + :nth-child(4) { + -ms-grid-row: 2; + -ms-grid-column: 2; + } + + :nth-child(5) { + -ms-grid-row: 2; + -ms-grid-column: 3; + } + + :nth-child(6) { + -ms-grid-row: 3; + -ms-grid-column: 1; + } + + :nth-child(7) { + -ms-grid-row: 3; + -ms-grid-column: 2; + } + + :nth-child(8) { + -ms-grid-row: 3; + -ms-grid-column: 3; } } } diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/three-column/_blastila-right.scss index 1daf8a482..4f013289b 100644 --- a/core/scss/layout/three-column/_blastila-right.scss +++ b/core/scss/layout/three-column/_blastila-right.scss @@ -6,26 +6,9 @@ .layout-blastila--right { > div { - - > aside { - // First column, for 1 column, but down two columns. - @include grid-item-spans(3, span 1, 1, span 2); - } - - > section { - // Row 2, column 2 for 2 cells. - @include grid-item-spans(1, span 2, 1); - } - - > div { - // Row 2, column 2 for 1 cell. - @include grid-item-spans(1, span 1, 2, span 1); - } - - div ~ div { - // Row 2, column 3 for 1 cell. - @include grid-item-spans(2, span 1, 2, span 1); - } + grid-template-areas: + "head head sidebar" + "A B sidebar"; } } diff --git a/core/scss/layout/three-column/_blastila.scss b/core/scss/layout/three-column/_blastila.scss index 1cfc42146..1a99c5732 100644 --- a/core/scss/layout/three-column/_blastila.scss +++ b/core/scss/layout/three-column/_blastila.scss @@ -22,32 +22,33 @@ @include centered-column; @include responsive-grid-gap; - // Enable the grid on md and higher. - // let everything be one column on xs and sm. - @include grid-media('md') { + // Turn on the grid on screens bigger than sm + @include grid-media('sm') { @include display-grid; - @include grid-columns(1fr 1fr 1fr); } + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto; + grid-template-areas: + "sidebar head head" + "sidebar A B"; + > aside { - // First column, for 1 column, but down two columns. - @include grid-item-spans(1, span 1, 1, span 2); + grid-area: sidebar; } > section { - // Row 2, column 2 for 2 cells. - @include grid-item-spans(2, span 2, 2); + grid-area: head; } - > div { - // Row 2, column 2 for 1 cell. - @include grid-item-spans(2, span 1, 2, span 1); + :nth-child(3) { + grid-area: A; } - div ~ div { - // Row 2, column 3 for 1 cell. - @include grid-item-spans(3, span 1, 2, span 1); + :nth-child(4) { + grid-area: B; } + } diff --git a/core/scss/layout/three-column/_chess.scss b/core/scss/layout/three-column/_chess.scss index ea12a03c3..98ed8198f 100644 --- a/core/scss/layout/three-column/_chess.scss +++ b/core/scss/layout/three-column/_chess.scss @@ -23,13 +23,44 @@ // Enable the grid on md and higher. // let everything be one column on xs and sm. - @include grid-media('md') { + @include grid-media-max('md') { @include display-grid; @include grid-columns(1fr 1fr); + + :nth-child(3), + :nth-child(4) { + -ms-grid-row: 2; + } + :nth-child(4) { + -ms-grid-column: 2; + } + + :nth-child(5), + :nth-child(6) { + -ms-grid-row: 3; + } + + :nth-child(6) { + -ms-grid-column: 2; + } + } @include grid-media('lg') { + @include display-grid; @include grid-columns(1fr 1fr 1fr); + :nth-child(4), + :nth-child(5), + :nth-child(6) { + -ms-grid-row: 2; + -ms-grid-column: 1; + } + :nth-child(5) { + -ms-grid-column: 2; + } + :nth-child(6) { + -ms-grid-column: 3; + } } } diff --git a/core/scss/layout/three-column/_cuttoner.scss b/core/scss/layout/three-column/_cuttoner.scss index 4f322468f..6fdb31adb 100644 --- a/core/scss/layout/three-column/_cuttoner.scss +++ b/core/scss/layout/three-column/_cuttoner.scss @@ -20,30 +20,48 @@ @include grid-media('sm') { @include display-grid; - @include grid-columns(1fr 1fr 1fr); + @include grid-columns(1fr 1fr 1fr, false); } > section { @include responsive-grid-gap; + align-content: start; @include grid-media('sm') { - @include grid-item-spans(1, span 2); @include display-grid; - @include grid-columns(1fr 1fr); + @include grid-item-spans(1, span 2); + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + grid-template-areas: + "head head" + "A B" + "foot foot"; + } + + > header { + grid-area: head; } - > header, > footer { - @include grid-media('sm') { - @include grid-item-spans(1, span 2); - } + grid-area: foot; } + + :nth-child(2) { + grid-area: A; + } + + :nth-child(3) { + grid-area: B; + } + } > aside { @include grid-media('sm') { @include grid-item-spans(3, span 1); } + -ms-grid-row: 1; + -ms-grid-column: 3; } } diff --git a/core/scss/layout/three-column/_percles-right.scss b/core/scss/layout/three-column/_percles-right.scss index 356b25450..d0f573ea7 100644 --- a/core/scss/layout/three-column/_percles-right.scss +++ b/core/scss/layout/three-column/_percles-right.scss @@ -6,12 +6,13 @@ .layout-percles--right { > div { - > &:first-child { + > :first-child { @include grid-item-spans(3, span 1, 1, span 1); } > header { @include grid-item-spans(1, span 2, 1, span 1); + -ms-grid-column: 1; } } diff --git a/core/scss/layout/three-column/_percles.scss b/core/scss/layout/three-column/_percles.scss index 5ad21c26b..920f91281 100644 --- a/core/scss/layout/three-column/_percles.scss +++ b/core/scss/layout/three-column/_percles.scss @@ -19,16 +19,30 @@ @include grid-media('sm') { @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > &:first-child { - @include grid-item-spans(1, span 1); + @include grid-columns(1fr 1fr 1fr, false); } > header { @include grid-item-spans(2, span 2); + -ms-grid-row: 1; + -ms-grid-column: 2; + } + + // IE 11 fixes. + :nth-child(3), + :nth-child(4), + :nth-child(5) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + + :nth-child(4) { + -ms-grid-column: 2; + } + :nth-child(5) { + -ms-grid-column: 3; + } + } } diff --git a/core/scss/layout/three-column/_robot.scss b/core/scss/layout/three-column/_robot.scss index 6690e1b23..e1eca8d45 100644 --- a/core/scss/layout/three-column/_robot.scss +++ b/core/scss/layout/three-column/_robot.scss @@ -24,6 +24,14 @@ @include grid-item-spans(1, span 4); } + > div { + -ms-grid-row: 2; + } + + > div:nth-of-type(1) { + -ms-grid-column: 1; + } + > div:nth-of-type(2) { @include grid-item-spans(2, span 2); } diff --git a/core/scss/layout/three-column/_space-invader.scss b/core/scss/layout/three-column/_space-invader.scss index 4e8d31587..c6b2278f9 100644 --- a/core/scss/layout/three-column/_space-invader.scss +++ b/core/scss/layout/three-column/_space-invader.scss @@ -23,5 +23,22 @@ > header { @include grid-item-spans(1, span 3); } + + > div { + -ms-grid-row: 2; + } + + > div:nth-of-type(1) { + -ms-grid-column: 1; + } + + > div:nth-of-type(2) { + -ms-grid-column: 2; + } + + > div:nth-of-type(3) { + -ms-grid-column: 3; + } + } } diff --git a/core/scss/layout/three-column/_sunset-delorean-right.scss b/core/scss/layout/three-column/_sunset-delorean-right.scss index 64f61bd4a..ab066caaa 100644 --- a/core/scss/layout/three-column/_sunset-delorean-right.scss +++ b/core/scss/layout/three-column/_sunset-delorean-right.scss @@ -17,6 +17,11 @@ > section { @include grid-item-spans(null, null, 2, span 1); + -ms-grid-column: 1; + } + + section:nth-of-type(2) { + -ms-grid-column: 2; } } diff --git a/core/scss/layout/three-column/_sunset-delorean.scss b/core/scss/layout/three-column/_sunset-delorean.scss index 017591adf..aca03074a 100644 --- a/core/scss/layout/three-column/_sunset-delorean.scss +++ b/core/scss/layout/three-column/_sunset-delorean.scss @@ -19,11 +19,12 @@ // Enable grid after sm sizes. @include grid-media('sm') { @include display-grid; - @include grid-columns(1fr 1fr 1fr); + @include grid-columns(1fr 1fr 1fr, false); } > header { @include grid-item-spans(2, span 2, 1, span 1); + -ms-grid-column: 2; } > aside { @@ -32,6 +33,12 @@ > section { @include grid-item-spans(null, null, 2, span 1); + -ms-grid-row: 2; + -ms-grid-column: 2; + } + + section:nth-of-type(2) { + -ms-grid-column: 3; } } diff --git a/core/scss/layout/three-column/_valmer-right.scss b/core/scss/layout/three-column/_valmer-right.scss index cb962bd4d..6ceb1301d 100644 --- a/core/scss/layout/three-column/_valmer-right.scss +++ b/core/scss/layout/three-column/_valmer-right.scss @@ -10,6 +10,10 @@ @include grid-item-spans(1, span 1); } + > div:nth-of-type(2) { + @include grid-item-spans(2, span 1); + } + > div:nth-of-type(3) { @include grid-item-spans(3, span 2); } diff --git a/core/scss/layout/three-column/_valmer.scss b/core/scss/layout/three-column/_valmer.scss index 225e27398..6b01a9fa9 100644 --- a/core/scss/layout/three-column/_valmer.scss +++ b/core/scss/layout/three-column/_valmer.scss @@ -23,12 +23,20 @@ // Enable grid after sm sizes. @include grid-media('sm') { @include display-grid; - @include grid-columns(1fr 1fr 1fr 1fr); + @include grid-columns(1fr 1fr 1fr 1fr, false); } > div:nth-of-type(1) { @include grid-item-spans(1, span 2); } + > div:nth-of-type(2) { + -ms-grid-column: 3; + } + + > div:nth-of-type(3) { + -ms-grid-column: 4; + } + } } diff --git a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss index 4d8832a53..71370bfc8 100644 --- a/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss +++ b/core/scss/utilities/mixins/grid/_responsive-grid-columns.scss @@ -7,10 +7,11 @@ // // $grid-map: A sass map with the columns per breakpoint. // $gutters-map: A complimentary map to the $grid-map. +// $ie-fix-mobile: Set the mobile breakpoint to block for IE 11. // // Styleguide: Mixins.Grid.responsive-grid-columns // -@mixin responsive-grid-columns($grid-map: $responsive-columns-default, $gutters-map: $responsive-gutters-default) { +@mixin responsive-grid-columns($grid-map: $responsive-columns-default, $gutters-map: $responsive-gutters-default, $ie-fix-mobile: true) { @include display-grid; // Loop through each breakpoint generating the media query and grid. @@ -27,4 +28,11 @@ @include grid-columns($columns); } } + + // IE 11 FIX. + @if $ie-fix-mobile { + @include grid-media-only('xs') { + display: block; + } + } } diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 858db8247..99ff04a14 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -591,6 +591,9 @@ sub { -ms-grid-column: 4; } .main-page-layout > *:nth-child(5) { -ms-grid-column: 5; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .main-page-layout { + display: block; } } .kss-sidebar { display: none; @@ -1245,6 +1248,9 @@ body { @media only screen and (min-width: 0) and (max-width: 575px) { #kss-node.kss-home .section--dev-resources .cards-container { display: block; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home .section--dev-resources .cards-container { + display: block; } } #kss-node.kss-home .section--dev-resources .su-card { border: 0; -webkit-box-shadow: none; @@ -1449,6 +1455,9 @@ body { -ms-grid-column: 2; } #kss-node.kss-home .section--more-info ul > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + #kss-node.kss-home .section--more-info ul { + display: block; } } @media only screen and (min-width: 0) and (max-width: 575px) { #kss-node.kss-home .section--more-info ul { display: block; } } diff --git a/kss/builder/decanter/kss-assets/js/kss.js b/kss/builder/decanter/kss-assets/js/kss.js index 0aac71340..003fb8cf4 100644 --- a/kss/builder/decanter/kss-assets/js/kss.js +++ b/kss/builder/decanter/kss-assets/js/kss.js @@ -1,3 +1,13 @@ +// Poly fill for browsers not supporting ES5. +if (window.NodeList && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = function (callback, thisArg) { + thisArg = thisArg || window; + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; +} + (function() { var KssStateGenerator; From 5be0f16635c2293fe6076d81319c4a5f73108519 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Dec 2018 08:47:26 -0800 Subject: [PATCH 081/123] Update core/scss/components/lockup/_lockup.scss Co-Authored-By: sherakama --- core/scss/components/lockup/_lockup.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scss/components/lockup/_lockup.scss b/core/scss/components/lockup/_lockup.scss index 25f395d27..65657f88c 100644 --- a/core/scss/components/lockup/_lockup.scss +++ b/core/scss/components/lockup/_lockup.scss @@ -27,7 +27,7 @@ text-decoration: none; @include grid-media('md') { - @include grid-columns(auto auto 1fr); + @include grid-columns(auto auto 1fr, false); @include grid-rows(auto auto); } } From 3b1be2b0037d4e7a0f736de6772d58769f296859 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Mon, 10 Dec 2018 11:31:47 -0800 Subject: [PATCH 082/123] flexbox layouts for 1col 2col 4col and fw ; 3col to come --- core/css/decanter.css | 2286 ++++++++++++++++- .../scss/layout/flex/four-column/_molive.scss | 11 + core/scss/layout/flex/four-column/index.scss | 11 + core/scss/layout/flex/full-width/_bricks.scss | 11 + core/scss/layout/flex/full-width/_ibeam.scss | 11 + core/scss/layout/flex/full-width/index.scss | 12 + core/scss/layout/flex/index.scss | 15 + core/scss/layout/flex/one-column/_basic.scss | 12 + .../flex/one-column/_centered-container.scss | 16 + core/scss/layout/flex/one-column/index.scss | 12 + .../layout/{ => flex}/three-column/_bars.scss | 4 +- .../{ => flex}/three-column/_battleship.scss | 4 +- .../three-column/_blastila-right.scss | 0 .../layout/flex/three-column/_blastila.scss | 54 + .../{ => flex}/three-column/_chess.scss | 4 +- .../three-column/_cuttoner-right.scss | 0 .../layout/flex/three-column/_cuttoner.scss | 49 + .../three-column/_percles-right.scss | 0 .../layout/flex/three-column/_percles.scss | 32 + .../{ => flex}/three-column/_robot.scss | 4 +- .../three-column/_space-invader.scss | 4 +- .../three-column/_sunset-delorean-right.scss | 0 .../flex/three-column/_sunset-delorean.scss | 36 + .../three-column/_thions-bottom.scss | 0 .../layout/flex/three-column/_thions.scss | 44 + .../three-column/_valmer-right.scss | 0 .../layout/flex/three-column/_valmer.scss | 32 + .../layout/{ => flex}/three-column/index.scss | 4 +- core/scss/layout/flex/two-column/_donies.scss | 11 + .../scss/layout/flex/two-column/_frogger.scss | 11 + .../layout/flex/two-column/_pacman-right.scss | 10 + core/scss/layout/flex/two-column/_pacman.scss | 13 + .../layout/flex/two-column/_plakes-right.scss | 10 + core/scss/layout/flex/two-column/_plakes.scss | 13 + core/scss/layout/flex/two-column/_toucan.scss | 11 + .../layout/flex/two-column/_trunks-right.scss | 10 + core/scss/layout/flex/two-column/_trunks.scss | 13 + .../layout/flex/two-column/_wedge-right.scss | 10 + core/scss/layout/flex/two-column/_wedge.scss | 13 + .../layout/{ => flex}/two-column/index.scss | 4 +- core/scss/layout/four-column/index.scss | 11 - core/scss/layout/full-width/index.scss | 12 - .../{ => grid}/four-column/_molive.scss | 4 +- core/scss/layout/grid/four-column/index.scss | 11 + .../layout/{ => grid}/full-width/_bricks.scss | 4 +- .../layout/{ => grid}/full-width/_ibeam.scss | 4 +- core/scss/layout/grid/full-width/index.scss | 12 + core/scss/layout/grid/index.scss | 15 + .../one-column/_basic.scss} | 4 +- .../one-column/_centered-container.scss | 4 +- core/scss/layout/grid/one-column/index.scss | 12 + core/scss/layout/grid/three-column/_bars.scss | 18 + .../layout/grid/three-column/_battleship.scss | 22 + .../grid/three-column/_blastila-right.scss | 31 + .../{ => grid}/three-column/_blastila.scss | 4 +- .../scss/layout/grid/three-column/_chess.scss | 37 + .../grid/three-column/_cuttoner-right.scss | 22 + .../{ => grid}/three-column/_cuttoner.scss | 4 +- .../grid/three-column/_percles-right.scss | 18 + .../{ => grid}/three-column/_percles.scss | 4 +- .../scss/layout/grid/three-column/_robot.scss | 32 + .../grid/three-column/_space-invader.scss | 27 + .../three-column/_sunset-delorean-right.scss | 23 + .../three-column/_sunset-delorean.scss | 4 +- .../grid/three-column/_thions-bottom.scss | 28 + .../{ => grid}/three-column/_thions.scss | 4 +- .../grid/three-column/_valmer-right.scss | 17 + .../{ => grid}/three-column/_valmer.scss | 4 +- core/scss/layout/grid/three-column/index.scss | 27 + .../layout/{ => grid}/two-column/_donies.scss | 4 +- .../{ => grid}/two-column/_frogger.scss | 4 +- .../{ => grid}/two-column/_pacman-right.scss | 0 .../layout/{ => grid}/two-column/_pacman.scss | 4 +- .../{ => grid}/two-column/_plakes-right.scss | 0 .../layout/{ => grid}/two-column/_plakes.scss | 4 +- .../layout/{ => grid}/two-column/_toucan.scss | 4 +- .../{ => grid}/two-column/_trunks-right.scss | 0 .../layout/{ => grid}/two-column/_trunks.scss | 4 +- .../{ => grid}/two-column/_wedge-right.scss | 0 .../layout/{ => grid}/two-column/_wedge.scss | 4 +- core/scss/layout/grid/two-column/index.scss | 21 + core/scss/layout/index.scss | 7 +- core/scss/layout/one-column/index.scss | 12 - .../four-column/molive/molive-flex.json} | 0 .../four-column/molive/molive-flex.png} | Bin .../flex/four-column/molive/molive-flex.twig | 58 + .../full-width/bricks/bricks-flex.json} | 0 .../full-width/bricks/bricks-flex.png} | Bin .../flex/full-width/bricks/bricks-flex.twig | 60 + .../full-width/ibeam/ibeam-flex.json} | 0 .../full-width/ibeam/ibeam-flex.png} | Bin .../flex/full-width/ibeam/ibeam-flex.twig | 46 + .../one-column/basic/basic-flex.json} | 0 .../one-column/basic/basic-flex.png} | Bin .../flex/one-column/basic/basic-flex.twig | 34 + .../centered-container-flex.json} | 0 .../centered-container-flex.twig | 25 + .../{ => flex}/three-column/bars/bars.json | 0 .../{ => flex}/three-column/bars/bars.png | Bin .../layout/flex/three-column/bars/bars.twig | 31 + .../three-column/battleship/battleship.json | 0 .../three-column/battleship/battleship.png | Bin .../three-column/battleship/battleship.twig | 75 + .../three-column/blastila/blastila-left.png | Bin .../three-column/blastila/blastila-right.png | Bin .../three-column/blastila/blastila.json | 0 .../flex/three-column/blastila/blastila.twig | 65 + .../{ => flex}/three-column/chess/chess.json | 0 .../{ => flex}/three-column/chess/chess.png | Bin .../layout/flex/three-column/chess/chess.twig | 75 + .../three-column/cuttoner/cuttoner-left.png | Bin .../three-column/cuttoner/cuttoner-right.png | Bin .../three-column/cuttoner/cuttoner.json | 0 .../flex/three-column/cuttoner/cuttoner.twig | 58 + .../three-column/percles/percles-left.png | Bin .../three-column/percles/percles-right.png | Bin .../three-column/percles/percles.json | 0 .../flex/three-column/percles/percles.twig | 57 + .../{ => flex}/three-column/robot/robot.json | 0 .../{ => flex}/three-column/robot/robot.png | Bin .../layout/flex/three-column/robot/robot.twig | 48 + .../space-invader/space-invader.json | 0 .../space-invader/space-invader.png | Bin .../space-invader/space-invader.twig | 47 + .../sunset-delorean/sunset-delorean-left.png | Bin .../sunset-delorean/sunset-delorean-right.png | Bin .../sunset-delorean/sunset-delorean.json | 0 .../sunset-delorean/sunset-delorean.twig | 46 + .../three-column/thions/thions-bottom.png | Bin .../three-column/thions/thions-top.png | Bin .../three-column/thions/thions.json | 0 .../flex/three-column/thions/thions.twig | 39 + .../three-column/valmer/valmer-left.png | Bin .../three-column/valmer/valmer-right.png | Bin .../three-column/valmer/valmer.json | 0 .../flex/three-column/valmer/valmer.twig | 44 + .../two-column/donies/donies-flex.json} | 0 .../two-column/donies/donies-flex.png} | Bin .../flex/two-column/donies/donies-flex.twig | 42 + .../two-column/frogger/frogger-flex.json} | 0 .../two-column/frogger/frogger-flex.png} | Bin .../flex/two-column/frogger/frogger-flex.twig | 66 + .../two-column/pacman/pacman-flex.json} | 0 .../flex/two-column/pacman/pacman-flex.twig | 42 + .../two-column/pacman/pacman-left-flex.png} | Bin .../two-column/pacman/pacman-right-flex.png} | Bin .../two-column/plakes/plakes-flex.json} | 0 .../flex/two-column/plakes/plakes-flex.twig | 38 + .../two-column/plakes/plakes-left-flex.png} | Bin .../two-column/plakes/plakes-right-flex.png} | Bin .../two-column/toucan/toucan-flex.json} | 0 .../two-column/toucan/toucan-flex.png} | Bin .../flex/two-column/toucan/toucan-flex.twig | 23 + .../two-column/trunks/trunks-flex.json} | 0 .../flex/two-column/trunks/trunks-flex.twig | 27 + .../two-column/trunks/trunks-left-flex.png} | Bin .../two-column/trunks/trunks-right-flex.png} | Bin .../two-column/wedge/wedge-flex.json} | 0 .../flex/two-column/wedge/wedge-flex.twig | 30 + .../two-column/wedge/wedge-left-flex.png} | Bin .../two-column/wedge/wedge-right-flex.png} | Bin .../grid/four-column/molive/molive.json | 8 + .../layout/grid/four-column/molive/molive.png | Bin 0 -> 4294 bytes .../{ => grid}/four-column/molive/molive.twig | 0 .../layout/grid/full-width/bricks/bricks.json | 8 + .../layout/grid/full-width/bricks/bricks.png | Bin 0 -> 3832 bytes .../{ => grid}/full-width/bricks/bricks.twig | 0 .../layout/grid/full-width/ibeam/ibeam.json | 6 + .../layout/grid/full-width/ibeam/ibeam.png | Bin 0 -> 1978 bytes .../{ => grid}/full-width/ibeam/ibeam.twig | 0 .../layout/grid/one-column/basic/basic.json | 5 + .../layout/grid/one-column/basic/basic.png | Bin 0 -> 1488 bytes .../{ => grid}/one-column/basic/basic.twig | 0 .../centered-container.json | 3 + .../centered-container.twig | 0 .../layout/grid/three-column/bars/bars.json | 5 + .../layout/grid/three-column/bars/bars.png | Bin 0 -> 3298 bytes .../{ => grid}/three-column/bars/bars.twig | 0 .../three-column/battleship/battleship.json | 10 + .../three-column/battleship/battleship.png | Bin 0 -> 4710 bytes .../three-column/battleship/battleship.twig | 0 .../three-column/blastila/blastila-left.png | Bin 0 -> 3864 bytes .../three-column/blastila/blastila-right.png | Bin 0 -> 3735 bytes .../grid/three-column/blastila/blastila.json | 7 + .../three-column/blastila/blastila.twig | 0 .../layout/grid/three-column/chess/chess.json | 10 + .../layout/grid/three-column/chess/chess.png | Bin 0 -> 5046 bytes .../{ => grid}/three-column/chess/chess.twig | 0 .../three-column/cuttoner/cuttoner-left.png | Bin 0 -> 3940 bytes .../three-column/cuttoner/cuttoner-right.png | Bin 0 -> 3851 bytes .../grid/three-column/cuttoner/cuttoner.json | 7 + .../three-column/cuttoner/cuttoner.twig | 0 .../three-column/percles/percles-left.png | Bin 0 -> 3783 bytes .../three-column/percles/percles-right.png | Bin 0 -> 3745 bytes .../grid/three-column/percles/percles.json | 7 + .../three-column/percles/percles.twig | 0 .../layout/grid/three-column/robot/robot.json | 6 + .../layout/grid/three-column/robot/robot.png | Bin 0 -> 3304 bytes .../{ => grid}/three-column/robot/robot.twig | 0 .../space-invader/space-invader.json | 6 + .../space-invader/space-invader.png | Bin 0 -> 3469 bytes .../space-invader/space-invader.twig | 0 .../sunset-delorean/sunset-delorean-left.png | Bin 0 -> 3140 bytes .../sunset-delorean/sunset-delorean-right.png | Bin 0 -> 3054 bytes .../sunset-delorean/sunset-delorean.json | 6 + .../sunset-delorean/sunset-delorean.twig | 0 .../three-column/thions/thions-bottom.png | Bin 0 -> 3564 bytes .../grid/three-column/thions/thions-top.png | Bin 0 -> 3628 bytes .../grid/three-column/thions/thions.json | 7 + .../three-column/thions/thions.twig | 0 .../grid/three-column/valmer/valmer-left.png | Bin 0 -> 4009 bytes .../grid/three-column/valmer/valmer-right.png | Bin 0 -> 3725 bytes .../grid/three-column/valmer/valmer.json | 7 + .../three-column/valmer/valmer.twig | 0 .../layout/grid/two-column/donies/donies.json | 6 + .../layout/grid/two-column/donies/donies.png | Bin 0 -> 3832 bytes .../{ => grid}/two-column/donies/donies.twig | 0 .../grid/two-column/frogger/frogger.json | 9 + .../grid/two-column/frogger/frogger.png | Bin 0 -> 4654 bytes .../two-column/frogger/frogger.twig | 0 .../grid/two-column/pacman/pacman-left.png | Bin 0 -> 3272 bytes .../grid/two-column/pacman/pacman-right.png | Bin 0 -> 3278 bytes .../layout/grid/two-column/pacman/pacman.json | 6 + .../{ => grid}/two-column/pacman/pacman.twig | 0 .../grid/two-column/plakes/plakes-left.png | Bin 0 -> 952 bytes .../grid/two-column/plakes/plakes-right.png | Bin 0 -> 2827 bytes .../layout/grid/two-column/plakes/plakes.json | 5 + .../{ => grid}/two-column/plakes/plakes.twig | 0 .../layout/grid/two-column/toucan/toucan.json | 4 + .../layout/grid/two-column/toucan/toucan.png | Bin 0 -> 2090 bytes .../{ => grid}/two-column/toucan/toucan.twig | 0 .../grid/two-column/trunks/trunks-left.png | Bin 0 -> 2467 bytes .../grid/two-column/trunks/trunks-right.png | Bin 0 -> 2280 bytes .../layout/grid/two-column/trunks/trunks.json | 4 + .../{ => grid}/two-column/trunks/trunks.twig | 0 .../grid/two-column/wedge/wedge-left.png | Bin 0 -> 2084 bytes .../grid/two-column/wedge/wedge-right.png | Bin 0 -> 2188 bytes .../layout/grid/two-column/wedge/wedge.json | 4 + .../{ => grid}/two-column/wedge/wedge.twig | 6 +- 239 files changed, 4412 insertions(+), 100 deletions(-) create mode 100644 core/scss/layout/flex/four-column/_molive.scss create mode 100644 core/scss/layout/flex/four-column/index.scss create mode 100644 core/scss/layout/flex/full-width/_bricks.scss create mode 100644 core/scss/layout/flex/full-width/_ibeam.scss create mode 100644 core/scss/layout/flex/full-width/index.scss create mode 100644 core/scss/layout/flex/index.scss create mode 100644 core/scss/layout/flex/one-column/_basic.scss create mode 100644 core/scss/layout/flex/one-column/_centered-container.scss create mode 100644 core/scss/layout/flex/one-column/index.scss rename core/scss/layout/{ => flex}/three-column/_bars.scss (73%) rename core/scss/layout/{ => flex}/three-column/_battleship.scss (75%) rename core/scss/layout/{ => flex}/three-column/_blastila-right.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_blastila.scss rename core/scss/layout/{ => flex}/three-column/_chess.scss (83%) rename core/scss/layout/{ => flex}/three-column/_cuttoner-right.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_cuttoner.scss rename core/scss/layout/{ => flex}/three-column/_percles-right.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_percles.scss rename core/scss/layout/{ => flex}/three-column/_robot.scss (79%) rename core/scss/layout/{ => flex}/three-column/_space-invader.scss (73%) rename core/scss/layout/{ => flex}/three-column/_sunset-delorean-right.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_sunset-delorean.scss rename core/scss/layout/{ => flex}/three-column/_thions-bottom.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_thions.scss rename core/scss/layout/{ => flex}/three-column/_valmer-right.scss (100%) create mode 100644 core/scss/layout/flex/three-column/_valmer.scss rename core/scss/layout/{ => flex}/three-column/index.scss (80%) create mode 100644 core/scss/layout/flex/two-column/_donies.scss create mode 100644 core/scss/layout/flex/two-column/_frogger.scss create mode 100644 core/scss/layout/flex/two-column/_pacman-right.scss create mode 100644 core/scss/layout/flex/two-column/_pacman.scss create mode 100644 core/scss/layout/flex/two-column/_plakes-right.scss create mode 100644 core/scss/layout/flex/two-column/_plakes.scss create mode 100644 core/scss/layout/flex/two-column/_toucan.scss create mode 100644 core/scss/layout/flex/two-column/_trunks-right.scss create mode 100644 core/scss/layout/flex/two-column/_trunks.scss create mode 100644 core/scss/layout/flex/two-column/_wedge-right.scss create mode 100644 core/scss/layout/flex/two-column/_wedge.scss rename core/scss/layout/{ => flex}/two-column/index.scss (73%) delete mode 100644 core/scss/layout/four-column/index.scss delete mode 100644 core/scss/layout/full-width/index.scss rename core/scss/layout/{ => grid}/four-column/_molive.scss (83%) create mode 100644 core/scss/layout/grid/four-column/index.scss rename core/scss/layout/{ => grid}/full-width/_bricks.scss (76%) rename core/scss/layout/{ => grid}/full-width/_ibeam.scss (58%) create mode 100644 core/scss/layout/grid/full-width/index.scss create mode 100644 core/scss/layout/grid/index.scss rename core/scss/layout/{one-column/basic.scss => grid/one-column/_basic.scss} (71%) rename core/scss/layout/{ => grid}/one-column/_centered-container.scss (55%) create mode 100644 core/scss/layout/grid/one-column/index.scss create mode 100644 core/scss/layout/grid/three-column/_bars.scss create mode 100644 core/scss/layout/grid/three-column/_battleship.scss create mode 100644 core/scss/layout/grid/three-column/_blastila-right.scss rename core/scss/layout/{ => grid}/three-column/_blastila.scss (89%) create mode 100644 core/scss/layout/grid/three-column/_chess.scss create mode 100644 core/scss/layout/grid/three-column/_cuttoner-right.scss rename core/scss/layout/{ => grid}/three-column/_cuttoner.scss (87%) create mode 100644 core/scss/layout/grid/three-column/_percles-right.scss rename core/scss/layout/{ => grid}/three-column/_percles.scss (79%) create mode 100644 core/scss/layout/grid/three-column/_robot.scss create mode 100644 core/scss/layout/grid/three-column/_space-invader.scss create mode 100644 core/scss/layout/grid/three-column/_sunset-delorean-right.scss rename core/scss/layout/{ => grid}/three-column/_sunset-delorean.scss (80%) create mode 100644 core/scss/layout/grid/three-column/_thions-bottom.scss rename core/scss/layout/{ => grid}/three-column/_thions.scss (86%) create mode 100644 core/scss/layout/grid/three-column/_valmer-right.scss rename core/scss/layout/{ => grid}/three-column/_valmer.scss (80%) create mode 100644 core/scss/layout/grid/three-column/index.scss rename core/scss/layout/{ => grid}/two-column/_donies.scss (70%) rename core/scss/layout/{ => grid}/two-column/_frogger.scss (70%) rename core/scss/layout/{ => grid}/two-column/_pacman-right.scss (100%) rename core/scss/layout/{ => grid}/two-column/_pacman.scss (86%) rename core/scss/layout/{ => grid}/two-column/_plakes-right.scss (100%) rename core/scss/layout/{ => grid}/two-column/_plakes.scss (86%) rename core/scss/layout/{ => grid}/two-column/_toucan.scss (63%) rename core/scss/layout/{ => grid}/two-column/_trunks-right.scss (100%) rename core/scss/layout/{ => grid}/two-column/_trunks.scss (86%) rename core/scss/layout/{ => grid}/two-column/_wedge-right.scss (100%) rename core/scss/layout/{ => grid}/two-column/_wedge.scss (86%) create mode 100644 core/scss/layout/grid/two-column/index.scss delete mode 100644 core/scss/layout/one-column/index.scss rename core/templates/layout/{four-column/molive/molive.json => flex/four-column/molive/molive-flex.json} (100%) rename core/templates/layout/{four-column/molive/molive.png => flex/four-column/molive/molive-flex.png} (100%) create mode 100644 core/templates/layout/flex/four-column/molive/molive-flex.twig rename core/templates/layout/{full-width/bricks/bricks.json => flex/full-width/bricks/bricks-flex.json} (100%) rename core/templates/layout/{full-width/bricks/bricks.png => flex/full-width/bricks/bricks-flex.png} (100%) create mode 100644 core/templates/layout/flex/full-width/bricks/bricks-flex.twig rename core/templates/layout/{full-width/ibeam/ibeam.json => flex/full-width/ibeam/ibeam-flex.json} (100%) rename core/templates/layout/{full-width/ibeam/ibeam.png => flex/full-width/ibeam/ibeam-flex.png} (100%) create mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam-flex.twig rename core/templates/layout/{one-column/basic/basic.json => flex/one-column/basic/basic-flex.json} (100%) rename core/templates/layout/{one-column/basic/basic.png => flex/one-column/basic/basic-flex.png} (100%) create mode 100644 core/templates/layout/flex/one-column/basic/basic-flex.twig rename core/templates/layout/{centered-container/centered-container.json => flex/one-column/centered-container/centered-container-flex.json} (100%) create mode 100644 core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig rename core/templates/layout/{ => flex}/three-column/bars/bars.json (100%) rename core/templates/layout/{ => flex}/three-column/bars/bars.png (100%) create mode 100644 core/templates/layout/flex/three-column/bars/bars.twig rename core/templates/layout/{ => flex}/three-column/battleship/battleship.json (100%) rename core/templates/layout/{ => flex}/three-column/battleship/battleship.png (100%) create mode 100644 core/templates/layout/flex/three-column/battleship/battleship.twig rename core/templates/layout/{ => flex}/three-column/blastila/blastila-left.png (100%) rename core/templates/layout/{ => flex}/three-column/blastila/blastila-right.png (100%) rename core/templates/layout/{ => flex}/three-column/blastila/blastila.json (100%) create mode 100644 core/templates/layout/flex/three-column/blastila/blastila.twig rename core/templates/layout/{ => flex}/three-column/chess/chess.json (100%) rename core/templates/layout/{ => flex}/three-column/chess/chess.png (100%) create mode 100644 core/templates/layout/flex/three-column/chess/chess.twig rename core/templates/layout/{ => flex}/three-column/cuttoner/cuttoner-left.png (100%) rename core/templates/layout/{ => flex}/three-column/cuttoner/cuttoner-right.png (100%) rename core/templates/layout/{ => flex}/three-column/cuttoner/cuttoner.json (100%) create mode 100644 core/templates/layout/flex/three-column/cuttoner/cuttoner.twig rename core/templates/layout/{ => flex}/three-column/percles/percles-left.png (100%) rename core/templates/layout/{ => flex}/three-column/percles/percles-right.png (100%) rename core/templates/layout/{ => flex}/three-column/percles/percles.json (100%) create mode 100644 core/templates/layout/flex/three-column/percles/percles.twig rename core/templates/layout/{ => flex}/three-column/robot/robot.json (100%) rename core/templates/layout/{ => flex}/three-column/robot/robot.png (100%) create mode 100644 core/templates/layout/flex/three-column/robot/robot.twig rename core/templates/layout/{ => flex}/three-column/space-invader/space-invader.json (100%) rename core/templates/layout/{ => flex}/three-column/space-invader/space-invader.png (100%) create mode 100644 core/templates/layout/flex/three-column/space-invader/space-invader.twig rename core/templates/layout/{ => flex}/three-column/sunset-delorean/sunset-delorean-left.png (100%) rename core/templates/layout/{ => flex}/three-column/sunset-delorean/sunset-delorean-right.png (100%) rename core/templates/layout/{ => flex}/three-column/sunset-delorean/sunset-delorean.json (100%) create mode 100644 core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig rename core/templates/layout/{ => flex}/three-column/thions/thions-bottom.png (100%) rename core/templates/layout/{ => flex}/three-column/thions/thions-top.png (100%) rename core/templates/layout/{ => flex}/three-column/thions/thions.json (100%) create mode 100644 core/templates/layout/flex/three-column/thions/thions.twig rename core/templates/layout/{ => flex}/three-column/valmer/valmer-left.png (100%) rename core/templates/layout/{ => flex}/three-column/valmer/valmer-right.png (100%) rename core/templates/layout/{ => flex}/three-column/valmer/valmer.json (100%) create mode 100644 core/templates/layout/flex/three-column/valmer/valmer.twig rename core/templates/layout/{two-column/donies/donies.json => flex/two-column/donies/donies-flex.json} (100%) rename core/templates/layout/{two-column/donies/donies.png => flex/two-column/donies/donies-flex.png} (100%) create mode 100644 core/templates/layout/flex/two-column/donies/donies-flex.twig rename core/templates/layout/{two-column/frogger/frogger.json => flex/two-column/frogger/frogger-flex.json} (100%) rename core/templates/layout/{two-column/frogger/frogger.png => flex/two-column/frogger/frogger-flex.png} (100%) create mode 100644 core/templates/layout/flex/two-column/frogger/frogger-flex.twig rename core/templates/layout/{two-column/pacman/pacman.json => flex/two-column/pacman/pacman-flex.json} (100%) create mode 100644 core/templates/layout/flex/two-column/pacman/pacman-flex.twig rename core/templates/layout/{two-column/pacman/pacman-left.png => flex/two-column/pacman/pacman-left-flex.png} (100%) rename core/templates/layout/{two-column/pacman/pacman-right.png => flex/two-column/pacman/pacman-right-flex.png} (100%) rename core/templates/layout/{two-column/plakes/plakes.json => flex/two-column/plakes/plakes-flex.json} (100%) create mode 100644 core/templates/layout/flex/two-column/plakes/plakes-flex.twig rename core/templates/layout/{two-column/plakes/plakes-left.png => flex/two-column/plakes/plakes-left-flex.png} (100%) rename core/templates/layout/{two-column/plakes/plakes-right.png => flex/two-column/plakes/plakes-right-flex.png} (100%) rename core/templates/layout/{two-column/toucan/toucan.json => flex/two-column/toucan/toucan-flex.json} (100%) rename core/templates/layout/{two-column/toucan/toucan.png => flex/two-column/toucan/toucan-flex.png} (100%) create mode 100644 core/templates/layout/flex/two-column/toucan/toucan-flex.twig rename core/templates/layout/{two-column/trunks/trunks.json => flex/two-column/trunks/trunks-flex.json} (100%) create mode 100644 core/templates/layout/flex/two-column/trunks/trunks-flex.twig rename core/templates/layout/{two-column/trunks/trunks-left.png => flex/two-column/trunks/trunks-left-flex.png} (100%) rename core/templates/layout/{two-column/trunks/trunks-right.png => flex/two-column/trunks/trunks-right-flex.png} (100%) rename core/templates/layout/{two-column/wedge/wedge.json => flex/two-column/wedge/wedge-flex.json} (100%) create mode 100644 core/templates/layout/flex/two-column/wedge/wedge-flex.twig rename core/templates/layout/{two-column/wedge/wedge-left.png => flex/two-column/wedge/wedge-left-flex.png} (100%) rename core/templates/layout/{two-column/wedge/wedge-right.png => flex/two-column/wedge/wedge-right-flex.png} (100%) create mode 100644 core/templates/layout/grid/four-column/molive/molive.json create mode 100644 core/templates/layout/grid/four-column/molive/molive.png rename core/templates/layout/{ => grid}/four-column/molive/molive.twig (100%) create mode 100644 core/templates/layout/grid/full-width/bricks/bricks.json create mode 100644 core/templates/layout/grid/full-width/bricks/bricks.png rename core/templates/layout/{ => grid}/full-width/bricks/bricks.twig (100%) create mode 100644 core/templates/layout/grid/full-width/ibeam/ibeam.json create mode 100644 core/templates/layout/grid/full-width/ibeam/ibeam.png rename core/templates/layout/{ => grid}/full-width/ibeam/ibeam.twig (100%) create mode 100644 core/templates/layout/grid/one-column/basic/basic.json create mode 100644 core/templates/layout/grid/one-column/basic/basic.png rename core/templates/layout/{ => grid}/one-column/basic/basic.twig (100%) create mode 100644 core/templates/layout/grid/one-column/centered-container/centered-container.json rename core/templates/layout/{ => grid/one-column}/centered-container/centered-container.twig (100%) create mode 100644 core/templates/layout/grid/three-column/bars/bars.json create mode 100644 core/templates/layout/grid/three-column/bars/bars.png rename core/templates/layout/{ => grid}/three-column/bars/bars.twig (100%) create mode 100644 core/templates/layout/grid/three-column/battleship/battleship.json create mode 100644 core/templates/layout/grid/three-column/battleship/battleship.png rename core/templates/layout/{ => grid}/three-column/battleship/battleship.twig (100%) create mode 100644 core/templates/layout/grid/three-column/blastila/blastila-left.png create mode 100644 core/templates/layout/grid/three-column/blastila/blastila-right.png create mode 100644 core/templates/layout/grid/three-column/blastila/blastila.json rename core/templates/layout/{ => grid}/three-column/blastila/blastila.twig (100%) create mode 100644 core/templates/layout/grid/three-column/chess/chess.json create mode 100644 core/templates/layout/grid/three-column/chess/chess.png rename core/templates/layout/{ => grid}/three-column/chess/chess.twig (100%) create mode 100644 core/templates/layout/grid/three-column/cuttoner/cuttoner-left.png create mode 100644 core/templates/layout/grid/three-column/cuttoner/cuttoner-right.png create mode 100644 core/templates/layout/grid/three-column/cuttoner/cuttoner.json rename core/templates/layout/{ => grid}/three-column/cuttoner/cuttoner.twig (100%) create mode 100644 core/templates/layout/grid/three-column/percles/percles-left.png create mode 100644 core/templates/layout/grid/three-column/percles/percles-right.png create mode 100644 core/templates/layout/grid/three-column/percles/percles.json rename core/templates/layout/{ => grid}/three-column/percles/percles.twig (100%) create mode 100644 core/templates/layout/grid/three-column/robot/robot.json create mode 100644 core/templates/layout/grid/three-column/robot/robot.png rename core/templates/layout/{ => grid}/three-column/robot/robot.twig (100%) create mode 100644 core/templates/layout/grid/three-column/space-invader/space-invader.json create mode 100644 core/templates/layout/grid/three-column/space-invader/space-invader.png rename core/templates/layout/{ => grid}/three-column/space-invader/space-invader.twig (100%) create mode 100644 core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean-left.png create mode 100644 core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean-right.png create mode 100644 core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.json rename core/templates/layout/{ => grid}/three-column/sunset-delorean/sunset-delorean.twig (100%) create mode 100644 core/templates/layout/grid/three-column/thions/thions-bottom.png create mode 100644 core/templates/layout/grid/three-column/thions/thions-top.png create mode 100644 core/templates/layout/grid/three-column/thions/thions.json rename core/templates/layout/{ => grid}/three-column/thions/thions.twig (100%) create mode 100644 core/templates/layout/grid/three-column/valmer/valmer-left.png create mode 100644 core/templates/layout/grid/three-column/valmer/valmer-right.png create mode 100644 core/templates/layout/grid/three-column/valmer/valmer.json rename core/templates/layout/{ => grid}/three-column/valmer/valmer.twig (100%) create mode 100644 core/templates/layout/grid/two-column/donies/donies.json create mode 100644 core/templates/layout/grid/two-column/donies/donies.png rename core/templates/layout/{ => grid}/two-column/donies/donies.twig (100%) create mode 100644 core/templates/layout/grid/two-column/frogger/frogger.json create mode 100644 core/templates/layout/grid/two-column/frogger/frogger.png rename core/templates/layout/{ => grid}/two-column/frogger/frogger.twig (100%) create mode 100644 core/templates/layout/grid/two-column/pacman/pacman-left.png create mode 100644 core/templates/layout/grid/two-column/pacman/pacman-right.png create mode 100644 core/templates/layout/grid/two-column/pacman/pacman.json rename core/templates/layout/{ => grid}/two-column/pacman/pacman.twig (100%) create mode 100644 core/templates/layout/grid/two-column/plakes/plakes-left.png create mode 100644 core/templates/layout/grid/two-column/plakes/plakes-right.png create mode 100644 core/templates/layout/grid/two-column/plakes/plakes.json rename core/templates/layout/{ => grid}/two-column/plakes/plakes.twig (100%) create mode 100644 core/templates/layout/grid/two-column/toucan/toucan.json create mode 100644 core/templates/layout/grid/two-column/toucan/toucan.png rename core/templates/layout/{ => grid}/two-column/toucan/toucan.twig (100%) create mode 100644 core/templates/layout/grid/two-column/trunks/trunks-left.png create mode 100644 core/templates/layout/grid/two-column/trunks/trunks-right.png create mode 100644 core/templates/layout/grid/two-column/trunks/trunks.json rename core/templates/layout/{ => grid}/two-column/trunks/trunks.twig (100%) create mode 100644 core/templates/layout/grid/two-column/wedge/wedge-left.png create mode 100644 core/templates/layout/grid/two-column/wedge/wedge-right.png create mode 100644 core/templates/layout/grid/two-column/wedge/wedge.json rename core/templates/layout/{ => grid}/two-column/wedge/wedge.twig (79%) diff --git a/core/css/decanter.css b/core/css/decanter.css index 08b4e1c1d..149357554 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2851,6 +2851,2284 @@ dfn { font-style: italic; margin-top: 0; } +.layout-bars > div { + margin: 0 auto; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-bars > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-bars > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-bars > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-bars > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-bars > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-bars > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-bars > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-bars > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 32px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 32px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } } + @media only screen and (min-width: 576px) { + .layout-bars > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-bars > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 32px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 32px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 768px) { + .layout-bars > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-bars > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 36px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 36px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 992px) { + .layout-bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-bars > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 36px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 36px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } + @media only screen and (min-width: 1200px) { + .layout-bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-bars > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 36px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 36px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } + @media only screen and (min-width: 1500px) { + .layout-bars > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-bars > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-bars > div { + grid-column-gap: 38px; } + .layout-bars > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-bars > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-bars > div { + grid-row-gap: 38px; } + .layout-bars > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-bars > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-bars > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-bars > div > *:nth-child(3) { + -ms-grid-column: 3; } } + +.layout-battleship > div { + margin: 0 auto; + display: grid; + display: -ms-grid; } + @media only screen and (min-width: 0) { + .layout-battleship > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-battleship > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-battleship > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-battleship > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-battleship > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-battleship > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-battleship > div { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr; } + .layout-battleship > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 32px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 32px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } } + @media only screen and (min-width: 576px) { + .layout-battleship > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-battleship > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 32px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 32px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 768px) { + .layout-battleship > div { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-battleship > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 36px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 36px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 992px) { + .layout-battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-battleship > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 36px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 36px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } + @media only screen and (min-width: 1200px) { + .layout-battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-battleship > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 36px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 36px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } + @media only screen and (min-width: 1500px) { + .layout-battleship > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-battleship > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-battleship > div { + grid-column-gap: 38px; } + .layout-battleship > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-battleship > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-battleship > div { + grid-row-gap: 38px; } + .layout-battleship > div > * { + margin-top: 0; + margin-bottom: 0; } } + .layout-battleship > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-battleship > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-battleship > div > *:nth-child(3) { + -ms-grid-column: 3; } } + .layout-battleship > div :first-child { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; } + +.layout-blastila > header { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-blastila > header { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-blastila > header { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-blastila > header { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-blastila > header { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-blastila > header { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-blastila > header { + max-width: 1462px; } } + +.layout-blastila > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-blastila > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-blastila > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-blastila > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-blastila > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-blastila > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-blastila > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-blastila > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 32px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 32px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-blastila > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 32px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 32px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-blastila > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 36px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 36px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-blastila > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 36px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 36px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-blastila > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 36px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 36px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-blastila > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-blastila > div { + grid-column-gap: 38px; } + .layout-blastila > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-blastila > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-blastila > div { + grid-row-gap: 38px; } + .layout-blastila > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-blastila > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-blastila > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-blastila > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-blastila > div > *:nth-child(3) { + -ms-grid-column: 3; } } + .layout-blastila > div > aside { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } + .layout-blastila > div > section { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 2; } + .layout-blastila > div > div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + .layout-blastila > div div ~ div { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-blastila--right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } + +.layout-blastila--right > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 1; } + +.layout-blastila--right > div > div { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-blastila--right > div div ~ div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-chess > header, +.layout-chess > footer { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-chess > header, + .layout-chess > footer { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-chess > header, + .layout-chess > footer { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-chess > header, + .layout-chess > footer { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-chess > header, + .layout-chess > footer { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-chess > header, + .layout-chess > footer { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-chess > header, + .layout-chess > footer { + max-width: 1462px; } } + +.layout-chess > section { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-chess > section { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-chess > section { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-chess > section { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-chess > section { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-chess > section { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-chess > section { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-chess > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 32px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 32px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-chess > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 32px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 32px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-chess > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 36px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 36px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-chess > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 36px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 36px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-chess > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 36px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 36px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-chess > section > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-chess > section { + grid-column-gap: 38px; } + .layout-chess > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-chess > section > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-chess > section { + grid-row-gap: 38px; } + .layout-chess > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-chess > section { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-chess > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-chess > section > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 992px) { + .layout-chess > section { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-chess > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-chess > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-chess > section > *:nth-child(3) { + -ms-grid-column: 3; } } + +.layout-cuttoner > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-cuttoner > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-cuttoner > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-cuttoner > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-cuttoner > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 32px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 32px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 32px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 32px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 36px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 36px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-cuttoner > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 36px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 36px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-cuttoner > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 36px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 36px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div { + grid-column-gap: 38px; } + .layout-cuttoner > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div { + grid-row-gap: 38px; } + .layout-cuttoner > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-cuttoner > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-cuttoner > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-cuttoner > div > *:nth-child(3) { + -ms-grid-column: 3; } } + @media only screen and (min-width: 0) { + .layout-cuttoner > div > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 32px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-cuttoner > div > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 36px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-cuttoner > div > section > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-cuttoner > div > section { + grid-column-gap: 38px; } + .layout-cuttoner > div > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-cuttoner > div > section > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-cuttoner > div > section { + grid-row-gap: 38px; } + .layout-cuttoner > div > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } + .layout-cuttoner > div > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-cuttoner > div > section > *:nth-child(2) { + -ms-grid-column: 2; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > section > header, + .layout-cuttoner > div > section > footer { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; } } + @media only screen and (min-width: 576px) { + .layout-cuttoner > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; } } + +@media only screen and (min-width: 576px) { + .layout-cuttoner--right > div > section { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: 2; } } + +@media only screen and (min-width: 576px) { + .layout-cuttoner--right > div > aside { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } } + +.layout-percles > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-percles > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-percles > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-percles > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-percles > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-percles > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-percles > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-percles > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 32px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 32px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-percles > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 32px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 32px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-percles > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 36px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 36px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-percles > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 36px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 36px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-percles > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 36px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 36px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-percles > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-percles > div { + grid-column-gap: 38px; } + .layout-percles > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-percles > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-percles > div { + grid-row-gap: 38px; } + .layout-percles > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-percles > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-percles > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-percles > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-percles > div > *:nth-child(3) { + -ms-grid-column: 3; } } + > .layout-percles > div:first-child { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; } + .layout-percles > div > header { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: 2; } + +> .layout-percles--right > div:first-child { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-percles--right > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-robot > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-robot > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-robot > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-robot > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-robot > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-robot > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-robot > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-robot > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 32px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 32px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-robot > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 32px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 32px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-robot > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 36px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 36px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-robot > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 36px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 36px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-robot > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 36px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 36px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-robot > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-robot > div { + grid-column-gap: 38px; } + .layout-robot > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-robot > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-robot > div { + grid-row-gap: 38px; } + .layout-robot > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-robot > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-robot > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-robot > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-robot > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-robot > div > *:nth-child(4) { + -ms-grid-column: 4; } } + .layout-robot > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: 4; } + .layout-robot > div > div:nth-of-type(2) { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: 2; } + +.layout-space-invader > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-space-invader > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-space-invader > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-space-invader > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-space-invader > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-space-invader > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-space-invader > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-space-invader > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 32px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 32px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-space-invader > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 32px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 32px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-space-invader > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 36px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 36px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-space-invader > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 36px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 36px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-space-invader > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 36px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 36px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-space-invader > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-space-invader > div { + grid-column-gap: 38px; } + .layout-space-invader > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-space-invader > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-space-invader > div { + grid-row-gap: 38px; } + .layout-space-invader > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-space-invader > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-space-invader > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-space-invader > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-space-invader > div > *:nth-child(3) { + -ms-grid-column: 3; } } + .layout-space-invader > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 3; + -ms-grid-column-span: 3; } + +.layout-sunset-delorean > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-sunset-delorean > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-sunset-delorean > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-sunset-delorean > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-sunset-delorean > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-sunset-delorean > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-sunset-delorean > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 32px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 32px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 32px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 32px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-sunset-delorean > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-sunset-delorean > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-sunset-delorean > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 36px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-sunset-delorean > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-sunset-delorean > div { + grid-column-gap: 38px; } + .layout-sunset-delorean > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-sunset-delorean > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-sunset-delorean > div { + grid-row-gap: 38px; } + .layout-sunset-delorean > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-sunset-delorean > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } + .layout-sunset-delorean > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-sunset-delorean > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-sunset-delorean > div > *:nth-child(3) { + -ms-grid-column: 3; } } + .layout-sunset-delorean > div > header { + -ms-grid-column: 2; + grid-column: 2 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + .layout-sunset-delorean > div > aside { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } + .layout-sunset-delorean > div > section { + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-sunset-delorean--right > div > header { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-sunset-delorean--right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } + +.layout-sunset-delorean--right > div > section { + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions > div { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-thions > div { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-thions > div { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-thions > div { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-thions > div { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-thions > div { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-thions > div { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-thions > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 32px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 32px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-thions > div > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 32px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 32px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-thions > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 36px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 36px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-thions > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 36px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 36px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-thions > div > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 36px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 36px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-thions > div > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-thions > div { + grid-column-gap: 38px; } + .layout-thions > div > * { + margin-right: 0; + margin-left: 0; } } + .layout-thions > div > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-thions > div { + grid-row-gap: 38px; } + .layout-thions > div > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-thions > div { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + .layout-thions > div > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-thions > div > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-thions > div > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-thions > div > *:nth-child(4) { + -ms-grid-column: 4; } + .layout-thions > div > *:nth-child(5) { + -ms-grid-column: 5; } + .layout-thions > div > *:nth-child(6) { + -ms-grid-column: 6; } + .layout-thions > div > *:nth-child(7) { + -ms-grid-column: 7; } + .layout-thions > div > *:nth-child(8) { + -ms-grid-column: 8; } + .layout-thions > div > *:nth-child(9) { + -ms-grid-column: 9; } + .layout-thions > div > *:nth-child(10) { + -ms-grid-column: 10; } + .layout-thions > div > *:nth-child(11) { + -ms-grid-column: 11; } + .layout-thions > div > *:nth-child(12) { + -ms-grid-column: 12; } } + .layout-thions > div > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 6; + -ms-grid-column-span: 6; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + .layout-thions > div > div:nth-of-type(2) { + -ms-grid-column: 7; + grid-column: 7 / span 6; + -ms-grid-column-span: 6; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + .layout-thions > div > div:nth-of-type(3) { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + .layout-thions > div > div:nth-of-type(4) { + -ms-grid-column: 5; + grid-column: 5 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + .layout-thions > div > div:nth-of-type(5) { + -ms-grid-column: 9; + grid-column: 9 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions--bottom > div > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions--bottom > div > div:nth-of-type(2) { + -ms-grid-column: 5; + grid-column: 5 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions--bottom > div > div:nth-of-type(3) { + -ms-grid-column: 9; + grid-column: 9 / span 4; + -ms-grid-column-span: 4; + -ms-grid-row: 1; + grid-row: 1 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions--bottom > div > div:nth-of-type(4) { + -ms-grid-column: 1; + grid-column: 1 / span 6; + -ms-grid-column-span: 6; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-thions--bottom > div > div:nth-of-type(5) { + -ms-grid-column: 7; + grid-column: 7 / span 6; + -ms-grid-column-span: 6; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-valmer > header, +.layout-valmer > footer, +.layout-valmer > section { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + max-width: 1462px; } } + @media only screen and (min-width: 0) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 32px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 32px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 16px; + margin-left: 16px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 32px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 16px; + margin-bottom: 16px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 32px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 18px; + margin-left: 18px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 18px; + margin-bottom: 18px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 36px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 19px; + margin-left: 19px; } + @supports (grid-column-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-column-gap: 38px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-right: 0; + margin-left: 0; } } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 19px; + margin-bottom: 19px; } + @supports (grid-row-gap: 20px) { + .layout-valmer > header, + .layout-valmer > footer, + .layout-valmer > section { + grid-row-gap: 38px; } + .layout-valmer > header > *, + .layout-valmer > footer > *, + .layout-valmer > section > * { + margin-top: 0; + margin-bottom: 0; } } } + +@media only screen and (min-width: 576px) { + .layout-valmer > section { + display: grid; + display: -ms-grid; + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } + .layout-valmer > section > *:nth-child(1) { + -ms-grid-column: 1; } + .layout-valmer > section > *:nth-child(2) { + -ms-grid-column: 2; } + .layout-valmer > section > *:nth-child(3) { + -ms-grid-column: 3; } + .layout-valmer > section > *:nth-child(4) { + -ms-grid-column: 4; } } + +.layout-valmer > section > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; } + +.layout-valmer--right > section > div:nth-of-type(1) { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; } + +.layout-valmer--right > section > div:nth-of-type(3) { + -ms-grid-column: 3; + grid-column: 3 / span 2; + -ms-grid-column-span: 2; } + +.layout-pacman-flex--right > div { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.layout-plakes-flex--right > div { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.layout-trunks-flex--right > section { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.layout-wedge-flex--right > section { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.centered-container { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .centered-container { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .centered-container { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .centered-container { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .centered-container { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .centered-container { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .centered-container { + max-width: 1462px; } } + .layout-ibeam > section { margin: 0 auto; } @media only screen and (min-width: 0) { @@ -7986,13 +10264,7 @@ a { -ms-grid-columns: auto auto 1fr; grid-template-columns: auto auto 1fr; -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } - .su-lockup > *:nth-child(1) { - -ms-grid-column: 1; } - .su-lockup > *:nth-child(2) { - -ms-grid-column: 2; } - .su-lockup > *:nth-child(3) { - -ms-grid-column: 3; } } + grid-template-rows: auto auto; } } .su-lockup__wordmark { display: inline-block; diff --git a/core/scss/layout/flex/four-column/_molive.scss b/core/scss/layout/flex/four-column/_molive.scss new file mode 100644 index 000000000..c9bc9a837 --- /dev/null +++ b/core/scss/layout/flex/four-column/_molive.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Molive +// +// A four column collapsible layout with a centered header and footer. +// +// Markup: ../../../../../templates/layout/flex/four-column/molive/molive-flex.twig +// +// Style guide: Layout.Flex.4Column.Molive +// diff --git a/core/scss/layout/flex/four-column/index.scss b/core/scss/layout/flex/four-column/index.scss new file mode 100644 index 000000000..1bc4773ac --- /dev/null +++ b/core/scss/layout/flex/four-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Four Columns +// +// Four column layouts that use Flexbox. +// +// Style guide: Layout.Flex.4Column +// +@import + 'molive'; diff --git a/core/scss/layout/flex/full-width/_bricks.scss b/core/scss/layout/flex/full-width/_bricks.scss new file mode 100644 index 000000000..1bcdfecd1 --- /dev/null +++ b/core/scss/layout/flex/full-width/_bricks.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Bricks +// +// A Full width by 2 column collapsible layout that repeats. +// +// Markup: ../../../../../templates/layout/flex/full-width/bricks/bricks-flex.twig +// +// Style guide: Layout.Flex.FullWidth.Bricks +// diff --git a/core/scss/layout/flex/full-width/_ibeam.scss b/core/scss/layout/flex/full-width/_ibeam.scss new file mode 100644 index 000000000..5e2aa30db --- /dev/null +++ b/core/scss/layout/flex/full-width/_ibeam.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// I-Beam +// +// A Full width by 1 column collapsible layout that repeats. +// +// Markup: ../../../../../templates/layout/flex/full-width/ibeam/ibeam-flex.twig +// +// Style guide: Layout.Flex.FullWidth.IBeam +// diff --git a/core/scss/layout/flex/full-width/index.scss b/core/scss/layout/flex/full-width/index.scss new file mode 100644 index 000000000..8a7e40bca --- /dev/null +++ b/core/scss/layout/flex/full-width/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// Full Width +// +// Full window width layouts that use Flexbox. +// +// Style guide: Layout.Flex.FullWidth +// +@import + 'ibeam', + 'bricks'; diff --git a/core/scss/layout/flex/index.scss b/core/scss/layout/flex/index.scss new file mode 100644 index 000000000..25699874b --- /dev/null +++ b/core/scss/layout/flex/index.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +// +// Flex Layouts +// +// Weight: -70 +// +// Style guide: Layout.Flex + +@import + 'full-width/index', + 'four-column/index', + 'three-column/index', + 'two-column/index', + 'one-column/index'; diff --git a/core/scss/layout/flex/one-column/_basic.scss b/core/scss/layout/flex/one-column/_basic.scss new file mode 100644 index 000000000..9ef2cd6a2 --- /dev/null +++ b/core/scss/layout/flex/one-column/_basic.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// Basic +// +// A single column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/flex/one-column/basic/basic-flex.twig +// +// Style guide: Layout.Flex.1Column.Basic +// diff --git a/core/scss/layout/flex/one-column/_centered-container.scss b/core/scss/layout/flex/one-column/_centered-container.scss new file mode 100644 index 000000000..5e2c73131 --- /dev/null +++ b/core/scss/layout/flex/one-column/_centered-container.scss @@ -0,0 +1,16 @@ +@charset 'UTF-8'; + +// +// Centered Container +// +// Centers the first child element of which this class is applied to. +// +// Markup: ../../../../../templates/layout/flex/one-column/centered-container/centered-container-flex.twig +// +// Weight: 1 +// +// Style guide: Layout.Flex.1Column.Centered Container +// +.centered-container { + @include centered-column; +} diff --git a/core/scss/layout/flex/one-column/index.scss b/core/scss/layout/flex/one-column/index.scss new file mode 100644 index 000000000..b9a85e2a7 --- /dev/null +++ b/core/scss/layout/flex/one-column/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// One Column +// +// One column layouts that use Flexbox. +// +// Style guide: Layout.Flex.1Column +// +@import + 'basic', + 'centered-container'; diff --git a/core/scss/layout/three-column/_bars.scss b/core/scss/layout/flex/three-column/_bars.scss similarity index 73% rename from core/scss/layout/three-column/_bars.scss rename to core/scss/layout/flex/three-column/_bars.scss index d52d7ba78..9c32534cf 100644 --- a/core/scss/layout/three-column/_bars.scss +++ b/core/scss/layout/flex/three-column/_bars.scss @@ -6,9 +6,9 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/three-column/bars/bars.twig +// Markup: ../../../../../templates/layout/flex/three-column/bars/bars.twig // -// Style guide: Layout.3Column.Bars +// Style guide: Layout.Flex.3Column.Bars // .layout-bars { > div { diff --git a/core/scss/layout/three-column/_battleship.scss b/core/scss/layout/flex/three-column/_battleship.scss similarity index 75% rename from core/scss/layout/three-column/_battleship.scss rename to core/scss/layout/flex/three-column/_battleship.scss index 3a1c17e93..03b77faa5 100644 --- a/core/scss/layout/three-column/_battleship.scss +++ b/core/scss/layout/flex/three-column/_battleship.scss @@ -6,9 +6,9 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/three-column/battleship/battleship.twig +// Markup: ../../../../../templates/layout/flex/three-column/battleship/battleship.twig // -// Style guide: Layout.3Column.Battleship +// Style guide: Layout.Flex.3Column.Battleship // .layout-battleship { > div { diff --git a/core/scss/layout/three-column/_blastila-right.scss b/core/scss/layout/flex/three-column/_blastila-right.scss similarity index 100% rename from core/scss/layout/three-column/_blastila-right.scss rename to core/scss/layout/flex/three-column/_blastila-right.scss diff --git a/core/scss/layout/flex/three-column/_blastila.scss b/core/scss/layout/flex/three-column/_blastila.scss new file mode 100644 index 000000000..459645201 --- /dev/null +++ b/core/scss/layout/flex/three-column/_blastila.scss @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +// +// Blastila +// +// A complext three column layout with a centered max width header a left +// sidebar and a mini two column with header content area. +// +// Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila.twig +// +// Style guide: Layout.Flex.3Column.Blastila +// +.layout-blastila { + + > header { + @include centered-column; + } + + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable the grid on md and higher. + // let everything be one column on xs and sm. + @include grid-media('md') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > aside { + // First column, for 1 column, but down two columns. + @include grid-item-spans(1, span 1, 1, span 2); + } + + > section { + // Row 2, column 2 for 2 cells. + @include grid-item-spans(2, span 2, 2); + } + + > div { + // Row 2, column 2 for 1 cell. + @include grid-item-spans(2, span 1, 2, span 1); + } + + div ~ div { + // Row 2, column 3 for 1 cell. + @include grid-item-spans(3, span 1, 2, span 1); + } + } + + + + +} diff --git a/core/scss/layout/three-column/_chess.scss b/core/scss/layout/flex/three-column/_chess.scss similarity index 83% rename from core/scss/layout/three-column/_chess.scss rename to core/scss/layout/flex/three-column/_chess.scss index ea12a03c3..59edf7d40 100644 --- a/core/scss/layout/three-column/_chess.scss +++ b/core/scss/layout/flex/three-column/_chess.scss @@ -6,9 +6,9 @@ // A complext three column layout with full width header and footer and a // 6 cell 3 column 2 row middle. // -// Markup: ../../../../../templates/layout/three-column/chess/chess.twig +// Markup: ../../../../../templates/layout/flex/three-column/chess/chess.twig // -// Style guide: Layout.3Column.Chess +// Style guide: Layout.Flex.3Column.Chess // .layout-chess { diff --git a/core/scss/layout/three-column/_cuttoner-right.scss b/core/scss/layout/flex/three-column/_cuttoner-right.scss similarity index 100% rename from core/scss/layout/three-column/_cuttoner-right.scss rename to core/scss/layout/flex/three-column/_cuttoner-right.scss diff --git a/core/scss/layout/flex/three-column/_cuttoner.scss b/core/scss/layout/flex/three-column/_cuttoner.scss new file mode 100644 index 000000000..5bcd73920 --- /dev/null +++ b/core/scss/layout/flex/three-column/_cuttoner.scss @@ -0,0 +1,49 @@ +@charset "UTF-8"; + +// +// Cuttoner +// +// A complext three column layout with a sidebar and a 2 column content area +// with header and footer. +// +// Markup: ../../../../../templates/layout/flex/three-column/cuttoner/cuttoner.twig +// +// Style guide: Layout.Flex.3Column.Cuttoner +// +.layout-cuttoner { + + > div { + @include centered-column; + @include responsive-grid-gap; + + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > section { + @include responsive-grid-gap; + + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + @include display-grid; + @include grid-columns(1fr 1fr); + } + + > header, + > footer { + @include grid-media('sm') { + @include grid-item-spans(1, span 2); + } + } + } + + > aside { + @include grid-media('sm') { + @include grid-item-spans(3, span 1); + } + } + + } + +} diff --git a/core/scss/layout/three-column/_percles-right.scss b/core/scss/layout/flex/three-column/_percles-right.scss similarity index 100% rename from core/scss/layout/three-column/_percles-right.scss rename to core/scss/layout/flex/three-column/_percles-right.scss diff --git a/core/scss/layout/flex/three-column/_percles.scss b/core/scss/layout/flex/three-column/_percles.scss new file mode 100644 index 000000000..b1379287f --- /dev/null +++ b/core/scss/layout/flex/three-column/_percles.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +// +// Percles +// +// A complext three column layout +// +// Markup: ../../../../../templates/layout/flex/three-column/percles/percles.twig +// +// Style guide: Layout.Flex.3Column.Percles +// +.layout-percles { + + > div { + @include centered-column; + @include responsive-grid-gap; + + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > &:first-child { + @include grid-item-spans(1, span 1); + } + + > header { + @include grid-item-spans(2, span 2); + } + } + +} diff --git a/core/scss/layout/three-column/_robot.scss b/core/scss/layout/flex/three-column/_robot.scss similarity index 79% rename from core/scss/layout/three-column/_robot.scss rename to core/scss/layout/flex/three-column/_robot.scss index 6690e1b23..e2df91127 100644 --- a/core/scss/layout/three-column/_robot.scss +++ b/core/scss/layout/flex/three-column/_robot.scss @@ -5,9 +5,9 @@ // // A complext three column layout. // -// Markup: ../../../../../templates/layout/three-column/robot/robot.twig +// Markup: ../../../../../templates/layout/flex/three-column/robot/robot.twig // -// Style guide: Layout.3Column.Robot +// Style guide: Layout.Flex.3Column.Robot // .layout-robot { > div { diff --git a/core/scss/layout/three-column/_space-invader.scss b/core/scss/layout/flex/three-column/_space-invader.scss similarity index 73% rename from core/scss/layout/three-column/_space-invader.scss rename to core/scss/layout/flex/three-column/_space-invader.scss index 4e8d31587..5003b42b9 100644 --- a/core/scss/layout/three-column/_space-invader.scss +++ b/core/scss/layout/flex/three-column/_space-invader.scss @@ -5,9 +5,9 @@ // // A complext three column layout. // -// Markup: ../../../../../templates/layout/three-column/space-invader/space-invader.twig +// Markup: ../../../../../templates/layout/flex/three-column/space-invader/space-invader.twig // -// Style guide: Layout.3Column.SpaceInvader +// Style guide: Layout.Flex.3Column.SpaceInvader // .layout-space-invader { > div { diff --git a/core/scss/layout/three-column/_sunset-delorean-right.scss b/core/scss/layout/flex/three-column/_sunset-delorean-right.scss similarity index 100% rename from core/scss/layout/three-column/_sunset-delorean-right.scss rename to core/scss/layout/flex/three-column/_sunset-delorean-right.scss diff --git a/core/scss/layout/flex/three-column/_sunset-delorean.scss b/core/scss/layout/flex/three-column/_sunset-delorean.scss new file mode 100644 index 000000000..cc738f039 --- /dev/null +++ b/core/scss/layout/flex/three-column/_sunset-delorean.scss @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +// +// Sunset Delorean +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig +// +// Style guide: Layout.Flex.3Column.SunsetDelorean +// +.layout-sunset-delorean { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(2, span 2, 1, span 1); + } + + > aside { + @include grid-item-spans(1, span 1, 1, span 2); + } + + > section { + @include grid-item-spans(null, null, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/_thions-bottom.scss b/core/scss/layout/flex/three-column/_thions-bottom.scss similarity index 100% rename from core/scss/layout/three-column/_thions-bottom.scss rename to core/scss/layout/flex/three-column/_thions-bottom.scss diff --git a/core/scss/layout/flex/three-column/_thions.scss b/core/scss/layout/flex/three-column/_thions.scss new file mode 100644 index 000000000..348ea372e --- /dev/null +++ b/core/scss/layout/flex/three-column/_thions.scss @@ -0,0 +1,44 @@ +@charset "UTF-8"; + +// +// Thions +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/flex/three-column/thions/thions.twig +// +// Style guide: Layout.Flex.3Column.Thions +// +.layout-thions { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns; + } + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 6, 1, span 1); + } + + > div:nth-of-type(2) { + @include grid-item-spans(7, span 6, 1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(1, span 4, 2, span 1); + } + + > div:nth-of-type(4) { + @include grid-item-spans(5, span 4, 2, span 1); + } + + > div:nth-of-type(5) { + @include grid-item-spans(9, span 4, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/_valmer-right.scss b/core/scss/layout/flex/three-column/_valmer-right.scss similarity index 100% rename from core/scss/layout/three-column/_valmer-right.scss rename to core/scss/layout/flex/three-column/_valmer-right.scss diff --git a/core/scss/layout/flex/three-column/_valmer.scss b/core/scss/layout/flex/three-column/_valmer.scss new file mode 100644 index 000000000..0560958e0 --- /dev/null +++ b/core/scss/layout/flex/three-column/_valmer.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +// +// Valmer +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/flex/three-column/valmer/valmer.twig +// +// Style guide: Layout.Flex.3Column.Valmer +// +.layout-valmer { + > header, + > footer, + > section { + @include centered-column; + @include responsive-grid-gap; + } + + > section { + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr 1fr); + } + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 2); + } + + } +} diff --git a/core/scss/layout/three-column/index.scss b/core/scss/layout/flex/three-column/index.scss similarity index 80% rename from core/scss/layout/three-column/index.scss rename to core/scss/layout/flex/three-column/index.scss index 600d1adb0..07a2856cd 100644 --- a/core/scss/layout/three-column/index.scss +++ b/core/scss/layout/flex/three-column/index.scss @@ -3,9 +3,9 @@ // // Three Columns // -// Three column layouts +// Three column layouts that use Flexbox. // -// Style guide: Layout.3Column +// Style guide: Layout.Flex.3Column // @import 'bars', diff --git a/core/scss/layout/flex/two-column/_donies.scss b/core/scss/layout/flex/two-column/_donies.scss new file mode 100644 index 000000000..7bf72ead2 --- /dev/null +++ b/core/scss/layout/flex/two-column/_donies.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Donies +// +// A two column centered 50/50 template with header and footer. +// +// Markup: ../../../../../templates/layout/flex/two-column/donies/donies-flex.twig +// +// Style guide: Layout.Flex.2Column.Donies +// diff --git a/core/scss/layout/flex/two-column/_frogger.scss b/core/scss/layout/flex/two-column/_frogger.scss new file mode 100644 index 000000000..df72de394 --- /dev/null +++ b/core/scss/layout/flex/two-column/_frogger.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Frogger +// +// A two column centered 50/50 template with header and footer repeated. +// +// Markup: ../../../../../templates/layout/flex/two-column/frogger/frogger-flex.twig +// +// Style guide: Layout.Flex.2Column.Frogger +// diff --git a/core/scss/layout/flex/two-column/_pacman-right.scss b/core/scss/layout/flex/two-column/_pacman-right.scss new file mode 100644 index 000000000..532349796 --- /dev/null +++ b/core/scss/layout/flex/two-column/_pacman-right.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// PacMan Right - Variant +// +.layout-pacman-flex--right { + > div { + flex-direction: row-reverse; + } +} diff --git a/core/scss/layout/flex/two-column/_pacman.scss b/core/scss/layout/flex/two-column/_pacman.scss new file mode 100644 index 000000000..e391ec18f --- /dev/null +++ b/core/scss/layout/flex/two-column/_pacman.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// PacMan +// +// A two column centered 33/66 template with header and footer. +// +// .layout-pacman-flex--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/flex/two-column/pacman/pacman-flex.twig +// +// Style guide: Layout.Flex.2Column.Pacman +// diff --git a/core/scss/layout/flex/two-column/_plakes-right.scss b/core/scss/layout/flex/two-column/_plakes-right.scss new file mode 100644 index 000000000..7ed6cef10 --- /dev/null +++ b/core/scss/layout/flex/two-column/_plakes-right.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// Plakes Right - Variant +// +.layout-plakes-flex--right { + > div { + flex-direction: row-reverse; + } +} diff --git a/core/scss/layout/flex/two-column/_plakes.scss b/core/scss/layout/flex/two-column/_plakes.scss new file mode 100644 index 000000000..1889491f5 --- /dev/null +++ b/core/scss/layout/flex/two-column/_plakes.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// Plakes +// +// A two column centered 25/75 template with header +// +// .layout-plakes-flex--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/flex/two-column/plakes/plakes-flex.twig +// +// Style guide: Layout.Flex.2Column.Plakes +// diff --git a/core/scss/layout/flex/two-column/_toucan.scss b/core/scss/layout/flex/two-column/_toucan.scss new file mode 100644 index 000000000..16edaa15f --- /dev/null +++ b/core/scss/layout/flex/two-column/_toucan.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Toucan +// +// A two column centered 50/50 template. +// +// Markup: ../../../../../templates/layout/flex/two-column/toucan/toucan-flex.twig +// +// Style guide: Layout.Flex.2Column.Toucan +// diff --git a/core/scss/layout/flex/two-column/_trunks-right.scss b/core/scss/layout/flex/two-column/_trunks-right.scss new file mode 100644 index 000000000..e97865281 --- /dev/null +++ b/core/scss/layout/flex/two-column/_trunks-right.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// Trunks Right - Variant +// +.layout-trunks-flex--right { + > section { + flex-direction: row-reverse; + } +} diff --git a/core/scss/layout/flex/two-column/_trunks.scss b/core/scss/layout/flex/two-column/_trunks.scss new file mode 100644 index 000000000..48a08fcb5 --- /dev/null +++ b/core/scss/layout/flex/two-column/_trunks.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// Trunks +// +// A two column centered 33/66 template. +// +// .layout-trunks-flex--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/flex/two-column/trunks/trunks-flex.twig +// +// Style guide: Layout.Flex.2Column.Trunks +// diff --git a/core/scss/layout/flex/two-column/_wedge-right.scss b/core/scss/layout/flex/two-column/_wedge-right.scss new file mode 100644 index 000000000..09e6370a2 --- /dev/null +++ b/core/scss/layout/flex/two-column/_wedge-right.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; + +// +// Wedge Right - Variant +// +.layout-wedge-flex--right { + > section { + flex-direction: row-reverse; + } +} diff --git a/core/scss/layout/flex/two-column/_wedge.scss b/core/scss/layout/flex/two-column/_wedge.scss new file mode 100644 index 000000000..dc6375600 --- /dev/null +++ b/core/scss/layout/flex/two-column/_wedge.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +// +// Wedge +// +// A two column centered 25/75 template. +// +// .layout-wedge-flex--right - Right sidebar variant. +// +// Markup: ../../../../../templates/layout/flex/two-column/wedge/wedge-flex.twig +// +// Style guide: Layout.Flex.2Column.Wedge +// diff --git a/core/scss/layout/two-column/index.scss b/core/scss/layout/flex/two-column/index.scss similarity index 73% rename from core/scss/layout/two-column/index.scss rename to core/scss/layout/flex/two-column/index.scss index 7e3c3c165..b594184f7 100644 --- a/core/scss/layout/two-column/index.scss +++ b/core/scss/layout/flex/two-column/index.scss @@ -3,9 +3,9 @@ // // Two Columns // -// Two column layouts +// Two column layouts that use Flexbox. // -// Style guide: Layout.2Column +// Style guide: Layout.Flex.2Column // @import 'donies', diff --git a/core/scss/layout/four-column/index.scss b/core/scss/layout/four-column/index.scss deleted file mode 100644 index 3375b562d..000000000 --- a/core/scss/layout/four-column/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -@charset "UTF-8"; - -// -// Four Columns -// -// Four column layouts -// -// Style guide: Layout.4Column -// -@import - 'molive'; diff --git a/core/scss/layout/full-width/index.scss b/core/scss/layout/full-width/index.scss deleted file mode 100644 index 00e531ead..000000000 --- a/core/scss/layout/full-width/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@charset "UTF-8"; - -// -// Full Width -// -// Full Window Width layouts -// -// Style guide: Layout.FullWidth -// -@import - 'ibeam', - 'bricks'; diff --git a/core/scss/layout/four-column/_molive.scss b/core/scss/layout/grid/four-column/_molive.scss similarity index 83% rename from core/scss/layout/four-column/_molive.scss rename to core/scss/layout/grid/four-column/_molive.scss index 437769925..e02db5a79 100644 --- a/core/scss/layout/four-column/_molive.scss +++ b/core/scss/layout/grid/four-column/_molive.scss @@ -5,9 +5,9 @@ // // A four column collapsible layout with a centered header and footer. // -// Markup: ../../../../../templates/layout/four-column/molive/molive.twig +// Markup: ../../../../../templates/layout/grid/four-column/molive/molive.twig // -// Style guide: Layout.4Column.Molive +// Style guide: Layout.Grid.4Column.Molive // .layout-molive { diff --git a/core/scss/layout/grid/four-column/index.scss b/core/scss/layout/grid/four-column/index.scss new file mode 100644 index 000000000..55fdea9fa --- /dev/null +++ b/core/scss/layout/grid/four-column/index.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +// +// Four Columns +// +// Four column layouts that use CSS Grid. +// +// Style guide: Layout.Grid.4Column +// +@import + 'molive'; diff --git a/core/scss/layout/full-width/_bricks.scss b/core/scss/layout/grid/full-width/_bricks.scss similarity index 76% rename from core/scss/layout/full-width/_bricks.scss rename to core/scss/layout/grid/full-width/_bricks.scss index 7512c0c61..b8fbd5651 100644 --- a/core/scss/layout/full-width/_bricks.scss +++ b/core/scss/layout/grid/full-width/_bricks.scss @@ -5,9 +5,9 @@ // // A Full width by 2 column collapsible layout that repeats. // -// Markup: ../../../../../templates/layout/full-width/bricks/bricks.twig +// Markup: ../../../../../templates/layout/grid/full-width/bricks/bricks.twig // -// Style guide: Layout.FullWidth.Bricks +// Style guide: Layout.Grid.FullWidth.Bricks // .layout-bricks { diff --git a/core/scss/layout/full-width/_ibeam.scss b/core/scss/layout/grid/full-width/_ibeam.scss similarity index 58% rename from core/scss/layout/full-width/_ibeam.scss rename to core/scss/layout/grid/full-width/_ibeam.scss index 445639675..e38041ff3 100644 --- a/core/scss/layout/full-width/_ibeam.scss +++ b/core/scss/layout/grid/full-width/_ibeam.scss @@ -5,9 +5,9 @@ // // A Full width by 1 column collapsible layout that repeats. // -// Markup: ../../../../../templates/layout/full-width/ibeam/ibeam.twig +// Markup: ../../../../../templates/layout/grid/full-width/ibeam/ibeam.twig // -// Style guide: Layout.FullWidth.IBeam +// Style guide: Layout.Grid.FullWidth.IBeam // .layout-ibeam { > section { diff --git a/core/scss/layout/grid/full-width/index.scss b/core/scss/layout/grid/full-width/index.scss new file mode 100644 index 000000000..8e9cf01d8 --- /dev/null +++ b/core/scss/layout/grid/full-width/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// Full Width +// +// Full window width layouts that use CSS Grid. +// +// Style guide: Layout.Grid.FullWidth +// +@import + 'ibeam', + 'bricks'; diff --git a/core/scss/layout/grid/index.scss b/core/scss/layout/grid/index.scss new file mode 100644 index 000000000..351e98fe3 --- /dev/null +++ b/core/scss/layout/grid/index.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +// +// Grid Layouts +// +// Weight: -70 +// +// Style guide: Layout.Grid + +@import + 'full-width/index', + 'four-column/index', + 'three-column/index', + 'two-column/index', + 'one-column/index'; diff --git a/core/scss/layout/one-column/basic.scss b/core/scss/layout/grid/one-column/_basic.scss similarity index 71% rename from core/scss/layout/one-column/basic.scss rename to core/scss/layout/grid/one-column/_basic.scss index a620c440c..74dffff84 100644 --- a/core/scss/layout/one-column/basic.scss +++ b/core/scss/layout/grid/one-column/_basic.scss @@ -6,9 +6,9 @@ // A single column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/one-column/basic/basic.twig +// Markup: ../../../../../templates/layout/grid/one-column/basic/basic.twig // -// Style guide: Layout.1Column.Basic +// Style guide: Layout.Grid.1Column.Basic // .layout-basic { diff --git a/core/scss/layout/one-column/_centered-container.scss b/core/scss/layout/grid/one-column/_centered-container.scss similarity index 55% rename from core/scss/layout/one-column/_centered-container.scss rename to core/scss/layout/grid/one-column/_centered-container.scss index 80f8cbf7b..7036c349c 100644 --- a/core/scss/layout/one-column/_centered-container.scss +++ b/core/scss/layout/grid/one-column/_centered-container.scss @@ -5,11 +5,11 @@ // // Centers the first child element of which this class is applied to. // -// Markup: ../../templates/layout/centered-container/centered-container.twig +// Markup: ../../../../../templates/layout/grid/one-column/centered-container/centered-container.twig // // Weight: 1 // -// Style guide: Layout.Centered Container +// Style guide: Layout.Grid.1Column.Centered Container // .centered-container { @include centered-column; diff --git a/core/scss/layout/grid/one-column/index.scss b/core/scss/layout/grid/one-column/index.scss new file mode 100644 index 000000000..f571c8bcc --- /dev/null +++ b/core/scss/layout/grid/one-column/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// One Column +// +// One column layouts that use CSS Grid. +// +// Style guide: Layout.Grid.1Column +// +@import + 'basic', + 'centered-container'; diff --git a/core/scss/layout/grid/three-column/_bars.scss b/core/scss/layout/grid/three-column/_bars.scss new file mode 100644 index 000000000..03ab386a8 --- /dev/null +++ b/core/scss/layout/grid/three-column/_bars.scss @@ -0,0 +1,18 @@ +@charset "UTF-8"; + +// +// Bars +// +// A three column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/grid/three-column/bars/bars.twig +// +// Style guide: Layout.Grid.3Column.Bars +// +.layout-bars { + > div { + @include centered-column; + @include responsive-grid-columns($responsive-columns-three); + } +} diff --git a/core/scss/layout/grid/three-column/_battleship.scss b/core/scss/layout/grid/three-column/_battleship.scss new file mode 100644 index 000000000..7fad3ba25 --- /dev/null +++ b/core/scss/layout/grid/three-column/_battleship.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +// +// Battleship +// +// A three column cell with header and footer. This layout has a single column +// that is centered on the page with a max width determined by the breakpoints. +// +// Markup: ../../../../../templates/layout/grid/three-column/battleship/battleship.twig +// +// Style guide: Layout.Grid.3Column.Battleship +// +.layout-battleship { + > div { + @include centered-column; + @include responsive-grid-columns($responsive-columns-three); + + :first-child { + @include grid-item-spans(1, span 2); + } + } +} diff --git a/core/scss/layout/grid/three-column/_blastila-right.scss b/core/scss/layout/grid/three-column/_blastila-right.scss new file mode 100644 index 000000000..1daf8a482 --- /dev/null +++ b/core/scss/layout/grid/three-column/_blastila-right.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +// +// Blastila Right - Variant +// +.layout-blastila--right { + + > div { + + > aside { + // First column, for 1 column, but down two columns. + @include grid-item-spans(3, span 1, 1, span 2); + } + + > section { + // Row 2, column 2 for 2 cells. + @include grid-item-spans(1, span 2, 1); + } + + > div { + // Row 2, column 2 for 1 cell. + @include grid-item-spans(1, span 1, 2, span 1); + } + + div ~ div { + // Row 2, column 3 for 1 cell. + @include grid-item-spans(2, span 1, 2, span 1); + } + } + +} diff --git a/core/scss/layout/three-column/_blastila.scss b/core/scss/layout/grid/three-column/_blastila.scss similarity index 89% rename from core/scss/layout/three-column/_blastila.scss rename to core/scss/layout/grid/three-column/_blastila.scss index 1cfc42146..b4f2dd604 100644 --- a/core/scss/layout/three-column/_blastila.scss +++ b/core/scss/layout/grid/three-column/_blastila.scss @@ -8,9 +8,9 @@ // // .layout-blastila--right - Right sidebar version // -// Markup: ../../../../../templates/layout/three-column/blastila/blastila.twig +// Markup: ../../../../../templates/layout/grid/three-column/blastila/blastila.twig // -// Style guide: Layout.3Column.Blastila +// Style guide: Layout.Grid.3Column.Blastila // .layout-blastila { diff --git a/core/scss/layout/grid/three-column/_chess.scss b/core/scss/layout/grid/three-column/_chess.scss new file mode 100644 index 000000000..4e44da32f --- /dev/null +++ b/core/scss/layout/grid/three-column/_chess.scss @@ -0,0 +1,37 @@ +@charset "UTF-8"; + +// +// Chess +// +// A complext three column layout with full width header and footer and a +// 6 cell 3 column 2 row middle. +// +// Markup: ../../../../../templates/layout/grid/three-column/chess/chess.twig +// +// Style guide: Layout.Grid.3Column.Chess +// +.layout-chess { + + > header, + > footer { + @include centered-column; + } + + > section { + @include centered-column; + @include responsive-grid-gap; + + // Enable the grid on md and higher. + // let everything be one column on xs and sm. + @include grid-media('md') { + @include display-grid; + @include grid-columns(1fr 1fr); + } + + @include grid-media('lg') { + @include grid-columns(1fr 1fr 1fr); + } + + } + +} diff --git a/core/scss/layout/grid/three-column/_cuttoner-right.scss b/core/scss/layout/grid/three-column/_cuttoner-right.scss new file mode 100644 index 000000000..3a6c3a5e2 --- /dev/null +++ b/core/scss/layout/grid/three-column/_cuttoner-right.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +// +// Cuttoner Right - Variant +// +.layout-cuttoner--right { + + > div { + > section { + @include grid-media('sm') { + @include grid-item-spans(2, span 2); + } + } + + > aside { + @include grid-media('sm') { + @include grid-item-spans(1, span 1, 1, span 1); + } + } + } + +} diff --git a/core/scss/layout/three-column/_cuttoner.scss b/core/scss/layout/grid/three-column/_cuttoner.scss similarity index 87% rename from core/scss/layout/three-column/_cuttoner.scss rename to core/scss/layout/grid/three-column/_cuttoner.scss index 4f322468f..cc7f1cc48 100644 --- a/core/scss/layout/three-column/_cuttoner.scss +++ b/core/scss/layout/grid/three-column/_cuttoner.scss @@ -8,9 +8,9 @@ // // .layout-cuttoner--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/three-column/cuttoner/cuttoner.twig +// Markup: ../../../../../templates/layout/grid/three-column/cuttoner/cuttoner.twig // -// Style guide: Layout.3Column.Cuttoner +// Style guide: Layout.Grid.3Column.Cuttoner // .layout-cuttoner { diff --git a/core/scss/layout/grid/three-column/_percles-right.scss b/core/scss/layout/grid/three-column/_percles-right.scss new file mode 100644 index 000000000..356b25450 --- /dev/null +++ b/core/scss/layout/grid/three-column/_percles-right.scss @@ -0,0 +1,18 @@ +@charset "UTF-8"; + +// +// Percles Right - Variant +// +.layout-percles--right { + + > div { + > &:first-child { + @include grid-item-spans(3, span 1, 1, span 1); + } + + > header { + @include grid-item-spans(1, span 2, 1, span 1); + } + } + +} diff --git a/core/scss/layout/three-column/_percles.scss b/core/scss/layout/grid/three-column/_percles.scss similarity index 79% rename from core/scss/layout/three-column/_percles.scss rename to core/scss/layout/grid/three-column/_percles.scss index 5ad21c26b..b0de911af 100644 --- a/core/scss/layout/three-column/_percles.scss +++ b/core/scss/layout/grid/three-column/_percles.scss @@ -7,9 +7,9 @@ // // .layout-percles--right - Right side variant. // -// Markup: ../../../../../templates/layout/three-column/percles/percles.twig +// Markup: ../../../../../templates/layout/grid/three-column/percles/percles.twig // -// Style guide: Layout.3Column.Percles +// Style guide: Layout.Grid.3Column.Percles // .layout-percles { diff --git a/core/scss/layout/grid/three-column/_robot.scss b/core/scss/layout/grid/three-column/_robot.scss new file mode 100644 index 000000000..421cb9843 --- /dev/null +++ b/core/scss/layout/grid/three-column/_robot.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +// +// Robot +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/grid/three-column/robot/robot.twig +// +// Style guide: Layout.Grid.3Column.Robot +// +.layout-robot { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(1, span 4); + } + + > div:nth-of-type(2) { + @include grid-item-spans(2, span 2); + } + + } +} diff --git a/core/scss/layout/grid/three-column/_space-invader.scss b/core/scss/layout/grid/three-column/_space-invader.scss new file mode 100644 index 000000000..8c0431680 --- /dev/null +++ b/core/scss/layout/grid/three-column/_space-invader.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +// +// Space Invader +// +// A complext three column layout. +// +// Markup: ../../../../../templates/layout/grid/three-column/space-invader/space-invader.twig +// +// Style guide: Layout.Grid.3Column.SpaceInvader +// +.layout-space-invader { + > div { + @include centered-column; + @include responsive-grid-gap; + + // Enable grid after sm sizes. + @include grid-media('sm') { + @include display-grid; + @include grid-columns(1fr 1fr 1fr); + } + + > header { + @include grid-item-spans(1, span 3); + } + } +} diff --git a/core/scss/layout/grid/three-column/_sunset-delorean-right.scss b/core/scss/layout/grid/three-column/_sunset-delorean-right.scss new file mode 100644 index 000000000..64f61bd4a --- /dev/null +++ b/core/scss/layout/grid/three-column/_sunset-delorean-right.scss @@ -0,0 +1,23 @@ +@charset "UTF-8"; + +// +// Sunset Delorean Right - Variant +// +.layout-sunset-delorean--right { + + > div { + + > header { + @include grid-item-spans(1, span 2, 1, span 1); + } + + > aside { + @include grid-item-spans(3, span 1, 1, span 2); + } + + > section { + @include grid-item-spans(null, null, 2, span 1); + } + + } +} diff --git a/core/scss/layout/three-column/_sunset-delorean.scss b/core/scss/layout/grid/three-column/_sunset-delorean.scss similarity index 80% rename from core/scss/layout/three-column/_sunset-delorean.scss rename to core/scss/layout/grid/three-column/_sunset-delorean.scss index 017591adf..f7372e3a5 100644 --- a/core/scss/layout/three-column/_sunset-delorean.scss +++ b/core/scss/layout/grid/three-column/_sunset-delorean.scss @@ -7,9 +7,9 @@ // // .layout-sunset-delorean--right - Right side variant // -// Markup: ../../../../../templates/layout/three-column/sunset-delorean/sunset-delorean.twig +// Markup: ../../../../../templates/layout/grid/three-column/sunset-delorean/sunset-delorean.twig // -// Style guide: Layout.3Column.SunsetDelorean +// Style guide: Layout.Grid.3Column.SunsetDelorean // .layout-sunset-delorean { > div { diff --git a/core/scss/layout/grid/three-column/_thions-bottom.scss b/core/scss/layout/grid/three-column/_thions-bottom.scss new file mode 100644 index 000000000..acf29ecbe --- /dev/null +++ b/core/scss/layout/grid/three-column/_thions-bottom.scss @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +// +// Thions Bottom - Variant +// +.layout-thions--bottom { + > div { + > div:nth-of-type(1) { + @include grid-item-spans(1, span 4, 1, span 1); + } + + > div:nth-of-type(2) { + @include grid-item-spans(5, span 4, 1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(9, span 4, 1, span 1); + } + + > div:nth-of-type(4) { + @include grid-item-spans(1, span 6, 2, span 1); + } + + > div:nth-of-type(5) { + @include grid-item-spans(7, span 6, 2, span 1); + } + } +} diff --git a/core/scss/layout/three-column/_thions.scss b/core/scss/layout/grid/three-column/_thions.scss similarity index 86% rename from core/scss/layout/three-column/_thions.scss rename to core/scss/layout/grid/three-column/_thions.scss index 3893c406b..d37ad56e7 100644 --- a/core/scss/layout/three-column/_thions.scss +++ b/core/scss/layout/grid/three-column/_thions.scss @@ -7,9 +7,9 @@ // // .layout-thions--bottom - A bottom heavy variant. // -// Markup: ../../../../../templates/layout/three-column/thions/thions.twig +// Markup: ../../../../../templates/layout/grid/three-column/thions/thions.twig // -// Style guide: Layout.3Column.Thions +// Style guide: Layout.Grid.3Column.Thions // .layout-thions { > div { diff --git a/core/scss/layout/grid/three-column/_valmer-right.scss b/core/scss/layout/grid/three-column/_valmer-right.scss new file mode 100644 index 000000000..cb962bd4d --- /dev/null +++ b/core/scss/layout/grid/three-column/_valmer-right.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// +// Valmer Right - Variant +// +.layout-valmer--right { + > section { + + > div:nth-of-type(1) { + @include grid-item-spans(1, span 1); + } + + > div:nth-of-type(3) { + @include grid-item-spans(3, span 2); + } + } +} diff --git a/core/scss/layout/three-column/_valmer.scss b/core/scss/layout/grid/three-column/_valmer.scss similarity index 80% rename from core/scss/layout/three-column/_valmer.scss rename to core/scss/layout/grid/three-column/_valmer.scss index 225e27398..b18f17b5a 100644 --- a/core/scss/layout/three-column/_valmer.scss +++ b/core/scss/layout/grid/three-column/_valmer.scss @@ -7,9 +7,9 @@ // // .layout-valmer--right - A right heavy variant. // -// Markup: ../../../../../templates/layout/three-column/valmer/valmer.twig +// Markup: ../../../../../templates/layout/grid/three-column/valmer/valmer.twig // -// Style guide: Layout.3Column.Valmer +// Style guide: Layout.Grid.3Column.Valmer // .layout-valmer { > header, diff --git a/core/scss/layout/grid/three-column/index.scss b/core/scss/layout/grid/three-column/index.scss new file mode 100644 index 000000000..ee2ecfb20 --- /dev/null +++ b/core/scss/layout/grid/three-column/index.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +// +// Three Columns +// +// Three column layouts that use CSS Grid. +// +// Style guide: Layout.Grid.3Column +// +@import + 'bars', + 'battleship', + 'blastila', + 'blastila-right', + 'chess', + 'cuttoner', + 'cuttoner-right', + 'percles', + 'percles-right', + 'robot', + 'space-invader', + 'sunset-delorean', + 'sunset-delorean-right', + 'thions', + 'thions-bottom', + 'valmer', + 'valmer-right'; diff --git a/core/scss/layout/two-column/_donies.scss b/core/scss/layout/grid/two-column/_donies.scss similarity index 70% rename from core/scss/layout/two-column/_donies.scss rename to core/scss/layout/grid/two-column/_donies.scss index 350c6810d..231c54228 100644 --- a/core/scss/layout/two-column/_donies.scss +++ b/core/scss/layout/grid/two-column/_donies.scss @@ -5,9 +5,9 @@ // // A two column centered 50/50 template with header and footer. // -// Markup: ../../../../../templates/layout/two-column/donies/donies.twig +// Markup: ../../../../../templates/layout/grid/two-column/donies/donies.twig // -// Style guide: Layout.2Column.Donies +// Style guide: Layout.Grid.2Column.Donies // .layout-donies { diff --git a/core/scss/layout/two-column/_frogger.scss b/core/scss/layout/grid/two-column/_frogger.scss similarity index 70% rename from core/scss/layout/two-column/_frogger.scss rename to core/scss/layout/grid/two-column/_frogger.scss index aa9322140..cfa2b74f0 100644 --- a/core/scss/layout/two-column/_frogger.scss +++ b/core/scss/layout/grid/two-column/_frogger.scss @@ -5,9 +5,9 @@ // // A two column centered 50/50 template with header and footer repeated. // -// Markup: ../../../../../templates/layout/two-column/frogger/frogger.twig +// Markup: ../../../../../templates/layout/grid/two-column/frogger/frogger.twig // -// Style guide: Layout.2Column.Frogger +// Style guide: Layout.Grid.2Column.Frogger // .layout-frogger { diff --git a/core/scss/layout/two-column/_pacman-right.scss b/core/scss/layout/grid/two-column/_pacman-right.scss similarity index 100% rename from core/scss/layout/two-column/_pacman-right.scss rename to core/scss/layout/grid/two-column/_pacman-right.scss diff --git a/core/scss/layout/two-column/_pacman.scss b/core/scss/layout/grid/two-column/_pacman.scss similarity index 86% rename from core/scss/layout/two-column/_pacman.scss rename to core/scss/layout/grid/two-column/_pacman.scss index 1e5d12671..f4acb438a 100644 --- a/core/scss/layout/two-column/_pacman.scss +++ b/core/scss/layout/grid/two-column/_pacman.scss @@ -7,9 +7,9 @@ // // .layout-pacman--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/two-column/pacman/pacman.twig +// Markup: ../../../../../templates/layout/grid/two-column/pacman/pacman.twig // -// Style guide: Layout.2Column.Pacman +// Style guide: Layout.Grid.2Column.Pacman // $_layout-pacman-columns: ( $breakpoint-xs: 1fr, diff --git a/core/scss/layout/two-column/_plakes-right.scss b/core/scss/layout/grid/two-column/_plakes-right.scss similarity index 100% rename from core/scss/layout/two-column/_plakes-right.scss rename to core/scss/layout/grid/two-column/_plakes-right.scss diff --git a/core/scss/layout/two-column/_plakes.scss b/core/scss/layout/grid/two-column/_plakes.scss similarity index 86% rename from core/scss/layout/two-column/_plakes.scss rename to core/scss/layout/grid/two-column/_plakes.scss index 9f641ff33..f666a0cc3 100644 --- a/core/scss/layout/two-column/_plakes.scss +++ b/core/scss/layout/grid/two-column/_plakes.scss @@ -7,9 +7,9 @@ // // .layout-plakes--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/two-column/plakes/plakes.twig +// Markup: ../../../../../templates/layout/grid/two-column/plakes/plakes.twig // -// Style guide: Layout.2Column.Plakes +// Style guide: Layout.Grid.2Column.Plakes // $_layout-plakes-columns: ( $breakpoint-xs: 1fr, diff --git a/core/scss/layout/two-column/_toucan.scss b/core/scss/layout/grid/two-column/_toucan.scss similarity index 63% rename from core/scss/layout/two-column/_toucan.scss rename to core/scss/layout/grid/two-column/_toucan.scss index b9bb8da58..9b44c26c7 100644 --- a/core/scss/layout/two-column/_toucan.scss +++ b/core/scss/layout/grid/two-column/_toucan.scss @@ -5,9 +5,9 @@ // // A two column centered 50/50 template. // -// Markup: ../../../../../templates/layout/two-column/toucan/toucan.twig +// Markup: ../../../../../templates/layout/grid/two-column/toucan/toucan.twig // -// Style guide: Layout.2Column.Toucan +// Style guide: Layout.Grid.2Column.Toucan // .layout-toucan { > div { diff --git a/core/scss/layout/two-column/_trunks-right.scss b/core/scss/layout/grid/two-column/_trunks-right.scss similarity index 100% rename from core/scss/layout/two-column/_trunks-right.scss rename to core/scss/layout/grid/two-column/_trunks-right.scss diff --git a/core/scss/layout/two-column/_trunks.scss b/core/scss/layout/grid/two-column/_trunks.scss similarity index 86% rename from core/scss/layout/two-column/_trunks.scss rename to core/scss/layout/grid/two-column/_trunks.scss index e390ff3d3..f05fabb2a 100644 --- a/core/scss/layout/two-column/_trunks.scss +++ b/core/scss/layout/grid/two-column/_trunks.scss @@ -7,9 +7,9 @@ // // .layout-trunks--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/two-column/trunks/trunks.twig +// Markup: ../../../../../templates/layout/grid/two-column/trunks/trunks.twig // -// Style guide: Layout.2Column.Trunks +// Style guide: Layout.Grid.2Column.Trunks // $_layout-trunks-columns: ( $breakpoint-xs: 1fr, diff --git a/core/scss/layout/two-column/_wedge-right.scss b/core/scss/layout/grid/two-column/_wedge-right.scss similarity index 100% rename from core/scss/layout/two-column/_wedge-right.scss rename to core/scss/layout/grid/two-column/_wedge-right.scss diff --git a/core/scss/layout/two-column/_wedge.scss b/core/scss/layout/grid/two-column/_wedge.scss similarity index 86% rename from core/scss/layout/two-column/_wedge.scss rename to core/scss/layout/grid/two-column/_wedge.scss index 97b7c3353..b44d7f7ce 100644 --- a/core/scss/layout/two-column/_wedge.scss +++ b/core/scss/layout/grid/two-column/_wedge.scss @@ -7,9 +7,9 @@ // // .layout-wedge--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/two-column/wedge/wedge.twig +// Markup: ../../../../../templates/layout/grid/two-column/wedge/wedge.twig // -// Style guide: Layout.2Column.Wedge +// Style guide: Layout.Grid.2Column.Wedge // $_layout-wedge-columns: ( $breakpoint-xs: 1fr, diff --git a/core/scss/layout/grid/two-column/index.scss b/core/scss/layout/grid/two-column/index.scss new file mode 100644 index 000000000..57716a899 --- /dev/null +++ b/core/scss/layout/grid/two-column/index.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +// +// Two Columns +// +// Two column layouts that use CSS Grid. +// +// Style guide: Layout.Grid.2Column +// +@import + 'donies', + 'frogger', + 'pacman', + 'pacman-right', + 'plakes', + 'plakes-right', + 'toucan', + 'trunks', + 'trunks-right', + 'wedge', + 'wedge-right'; diff --git a/core/scss/layout/index.scss b/core/scss/layout/index.scss index 9f5766569..92ea252e4 100644 --- a/core/scss/layout/index.scss +++ b/core/scss/layout/index.scss @@ -8,8 +8,5 @@ // Style guide: Layout @import - 'full-width/index', - 'four-column/index', - 'three-column/index', - 'two-column/index', - 'one-column/index'; + 'flex/index', + 'grid/index'; diff --git a/core/scss/layout/one-column/index.scss b/core/scss/layout/one-column/index.scss deleted file mode 100644 index 19ca274d2..000000000 --- a/core/scss/layout/one-column/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@charset "UTF-8"; - -// -// One Columns -// -// One column layouts -// -// Style guide: Layout.1Column -// -@import - 'basic', - 'centered-container'; diff --git a/core/templates/layout/four-column/molive/molive.json b/core/templates/layout/flex/four-column/molive/molive-flex.json similarity index 100% rename from core/templates/layout/four-column/molive/molive.json rename to core/templates/layout/flex/four-column/molive/molive-flex.json diff --git a/core/templates/layout/four-column/molive/molive.png b/core/templates/layout/flex/four-column/molive/molive-flex.png similarity index 100% rename from core/templates/layout/four-column/molive/molive.png rename to core/templates/layout/flex/four-column/molive/molive-flex.png diff --git a/core/templates/layout/flex/four-column/molive/molive-flex.twig b/core/templates/layout/flex/four-column/molive/molive-flex.twig new file mode 100644 index 000000000..28dbf7d38 --- /dev/null +++ b/core/templates/layout/flex/four-column/molive/molive-flex.twig @@ -0,0 +1,58 @@ +{# +/** + * @file + * Molive - Template for a 4 column panel layout. + * + * This template provides a four column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A four column span header area + * first - First of four columns + * second - Second of four columns + * third - Third of four columns + * fourth - Fourth of four columns + * footer - A four column span footer area + */ +#} + + + {# A centered max-width header region #} + {% if header is not empty %} +
    +
    + {{ header }} +
    +
    + {% endif %} + + {# Because of the responsive behaviour each column is required. #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + + {# Centered max-width footer region #} + {% if footer is not empty %} +
    +
    + {{ footer }} +
    +
    + {% endif %} +
    diff --git a/core/templates/layout/full-width/bricks/bricks.json b/core/templates/layout/flex/full-width/bricks/bricks-flex.json similarity index 100% rename from core/templates/layout/full-width/bricks/bricks.json rename to core/templates/layout/flex/full-width/bricks/bricks-flex.json diff --git a/core/templates/layout/full-width/bricks/bricks.png b/core/templates/layout/flex/full-width/bricks/bricks-flex.png similarity index 100% rename from core/templates/layout/full-width/bricks/bricks.png rename to core/templates/layout/flex/full-width/bricks/bricks-flex.png diff --git a/core/templates/layout/flex/full-width/bricks/bricks-flex.twig b/core/templates/layout/flex/full-width/bricks/bricks-flex.twig new file mode 100644 index 000000000..b60e997bb --- /dev/null +++ b/core/templates/layout/flex/full-width/bricks/bricks-flex.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Bricks + * A two column 50/50 centered row followed by a full width region. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * hero - The top most full width region. + * first - First of a 50/50 centered column + * second - Second of a 50/50 centered column + * hero2 - Second full width region + * third - First of a 50/50 centered column + * fourth - Second of a 50/50 centered column + */ +#} + + + {# Full width region #} + {% if hero is not empty %} +
    + {{ hero }} +
    + {% endif %} + + {# Required two equal column centered content area. #} + {% if first is not empty or second is not empty %} +
    +
    + {{ first }} +
    + +
    + {{ second}} +
    +
    + {% endif %} + + {# Full width region #} + {% if hero2 is not empty %} +
    + {{ hero2 }} +
    + {% endif %} + + {# Optional two equal column centered content area. #} + {% if third is not empty or fourth is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + +
    diff --git a/core/templates/layout/full-width/ibeam/ibeam.json b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.json similarity index 100% rename from core/templates/layout/full-width/ibeam/ibeam.json rename to core/templates/layout/flex/full-width/ibeam/ibeam-flex.json diff --git a/core/templates/layout/full-width/ibeam/ibeam.png b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.png similarity index 100% rename from core/templates/layout/full-width/ibeam/ibeam.png rename to core/templates/layout/flex/full-width/ibeam/ibeam-flex.png diff --git a/core/templates/layout/flex/full-width/ibeam/ibeam-flex.twig b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.twig new file mode 100644 index 000000000..4a889bbc4 --- /dev/null +++ b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.twig @@ -0,0 +1,46 @@ +{# +/** + * @file + * I-Beam + * A full width single column alternative with a single centered column layou. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * full_width - Full width content region + * content - Single column centered content region + * full_width2 - Full width content region + * content2 - Single column centered content region + */ +#} + + + {% if full_width is not empty %} +
    + {{ full_width }} +
    + {% endif %} + + {% if content is not empty %} +
    +
    + {{ content }} +
    +
    + {% endif %} + + {% if full_width2 is not empty %} +
    + {{ full_width2 }} +
    + {% endif %} + + {% if content2 is not empty %} +
    +
    + {{ content2 }} +
    +
    + {% endif %} + +
    diff --git a/core/templates/layout/one-column/basic/basic.json b/core/templates/layout/flex/one-column/basic/basic-flex.json similarity index 100% rename from core/templates/layout/one-column/basic/basic.json rename to core/templates/layout/flex/one-column/basic/basic-flex.json diff --git a/core/templates/layout/one-column/basic/basic.png b/core/templates/layout/flex/one-column/basic/basic-flex.png similarity index 100% rename from core/templates/layout/one-column/basic/basic.png rename to core/templates/layout/flex/one-column/basic/basic-flex.png diff --git a/core/templates/layout/flex/one-column/basic/basic-flex.twig b/core/templates/layout/flex/one-column/basic/basic-flex.twig new file mode 100644 index 000000000..d70070742 --- /dev/null +++ b/core/templates/layout/flex/one-column/basic/basic-flex.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Template for a single celled centered content layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - Centered single column open content area + * footer - Centered single column open content area + * content - Centered single column open content area + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if content is not empty %} +
    + {{ content}} +
    + {% endif %} + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + + diff --git a/core/templates/layout/centered-container/centered-container.json b/core/templates/layout/flex/one-column/centered-container/centered-container-flex.json similarity index 100% rename from core/templates/layout/centered-container/centered-container.json rename to core/templates/layout/flex/one-column/centered-container/centered-container-flex.json diff --git a/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig b/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig new file mode 100644 index 000000000..ab695e406 --- /dev/null +++ b/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig @@ -0,0 +1,25 @@ +{# +/** + * @file + * Centered container + * + * An example of how to center a container in the page. + * + * Available modifiers + * - None so far + * + * Available Variables + * - attributes: A series of tag attributes for the wrapper + * - modifier_class: Modifier css classes for this component. + * - body: A block element that is expected to be replaced with your content. + * - content: Your content + * + */ +#} + +
    + {% block body %} + {{ content }} + {% endblock %} +
    + diff --git a/core/templates/layout/three-column/bars/bars.json b/core/templates/layout/flex/three-column/bars/bars.json similarity index 100% rename from core/templates/layout/three-column/bars/bars.json rename to core/templates/layout/flex/three-column/bars/bars.json diff --git a/core/templates/layout/three-column/bars/bars.png b/core/templates/layout/flex/three-column/bars/bars.png similarity index 100% rename from core/templates/layout/three-column/bars/bars.png rename to core/templates/layout/flex/three-column/bars/bars.png diff --git a/core/templates/layout/flex/three-column/bars/bars.twig b/core/templates/layout/flex/three-column/bars/bars.twig new file mode 100644 index 000000000..b3503152f --- /dev/null +++ b/core/templates/layout/flex/three-column/bars/bars.twig @@ -0,0 +1,31 @@ +{# +/** + * @file + * Template for a three equal column layout. 33/33/33 + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - First of three equal columns + * second - Second of three equal columns + * third - third of three equal columns + * body - A block area to allow for others to change wrappers around regions. + */ +#} + +
    + {% block body %} +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + {% endblock %} +
    + diff --git a/core/templates/layout/three-column/battleship/battleship.json b/core/templates/layout/flex/three-column/battleship/battleship.json similarity index 100% rename from core/templates/layout/three-column/battleship/battleship.json rename to core/templates/layout/flex/three-column/battleship/battleship.json diff --git a/core/templates/layout/three-column/battleship/battleship.png b/core/templates/layout/flex/three-column/battleship/battleship.png similarity index 100% rename from core/templates/layout/three-column/battleship/battleship.png rename to core/templates/layout/flex/three-column/battleship/battleship.png diff --git a/core/templates/layout/flex/three-column/battleship/battleship.twig b/core/templates/layout/flex/three-column/battleship/battleship.twig new file mode 100644 index 000000000..08e91f527 --- /dev/null +++ b/core/templates/layout/flex/three-column/battleship/battleship.twig @@ -0,0 +1,75 @@ +{# +/** + * @file + * Template for a three row three column layout. + * 66/33 + * 33/33/33 + * 33/33/33 + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - a two column span content region + * second - a single column span content region + * third - a single column 1/3 width content region + * fourth - a single column 1/3 width content region + * fifth - a single column 1/3 width content region + * sixth - a single column 1/3 width content region + * seventh - a single column 1/3 width content region + * eighth - a single column 1/3 width content region + * body - a block area for changing the wrappers on the content regions + */ +#} + +
    + {% block body %} + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + + {% if fourth is not empty %} +
    + {{ fourth }} +
    + {% endif %} + + {% if fifth is not empty %} +
    + {{ fifth }} +
    + {% endif %} + + {% if sixth is not empty %} +
    + {{ sixth }} +
    + {% endif %} + + {% if seventh is not empty %} +
    + {{ seventh }} +
    + {% endif %} + + {% if eighth is not empty %} +
    + {{ eighth }} +
    + {% endif %} + {% endblock %} +
    + diff --git a/core/templates/layout/three-column/blastila/blastila-left.png b/core/templates/layout/flex/three-column/blastila/blastila-left.png similarity index 100% rename from core/templates/layout/three-column/blastila/blastila-left.png rename to core/templates/layout/flex/three-column/blastila/blastila-left.png diff --git a/core/templates/layout/three-column/blastila/blastila-right.png b/core/templates/layout/flex/three-column/blastila/blastila-right.png similarity index 100% rename from core/templates/layout/three-column/blastila/blastila-right.png rename to core/templates/layout/flex/three-column/blastila/blastila-right.png diff --git a/core/templates/layout/three-column/blastila/blastila.json b/core/templates/layout/flex/three-column/blastila/blastila.json similarity index 100% rename from core/templates/layout/three-column/blastila/blastila.json rename to core/templates/layout/flex/three-column/blastila/blastila.json diff --git a/core/templates/layout/flex/three-column/blastila/blastila.twig b/core/templates/layout/flex/three-column/blastila/blastila.twig new file mode 100644 index 000000000..b3a092324 --- /dev/null +++ b/core/templates/layout/flex/three-column/blastila/blastila.twig @@ -0,0 +1,65 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout with a single + * cell top most column followed by a 3 column layout where a 2 column span + * header region is above two single column regions and a right sidebar. + * + * Variants: + * layout-blastila--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single cell centered columns + * sidebar - A 1/3 row right sidebar open content region + * first - A 2/3 row section below the header and to the left of the sidebar. + * second - A 1/3 column content region below the first region. + * third - A 1/3 column content region below the first region. + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Div for grid container #} +
    + + {# Sidebar #} + {% if sidebar is not empty %} + + {% endif %} + + {# Mini header area #} + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {# Left content column #} + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {# Right content column #} + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + +
    {# end grid container #} + + diff --git a/core/templates/layout/three-column/chess/chess.json b/core/templates/layout/flex/three-column/chess/chess.json similarity index 100% rename from core/templates/layout/three-column/chess/chess.json rename to core/templates/layout/flex/three-column/chess/chess.json diff --git a/core/templates/layout/three-column/chess/chess.png b/core/templates/layout/flex/three-column/chess/chess.png similarity index 100% rename from core/templates/layout/three-column/chess/chess.png rename to core/templates/layout/flex/three-column/chess/chess.png diff --git a/core/templates/layout/flex/three-column/chess/chess.twig b/core/templates/layout/flex/three-column/chess/chess.twig new file mode 100644 index 000000000..774c3333f --- /dev/null +++ b/core/templates/layout/flex/three-column/chess/chess.twig @@ -0,0 +1,75 @@ +{# +/** + * @file + * A two row three column layout bookended by single column centered header + * and footer content regions. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single cell centered column header + * first - First row 1/3 width column + * second - First row 1/3 width column + * third - First row 1/3 width column + * fourth - Second row 1/3 width column + * fifth - Second row 1/3 width column + * sixth - Second row 1/3 width column + * footer - A single cell centered column content area + * body - An overridable block region. + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    + {% block body %} + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + + {% if fourth is not empty %} +
    + {{ fourth }} +
    + {% endif %} + + {% if fifth is not empty %} +
    + {{ fifth }} +
    + {% endif %} + + {% if sixth is not empty %} +
    + {{ sixth }} +
    + {% endif %} + {% endblock %} +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + + diff --git a/core/templates/layout/three-column/cuttoner/cuttoner-left.png b/core/templates/layout/flex/three-column/cuttoner/cuttoner-left.png similarity index 100% rename from core/templates/layout/three-column/cuttoner/cuttoner-left.png rename to core/templates/layout/flex/three-column/cuttoner/cuttoner-left.png diff --git a/core/templates/layout/three-column/cuttoner/cuttoner-right.png b/core/templates/layout/flex/three-column/cuttoner/cuttoner-right.png similarity index 100% rename from core/templates/layout/three-column/cuttoner/cuttoner-right.png rename to core/templates/layout/flex/three-column/cuttoner/cuttoner-right.png diff --git a/core/templates/layout/three-column/cuttoner/cuttoner.json b/core/templates/layout/flex/three-column/cuttoner/cuttoner.json similarity index 100% rename from core/templates/layout/three-column/cuttoner/cuttoner.json rename to core/templates/layout/flex/three-column/cuttoner/cuttoner.json diff --git a/core/templates/layout/flex/three-column/cuttoner/cuttoner.twig b/core/templates/layout/flex/three-column/cuttoner/cuttoner.twig new file mode 100644 index 000000000..447ceb2ed --- /dev/null +++ b/core/templates/layout/flex/three-column/cuttoner/cuttoner.twig @@ -0,0 +1,58 @@ +{# +/** + * @file + * A three column layout with a two column content area topped with a 2 span + * header area and footed by a two span content aread and a top to bottom + * of content sidebar region. + * + * Variants: + * layout-cuttoner--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A two span 66% topper for the first and second columns. + * first - A single 33% width column + * second - A single 33% width column + * footer - A two span 66% footer for the first and second columns + * sidebar - A 33% multiple row spanning sidebar + * + */ +#} + +
    + +
    + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} +
    + + {% if sidebar is not empty %} + + {% endif %} + +
    + diff --git a/core/templates/layout/three-column/percles/percles-left.png b/core/templates/layout/flex/three-column/percles/percles-left.png similarity index 100% rename from core/templates/layout/three-column/percles/percles-left.png rename to core/templates/layout/flex/three-column/percles/percles-left.png diff --git a/core/templates/layout/three-column/percles/percles-right.png b/core/templates/layout/flex/three-column/percles/percles-right.png similarity index 100% rename from core/templates/layout/three-column/percles/percles-right.png rename to core/templates/layout/flex/three-column/percles/percles-right.png diff --git a/core/templates/layout/three-column/percles/percles.json b/core/templates/layout/flex/three-column/percles/percles.json similarity index 100% rename from core/templates/layout/three-column/percles/percles.json rename to core/templates/layout/flex/three-column/percles/percles.json diff --git a/core/templates/layout/flex/three-column/percles/percles.twig b/core/templates/layout/flex/three-column/percles/percles.twig new file mode 100644 index 000000000..14e128976 --- /dev/null +++ b/core/templates/layout/flex/three-column/percles/percles.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * A three column layout with a two rows. The first two features two cells, one + * that spans 2 columns and one that is a single column. The second row + * features three equal column content areas + * + * 66/33 + * 33/33/33 + * + * Variants: + * layout-precles--right - A right side weighted header variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - A single cell single row content area + * second - A two span content column in the first row + * third - A single column 33% content area in the second row + * fourth - A single column 33% content area in the second row + * fifth - A single column 33% content area in the second row + * + */ +#} + +
    + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + + {% if fourth is not empty %} +
    + {{ fourth }} +
    + {% endif %} + + {% if fifth is not empty %} +
    + {{ fifth }} +
    + {% endif %} +
    + diff --git a/core/templates/layout/three-column/robot/robot.json b/core/templates/layout/flex/three-column/robot/robot.json similarity index 100% rename from core/templates/layout/three-column/robot/robot.json rename to core/templates/layout/flex/three-column/robot/robot.json diff --git a/core/templates/layout/three-column/robot/robot.png b/core/templates/layout/flex/three-column/robot/robot.png similarity index 100% rename from core/templates/layout/three-column/robot/robot.png rename to core/templates/layout/flex/three-column/robot/robot.png diff --git a/core/templates/layout/flex/three-column/robot/robot.twig b/core/templates/layout/flex/three-column/robot/robot.twig new file mode 100644 index 000000000..5db7b805f --- /dev/null +++ b/core/templates/layout/flex/three-column/robot/robot.twig @@ -0,0 +1,48 @@ +{# +/** + * @file + * A three column layout with a 3 span header and an unequal three column layout + * below it where the center column is 50% + * + * 100 + * 25/50/25 + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A skinny 25% width left sidebar. + * second - A larger 50% width centered column. + * third - A skinny 25% width right sidebar + * + */ +#} + +
    + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + +
    + diff --git a/core/templates/layout/three-column/space-invader/space-invader.json b/core/templates/layout/flex/three-column/space-invader/space-invader.json similarity index 100% rename from core/templates/layout/three-column/space-invader/space-invader.json rename to core/templates/layout/flex/three-column/space-invader/space-invader.json diff --git a/core/templates/layout/three-column/space-invader/space-invader.png b/core/templates/layout/flex/three-column/space-invader/space-invader.png similarity index 100% rename from core/templates/layout/three-column/space-invader/space-invader.png rename to core/templates/layout/flex/three-column/space-invader/space-invader.png diff --git a/core/templates/layout/flex/three-column/space-invader/space-invader.twig b/core/templates/layout/flex/three-column/space-invader/space-invader.twig new file mode 100644 index 000000000..fbff0d2a4 --- /dev/null +++ b/core/templates/layout/flex/three-column/space-invader/space-invader.twig @@ -0,0 +1,47 @@ +{# +/** + * @file + * A three column layout with a 3 span header and an equal three column layout + * below it. + * + * 100 + * 33/33/33 + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A 33% width content column. + * second - A 33% width content column. + * third - A 33% width content column. + */ +#} + +
    + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} + +
    + diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean-left.png b/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean-left.png similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/sunset-delorean-left.png rename to core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean-left.png diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean-right.png b/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean-right.png similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/sunset-delorean-right.png rename to core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean-right.png diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean.json b/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.json similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/sunset-delorean.json rename to core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.json diff --git a/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig b/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig new file mode 100644 index 000000000..d3e9abfa3 --- /dev/null +++ b/core/templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig @@ -0,0 +1,46 @@ +{# +/** + * @file + * A three column layout with a 2 span header and an equal three column layout. + * + * AA BB BB + * AA CC DD + * AA CC DD + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single column centered content area. + * first - A 33% width content column. + * second - A 33% width content column. + * third - A 33% width content column. + */ +#} + +
    + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {# Sidebar #} + {% if sidebar is not empty %} + + {% endif %} +
    + diff --git a/core/templates/layout/three-column/thions/thions-bottom.png b/core/templates/layout/flex/three-column/thions/thions-bottom.png similarity index 100% rename from core/templates/layout/three-column/thions/thions-bottom.png rename to core/templates/layout/flex/three-column/thions/thions-bottom.png diff --git a/core/templates/layout/three-column/thions/thions-top.png b/core/templates/layout/flex/three-column/thions/thions-top.png similarity index 100% rename from core/templates/layout/three-column/thions/thions-top.png rename to core/templates/layout/flex/three-column/thions/thions-top.png diff --git a/core/templates/layout/three-column/thions/thions.json b/core/templates/layout/flex/three-column/thions/thions.json similarity index 100% rename from core/templates/layout/three-column/thions/thions.json rename to core/templates/layout/flex/three-column/thions/thions.json diff --git a/core/templates/layout/flex/three-column/thions/thions.twig b/core/templates/layout/flex/three-column/thions/thions.twig new file mode 100644 index 000000000..4d7469658 --- /dev/null +++ b/core/templates/layout/flex/three-column/thions/thions.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['first']: Content in the left column. + * - $content['second']: Content in the right column. + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    + +
    + {{ fifth }} +
    +
    + diff --git a/core/templates/layout/three-column/valmer/valmer-left.png b/core/templates/layout/flex/three-column/valmer/valmer-left.png similarity index 100% rename from core/templates/layout/three-column/valmer/valmer-left.png rename to core/templates/layout/flex/three-column/valmer/valmer-left.png diff --git a/core/templates/layout/three-column/valmer/valmer-right.png b/core/templates/layout/flex/three-column/valmer/valmer-right.png similarity index 100% rename from core/templates/layout/three-column/valmer/valmer-right.png rename to core/templates/layout/flex/three-column/valmer/valmer-right.png diff --git a/core/templates/layout/three-column/valmer/valmer.json b/core/templates/layout/flex/three-column/valmer/valmer.json similarity index 100% rename from core/templates/layout/three-column/valmer/valmer.json rename to core/templates/layout/flex/three-column/valmer/valmer.json diff --git a/core/templates/layout/flex/three-column/valmer/valmer.twig b/core/templates/layout/flex/three-column/valmer/valmer.twig new file mode 100644 index 000000000..c2ff42b09 --- /dev/null +++ b/core/templates/layout/flex/three-column/valmer/valmer.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    +
    + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/two-column/donies/donies.json b/core/templates/layout/flex/two-column/donies/donies-flex.json similarity index 100% rename from core/templates/layout/two-column/donies/donies.json rename to core/templates/layout/flex/two-column/donies/donies-flex.json diff --git a/core/templates/layout/two-column/donies/donies.png b/core/templates/layout/flex/two-column/donies/donies-flex.png similarity index 100% rename from core/templates/layout/two-column/donies/donies.png rename to core/templates/layout/flex/two-column/donies/donies-flex.png diff --git a/core/templates/layout/flex/two-column/donies/donies-flex.twig b/core/templates/layout/flex/two-column/donies/donies-flex.twig new file mode 100644 index 000000000..1dbea6499 --- /dev/null +++ b/core/templates/layout/flex/two-column/donies/donies-flex.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional header region #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Mandatory content region #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional footer region #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/two-column/frogger/frogger.json b/core/templates/layout/flex/two-column/frogger/frogger-flex.json similarity index 100% rename from core/templates/layout/two-column/frogger/frogger.json rename to core/templates/layout/flex/two-column/frogger/frogger-flex.json diff --git a/core/templates/layout/two-column/frogger/frogger.png b/core/templates/layout/flex/two-column/frogger/frogger-flex.png similarity index 100% rename from core/templates/layout/two-column/frogger/frogger.png rename to core/templates/layout/flex/two-column/frogger/frogger-flex.png diff --git a/core/templates/layout/flex/two-column/frogger/frogger-flex.twig b/core/templates/layout/flex/two-column/frogger/frogger-flex.twig new file mode 100644 index 000000000..387a32540 --- /dev/null +++ b/core/templates/layout/flex/two-column/frogger/frogger-flex.twig @@ -0,0 +1,66 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional centered container #} + {% if middle is not empty %} +
    +
    + {{ middle }} +
    +
    + {% endif %} + + {# Optional third row #} + {% if third is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + +{# end layout wrapper #} diff --git a/core/templates/layout/two-column/pacman/pacman.json b/core/templates/layout/flex/two-column/pacman/pacman-flex.json similarity index 100% rename from core/templates/layout/two-column/pacman/pacman.json rename to core/templates/layout/flex/two-column/pacman/pacman-flex.json diff --git a/core/templates/layout/flex/two-column/pacman/pacman-flex.twig b/core/templates/layout/flex/two-column/pacman/pacman-flex.twig new file mode 100644 index 000000000..d7f152487 --- /dev/null +++ b/core/templates/layout/flex/two-column/pacman/pacman-flex.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    + + +
    + {{ content }} +
    +
    + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/two-column/pacman/pacman-left.png b/core/templates/layout/flex/two-column/pacman/pacman-left-flex.png similarity index 100% rename from core/templates/layout/two-column/pacman/pacman-left.png rename to core/templates/layout/flex/two-column/pacman/pacman-left-flex.png diff --git a/core/templates/layout/two-column/pacman/pacman-right.png b/core/templates/layout/flex/two-column/pacman/pacman-right-flex.png similarity index 100% rename from core/templates/layout/two-column/pacman/pacman-right.png rename to core/templates/layout/flex/two-column/pacman/pacman-right-flex.png diff --git a/core/templates/layout/two-column/plakes/plakes.json b/core/templates/layout/flex/two-column/plakes/plakes-flex.json similarity index 100% rename from core/templates/layout/two-column/plakes/plakes.json rename to core/templates/layout/flex/two-column/plakes/plakes-flex.json diff --git a/core/templates/layout/flex/two-column/plakes/plakes-flex.twig b/core/templates/layout/flex/two-column/plakes/plakes-flex.twig new file mode 100644 index 000000000..95af4a72c --- /dev/null +++ b/core/templates/layout/flex/two-column/plakes/plakes-flex.twig @@ -0,0 +1,38 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Grid Container #} +
    + {# Manditory sidebar #} + + + {# Manditory content #} +
    + {{ content }} +
    +
    + + diff --git a/core/templates/layout/two-column/plakes/plakes-left.png b/core/templates/layout/flex/two-column/plakes/plakes-left-flex.png similarity index 100% rename from core/templates/layout/two-column/plakes/plakes-left.png rename to core/templates/layout/flex/two-column/plakes/plakes-left-flex.png diff --git a/core/templates/layout/two-column/plakes/plakes-right.png b/core/templates/layout/flex/two-column/plakes/plakes-right-flex.png similarity index 100% rename from core/templates/layout/two-column/plakes/plakes-right.png rename to core/templates/layout/flex/two-column/plakes/plakes-right-flex.png diff --git a/core/templates/layout/two-column/toucan/toucan.json b/core/templates/layout/flex/two-column/toucan/toucan-flex.json similarity index 100% rename from core/templates/layout/two-column/toucan/toucan.json rename to core/templates/layout/flex/two-column/toucan/toucan-flex.json diff --git a/core/templates/layout/two-column/toucan/toucan.png b/core/templates/layout/flex/two-column/toucan/toucan-flex.png similarity index 100% rename from core/templates/layout/two-column/toucan/toucan.png rename to core/templates/layout/flex/two-column/toucan/toucan-flex.png diff --git a/core/templates/layout/flex/two-column/toucan/toucan-flex.twig b/core/templates/layout/flex/two-column/toucan/toucan-flex.twig new file mode 100644 index 000000000..908f8c9f0 --- /dev/null +++ b/core/templates/layout/flex/two-column/toucan/toucan-flex.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Toucan + * + * + */ +#} + +
    + + {# Required column #} +
    + {{ first }} +
    + + {# Required column #} +
    + {{ second }} +
    + +
    + diff --git a/core/templates/layout/two-column/trunks/trunks.json b/core/templates/layout/flex/two-column/trunks/trunks-flex.json similarity index 100% rename from core/templates/layout/two-column/trunks/trunks.json rename to core/templates/layout/flex/two-column/trunks/trunks-flex.json diff --git a/core/templates/layout/flex/two-column/trunks/trunks-flex.twig b/core/templates/layout/flex/two-column/trunks/trunks-flex.twig new file mode 100644 index 000000000..bfb976d92 --- /dev/null +++ b/core/templates/layout/flex/two-column/trunks/trunks-flex.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + diff --git a/core/templates/layout/two-column/trunks/trunks-left.png b/core/templates/layout/flex/two-column/trunks/trunks-left-flex.png similarity index 100% rename from core/templates/layout/two-column/trunks/trunks-left.png rename to core/templates/layout/flex/two-column/trunks/trunks-left-flex.png diff --git a/core/templates/layout/two-column/trunks/trunks-right.png b/core/templates/layout/flex/two-column/trunks/trunks-right-flex.png similarity index 100% rename from core/templates/layout/two-column/trunks/trunks-right.png rename to core/templates/layout/flex/two-column/trunks/trunks-right-flex.png diff --git a/core/templates/layout/two-column/wedge/wedge.json b/core/templates/layout/flex/two-column/wedge/wedge-flex.json similarity index 100% rename from core/templates/layout/two-column/wedge/wedge.json rename to core/templates/layout/flex/two-column/wedge/wedge-flex.json diff --git a/core/templates/layout/flex/two-column/wedge/wedge-flex.twig b/core/templates/layout/flex/two-column/wedge/wedge-flex.twig new file mode 100644 index 000000000..a3a1e45e6 --- /dev/null +++ b/core/templates/layout/flex/two-column/wedge/wedge-flex.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Wedge 2 column layout + * + * A 25/75 style two column layout. + * + * Variants: + * layout-cuttoner--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - First column and 25% width + * second - Second Column and 75% width + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + diff --git a/core/templates/layout/two-column/wedge/wedge-left.png b/core/templates/layout/flex/two-column/wedge/wedge-left-flex.png similarity index 100% rename from core/templates/layout/two-column/wedge/wedge-left.png rename to core/templates/layout/flex/two-column/wedge/wedge-left-flex.png diff --git a/core/templates/layout/two-column/wedge/wedge-right.png b/core/templates/layout/flex/two-column/wedge/wedge-right-flex.png similarity index 100% rename from core/templates/layout/two-column/wedge/wedge-right.png rename to core/templates/layout/flex/two-column/wedge/wedge-right-flex.png diff --git a/core/templates/layout/grid/four-column/molive/molive.json b/core/templates/layout/grid/four-column/molive/molive.json new file mode 100644 index 000000000..6d04cab3c --- /dev/null +++ b/core/templates/layout/grid/four-column/molive/molive.json @@ -0,0 +1,8 @@ +{ + "first": "

    First column

    Example Image", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    This is your header column

    ", + "footer": "

    This is your footer column

    " +} diff --git a/core/templates/layout/grid/four-column/molive/molive.png b/core/templates/layout/grid/four-column/molive/molive.png new file mode 100644 index 0000000000000000000000000000000000000000..454a33eb5c79c5ff8577eeec738e924b2b0a48ed GIT binary patch literal 4294 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 CHuaPM literal 0 HcmV?d00001 diff --git a/core/templates/layout/four-column/molive/molive.twig b/core/templates/layout/grid/four-column/molive/molive.twig similarity index 100% rename from core/templates/layout/four-column/molive/molive.twig rename to core/templates/layout/grid/four-column/molive/molive.twig diff --git a/core/templates/layout/grid/full-width/bricks/bricks.json b/core/templates/layout/grid/full-width/bricks/bricks.json new file mode 100644 index 000000000..558128ca4 --- /dev/null +++ b/core/templates/layout/grid/full-width/bricks/bricks.json @@ -0,0 +1,8 @@ +{ + "hero": "

    Full Width Hero Column 1

    ", + "hero2": "

    Full Width Hero Column 2

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    " +} diff --git a/core/templates/layout/grid/full-width/bricks/bricks.png b/core/templates/layout/grid/full-width/bricks/bricks.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/full-width/bricks/bricks.twig b/core/templates/layout/grid/full-width/bricks/bricks.twig similarity index 100% rename from core/templates/layout/full-width/bricks/bricks.twig rename to core/templates/layout/grid/full-width/bricks/bricks.twig diff --git a/core/templates/layout/grid/full-width/ibeam/ibeam.json b/core/templates/layout/grid/full-width/ibeam/ibeam.json new file mode 100644 index 000000000..a9746d5e8 --- /dev/null +++ b/core/templates/layout/grid/full-width/ibeam/ibeam.json @@ -0,0 +1,6 @@ +{ + "full_width": "

    Full width region

    ", + "full_width2": "

    Full width region

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content2": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/grid/full-width/ibeam/ibeam.png b/core/templates/layout/grid/full-width/ibeam/ibeam.png new file mode 100644 index 0000000000000000000000000000000000000000..989f5e4cb95f7bb1e6bc80acb392f1002a5947ac GIT binary patch literal 1978 zcmV;r2SxaaP)Ml-MPQIj2FW0q z43cSDWmo^HLdDCMFWG;+Pbfg5w-Q>l)FA?zRdjb+eE7i!?Cw4o4XG?jo__h1zyA3j zTpWT_ZBRglwbF$;aUKnh9kpeS>s?JBwm;1^ra9*<`52!jDv&(lA$3l9|H*gx&2N7- z9#V>M_HE?gKP4AO37?Yv(pRnI5C_2*w5TYK(|C6$$&vMT=$t&nm4PhF7WieGB~6v) zq^@c%zC-)uJ$%(24+-jeNJ5T_g7eF5R}5}(*0gnuIOy3V)AJ?Xsp7C=&6_sbMbaA8e9LDO(=XmQeg3TCZed_yslS<*eTB&(C| zK%Hdn&fJ}88Sc(xb&|>AB#VwJsc(=6A! z{H}uFK%i=!Q*J@ZiV2Xs;@>OCzkg0@Ib7+-I7=JSHG4j9rU@qH8+vn`;b=Z5jcl)rbGyPPR5CS2Dq2s?y ztE`t4aYCNwc<)C;GFdQdGD!DV+1-x=_5bnUFjp^wtr(TjzO9Y&A zh!dQb%YBi%2P|8(uu@7Kzd2hUps1vzBqFMcr~?%)dKEDwVi^$;d{#GY#nr&FJi}#z z&pgfv;#Lo8`<*U%J6rfiv9KjoMc@y={|hOucEXtm^iE2S_b(`W5uZcWc67R3yyk>5 zQWb&N&xiMdI4H|N2vrTVZ&mHBobBB1iYtj` z2kt8+K?88%`vG=MPUNsYPV3&rYr*HW&XOzV%@o&;;1%aq6U{pB_~Ms8ZbqFXB2=fI zP|g}|$%HMC`v2?IV`LDkgAO1Lxwa0!o}v(h7#xTaCwBJBm^_a@#(9TEngI!2Aeju3K{6R6 zlR+{_ra6?gyg_QRL|}WTvy_oZ25Cil@{>orv%6)M)MPF5sk~dX47^o4LVilWVNjCR+xSoIYnpe*ct>Iw7?6iiYjGlL5YKptll`NNF zS|X&B%!->1`%bNw^_IJ9L@=xUm1K<1@WMGe>MbQiS;*ZvCw%g= zk3iwo^EVtFoKY2l6fJmC;P~L26cf%Z*2-JkS`{fKP7Zr~^RL&u`uc#wZ%;UWb58H1 zq&P3B%0Q?RDI{V{{r7z9l^5XZMg!mKyPfv=heB} z9Rt@ORb}AC*DrbX-+f|;){C&NfXV?bvc1#g@skhP``&}mkjkRs*;n82_dh+QyeM(b zyx}?^i380m-haGHx7!^LNt4oh6F7QNQ1mLY%=cGrzHL#qg6Zt}9GNCcBGA@Ad8!lY zBo(B}kzN;nk>hf|K(QI7>C)=YQW@c>itKFkmPcq^#0%28gG%>a@=;F>*<7jog?4l&NELwb@XS0#p%W3 zBnxIuYl385;&%X&g|FuBOiP1g=Cm1!S<*eTBx^lvMrxL14F{7!GDs$aWHLww$<#zh z79!mNNY*2CSKOVE+JIz6Napi4z-aVvh3qDr7!p+(31z$-c{!TAjTV|MpCd*KsZxf5 zG880@;~|L?I@>LF9&Aw+0iXNLG8$Dz4EY{&Fkr+v#xWn}opcV5rq`{g2#)RD7FpYk zht%q1{OG5T*?F){3<>9#Tsi3&*Q;~Xh08wQBKM>ds+LjtQBYB03T(aG=HcVrA)fHY zOurNrO}dhb>Ao|PxsIv#l=_te&daSa_%Header", + "footer": "
    This is the footer
    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/grid/one-column/basic/basic.png b/core/templates/layout/grid/one-column/basic/basic.png new file mode 100644 index 0000000000000000000000000000000000000000..4bdf0e752d6106494f92c786cca9fc85cb1748b8 GIT binary patch literal 1488 zcmeAS@N?(olHy`uVBq!ia0vp^89>~|!3HD^gU$y7DaPU;cPEB*=VV?2*>f{PB1$5B zeXNr6bM+Ea@{>~aDsl^esu&n-Dy)Fa+|-gpg^Jvqyke^gTP3gxD1^l#~=$>Fbx5m+O@q>*W`v z>l<2HTIw4Z=^Gj80#)c1SLT%@R_NvxD?a#8ycO zWDy)d+?iUDiLfcJ80syc2lYWR`i6Q2`f#&>T5Uk0Rsoq6sW}lYnYpQX#Xvjk3=K?d z!0It%5H=#|j6~9DjG_}s2CCCWALIcf4?#i;ED8)RJ1!f2c+lH%xwFYSFfcGb^mK6y zsbGA2?V{i10*2O)^}7{MFj)mAb6k&;n16`<`zd#WW9$xkhH428+pcY6isGy4CE~PhXtfyy^d=k7u)c8ur!y z4z$~6uQ%U*&XjGx8>`-_KR6pCEcYeae0AD^NS*D*0h{wq-F)f#v#Ln%LW@HA{9Wu( z5vh8vY5BNXP?Eb3L*S@X!GX2gO?F^G^A?0oUt8cDQE@% z8Xb7rZ#XTm;8hmrcqkCfA+kJ?g~?DRiM#QUNsog5X zmAje#Dg3RppYg7noS<08|8C_eo1Hb84&G;FI@nmpWNX^Qb!MKY45;k&boFyt=akR{ E07!N;KmY&$ literal 0 HcmV?d00001 diff --git a/core/templates/layout/one-column/basic/basic.twig b/core/templates/layout/grid/one-column/basic/basic.twig similarity index 100% rename from core/templates/layout/one-column/basic/basic.twig rename to core/templates/layout/grid/one-column/basic/basic.twig diff --git a/core/templates/layout/grid/one-column/centered-container/centered-container.json b/core/templates/layout/grid/one-column/centered-container/centered-container.json new file mode 100644 index 000000000..39711e9e0 --- /dev/null +++ b/core/templates/layout/grid/one-column/centered-container/centered-container.json @@ -0,0 +1,3 @@ +{ + "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/centered-container/centered-container.twig b/core/templates/layout/grid/one-column/centered-container/centered-container.twig similarity index 100% rename from core/templates/layout/centered-container/centered-container.twig rename to core/templates/layout/grid/one-column/centered-container/centered-container.twig diff --git a/core/templates/layout/grid/three-column/bars/bars.json b/core/templates/layout/grid/three-column/bars/bars.json new file mode 100644 index 000000000..aa79e4ede --- /dev/null +++ b/core/templates/layout/grid/three-column/bars/bars.json @@ -0,0 +1,5 @@ +{ + "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/grid/three-column/bars/bars.png b/core/templates/layout/grid/three-column/bars/bars.png new file mode 100644 index 0000000000000000000000000000000000000000..8419c65111c5bf5109ecb781eff8b7eaf4eb41a7 GIT binary patch literal 3298 zcmZ`+3pmqj7?+AHqg-m1mXvadZHAbQNE1z&R&Eh<-7sT|F zG>#Oxr4+ejqR^5y9d!Pp%Q@#cd!Ft8UEcToe!t)Qe(&?&Dcil4U=S1}CME{9+HGM6 zJSo68W`zXs%M7gY0v=1~c9!O1CC$ns!1xlG=)iEW!J|C_19aRy14&*w%m5l-B_@Vp zqJd$67sFkJ8Q@Q)qnTLM?-poaJiiQARrzkh@WZM)*x0J<3=H;C(bv(_L8zL5R8&+j z!Jgh|I}6;RJ21nl`Z5?aG#nlp8mbeD(g_Uqfg_EKjNk}exUQ}?V4+P9qcYr?+En_c zg&;rTSa{Jrg2^-nIgqL{AJ?4}c!YsfRh>WR=Vt+@7nA(!Br1K87C;a_zXM0=AmBe^ z1Fo3)RkSUc>E-WWK@RYu(t$HfkO%|Jcl-bB{5tVBPsiUpQM$i-{Itl zTHjXzxlBM9_)qCgK$p5XZDL}eNh=F8B6G=@)1FY}J8~r>SpuyPlKj9rl_fGsOZ^>g z_J6xgs+Eu#)?sdA#;|IQYR^6@#iFoz9BlklM#LIq&@nD9nw`Qaq1C8Ve5?7< zoQUVHk(4o|HBnBH$WC{YfW8k5(9;LGWJux@?Qtx71a{dY4^_Gt@;msD=$x2K5@Xlsm`^uw|wmieoiHVy2 z!KG6bvNtM&>{oU^SxcMwyj*!USi1V#=dCkGKAWfKk76IO+MczyN-OaD`e7I*Ll#!W z+7KeFn0hhNsE{=mB7J=3>sIC22_=q+X?$zmLGL3Rs~yX>OX$3A*s%WL*6eEVtNWQ3 z@1b$IW^W<{n=sRJ8tm;9?RWV~Sa}=n?gOcELt-YP53Bvh@owK}U6B0xEK}pi!_}ry z6IEY#P1f|p$|es+i;sN>csQ7}p~nB~n%AtO!iRz8lNp{ z*T?hmE#Rc|t3|X>A5kBbx7=vI!%3^-_U`P#+jQR0ka+W9O&G#{+ei4AWa<0THdiJ7 zNi#Rj`dCXmwpJJy7V2p@U54~ksFHsshLI=&GXon0v$5I!##bqB*Abd;^9(nZ&mQ_{ zd%wD*9&zwEQ_j#cAgD!)q=XgCg*B&SJ?f&Odp<2q*23{tyrGt*jc(It6U3kBEsNhd zskgT{a-_K0!;M6-+kfbb2V3sNduUW$ZWy%SVD0DUZ;%M2evw98qMQS|)(bBnbDWm9 z8}E)a=U+At!UVk}Sf{Lez{Om+(2)Z|7+bp~Nw%y@*f-eWl-_Hmsi3=6F=6nO5_ef| zM(t$WK>LfyWtDbULeGN6vd@Eff=6sZ*5h+fVkD^}=Tk#83MZvpU%PfGuOMh9ns*=r zh)_n@tEtc+|7)joSSmapKcS-7ZMqm6ld7g)C=T#pVVJ$P5zvC?k3Y-U<(@SvvQ^&q z1fq7cA$l0hEBHT0UZL4glB5q?&X64qmjIxPBu`({tBfZ4aydlxGh4mcpNQYd;iMku zM+edt$!RM}G+i0f*H1ioj7?aL3iOhqmm|qmQVE1}6k&}fZfe!OU<%UOZVcuCK#RW> z*GKcss>fz^7dKk3s#lN9-oBu=@VHw=^kO0oo$w506B@r>#GO)5$EnHbhGvq8 z)L8i`_~ImmiPrWEl8d-mtv`3KfdtodA z1j52Ff$AoS`~AGaC5vqT{C84*R1BqfzA8ZJzq|jcs~@TRpX4fVB~ndc4x!dh2oiVf{+vDCmD8cj1>NU0+N=N zQ6AQI5~-fnx^FmfF%_Nj!v1wc>5<*d zt|rBoD4^)}?A}Q;)C2Bf_+sX_=<~cx>kIL|`D2ek3fzMi_J)v<)(0n2TLFZ<8MzlL zCQZYJ-;(BaCe!V54YSgKBZ`$GqW4EYSy?&uk3Un35Do?bH!2bKne$hR5!IA7(9XOQ z|JEnHcY#%EU|K*7(%NmrcZEzmA7~en?as#=Y94i5zH;}&d`U8Xw4JD*ZAW_Dk5Gnp zK=bV(_K8*O0CV6LH$~mcGVEaeF3r2_k+ysR?}J4oP$uTd!Qaun{73tc_31cKoii}x znEkk)onSISM^nPz^lgwA*U~6FPP0An`m33A1^2o6>G2yT-kGn;DrIVB4^xTuLEc+Y zBjX=9LY}&%i+2-(>_g$Nt5+{l+Z-!@O|>rGsv*RN03g2;bD2iUCy5XvFG@59AyN*>kqau-`3AfR_LB9nJ#nZkZDxG5t z@(!&1CWN9sba>wbqB-&G3_0Nv)n2W*X6ejwdmmdqP!g1p-TgEYbmqdYbw((l6I?P& z2gpR`a~JL)g@B(}lbfi#`KN=#gPccN2o9mvBSxmpaITi>JVe9w7^tC4_aQZJ*A#WH z<=Sba|M8DW3k|pYn~k|7nd6wKPc;Rc5BC7r{jPg@Q`iK%0RV#LzabP2;z058?R^#7 zy8ldfZ~rnX{rEKk*LY%W3Uhe^LEr>-YJ{jAf$Zt0LD&5YeNmmme_Yw?A-gLS z(^;V<9i*R}lGWwnUM?d^zJB`Y#qk^bjrIA*n$Wx&+76wB_>wVFa+X$X!Uhx7Pqktr zA*N7g*-esD+ee8nU#;4HT`KXKdyn(^Qt*Aem@@b5i-_Ku2!r_KZa?m|RXW1^y6wIK zOQ>Z7bDuZ4O|#1v7T1(VGB8Q6ur5Td@~P5`T2;Em5q8^gX)3hZeDZ*=Z)FgP%QPgN zrJf-ehgS5p#>={S_=!*5jcQfLYU`1RiG6dKq5XH_SvM;yq&np!1?A)ZHMRY)2h(#$ z)BHO!FwciYdNy3a++_2T*Q{9?yn(Y({dp+xR@DDdV8XeC?;jFq6;j?NXRXwUyIRs$ z%VnLoTh+3=m~;9Fcca-6hEJx znejy16nl7c-`nYQes0Uw(5u5Gr|Wv|heh0Sk}CVdHeading goes here

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "Example Image", + "third": "Example Image", + "fourth": "Example Image", + "fifth": "Example Image", + "sixth": "Example Image", + "seventh": "Example Image", + "eighth": "Example Image" +} diff --git a/core/templates/layout/grid/three-column/battleship/battleship.png b/core/templates/layout/grid/three-column/battleship/battleship.png new file mode 100644 index 0000000000000000000000000000000000000000..3162b44ebcafc00d42301a2e562146fb030f4662 GIT binary patch literal 4710 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 ZX<{SA2I_bBfyZBjklMytRT@r_{{t&ty2k(j literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/battleship/battleship.twig b/core/templates/layout/grid/three-column/battleship/battleship.twig similarity index 100% rename from core/templates/layout/three-column/battleship/battleship.twig rename to core/templates/layout/grid/three-column/battleship/battleship.twig diff --git a/core/templates/layout/grid/three-column/blastila/blastila-left.png b/core/templates/layout/grid/three-column/blastila/blastila-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a31ac6d8cf5cbdf438d737703de4ece3423224c3 GIT binary patch literal 3864 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/blastila/blastila.json b/core/templates/layout/grid/three-column/blastila/blastila.json new file mode 100644 index 000000000..f62059bc8 --- /dev/null +++ b/core/templates/layout/grid/three-column/blastila/blastila.json @@ -0,0 +1,7 @@ +{ + "header": "

    This is the full column header.

    ", + "sidebar": "

    Sidebar Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "first": "

    A mini heading area

    ", + "second": "

    Left content column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Right content area

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/blastila/blastila.twig b/core/templates/layout/grid/three-column/blastila/blastila.twig similarity index 100% rename from core/templates/layout/three-column/blastila/blastila.twig rename to core/templates/layout/grid/three-column/blastila/blastila.twig diff --git a/core/templates/layout/grid/three-column/chess/chess.json b/core/templates/layout/grid/three-column/chess/chess.json new file mode 100644 index 000000000..ef8e9b188 --- /dev/null +++ b/core/templates/layout/grid/three-column/chess/chess.json @@ -0,0 +1,10 @@ +{ + "header": "

    This is the optional full column header.

    ", + "footer": "

    Footer is optional.

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "fifth": "

    Fifth Column

    ", + "sixth": "

    Sixth Column

    " +} diff --git a/core/templates/layout/grid/three-column/chess/chess.png b/core/templates/layout/grid/three-column/chess/chess.png new file mode 100644 index 0000000000000000000000000000000000000000..b4ffd94c7f0682ac68f8b9a59a2a185158f1c4cd GIT binary patch literal 5046 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 SD8hgLVS{Sus~4+14Ei57f_^gq literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/chess/chess.twig b/core/templates/layout/grid/three-column/chess/chess.twig similarity index 100% rename from core/templates/layout/three-column/chess/chess.twig rename to core/templates/layout/grid/three-column/chess/chess.twig diff --git a/core/templates/layout/grid/three-column/cuttoner/cuttoner-left.png b/core/templates/layout/grid/three-column/cuttoner/cuttoner-left.png new file mode 100644 index 0000000000000000000000000000000000000000..32a3e249b2e96273e3b339f2a0d4ed6cc69e3ae0 GIT binary patch literal 3940 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 LtPHD8oQ?lKmkt?a literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/cuttoner/cuttoner-right.png b/core/templates/layout/grid/three-column/cuttoner/cuttoner-right.png new file mode 100644 index 0000000000000000000000000000000000000000..584eb1b24dc3ae84064718672b6c698d96bc7c10 GIT binary patch literal 3851 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/cuttoner/cuttoner.json b/core/templates/layout/grid/three-column/cuttoner/cuttoner.json new file mode 100644 index 000000000..07e982833 --- /dev/null +++ b/core/templates/layout/grid/three-column/cuttoner/cuttoner.json @@ -0,0 +1,7 @@ +{ + "header": "

    This is the optional full column header.

    ", + "footer": "

    Footer is optional.

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/cuttoner/cuttoner.twig b/core/templates/layout/grid/three-column/cuttoner/cuttoner.twig similarity index 100% rename from core/templates/layout/three-column/cuttoner/cuttoner.twig rename to core/templates/layout/grid/three-column/cuttoner/cuttoner.twig diff --git a/core/templates/layout/grid/three-column/percles/percles-left.png b/core/templates/layout/grid/three-column/percles/percles-left.png new file mode 100644 index 0000000000000000000000000000000000000000..c596c36b075f730774b9473185dbdbc8fcec72dd GIT binary patch literal 3783 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 Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fifth": "

    Fifth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/percles/percles.twig b/core/templates/layout/grid/three-column/percles/percles.twig similarity index 100% rename from core/templates/layout/three-column/percles/percles.twig rename to core/templates/layout/grid/three-column/percles/percles.twig diff --git a/core/templates/layout/grid/three-column/robot/robot.json b/core/templates/layout/grid/three-column/robot/robot.json new file mode 100644 index 000000000..2ecc22da6 --- /dev/null +++ b/core/templates/layout/grid/three-column/robot/robot.json @@ -0,0 +1,6 @@ +{ + "header": "

    An optional Header Area

    ", + "first": "

    First column

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    " +} diff --git a/core/templates/layout/grid/three-column/robot/robot.png b/core/templates/layout/grid/three-column/robot/robot.png new file mode 100644 index 0000000000000000000000000000000000000000..2bde12efd1ecb0570b8ff9e323bec027e5c30189 GIT binary patch literal 3304 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/three-column/robot/robot.twig b/core/templates/layout/grid/three-column/robot/robot.twig similarity index 100% rename from core/templates/layout/three-column/robot/robot.twig rename to core/templates/layout/grid/three-column/robot/robot.twig diff --git a/core/templates/layout/grid/three-column/space-invader/space-invader.json b/core/templates/layout/grid/three-column/space-invader/space-invader.json new file mode 100644 index 000000000..2ecc22da6 --- /dev/null +++ b/core/templates/layout/grid/three-column/space-invader/space-invader.json @@ -0,0 +1,6 @@ +{ + "header": "

    An optional Header Area

    ", + "first": "

    First column

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    " +} diff --git a/core/templates/layout/grid/three-column/space-invader/space-invader.png b/core/templates/layout/grid/three-column/space-invader/space-invader.png new file mode 100644 index 0000000000000000000000000000000000000000..4c14d6a4eec8421c4b85164ee210294e14bd3ff2 GIT binary patch literal 3469 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean-right.png b/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean-right.png new file mode 100644 index 0000000000000000000000000000000000000000..bee639a65677c85cbf5fb40194ffcdb6094a49c5 GIT binary patch literal 3054 zcmZWr2T)V#76y@kG(`wR$`XQ9BcTN(1TcuwLI_19bchL}p-8WyG^vV|Pz0re5>VjL zMLMFPNmU?J5dkRzOHs;;?!H}T-krJsf9^S7`OmpCcWyKmqr=H2z{bG9z^SLJZ9?B~ z(eFrB0DT=Jcwy-qqo;|E7DHLD&>}s~ayGN@vM@v=@NO=$4%gir39^1J?sOCb1JVyc z4_yde4q!hQlB*}ePaX0LfuP4f(=Z757sTt9I>f>d3%=y$K>)*Lm1N~08f;)N80m4H zh%nK<@;9CSqz<{^<>iim!F+vvWqlQ8-8`IN@~Wz;FgXR7g2H(^;=HH7tCxe{c~?)d zzeN70qfPL{dpNs$IlH-nf9g6ox_Nu4Lm)qm{<;1-C&AD8Unf`3zuTfW2>V%q$;-;Y z{?VpWkw3Ettg|11WTEZsLU8q@duYhZsUUyh|F80|<8MsdZ%jp{-M<>p_s=!-5TpY2w8oT~L($}%fB z2GX45SKA2zXp{nG!$Hr$5z#4JI_oP7JJXXjC&7IlQL`Q}8J^+KXt9j*rdcUr8krX$ zBmr-T-v^`YhRPFe`y_r>+gI+bok6>chhn?m2iIookIuA*Geu-|N|tyC-OR)DP32cl zu2q~|a+vKQ$E)Cto>DE)fx~sr`_5vX#5;JtOv@%N8XnX+Sq~3gzacD zo-RxBB1tmQGM_nAqrErneK+KhHp|WY*8<#UQcC(mb~ueGKc)_jhxo6F?e?V}MdXi5 zSM=-33*L86t5+zTTe2*oyJELZWd)r&pJ?<6R+bleUKN=O3=dkPeYiJuu;{8@F7@~c zG5~OLZKZA9-7MjH*qIlfNx6dgfapDv8it*FQktVdUPyhZIeR?f%Qc#F~aq7Xcc=?s93(qy)yuRPY8?bEi zNxgLG1hn$T^BmIB_UUXjx%%93jjp-)Fpe@!Q0uf5KTYShb<~iJ0f`vh>69S(9kYrM{ozZ2a&H;5c`hg(7VtNLvm+A@?b*9o=-gxWtC2ZlBw_#pTuNN>U@IK*8R(TR1rYDSrVfJIg1o( zQF*F|7uzFRTAwZ~C&ot|U!il|kEDmCWqlNPM4eS9Dj@ zFJ%BHs+!vqy*asl)G@WUSEPHd7PAtXD~_R|Jru0=+=VoY5p5L^IR?vyhCU9jZ&@$n zR!8$DF_?!Zol3Jna6UQPwNNA^;@!3G1ns`LzbNta3tzjyT$@s!u{pBI!rH}YOFx&S zpTxSlg9q6zwa&rGmzYgav6mmVyKIeSH&rp(1f0dx&hp*(Bgiw3e_m8$7csHYGG{fO zz!i{^Mku#FZK`-lc22C_Hzb6`Hh7ugX+c{_DY5C@BY?Hu!_UUVM%8AWcRPUf*-0O9 zOB{tk8PqUZJu@q^+I*pi1!erKQikurgKb__PVP~PYti=>I!52+z`QdH6tJ83CY+Jr z7*Tc{xQvbhHUsbxep|;<2;@e8F8i>VhlNOHcJ*=o=&N&&+m%+X z5=@clkdWn?t`q*ejTn-s4O!#jLpc{PoN=7R(OnH)-2-0RfXO`41MB@FGkIlM+VTIL2oCjZfHo=cZZV3;!>nQe5{agP+5qfl`UK$D3*v5g=-xgor$XUb>gXL3VHvzAPYyA zW8K7=VT_&9f2ynd5uB??m2gXj7Q16$9JD^m$9u>pK5}G)&r)Z;*Yi>_^QnDthQyAW zAe|nXVzy)5LTweRjQK6Idf#@sslkq}QmYmq&7$?n^&By{dmjT2HFBu5p`g_YRkIrV zjElGgyE_eIOvuE=zA5H=at2$DZe#+LPySH)!QFZNQH zg{wYlGRcrbdQ%@r#TJA>a2Z1dYD>W*14GQCj|gPYr;6HR5f%%qPQ_Cy|=N@4+y)<+VsrsZS?e?n923&Sh>g6Fsu z$^`=Zxh6sOjvr~+Dy#y4=Y5Zd0W!E@2~{2`wLj7aA%5TR#?;% z_nJ5|%5Xl1BbtwP`3**)N0|*VU4^K?rv-!A=XwcEhDE4ly&@F-jG>sY$zq>Bq71{7 zb1`9b*@%K7lp8A?YXkVy{d^g<@=6{YTOi2c2KjK&z)jApr$Q*;+?R~`_?rv&J~{XM z-{9;|rhnV+sC-Cn0|*3 zbE#%t7N?6Hvzf=O@*J7Zak3OT-o}KM8kdKrL^9zW7e}&^c=b7XsIIg>mnDt_;0N_@ zHMQa`QW?oOZ?)%HApkS_AYj7A9hMo0BjI!lAC=;epsg2?htcht3uTasZV#aDfrcj2 zTMGNTc2Y75Aq3RKXK<}dT)-RdFq@3WIq%JZ)Z!ySV#25=RIXx|2ick*?ivJIG3)8oh;5hxYvNGQxrobuh>f<#tZr0#db20GhB{W2 z0b>#_CARlZjorl*1>}lilv$RUCEMC~%eylB?LU7r88#mpo(_*5wpwnzyWa^x?nq)tnJ8R`SIiqzXSK4Q~$yVbDUJ)wIvNaiyw8hT<5Rjtrkc6I~87qXAJ-Gbou6 kNHyWUgX&k literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.json b/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.json new file mode 100644 index 000000000..391a2c98d --- /dev/null +++ b/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.json @@ -0,0 +1,6 @@ +{ + "header": "

    An optional Header Area

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "first": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig b/core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.twig similarity index 100% rename from core/templates/layout/three-column/sunset-delorean/sunset-delorean.twig rename to core/templates/layout/grid/three-column/sunset-delorean/sunset-delorean.twig diff --git a/core/templates/layout/grid/three-column/thions/thions-bottom.png b/core/templates/layout/grid/three-column/thions/thions-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..10a2192feb1606066702004417364ab0f99729b3 GIT binary patch literal 3564 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/thions/thions-top.png b/core/templates/layout/grid/three-column/thions/thions-top.png new file mode 100644 index 0000000000000000000000000000000000000000..992a04e44c6cad6e0fb48f7273aed2a74edb10f2 GIT binary patch literal 3628 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 b!TbE|9?4q{CE+)Y{_C{Wud9`-+@kykW7>S# literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/thions/thions.json b/core/templates/layout/grid/three-column/thions/thions.json new file mode 100644 index 000000000..4a7c14c1b --- /dev/null +++ b/core/templates/layout/grid/three-column/thions/thions.json @@ -0,0 +1,7 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fifth": "

    Fifth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/three-column/thions/thions.twig b/core/templates/layout/grid/three-column/thions/thions.twig similarity index 100% rename from core/templates/layout/three-column/thions/thions.twig rename to core/templates/layout/grid/three-column/thions/thions.twig diff --git a/core/templates/layout/grid/three-column/valmer/valmer-left.png b/core/templates/layout/grid/three-column/valmer/valmer-left.png new file mode 100644 index 0000000000000000000000000000000000000000..eef03107c0fba63e1f330b6f429a6cc99df7055e GIT binary patch literal 4009 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 E01YcmKL7v# literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/three-column/valmer/valmer-right.png b/core/templates/layout/grid/three-column/valmer/valmer-right.png new file mode 100644 index 0000000000000000000000000000000000000000..a00f3100c248bd208ee2fa1d973a25fa6f5c9d92 GIT binary patch literal 3725 zcma)9XIK+kx26grp(#ZKjUk}a(4@qmMv4hdibx9}ok&jtNe~Xbh=380qJUDQDMbw+ zAWftRQbLdpDo7U&B^rwI1<$$X^WO94&hyOdHEX?Vy?ed;nVCJeO^mMqxJ0>_n3w=a zgpL_wL^IAP&O?lAiWR#XV_?RbUAfFu-Yd4qu(Q$EtZ-IFhEQi;Zv{seUnf@ug0~+7 z#l!?7KpCdDE6x!}@b>b-LJ3-+UkE6}K5#=oz+VuYrxwV{$ONeEi*W^>Q&3e<1YO_) z0)a4$iyPETNAK@+#+??(1Bdg2LLhiNUIDM7;EQpGC~0bHLKKxD%F6N#ggln$gL5Rv z`(P#hD)K*dbX>8{7_=V_?dtcFoNn7`VgeZ^||za;eDbFs6xwYl{? za78!lZRd`27!!O0vf;VO5rLY15&M!eDnM=7dH6+ur(0^!Y--GqSF(yk(vIR`gV*sD z@ic_mxQAJ`ESF5I&8^3_p35)%$5=B94sk~rnz15m$lfq5s3oK+B%fzmZ27ZsNBR3j zB9ZAKix)r*KTK_ftd`KqEOPZpTc3)K(!O5|&2RkCVZa_yHwhbvs+mh=hPSrd58Cr` z@ZKvCmMRI=q`q9BeP4?!;JKGtM9CuXS6a5po&zRVulW{t-w7|)*6S(YG0KX5!d^vw z?cqkboP$j2m@`oXC)Y*h+JL9=`cg5iZwRXi=GaPEZJU#E#Ie)p3ALt~q!6X))Gcxk z92-_3(zJPQ&-rqCPFgJ|@>I&hrODxDLrjrfLp{ZQnFU-`GibDI9R|jGd)ds7Ir)Ya zyq=g8>Y@xPbDUrSPo~|rzKeS4qL4x*t@CFf74iX#=F2_YBx+rwTD3NF@&t#K^DS#^ z>ysi^oIX?+FFtIr4-oh4h;Oj)BX{A%m8ww{G5!I)|hu1W=mu_9nD*2Aj{$ z)p9F!3o2P1qM_WoCEmBR&#QLGwJJF)DJ;+LSiugLC$?;edLJQ%7V6&m%JjB#`@;pRc=hG$hwu{zC!RjuE& zY6N7BUK173$ZnBvISEyy|CzfB3+S2Hmln-Cwe!lc^r5E?F^-?MEb$19FuH-$M?a!BY!|8a+h+;%LMn|lS^ zm=sn~`jVNh&>7S5XGDpz`?W$Tvq|mXiN3=+HnLcGDYWs_Gfp)KUQl!Dx~#AUqr3s~ zgEsXZP*Gq@LZQ86#QIXw=M&+@8J2LGVEAPA`LAxu>i#yd2Tas%H z{-Z22;Y`TeLU9af-{jHtfHHFyCLy|E1xtzDLL$6u2z_$=nTT}(p?~wHP{Z!=0i_4> z)%X*J(@ldV_yjj)iW@f{i$~b~IUc@F$2xg#zkp+Fikn7B zY<_1vW4BPm*Kwa;ST{rU_gOlM*&TvCTozfhmwjNT%BRP=Zo0J${fwEeYVq-vL`s|o zK7)+wFUG09iP^9k)(&FSVr9?|dE|F-n^t$7ev^O%`1|8!?`FhrwZ7!?M3r za~IbE^l-Rf>$NaTtQFPt2w!~_lft((nKumR!PEud?Hstqn-JRz-paS8&-+aP-gGj33|ItVNPQ9op-TPV10+7+D=2a@*)vMC z{9eGWju5W@*_R`q9rxFBYk@!YpiXMwatBm1O0|G$ zJcMRvt&VyFo|-l0l}qdDg3o71;iRahZy5Re19Z1*CDH$$GOA+6sbc(hPl z+V_Q(4GFjN3H4+5(Z0q0Zr|0QI~o9FkCv|{XO9u1wVG!^V#V8lMd+lT=_{qksn7=X-i(4(|-)I40n>)cqOI@1pxJxDIRTf8gh@>I%78&?9-!i_dc)>T`cqe-D2U|{Sifm3n}G) zgkD0|XCsd!|EW1Fnk_k2z-qr!e_l+IS?F@{Dd!MpO&|9fSIyK>^eq3ocZP|(57+Mm zZY!>Aydc}n-P}y~JD+4NK#Wq}UBM))OivChA~v)%&K`nO+5@j@?YElKMj>nH&;Y&p zkoZKMlX{i#ygbtFuC}Eke#X@!jTv}RD|X#crzruWv?v}nk`9`$>SaxC^@ZHSW}Kgc z1)^eAX~M!b%Fnm6PP7X@Q1)I9Jugw#s8sp6?y(6nHAn optional Header Area", + "footer": "

    Optional Footer

    ", + "first": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adiptrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore eum.

    " +} diff --git a/core/templates/layout/three-column/valmer/valmer.twig b/core/templates/layout/grid/three-column/valmer/valmer.twig similarity index 100% rename from core/templates/layout/three-column/valmer/valmer.twig rename to core/templates/layout/grid/three-column/valmer/valmer.twig diff --git a/core/templates/layout/grid/two-column/donies/donies.json b/core/templates/layout/grid/two-column/donies/donies.json new file mode 100644 index 000000000..8caea6850 --- /dev/null +++ b/core/templates/layout/grid/two-column/donies/donies.json @@ -0,0 +1,6 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/grid/two-column/donies/donies.png b/core/templates/layout/grid/two-column/donies/donies.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/donies/donies.twig b/core/templates/layout/grid/two-column/donies/donies.twig similarity index 100% rename from core/templates/layout/two-column/donies/donies.twig rename to core/templates/layout/grid/two-column/donies/donies.twig diff --git a/core/templates/layout/grid/two-column/frogger/frogger.json b/core/templates/layout/grid/two-column/frogger/frogger.json new file mode 100644 index 000000000..a78aaa491 --- /dev/null +++ b/core/templates/layout/grid/two-column/frogger/frogger.json @@ -0,0 +1,9 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "middle": "

    Optional Middle content can go here

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/grid/two-column/frogger/frogger.png b/core/templates/layout/grid/two-column/frogger/frogger.png new file mode 100644 index 0000000000000000000000000000000000000000..b5e85d7a1966761d32d5b2ff17e696cda335f99a GIT binary patch literal 4654 zcmZu#2UHVVw@zZH61viR7wHgM2#EAv14u_A(tEGcA|0ek^%@8&(o{N9MFgZv?*!?+ zNK<_A-s}JS)_b$o%-M7H{`Q`4&zil@nK(TiRR}RXF#rI7sH-U%;6?}B8BK_fyC$Vc zjNt~Lw}Gl6pkjb=11A?a8kzc-YHP{dcXt)EwRg8e3I@1(;H&@uSbz*pbVd5uvIe-i zxOvM2$g%%zA%l~DO$)KJ{%zvpEXQuDt;c%T-3!SoAt){=%nm1JWo3nV**}mmP*V99 zj=Pg%f9T`mAtNN@@9!_@FDB^jN`})YSv;PY8pW~nBL4Fo(g#MFyI5FAlmu>(6xxBj49isr?j^%Z4hB}IQ*%oy(_a33CxUCP`+@nud zdESi{%|G?Sr0W!Pb5^HI#qDs`a+zm!t<9zVxXGyiKyj2Pak4Sc>IVo`P40R4n*xG| z36mp_3_#V{7I>IwFi48onh?mC($1$jj~@k;3%!UYwPw^GPvND{vPbOGus?eI5G<|A zL2pdy^&=eyNu7A^dY+ztQ61xdai|75zJd{aRne$fTUJ>nR@9Mnjn zxiI#mz@eKinxLGu1DRvTcqpUNyrw=*umxjCUv3bJdaSC?@%lA9|roiFEh z;q_30@f&6=XG8dsxul*fO|@(%TlHpQ*1XSdBVFj_S_p$o3M#}4QUYyh`FdzcT_K*g|Nj7z*kOvr+cg?mFWx1RTVTM)=9};400Txh z=VL%pRtn3FOG{=ecEL~wnHcqjz`c~z-Bbz zxRW6|L}F$Ok$+-Z5OvM1!)^S=L|;$Uv1R{Mpr6GEb;)3_1N}yhi5cn`S-3Of;|K4y z^d*#GCQJ=R(CHzZM|nRsCaqFSp{3AE7epm9s0_wzp3NX^gU}Y)(||Ml6x2i|8MKq-OG$ZBY@5rFD*Nb0MKga0|F3{ zE}`qVH!f4|3QbaBZ*Ujr6O{?{RxI$#R^da_Tdk0&3$TkelPs7)_9} zfpQPS(CAv}SIRxB|Gc=;r;+>h0^9H4Nu2=6mvpnfL6b|B&qnQ3fX+x}Ipx!=#!@jI z^e)|EAXQyg(=gl9OU#;co&h*5@OiXMhFxx?GKUAN?R3IR-cxjO0kGGhw`Y4k*|t*n zI}Qzyq?OI&P9BhEYJX|Z%y~ea8Ok6%J>guKuMzOdL~2-Z~eE_4{kj~3;BlXy%sFfUDSQ@Bsn2aI&VPY1;C zywn)(QRb;HM0asfBen70F)cfM>jsyCy37UsqNv?Ub&uD595)7i-R$z(5Fn3lmoeGbXfuFZV^p-o%@{7waq>t3A z&T_U6nM4v}K zGg-D9G$$6dd#@@VKgb>6$Q#oye=nN3^`^qJ1%#6I-fxGOpn;Gn(nq3{BIOUq{vw(7 zvT~Sy->5v{zIXrF#V)wcqp=SXh?o@>{ysCc@SNXV zAd05OJqfr3iIIC9weB|Wi_Xrp&BO3kl=f8}BQ3YL92o^odX37Bt0*ejqbqUB@q1)d zjk4=Jid^z`HA3B&OKc?A6O^haEhE_^DMc#rBjMTzKb!_yO&rruV>H_7_2Jp8rF8~=k(geuz7z_QvpdCQ1YL2 zo%MKY#yf*BHNv4p0cd^&3`QN5B~CkJX@(P#WkVoVrBXK?)ltT*H0j*&t4ce?UieE z=)^}E{bqM&F?{h`8=|*EO~(8RnX<)|H{Kq)($i(*a6baiE#{3M;BcBJNya*lIu|^8 zY!hzM6?T1Y@rxQfHIDB|o?DAp0E3FUgq{Zfj23%imo z`AXPYM5pfH;O^Cpf;Q|CdX@$b;pq=QpDaD70d66re7gxcG;#}M@scMG&d@x?j>5+t>?IaPfZ z(VjRMoh96DR!U}jGre3$qqNO-HT?Sp-;X_O>jZvRUjjca=fLm~8%a!Ao&UNnOWjLE z<&X?Xc5Y*vh-KXzx`-KGve$A!0fnb{+W4~$q&N1in%}b`jxy{J+065=7`ZyJl$3HA z5(=c!-@_9J^XVXh1HObtlev^mR$tr>PMSMQtJ({UxZ9B9yjDEb-SutzK=a}x7;r?) z{ghxRXn!k3_q4VrG$=ZqsWd6^Nrhh2tCkmO9O57%nW3lxT}HkX7+7^%AeOZ1=+#}J zqSlW9C)EDdf^1UtU(TEuel~G-6m?_P z^(uzAz&sPEIw)HNR^%NpACTNlxgS|mw;I!S-O);zYL^D&UD$~{Uch_1k1C_e+iPQg z;PP78e_+-tY4H_x=yF;5wLk zm+#QOzTp;MsdJ-WS@TSBY+5D#p1Fh*8Knlh=`Cv3z-aROz=mum;S?f{n6w%O?MGC1 z`t@g&x+|4UMHjnRQe@aFNcUqBFo|g%JKwnHuJ&VvIX3R~EiE^D)C7knBwH5_C76cY zB)P?sU8wY>H8-4sIzps{<82sPXAECqC?8ZByYtLnzCjsc`otzZ;roH~LcXa>=T4$) z@UE?XJf!MogUVZ-y}9>%Em7ZAnQQ4z4S%YT=By>es2+bDmvPPV-#cHV$CHybgdLR1Nld{~n>IBfI8oQ!!|ZzKKjk}I`Z`$EqB z_kyyAt1g(^s=>>K;t^OX`kO*PMom_@@>rR8>zGfIr6)w8qWg4_xHYLwkzdXo_Jd+@%h_<{s-x|GB>o09(A_O{`?OA zvA<7IQcA1G=g{!VSAu0^fD6cmXr6qVr2APGbt1_9dFyyWSH2`FkKolUT*3POb7P6> zVo$!6e&#ISv>!_(fgxP;`n?!!qJMX^U0=+nQIt6-KH?dUWE#m1taTrqI%galdsO=Y zS{au#_&Q9ZPJX&nb}tm*fsx?#pj8ffuQGf+N9@CDtwHe{Ov&AK5LcVYdxba^*KHcu zZ1D?gdlkwDB$}bKM~w`V5o=2(b3%Hz=Zz%j4AdjZ@=nc#XyU^Bfw#(UfPI%w2q05+04$gzy{1+HGM08wyezy3ZXB zEyOFto8G+5sCGO)V_&!QZ5;7|uf|v&19&}TgQWVX!)(o$ zvoiZ2iz`aYx{82qmfK$WU=J_$10LKb^}o6j;QBnn(#Q`24;a9q`GB)BO+*50*Thd8 z=N)w3!F-G@x4WZ8E29mK=OLv&a=0h%5ZP(2sHw+gv!uO@KNVQL2+_rkz|o!M-kqAhN5->JrE#DmAFlP zOOF1XhWPEg1w50*{T}SaeCoYDY}8CQty9lgZmP*gP(z4n8NO6=Y^?Tn=W1%MU-RU?$x1)>z*6dFoV^|`8s#I?5!R=pI}k1GsBEbV7a@bqq}?e!|urgzPbu} zE=7AH%0;w5v%@rO+%DoRSWuB_Ej8kN*N?PA&*uQQ0=jMWv9&4Y=d~sfrSVCYHTc(` O9d%_Lr3yux$o~N;ZleYO literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/frogger/frogger.twig b/core/templates/layout/grid/two-column/frogger/frogger.twig similarity index 100% rename from core/templates/layout/two-column/frogger/frogger.twig rename to core/templates/layout/grid/two-column/frogger/frogger.twig diff --git a/core/templates/layout/grid/two-column/pacman/pacman-left.png b/core/templates/layout/grid/two-column/pacman/pacman-left.png new file mode 100644 index 0000000000000000000000000000000000000000..cfa76eeabebbcbce5fb6e1b9c69b88e4a8db97b6 GIT binary patch literal 3272 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/pacman/pacman-right.png b/core/templates/layout/grid/two-column/pacman/pacman-right.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6ee0a871e5aab86f09db57cde1965b12c4f758 GIT binary patch literal 3278 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/pacman/pacman.json b/core/templates/layout/grid/two-column/pacman/pacman.json new file mode 100644 index 000000000..26477b6e3 --- /dev/null +++ b/core/templates/layout/grid/two-column/pacman/pacman.json @@ -0,0 +1,6 @@ +{ + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/two-column/pacman/pacman.twig b/core/templates/layout/grid/two-column/pacman/pacman.twig similarity index 100% rename from core/templates/layout/two-column/pacman/pacman.twig rename to core/templates/layout/grid/two-column/pacman/pacman.twig diff --git a/core/templates/layout/grid/two-column/plakes/plakes-left.png b/core/templates/layout/grid/two-column/plakes/plakes-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a0f6171e77ebf9373aa6c92a9d2f557d1428b6cf GIT binary patch literal 952 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq!^2X+?^QKos)S9WY5kFi71Ki z^|4CM&(%vz$xlkvtH>8? ztx|+t?VyL%(9@GcP=o{)8=)=thYPA80S_NcQq~=7pWag&k6$9>0F0*7o-U3d z8LV$-Mtd_Q3bdv7r)AAr*(uSMDmeE*_qsi=#lPe?FW9Zrv7)=nYvCg1g%>ZXnCgf! z6|$G4hfQn!>2O2#`P|CdZ@2ULwf4Vdl#^ZMUR$2qUAet)-tv>LCAMDPn_W>?b9`Ts z>b5Nt8(*GTveZ25U&VHg^xx*wQnoV*Uu4L-clom0ncb#yTlP#)7nqRg-0-Y}Wv|E4 z%Yrjv{j4q>=u|q`A+NhQ;rr+OsaiGlrU8!m0fAHAy;~vAd1xcUkLG>%uHDU@vS*dn zg`Yf9yB0QDra7#QVlQ|&lg+e#OEGKt^rw#Z6iwxu|2$)o$%{Xb{Zlx~er=~!BZ^o6`A3l9yTsoP3#r0W#HT&MI7ul2{`zJC7uXi_Y&u(huGi&vT=dnOOLPAF)gAxVwK!Aj&w86}vIZQ8pEtgKS>S3Q1}vr^A-Rosc-lZB;D^Smdl68{uZ6f<`MPNnxQKe_n*vvGIl z!h|Kog$A`!J?%9H+vhc97@15tmlvecx8KhF|Kv^4ch=VU`_Hy#5%O$VB^6)-%443c KelF{r5}E*HnssOZ literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/plakes/plakes-right.png b/core/templates/layout/grid/two-column/plakes/plakes-right.png new file mode 100644 index 0000000000000000000000000000000000000000..a3c84b67fd158ce1dc1d91d4772d852d9514fa25 GIT binary patch literal 2827 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 ZZC(>oEmpO%XxaL0wYIP`zioz%{SRqU7=!=- literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/plakes/plakes.json b/core/templates/layout/grid/two-column/plakes/plakes.json new file mode 100644 index 000000000..585039eed --- /dev/null +++ b/core/templates/layout/grid/two-column/plakes/plakes.json @@ -0,0 +1,5 @@ +{ + "header": "

    This is the header region

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/plakes/plakes.twig b/core/templates/layout/grid/two-column/plakes/plakes.twig similarity index 100% rename from core/templates/layout/two-column/plakes/plakes.twig rename to core/templates/layout/grid/two-column/plakes/plakes.twig diff --git a/core/templates/layout/grid/two-column/toucan/toucan.json b/core/templates/layout/grid/two-column/toucan/toucan.json new file mode 100644 index 000000000..330be3d05 --- /dev/null +++ b/core/templates/layout/grid/two-column/toucan/toucan.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    " +} diff --git a/core/templates/layout/grid/two-column/toucan/toucan.png b/core/templates/layout/grid/two-column/toucan/toucan.png new file mode 100644 index 0000000000000000000000000000000000000000..3258a9ca4ce3c3b40e9aa1e14fda30d1e0238141 GIT binary patch literal 2090 zcmZWqeLRzU8{Z_&>sG0Ul4ew1j*aDQx;Go6c_|}rDPdl+*rshVh1SlgG4hf~PE3mQ zDC@{e_~az2BVrvd=U{b0hLpnjP!i8Qb*kri?$77`{jU3WUElBby1u_Z?o{gD-I{8f z)F2RurYnW)4en9k`y)&RTtmf&UVs~v;D;uwQMu9R@2@u+}3RHPG&9f7n)TcIsb z1T`cQ39!Q>?Y+q^U*O;u9u>vq#@b^r@$vEK_?>7L`!L25hr?kkuox`X9IPkdqc zoG!iaw^S_s^_lx|Ivii-{IrDRRZR+8<5z-V?{pVwIkR=u{mS>VVSm0v&xg$=MMnBp z#VHEK1Y8F8} zGBaacmV@i5TGLw4=hM%v%e`8Y+vos0%ELa4l?C4(Q;{}K>Lz~}ieFslb|-sj+-z@l z9+4eC8^^dE-=FlPq`-05_VTF#@$icqLRL}Gi|HK6WkJ=9M71-sOFS}~wp=Wka>AUk zsw(_tVW21Pl~-T%Y*=JhKR%k?{uFzEqJM4ErzO=+adO^Ww<%kG-Yjf+aoXX~q6dHD zT5cv#$z!bBzoK>5F7rwZjg3$rj}nYbLOZu6xt`lsf1gp7qr0^Dh85TqJRVepI`}8W z5cl|p?tYu<2cg5qbcr$-ZD zl(}LhCzB~}DBO^urP|2Vx!73D7q0aQAho9{rQkx~&^D8dde1h4Q@CR0#j#M)dg9^+ zN|nsCw+0wV&>?Xtlup%(7RUB34Sgk3|pc*aHy+junPWLY`oXK7T7ubIQm}c+q@0$ECjVTAhSb& zvXM|(PS|z=@tIwF2fv{dGTZB>tcsMYS=f4_C=g43etp6^l2S^&Qpb}V*gE2%AF(NI zu(m{e447X&kT{UAdDF8NZU6UGJ)f30YP#MzOP8g+Lr86urw?mDTQB88))6~4gfNT9 zSzzlB&a9C@8Nped|MQNuM*MuUdomyu32i+HmCHewX2w+HgkJMmAiem$cynNLh3`pb zmi8mrj%|YcRp($dEea}S#or;5y8leI_mBv;${136d(SLi;1^O0d!x6vAOVD@8O4OoFm7E*? z)(kQgY@s2dNO;W-+GD;tU(yHGJ1KF*ie=@>KvUnF5eKRMl~T#+vT%=>5L%T?n*6dM zT_CbTL>qtf2-19??b~Ns1)sY%Jfo2nbP8`2Ks;)`6`|oAtE8Sfesxj;4K&!h&-c1- zZ|x{VxAn-W(gFk2eEOUF<8FYYLDIcM+v<-C7UK`kKW=W*`gmwwb0KU`ys6JF{qr`` zE3hNLBUey6FQyBJ0>fmD1*!4G##F z>?T4&S@7c_giXzU<0~VC4E^UVv9d1D`nenP{1d@C8p}Z;3nD#ML0Nr`i=J8mw)y$4 z@*L-t0x5Bq0rel-0$6g=Omrd=m_t7be0_-*q zHBTgoj0c+%&pvblns`4=FTuLqXS^G??;d2oRf$$okIKmDf*<82QVRlf8)6t9xTJ++ z86VP(t9ZiKPs$@MW~L*eLu+CUlOzROk>)Q6y=6l`MH`HYFMkZ zkmz_@{-&KS+XpDn55*1H2cOt(BtD65dYY~jWmsRpTGUse@EO}+s literal 0 HcmV?d00001 diff --git a/core/templates/layout/two-column/toucan/toucan.twig b/core/templates/layout/grid/two-column/toucan/toucan.twig similarity index 100% rename from core/templates/layout/two-column/toucan/toucan.twig rename to core/templates/layout/grid/two-column/toucan/toucan.twig diff --git a/core/templates/layout/grid/two-column/trunks/trunks-left.png b/core/templates/layout/grid/two-column/trunks/trunks-left.png new file mode 100644 index 0000000000000000000000000000000000000000..b052303f5f1525daa9637eb56701f253ef9588eb GIT binary patch literal 2467 zcmZWr3pkT~8=u2A)<&e)KBs0RD%&&19OjUj^dTZ=8ZxJu+QwFn8KNj3CFdk`)rT-T z5v_>mBFU-9%PZ1|R4A428P(f+eb066dH(*&#OUMnZ~)c}fx%!* z8Aqtb2T9}~aBxS&2D4a4jq!Lkn~h`Z;vyJ9c!H6U5gyRN>*#2M5!%e-be11So6c0* zNb)leDUcb!2sz3MiJ)VIdHwt&B3VQ%R#@oQvvJNqPRQSt=*%B&feqq?9y|dD;D6-? zp{7Esv114)kmgPb2@j+*!5U@+K*w}F{{K9GSNsj>@f%Y2AIRT4Kai$)VFSN4w87T8 z6{O1yVT%7ny%}OPQK|z1f!EuTEL}Jva|PiMBc#pk)7@Y8gs;WAgL&gdX zV?;AK@SU-3eVasOwbilG?4?>kS2gkR$j6vlCa-wYWgT8U@1DeeH=lnY>ksIfKRwKl zLS{RcCGLmI*_BE^=y+Rqb$ITRT*WPCT^JfUOY|hjUvYC`kG@!SGg0eG0bVKakLo3j zKb5$>>Y>alO?Vtm|M)^aZD5ugwh z7b5v+@8_Au!{gK2x>YYt0eTv?-#Xn232Q5?ZDz5bkj2e=lIBKje7UjixV1ZpV`E>T zE%&}}p;v2|X_OPFMKPZD`PuCYZEise6TGX!jsc^ z!!o)nD<7mO%fX6E=^ZvN0|LG`mBc#Y#(emA^WulgV@-t2YU@wdq0z+yO7JE1Jw%ff zX>+3!5|6s`9Zt)3PM#38_9gW@AMi~ih|UoX4KxI~%>}K6OiyMj&5E&hRo>9p-uZOt z$l7V8WuJFwFG3d#(3y_*>o$6?95B-J?w(iErm09>0A5G*<(Y(MeQ7$oPi*yR;1wjS zVfniD_GO*4=k9KO{y=}bquZ)I5C4FTgl%Jn81z~nN}5L_EvwI%sSj=$H-TjrPJBl^ zprmT|9}W{Y*%8xD5pM|AdL;sVxZ3BbCkeDVR3rVk{q@xuSrDt3^DbsQeyHal**3w? z5UMzgRqymnHA!Ihl)Pg4 zpZl;{*^q~EoLWA~I~^m&ow+6{6BC}3wV=!m$#Dp>VOj7=dhDX-2&(cjwz`dS;tN!+ zckK1SEzQvYiFT(8kq&7DP0Q6E{FE)g$decRKSj8lOeW~6&pM^8@eUdra?!cw)&E)C}ToB^1s}UzP0~TpY+WSYJ_a-G_l|L%a#1=d~bm7R) zX(-iR=%Ll*4>UN*QtnbiQ{%EA4~t!CKoT@$YM&@F+Ow9gXOFs!5R$B#?!5~Rj+^Hi z<)idW1nl@jA=t5%XRkl5)CQR{bWoNtTt{=k(#Tv2vDQ zdBI2i6ze`$wIsRn;go+E&(dIy3@7F;egn^`em9`2&QdZ`R6kXPh(5XKS$a|o?CD$v zEUqnYKZtJC`mcxEQ44-0CBIb`sy4oe&-Lh+9peXJ7l8nvs#n8z2k(;X+ z+61p0)Ib((F%ujKNFk}^HwvvXw`4+p?XSSCTE*o;(yXO8Kr7v|o;<&4&!2pW=g(wO zN+1u7Uc(fwgCQ+cmSXTkSLP0a+&VR74RRGHQ^%h|MRcA96?{X+;I@{5;b5M4?o?f4 zi|B?5sGtfeu1+5pP$Yg%J|Xd#gL>2`UW+{AeoeH|c2vW+^Kf$h>G2v zf>iD8mvg`YZGSHL9CP9$rE`%OYYeTN{icbrRFJg=tqN3dsD!kM zWK;C}PS4Cp3x3T~y}S!Bcf7~d6{sZ6LATmPzv5jGUg7IJ%bT|{q%=fQzG10c#W~_G z6`{~7tz<3NS!+*8TBf0d*T|>J(iSe4UiK0d>IbxX3}P-i`1FeiJ$nSMRpkPOJr*lw zjIJOJ_ir+~qpgRk4V2%z47un!*K1N=_YcG`G&TlNpG*(knTl{~UW|X~?kKQ)7fHWe zJQA7bO{dQpFOQ7WEQhujp_x2QM8{R5$?O=vo`y(%O0p9*1GiYJSG?c*L01s@Qos9s z3TE82T>UFiVALNisiBA(pS)tl`TW+%E`nLJmh;7hPvGGXjK7_D^row9()xz3zT)^}UhEKYgxmmol$#fe7%M(}za@UnEnhDlJ3pu0 z^2Ds_jDOs-#FJjpYl!mC@Ewgcyj##=&Kq`eY`%t}^X(WmR6gRyyC^&2y{^D{rvP@3 zk04AwL%(% cm&E@nZI0uyz2{~g3;#~pT04-c_fiu72Qrc}Qvd(} literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/trunks/trunks-right.png b/core/templates/layout/grid/two-column/trunks/trunks-right.png new file mode 100644 index 0000000000000000000000000000000000000000..f44bb6857bfdd09caabe4350092c215be3c553e1 GIT binary patch literal 2280 zcmZWr3p|ti8z0tYE^BmA%xT6^Ct;$RwW(#rDob*WzuYEs+t}F3EhCr8oKop%lITda z(EOt?jN*_>Iw6edDCL$_n%k-KPM6dF^M5~|_x(M;=l*=3=l8yEx+BF-Q%zS51OjQ2 z?MY6+dK9?1su1Am+1%X>EJ{o#yIr6=?Z`I(olA3eXSqA<$NAI4%zOjrepE9~7z5A( zf$$t0K!#CSz9>#uXgCwcA)uEuZ~(1fo1;-nDy$F!+TFnsWlN8wqPCb>nPJd2YA6&6 z9~lscb0Y2eY7XoO=pYu0fipK}v)N{BOEY@pQF9AxYio1NX7kOPO#uy4=CN>=FUK^T zY52v-H$NmQ(?62NVA1H|D1~2NKYA34fJQ3zVI!P4UgOH0g;mOn_oTH?(W1^iIZ z7qphR09-a|c=PYj+o-vzXz77KkU27m=*&@?JkF zoh=pcLc{TyU5at?Xd1OD8K?Jv+KSMKReou46GS>C@fuQDV#I=_u!l`N@&oiRQ= zqdh#}E|!b0z$% zH9QHeHFv0~13uj5mRI+@H7h74nHfV!8cLXjiWcVGnuP;xr3Y`9w=LrbRn{ynYW$Rk ztQ&?dlnTdFG8%0Ck^Fto(ad#2V)@V_q$j%~{NqP#bOnpSt)89ug_j!_`-;|(lt$Q} zTi#Gbf}V5%e=|1=66XfS(mu(VdcBz3*KqBWugx9k+j?A0{ zmsOS1GI|RAU;e6-piRQk)T@p48O@DG#KXpAZ0{^MHo)&3sxRwa9RSCA!TS*T9ToT= zx<>B(m2F!`02CB>Y#o>Nx%~xfg!gDPy|E=;*MoI2qhICM2(((nbPlU7UDZ{mE8ajF zwH7(3qh%LWXYfld7>xqGANn~Tqt8f21)11Fk&(4O6FqBjH#>lkMTysGdEJ~uNYjGf zfsjRTS%C?%^uk{mW##w$QtYvzG}Bef-UZwK4|G5R-iG!FkHVT!MNk8eB(N5xF9u#h zhVs*Vs?>1OUvCqY4aybmRwZ`2rqs)LF3Z7-8sQ;hzmJWdu$`(fO0#hVIQQL)g~~%E zaBS{xeUm4Fbf2FBOCI#kjwwLWy=-*rTK(CFNjEI8jc|`dpi91K;9WtAm|EPc0u2Di z1_bQdk&iC8!%vur0h-z*gRk_a)c}1j^4cmVb$q3BaMS=(x2m9hif9T?)BTrU$9#+~1atycMTL&BUYZ=!VTcb@HT9#@Br#T%VE z1{9=dqY?Mu+lz`>k(@S7*W~#)E{$B>KA{|0e`bPUhe4)yO2PH0UqnbSS*2#SvGJB-cqBLwUgXAOKy=G}(GSb%XM5EKpdMW2fSG?y_jnr6u1Esfn-`W8%xWbRg))U{ZnT0DbndYVK2xfo{ zfdgI0(pDulD2}#*N^A(xT@l5UmmitUGpXn+JszjbXd2TAb1E7Pv=$W+c+iTu7MU|0 z%Ms1rf6yD4TefNZX13dFlE-_o+=HB9s>2vaN9WmISv8g2q}K1fVJ|k^>)1gDeE81x z{NM@e5#b`i%qz=5zo9rWK6^fR#Rl=(1AC^2?G8wvWq0IuDyI~ro|U!im-6wSKdgjj z%9Wa|*UVCfqp|IhBz?~O3s`k56SB?Ca!tkpasha~D|Oh|q$Cv(#Ie$gk@qic-sW#M z=q-Nv@Pg-HxJwf?<7D4)!)z({+s9%d>W*GtbwWms-F60RUX_vg3c3@kRaCLIx~kGF z0h@HIEHxxKt};3l!4hlp7 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/trunks/trunks.json b/core/templates/layout/grid/two-column/trunks/trunks.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/grid/two-column/trunks/trunks.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/trunks/trunks.twig b/core/templates/layout/grid/two-column/trunks/trunks.twig similarity index 100% rename from core/templates/layout/two-column/trunks/trunks.twig rename to core/templates/layout/grid/two-column/trunks/trunks.twig diff --git a/core/templates/layout/grid/two-column/wedge/wedge-left.png b/core/templates/layout/grid/two-column/wedge/wedge-left.png new file mode 100644 index 0000000000000000000000000000000000000000..aec0b65d9aea2e01fb76f264b3725be4651a110e GIT binary patch literal 2084 zcma)7c{E%39=}NwOB`NDEoT(HB8Vj}N)d^s!AP{!Xsba{>uVkoA_#qE@;dajC@Dp2 zE1jq@gHEG%+S490IF43$wxQZ-X=>LHN~w3z>6r8WdH0-qzsv9Q`EKX;``xRa9yF0RV|dgw?1pZVqrjoY3L{BC!ERx~Oj0$7L!Z{o*Eo?|T`2Sh?Gvgkn&mQJstG&!UE1#GoXuE+u z4ed^A#|w|k5krDLkKPgEJIqN00681F^Rd%B#M~`+_SljAmt6znl@Iz?R2MsCuk>aW zVbnGe_A;Z@L(9F#PogoxeC;A+oJP!$%ypJ$5M}q<0JU%ahnsn7P1D_VXI1TszI^yM zdKc$`MXKi|Z%~EkfIDj}h>v63*hi?kg10*KaRhIen!2|5Z0pCLwZ(Tq0#zIuiJKcYGY#c$%p081VYjZ4DiY4FT9aFZBZUzrN+E~XhK`23 zRtsLnZSt+&TDHf91u#PS9(ro-Q2z2#)+6!SPfBi98a4IRCwc!^N{mgj9W7WHjY_{G z#9f>EX`!Td_2@s{M*@8PU9Y|i!IQ@%+;q2!sd=lO*i}DL;V20?b@1W%o1B?OGaD1>oxYc&nt^>?{q&>4wGTx# z5ZPxloW?BZ?U~hyX%(3beYBrUWlGiyyB!K{k=_@TWj3j;abArVSS~#k6RLCDk7qWN zL>?`(K7P=&a&+!RU`LUs#yxM77rE0uby8*?J5qYyqDVgfzEfI`0dBmlnX~x5gY1%+ zqK`)kpU&3Xc|Lqr-FEL}Gh$k1pv85_Soh^yPg^dGy+qLpZ6QDX*B!HUt1|k~McLWx zN;TzXov)G!6fN1!1XeWv!M;uuZJssEi|&1fL1edFM9k9%!6}`xe>4_FRLYD-qiDnPaz^3h?vG0$hiUuu_kLF?N|i(i|-0 zQ8Zq(!qs9xaaE|pSMy5ibYal<8{*J_F;0tW&c`Vn@Uj6@ot-+-0#p$7M>(P3ftF9Iy3JGN@o z*K;liiWJ*ojt8ffrNPRyfY2c{8dn?;P=)A9pKUHh;x>wfIpXR%K=E6nrd)rCKVKM& zjA+0B*?!5@Jb9d{RdXDY#*)>&^5>^iIG9fRa$@G?7skgq$;-F zYQP?}j-aaZ?VuvqG%%EwKoMcT_cP*8cn6w}Bf8QuSjF&cd^@XWi3@P`F}+=H2YvYy zNARsPaE$HZ(6mOQ#40D9{|Oz<^DYt!uxFNFKLjtu^g^dbDahl)Dmmj^0Wn@ zOHhL>cpEpY`@U15d53amocSs8@(rSy)(ZC}m!{HEna6tA2R~lfPyzy?h~J^pw{;^6n@}Zw^cj?SGT_JkGB; zbaeLA?WOyNwJklOB7!xRL|Xb0BJqpiIxy^maq`BLUb6IkNw(Qt{HvyA2(Km^0s6uU*kC))kMPC}x@|dIYwK2AF=p8-PM#qx6!jx59n&xzAp>Kfs&!{%eT~{W;@O?4(Pt_ z>Q^LR{KoBryiY_Uf!6vTxA0$w&rOM>{!O-~aihW2cdxAlpQ>njAY9~$dqYQ4BAui+ sji}w2jElAT9c`xw@MX~mFy+By;9O*G#+aQ--uC~T?&9HGLp^`#zh7gD=>Px# literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/wedge/wedge-right.png b/core/templates/layout/grid/two-column/wedge/wedge-right.png new file mode 100644 index 0000000000000000000000000000000000000000..b84f814a0614d0790455e0c69886c61d6f887b97 GIT binary patch literal 2188 zcmZWr3pkVeA0HjJxm8lp>okj}q+J-Axkavtv?In@hsDfJjkPUJn}mkMOyssDLU&Sb zm5$0BVkkL>$e|^ZOGD};<8)rtzti*l-{<+gzwht+{eHfe&-4Ag&wI+x*Fzg>2!%i( z+FqWncyOnHD@k1yd<$|^XyB&A#Cy0vD!YJjP(DZXC$I=UyK!OBG$biJ`T!ZprqMw! z2*jR^14SB{MS`(uhoYD`wgddL2M&~%)hIaZvkU8>1DxRF2iqCVAj7PYR!B755ekFB z>>1$^IJ~R-S2%cbfJd@ebQ}tG^ypFKQ4BJgK|xvA+S;PfmMBY01n7Za#zwJ7Y(x}u z)0ZIsi{naWhB2sg7BxBwwj7sqAo>W)0S;eI^zHdlCz(zCFH;orYg=H0sAUVv0*OX_ ziw#2Um$f)QDw}+W;7X;DqnKb0M+-E@{adBUpl3_QCv-N-IWUvft7Jfw13Zws;$V0$D$Qb*^VS8IlT_#{Ts(*s^A zH;VjWF;C57c5M}`#icH4Sf09|-h6(*yEms2dV0qADi;6X4<9&nfKkhql4^pHe~*y)smHrpc)n{`0e= zft%6m^*xJkbC#Z~EY2@^vlU~eW#S*2kFCb|*OyM%jiLwkJ#W_uc;5baRKYlZms7JZ z?`_3kNUeGNlYss!$0xU|zj$?eCwuk{hK<9eumm|TUeV)XHSafaRh*V)G>Ph-UWO9& zX^)2ucki6#y>;#kc~ASRh-|BsY<6#6X2y**$ZUywu<>fkjlih{`_ zLxY;y@Kq>e6Co$(*NVKuX$zU7M%UCQNKpRU6`1P6!lhwijrp##8!AX+s%!WS$78l? zwZqD*uB-8SuKZwM;Hv~pk$c>29IBgaYL20nVyv!1cwubIz~p*jg`s4niKu0QU{glt z2H}(4b{dqe$$ei;-_}PE7jFNt=!2*Q&pYUe*-SJNrQ3UA8~vwYQo_*K1`1U`$1)9X zWXiQ|nRol{9mS{y^>Rzrn*c*hZcveq!XR9R?MS-qE}dtj8yg?`RII7@ygZ|euDDV^ z;VhlUr`JOdbHZ|*caeg0p%ex7-V`ZluBC7Y%|3+o5z>K%nr?%-cRTyeHO-Q} z#xMNZ&$sk6+cxPetw`GCQ68@cm#^FMobND4pAzT27z z7V3D?`j;KfO|zqedSIL0eYcFoH?=~0-Z?i(9Vk6#ss>v)d@@9Majc`ij6Z7QglS!O zLtE_jnFRH>J3{l{Bx&ziE_UO##f1bvRWlyhVT<-dW}P5;9_?1=nmPn4f%5do>@Wk|@RQPLra66n*+L>nBdq0Jx&(c) zLWwrASpr1^5{Qk@W4g_iusa!2f@&4@SaP+Ok%YE}FIPK3rZf~5#gDPd-|5WFOpAv(#Ps6Oj13NKj)=4vU7^@|Heyc;(pw|Y>;${$GV zLfg31%N`bB(IiW-;#}|=a}qm%zovn}T)cozTop3rA)qgAJJ|TDA*zi!aD;UCx&Y|}LSowY!x8Vhd8ghyb*B&vdzulvumh?;GASxsfRMD=E~(9A>es=unmbp4 z!=GrnNer_~3$n`)a=;Pnz1o|llvm3?`FE^ga4(l%meQD_>G4P9zPTrEwe_YCAcFF!)ADh9YpJ?VzdDD`(33+$G z{`PuC{GXMJ&OehcEtHhbt_~2ZTzCJ8V0z~fjO2ey{4=+{BiAJxSX-?X;Br2*68spg zD(tJx8$KNaIHkdD1N+s0izhHZ`ONDchy39PfzI!@CMJ0=%e+(nrqEfA32hG{XRNZ6 zuLyVn0uzn&5AHLs!*v--W=8qlCLyl`&^Mda!cq^E#m4K?yNUpD->^f9@R~uhhT&eZ z0$DVyf!z!L#~=c23p9=QYfKsOjeV!h?VASd48_@F=f#`VHsud>OrPYieF7xqPwbMb zTU*h2IG_1OmH}L0MTr%l{2tZoaOSE}@D40vVLy2mk;8 literal 0 HcmV?d00001 diff --git a/core/templates/layout/grid/two-column/wedge/wedge.json b/core/templates/layout/grid/two-column/wedge/wedge.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/grid/two-column/wedge/wedge.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/two-column/wedge/wedge.twig b/core/templates/layout/grid/two-column/wedge/wedge.twig similarity index 79% rename from core/templates/layout/two-column/wedge/wedge.twig rename to core/templates/layout/grid/two-column/wedge/wedge.twig index bc54556a1..d2c33cdbb 100644 --- a/core/templates/layout/two-column/wedge/wedge.twig +++ b/core/templates/layout/grid/two-column/wedge/wedge.twig @@ -3,7 +3,7 @@ * @file * Wedge 2 column layout * - * A 33/66 style two column layout. + * A 25/75 style two column layout. * * Variants: * layout-cuttoner--right - A right sidebar variant to the layout. @@ -11,8 +11,8 @@ * Variables: * attributes - html attributes for the template wrapper tag * modifier_class - Variant modifier css classes - * first - First column and 33% width - * second - Second Column and 66% width + * first - First column and 25% width + * second - Second Column and 75% width * * */ From 8a6a54b32188c51c4f7f8f49e7edcd92e1617f4b Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 12:57:12 -0800 Subject: [PATCH 083/123] Flex grid behaviour. --- core/css/decanter-grid.css | 1392 ++++---------------- core/css/decanter.css | 1498 +++++----------------- core/scss/core/flex-grid/_flex-grid.scss | 38 +- 3 files changed, 541 insertions(+), 2387 deletions(-) diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 6c75f548e..3df218207 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -285,13 +285,6 @@ body { .flex-push-2xl-11 { margin-left: 91.6666666667%; } } -@media only screen and (min-width: 0) { - .flex-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-1-of-12 { -webkit-box-flex: 0; @@ -327,117 +320,40 @@ body { flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-1-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 992px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 0) { - .flex-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .flex-2-of-12 { @@ -474,117 +390,40 @@ body { flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-2-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 992px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 0) { - .flex-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .flex-3-of-12 { @@ -621,117 +460,40 @@ body { flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-3-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(25% - 24px); flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } -@media only screen and (min-width: 768px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } -@media only screen and (min-width: 992px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } -@media only screen and (min-width: 1200px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } @media only screen and (min-width: 1500px) { - .flex-sm-3-of-12 { + .flex-2xl-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 768px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 992px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 0) { - .flex-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .flex-4-of-12 { @@ -768,117 +530,40 @@ body { flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-4-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 992px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 0) { - .flex-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .flex-5-of-12 { @@ -915,264 +600,110 @@ body { flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-5-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 992px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 1200px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 1500px) { - .flex-sm-5-of-12 { + .flex-2xl-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } -@media only screen and (min-width: 992px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1500px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 0) { - .flex-6-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 576px) { - .flex-6-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 768px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 576px) { - .flex-sm-6-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 768px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 768px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 1500px) { .flex-2xl-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 0) { - .flex-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .flex-7-of-12 { @@ -1209,264 +740,110 @@ body { flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-7-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 992px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 0) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } } - -@media only screen and (min-width: 576px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 992px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1500px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { - .flex-sm-8-of-12 { + .flex-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 768px) { - .flex-sm-8-of-12 { + .flex-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 12px); flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 992px) { - .flex-sm-8-of-12 { + .flex-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 12px); flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1200px) { - .flex-sm-8-of-12 { + .flex-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 12px); flex: 0 0 calc(66.6666666667% - 12px); max-width: calc(66.6666666667% - 12px); } } @media only screen and (min-width: 1500px) { - .flex-sm-8-of-12 { + .flex-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-md-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 992px) { - .flex-md-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-8-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 0) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 8px); - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { .flex-9-of-12 { @@ -1503,264 +880,110 @@ body { flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 8px); flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } -@media only screen and (min-width: 768px) { - .flex-sm-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 768px) { - .flex-md-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-md-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 0) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } } - -@media only screen and (min-width: 576px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1500px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 576px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } @media only screen and (min-width: 1500px) { - .flex-sm-10-of-12 { + .flex-2xl-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 576px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 768px) { - .flex-md-10-of-12 { + .flex-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 6px); flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 992px) { - .flex-md-10-of-12 { + .flex-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 6px); flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1200px) { - .flex-md-10-of-12 { + .flex-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 6px); flex: 0 0 calc(83.3333333333% - 6px); max-width: calc(83.3333333333% - 6px); } } @media only screen and (min-width: 1500px) { - .flex-md-10-of-12 { + .flex-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } -@media only screen and (min-width: 992px) { - .flex-lg-10-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 1200px) { - .flex-lg-10-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 0) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .flex-11-of-12 { @@ -1797,117 +1020,40 @@ body { flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-md-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-md-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 0) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .flex-12-of-12 { @@ -1944,98 +1090,28 @@ body { flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 576px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 768px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 768px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 992px) { - .flex-lg-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 1200px) { - .flex-xl-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); diff --git a/core/css/decanter.css b/core/css/decanter.css index 0f43d04ed..b05e3664f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -572,13 +572,6 @@ template { .flex-push-2xl-11 { margin-left: 91.6666666667%; } } -@media only screen and (min-width: 0) { - .flex-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-1-of-12 { -webkit-box-flex: 0; @@ -614,117 +607,40 @@ template { flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-1-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); flex: 0 0 calc(8.3333333333% - 29.3333333333px); max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 992px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 33px); - flex: 0 0 calc(8.3333333333% - 33px); - max-width: calc(8.3333333333% - 33px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-1-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 34.8333333333px); - flex: 0 0 calc(8.3333333333% - 34.8333333333px); - max-width: calc(8.3333333333% - 34.8333333333px); } } - -@media only screen and (min-width: 0) { - .flex-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } @media only screen and (min-width: 576px) { .flex-2-of-12 { @@ -761,117 +677,40 @@ template { flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-2-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); flex: 0 0 calc(16.6666666667% - 26.6666666667px); max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 992px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 30px); - flex: 0 0 calc(16.6666666667% - 30px); - max-width: calc(16.6666666667% - 30px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-2-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 31.6666666667px); - flex: 0 0 calc(16.6666666667% - 31.6666666667px); - max-width: calc(16.6666666667% - 31.6666666667px); } } - -@media only screen and (min-width: 0) { - .flex-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } @media only screen and (min-width: 576px) { .flex-3-of-12 { @@ -908,117 +747,40 @@ template { flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-3-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(25% - 24px); flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); } } -@media only screen and (min-width: 768px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } -@media only screen and (min-width: 992px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } -@media only screen and (min-width: 1200px) { - .flex-sm-3-of-12 { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } @media only screen and (min-width: 1500px) { - .flex-sm-3-of-12 { + .flex-2xl-3-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 768px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 992px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 27px); - flex: 0 0 calc(25% - 27px); - max-width: calc(25% - 27px); } } - -@media only screen and (min-width: 1500px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 28.5px); - flex: 0 0 calc(25% - 28.5px); - max-width: calc(25% - 28.5px); } } - -@media only screen and (min-width: 0) { - .flex-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } @media only screen and (min-width: 576px) { .flex-4-of-12 { @@ -1055,117 +817,40 @@ template { flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-4-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); flex: 0 0 calc(33.3333333333% - 21.3333333333px); max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 992px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 24px); - flex: 0 0 calc(33.3333333333% - 24px); - max-width: calc(33.3333333333% - 24px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-4-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 25.3333333333px); - flex: 0 0 calc(33.3333333333% - 25.3333333333px); - max-width: calc(33.3333333333% - 25.3333333333px); } } - -@media only screen and (min-width: 0) { - .flex-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } @media only screen and (min-width: 576px) { .flex-5-of-12 { @@ -1202,264 +887,110 @@ template { flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-5-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); flex: 0 0 calc(41.6666666667% - 18.6666666667px); max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 992px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } -@media only screen and (min-width: 1200px) { - .flex-sm-5-of-12 { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } @media only screen and (min-width: 1500px) { - .flex-sm-5-of-12 { + .flex-2xl-5-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 768px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 992px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 1200px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } + -ms-flex: 0 0 calc(50% - 18px); + flex: 0 0 calc(50% - 18px); + max-width: calc(50% - 18px); } } @media only screen and (min-width: 1500px) { - .flex-md-5-of-12 { + .flex-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } + -ms-flex: 0 0 calc(50% - 19px); + flex: 0 0 calc(50% - 19px); + max-width: calc(50% - 19px); } } -@media only screen and (min-width: 992px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 21px); - flex: 0 0 calc(41.6666666667% - 21px); - max-width: calc(41.6666666667% - 21px); } } - -@media only screen and (min-width: 1500px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 22.1666666667px); - flex: 0 0 calc(41.6666666667% - 22.1666666667px); - max-width: calc(41.6666666667% - 22.1666666667px); } } - -@media only screen and (min-width: 0) { - .flex-6-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 576px) { - .flex-6-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 768px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 576px) { - .flex-sm-6-of-12 { +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-6-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 16px); flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } -@media only screen and (min-width: 768px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 768px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 992px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 18px); - flex: 0 0 calc(50% - 18px); - max-width: calc(50% - 18px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 1500px) { .flex-2xl-6-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 19px); - flex: 0 0 calc(50% - 19px); - max-width: calc(50% - 19px); } } - -@media only screen and (min-width: 0) { - .flex-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } @media only screen and (min-width: 576px) { .flex-7-of-12 { @@ -1496,117 +1027,40 @@ template { flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-7-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 992px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15px); - flex: 0 0 calc(58.3333333333% - 15px); - max-width: calc(58.3333333333% - 15px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-7-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 15.8333333333px); - flex: 0 0 calc(58.3333333333% - 15.8333333333px); - max-width: calc(58.3333333333% - 15.8333333333px); } } - -@media only screen and (min-width: 0) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } } + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 576px) { .flex-8-of-12 { @@ -1643,264 +1097,110 @@ template { flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-sm-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 768px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 992px) { - .flex-md-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1500px) { - .flex-md-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - -@media only screen and (min-width: 0) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 8px); - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } } - -@media only screen and (min-width: 576px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 8px); - flex: 0 0 calc(75% - 8px); - max-width: calc(75% - 8px); } } - -@media only screen and (min-width: 768px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1500px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } @media only screen and (min-width: 576px) { - .flex-sm-9-of-12 { + .flex-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 8px); flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } @media only screen and (min-width: 768px) { - .flex-sm-9-of-12 { + .flex-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 9px); flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 992px) { - .flex-sm-9-of-12 { + .flex-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 9px); flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1200px) { - .flex-sm-9-of-12 { + .flex-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 9px); flex: 0 0 calc(75% - 9px); max-width: calc(75% - 9px); } } @media only screen and (min-width: 1500px) { - .flex-sm-9-of-12 { + .flex-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 9.5px); flex: 0 0 calc(75% - 9.5px); max-width: calc(75% - 9.5px); } } -@media only screen and (min-width: 768px) { - .flex-md-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-md-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-9-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } @media only screen and (min-width: 1500px) { .flex-2xl-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - -@media only screen and (min-width: 0) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); - flex: 0 0 calc(83.3333333333% - 5.3333333333px); - max-width: calc(83.3333333333% - 5.3333333333px); } } + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } @media only screen and (min-width: 576px) { .flex-10-of-12 { @@ -1937,117 +1237,40 @@ template { flex: 0 0 calc(83.3333333333% - 6.3333333333px); max-width: calc(83.3333333333% - 6.3333333333px); } } -@media only screen and (min-width: 576px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 768px) { - .flex-md-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-md-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-md-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 1500px) { .flex-2xl-10-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - -@media only screen and (min-width: 0) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } } + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } @media only screen and (min-width: 576px) { .flex-11-of-12 { @@ -2057,144 +1280,67 @@ template { max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 768px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 576px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); - flex: 0 0 calc(91.6666666667% - 2.6666666667px); - max-width: calc(91.6666666667% - 2.6666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { - .flex-sm-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 768px) { - .flex-md-11-of-12 { + .flex-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 3px); flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 992px) { - .flex-md-11-of-12 { + .flex-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 3px); flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1200px) { - .flex-md-11-of-12 { + .flex-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 3px); flex: 0 0 calc(91.6666666667% - 3px); max-width: calc(91.6666666667% - 3px); } } @media only screen and (min-width: 1500px) { - .flex-md-11-of-12 { + .flex-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); flex: 0 0 calc(91.6666666667% - 3.1666666667px); max-width: calc(91.6666666667% - 3.1666666667px); } } -@media only screen and (min-width: 992px) { - .flex-lg-11-of-12 { +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 1200px) { - .flex-lg-11-of-12 { +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 1200px) { - .flex-xl-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 1500px) { .flex-2xl-11-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - -@media only screen and (min-width: 0) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } @media only screen and (min-width: 576px) { .flex-12-of-12 { @@ -2231,98 +1377,28 @@ template { flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 576px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 768px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-sm-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 768px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 1500px) { - .flex-md-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-lg-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-lg-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 992px) and (max-width: 1199px) { .flex-lg-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } -@media only screen and (min-width: 1200px) { - .flex-xl-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { +@media only screen and (min-width: 1200px) and (max-width: 1499px) { .flex-xl-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); @@ -3033,6 +2109,13 @@ dfn { -ms-grid-column: 2; } .layout-bars > div > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-bars > div { + display: block; } } + @media (min-width: 576px) and (max-width: 991px) { + .layout-bars > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } } .layout-battleship > div { margin: 0 auto; @@ -3216,6 +2299,9 @@ dfn { -ms-grid-column: 2; } .layout-battleship > div > *:nth-child(3) { -ms-grid-column: 3; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .layout-battleship > div { + display: block; } } .layout-battleship > div :first-child { -ms-grid-column: 1; grid-column: 1 / span 2; @@ -3415,35 +2501,8 @@ dfn { grid-row: 2 / span 1; -ms-grid-row-span: 1; } -.layout-blastila--right > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - -.layout-blastila--right > div > section { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; } - -.layout-blastila--right > div > div { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-blastila--right > div div ~ div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } +.layout-blastila--right > div { + grid-template-areas: "head head sidebar" "A B sidebar"; } .layout-chess > header, .layout-chess > footer { @@ -4083,7 +3142,7 @@ dfn { grid-column: 2 / span 2; -ms-grid-column-span: 2; } -> .layout-percles--right > div:first-child { +.layout-percles--right > div > :first-child { -ms-grid-column: 3; grid-column: 3 / span 1; -ms-grid-column-span: 1; @@ -4097,7 +3156,8 @@ dfn { -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-column: 1; } .layout-robot > div { margin: 0 auto; } @@ -4591,7 +3651,11 @@ dfn { .layout-sunset-delorean--right > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: 1; } + -ms-grid-row-span: 1; + -ms-grid-column: 1; } + +.layout-sunset-delorean--right > div section:nth-of-type(2) { + -ms-grid-column: 2; } .layout-thions > div { margin: 0 auto; } @@ -5079,6 +4143,11 @@ dfn { grid-column: 1 / span 1; -ms-grid-column-span: 1; } +.layout-valmer--right > section > div:nth-of-type(2) { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; } + .layout-valmer--right > section > div:nth-of-type(3) { -ms-grid-column: 3; grid-column: 3 / span 2; @@ -5749,10 +4818,6 @@ dfn { @media only screen and (min-width: 0) and (max-width: 575px) { .layout-bars > div { display: block; } } - @media (min-width: 576px) and (max-width: 991px) { - .layout-bars > div :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 1; } } .layout-battleship > div { margin: 0 auto; @@ -6137,24 +5202,51 @@ dfn { .layout-blastila > div > aside { -ms-grid-row: 1; -ms-grid-row-span: 2; - -ms-grid-column: 3; + -ms-grid-column: 1; grid-area: sidebar; } .layout-blastila > div > section { -ms-grid-row: 1; - -ms-grid-column: 1; + -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: head; } .layout-blastila > div :nth-child(3) { -ms-grid-row: 2; - -ms-grid-column: 1; + -ms-grid-column: 2; grid-area: A; } .layout-blastila > div :nth-child(4) { -ms-grid-row: 2; - -ms-grid-column: 2; + -ms-grid-column: 3; grid-area: B; } -.layout-blastila--right > div { - grid-template-areas: "head head sidebar" "A B sidebar"; } +.layout-blastila--right > div > aside { + -ms-grid-column: 3; + grid-column: 3 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 1; + grid-row: 1 / span 2; + -ms-grid-row-span: 2; } + +.layout-blastila--right > div > section { + -ms-grid-column: 1; + grid-column: 1 / span 2; + -ms-grid-column-span: 2; + -ms-grid-row: 1; } + +.layout-blastila--right > div > div { + -ms-grid-column: 1; + grid-column: 1 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } + +.layout-blastila--right > div div ~ div { + -ms-grid-column: 2; + grid-column: 2 / span 1; + -ms-grid-column-span: 1; + -ms-grid-row: 2; + grid-row: 2 / span 1; + -ms-grid-row-span: 1; } .layout-chess > header, .layout-chess > footer { @@ -6655,18 +5747,18 @@ dfn { -ms-grid-column: 2; } } .layout-cuttoner > div > section > header { -ms-grid-row: 1; - -ms-grid-column: 1; + -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: head; } .layout-cuttoner > div > section > footer { grid-area: foot; } .layout-cuttoner > div > section :nth-child(2) { -ms-grid-row: 2; - -ms-grid-column: 1; + -ms-grid-column: 2; grid-area: A; } .layout-cuttoner > div > section :nth-child(3) { -ms-grid-row: 2; - -ms-grid-column: 2; + -ms-grid-column: 3; grid-area: B; } .layout-cuttoner > div > aside { -ms-grid-row: 1; @@ -6848,7 +5940,7 @@ dfn { .layout-percles > div :nth-child(5) { -ms-grid-column: 3; } -.layout-percles--right > div > :first-child { +> .layout-percles--right > div:first-child { -ms-grid-column: 3; grid-column: 3 / span 1; -ms-grid-column-span: 1; @@ -6862,8 +5954,7 @@ dfn { -ms-grid-column-span: 2; -ms-grid-row: 1; grid-row: 1 / span 1; - -ms-grid-row-span: 1; - -ms-grid-column: 1; } + -ms-grid-row-span: 1; } .layout-robot > div { margin: 0 auto; } @@ -7368,11 +6459,7 @@ dfn { .layout-sunset-delorean--right > div > section { -ms-grid-row: 2; grid-row: 2 / span 1; - -ms-grid-row-span: 1; - -ms-grid-column: 1; } - -.layout-sunset-delorean--right > div section:nth-of-type(2) { - -ms-grid-column: 2; } + -ms-grid-row-span: 1; } .layout-thions > div { margin: 0 auto; } @@ -7858,11 +6945,6 @@ dfn { grid-column: 1 / span 1; -ms-grid-column-span: 1; } -.layout-valmer--right > section > div:nth-of-type(2) { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; } - .layout-valmer--right > section > div:nth-of-type(3) { -ms-grid-column: 3; grid-column: 3 / span 2; diff --git a/core/scss/core/flex-grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss index e425f6a72..a9503707b 100644 --- a/core/scss/core/flex-grid/_flex-grid.scss +++ b/core/scss/core/flex-grid/_flex-grid.scss @@ -72,6 +72,9 @@ } } + + + // Loop through each column and breakpoint creating a responsive flex column. // The gutter sizes change as the breakpoints change so as the breakpoints // get larger for each breakpoint class we have to adjust the gutter. For @@ -80,34 +83,27 @@ // breakpoints wrapping for breakpoints xl -> 2xl. @for $n from 1 through $grid-columns { + .flex-#{$n}-of-#{$grid-columns} { + $cols: $n of $grid-columns; + @include responsive-flex-column($cols, map-remove($grid-media, 'xs')); + } + // Storage for breakpoint codes through each loop of columns. $_codes: (); @each $_code, $_screen in $grid-screens { - // The breakpoint short code. eg: xs, sm, lg with a dash - $_insert: breakpoint-insert($_code, $grid-screens); - - // The flex-breakpoint-column class. - .flex#{$_insert}-#{$n}-of-#{$grid-columns} { - - // Loop through the already used breakpoints and remove them - // from the grid map as we only want to create a responsive - // column for the current breakpoint and larger. Smaller screens - // collapse to 100%. - $_grids: $grid-media; - @each $sh in $_codes { - $_grids: map-remove($_grids, $sh); - } + @if $_code != 'xs' { + // The breakpoint short code. eg: xs, sm, lg with a dash + $_insert: breakpoint-insert($_code, $grid-screens); - // Generate the media queries and column size. - @if (length($_grids) > 0) { - @include responsive-flex-column($n, $_grids); + // The flex-breakpoint-column class. + .flex#{$_insert}-#{$n}-of-#{$grid-columns} { + // Generate the media queries and column size. + @include grid-media-only($_code) { + @include flex-column($n of $grid-columns); + } } - - // Add the current BP code to the storage for next round. - $_codes: append($_codes, $_code); - } } } From f611456f6d45694da76957969601c6c21ca3d0f1 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 13:01:39 -0800 Subject: [PATCH 084/123] Flex grid behaviour. --- core/scss/core/flex-grid/_flex-grid.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/core/scss/core/flex-grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss index a9503707b..8df4ee651 100644 --- a/core/scss/core/flex-grid/_flex-grid.scss +++ b/core/scss/core/flex-grid/_flex-grid.scss @@ -92,11 +92,10 @@ $_codes: (); @each $_code, $_screen in $grid-screens { + // The breakpoint short code. eg: xs, sm, lg with a dash + $_insert: breakpoint-insert($_code, $grid-screens); @if $_code != 'xs' { - // The breakpoint short code. eg: xs, sm, lg with a dash - $_insert: breakpoint-insert($_code, $grid-screens); - // The flex-breakpoint-column class. .flex#{$_insert}-#{$n}-of-#{$grid-columns} { // Generate the media queries and column size. From bf96f7a80be8e2ee538325792b31f90ee71a07d7 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 15:31:28 -0800 Subject: [PATCH 085/123] Flex grid behaviour fixes. --- core/css/decanter-grid.css | 957 +++++++++--------- core/css/decanter.css | 947 ++++++++--------- core/scss/core/flex-grid/_flex-grid.scss | 52 +- .../breakpoint/_breakpoint-insert.scss | 2 +- .../mixins/flex/_flex-container.scss | 1 - 5 files changed, 991 insertions(+), 968 deletions(-) diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css index 3df218207..ae8083f85 100644 --- a/core/css/decanter-grid.css +++ b/core/css/decanter-grid.css @@ -41,69 +41,58 @@ body { padding-right: 3rem; padding-left: 3rem; } } -.flex-1-of-12, .flex-2-of-12, .flex-3-of-12, .flex-4-of-12, .flex-5-of-12, .flex-6-of-12, .flex-7-of-12, .flex-8-of-12, .flex-9-of-12, .flex-10-of-12, .flex-11-of-12, .flex-12-of-12, .flex-of-12, -.flex-auto, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-sm-of-12, -.flex-sm-auto, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-md-of-12, -.flex-md-auto, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-lg-of-12, -.flex-lg-auto, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-xl-of-12, -.flex-xl-auto, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12, .flex-2xl-of-12, -.flex-2xl-auto { +.flex-auto, .flex-xs-1-of-12, +.flex-1-of-12, .flex-xs-2-of-12, +.flex-2-of-12, .flex-xs-3-of-12, +.flex-3-of-12, .flex-xs-4-of-12, +.flex-4-of-12, .flex-xs-5-of-12, +.flex-5-of-12, .flex-xs-6-of-12, +.flex-6-of-12, .flex-xs-7-of-12, +.flex-7-of-12, .flex-xs-8-of-12, +.flex-8-of-12, .flex-xs-9-of-12, +.flex-9-of-12, .flex-xs-10-of-12, +.flex-10-of-12, .flex-xs-11-of-12, +.flex-11-of-12, .flex-xs-12-of-12, +.flex-12-of-12, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12 { position: relative; width: 100%; min-height: 1px; padding: 1rem; } +.flex-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; } + @media only screen and (min-width: 0) { - .flex-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } - .flex-push-1 { + .flex-push-xs-0 { + margin-left: 0; } + .flex-push-xs-1 { margin-left: 8.3333333333%; } - .flex-push-2 { + .flex-push-xs-2 { margin-left: 16.6666666667%; } - .flex-push-3 { + .flex-push-xs-3 { margin-left: 25%; } - .flex-push-4 { + .flex-push-xs-4 { margin-left: 33.3333333333%; } - .flex-push-5 { + .flex-push-xs-5 { margin-left: 41.6666666667%; } - .flex-push-6 { + .flex-push-xs-6 { margin-left: 50%; } - .flex-push-7 { + .flex-push-xs-7 { margin-left: 58.3333333333%; } - .flex-push-8 { + .flex-push-xs-8 { margin-left: 66.6666666667%; } - .flex-push-9 { + .flex-push-xs-9 { margin-left: 75%; } - .flex-push-10 { + .flex-push-xs-10 { margin-left: 83.3333333333%; } - .flex-push-11 { + .flex-push-xs-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 576px) { - .flex-sm-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-sm-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-sm-0 { margin-left: 0; } .flex-push-sm-1 { @@ -130,19 +119,6 @@ body { margin-left: 91.6666666667%; } } @media only screen and (min-width: 768px) { - .flex-md-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-md-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-md-0 { margin-left: 0; } .flex-push-md-1 { @@ -169,19 +145,6 @@ body { margin-left: 91.6666666667%; } } @media only screen and (min-width: 992px) { - .flex-lg-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-lg-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-lg-0 { margin-left: 0; } .flex-push-lg-1 { @@ -208,19 +171,6 @@ body { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1200px) { - .flex-xl-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-xl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-xl-0 { margin-left: 0; } .flex-push-xl-1 { @@ -247,19 +197,6 @@ body { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1500px) { - .flex-2xl-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-2xl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-2xl-0 { margin-left: 0; } .flex-push-2xl-1 { @@ -320,41 +257,6 @@ body { flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-2-of-12 { -webkit-box-flex: 0; @@ -390,41 +292,6 @@ body { flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 576px) { .flex-3-of-12 { -webkit-box-flex: 0; @@ -460,41 +327,6 @@ body { flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - @media only screen and (min-width: 576px) { .flex-4-of-12 { -webkit-box-flex: 0; @@ -530,41 +362,6 @@ body { flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-5-of-12 { -webkit-box-flex: 0; @@ -600,41 +397,6 @@ body { flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 576px) { .flex-6-of-12 { -webkit-box-flex: 0; @@ -670,41 +432,6 @@ body { flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - @media only screen and (min-width: 576px) { .flex-7-of-12 { -webkit-box-flex: 0; @@ -740,41 +467,6 @@ body { flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-7-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-8-of-12 { -webkit-box-flex: 0; @@ -810,14 +502,455 @@ body { flex: 0 0 calc(66.6666666667% - 12.6666666667px); max-width: calc(66.6666666667% - 12.6666666667px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-8-of-12 { +@media only screen and (min-width: 576px) { + .flex-9-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); - flex: 0 0 calc(66.6666666667% - 10.6666666667px); - max-width: calc(66.6666666667% - 10.6666666667px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 576px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { .flex-md-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); @@ -845,41 +978,13 @@ body { flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 576px) { - .flex-9-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 8px); flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } -@media only screen and (min-width: 768px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1500px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-9-of-12 { -webkit-box-flex: 0; @@ -915,41 +1020,13 @@ body { flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } -@media only screen and (min-width: 576px) { - .flex-10-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1500px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-10-of-12 { -webkit-box-flex: 0; @@ -985,41 +1062,13 @@ body { flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 576px) { - .flex-11-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-11-of-12 { -webkit-box-flex: 0; @@ -1055,36 +1104,8 @@ body { flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 576px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 768px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { - .flex-12-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); diff --git a/core/css/decanter.css b/core/css/decanter.css index b05e3664f..2367b7688 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -328,69 +328,58 @@ template { padding-right: 3rem; padding-left: 3rem; } } -.flex-1-of-12, .flex-2-of-12, .flex-3-of-12, .flex-4-of-12, .flex-5-of-12, .flex-6-of-12, .flex-7-of-12, .flex-8-of-12, .flex-9-of-12, .flex-10-of-12, .flex-11-of-12, .flex-12-of-12, .flex-of-12, -.flex-auto, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-sm-of-12, -.flex-sm-auto, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-md-of-12, -.flex-md-auto, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-lg-of-12, -.flex-lg-auto, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-xl-of-12, -.flex-xl-auto, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12, .flex-2xl-of-12, -.flex-2xl-auto { +.flex-auto, .flex-xs-1-of-12, +.flex-1-of-12, .flex-xs-2-of-12, +.flex-2-of-12, .flex-xs-3-of-12, +.flex-3-of-12, .flex-xs-4-of-12, +.flex-4-of-12, .flex-xs-5-of-12, +.flex-5-of-12, .flex-xs-6-of-12, +.flex-6-of-12, .flex-xs-7-of-12, +.flex-7-of-12, .flex-xs-8-of-12, +.flex-8-of-12, .flex-xs-9-of-12, +.flex-9-of-12, .flex-xs-10-of-12, +.flex-10-of-12, .flex-xs-11-of-12, +.flex-11-of-12, .flex-xs-12-of-12, +.flex-12-of-12, .flex-sm-1-of-12, .flex-sm-2-of-12, .flex-sm-3-of-12, .flex-sm-4-of-12, .flex-sm-5-of-12, .flex-sm-6-of-12, .flex-sm-7-of-12, .flex-sm-8-of-12, .flex-sm-9-of-12, .flex-sm-10-of-12, .flex-sm-11-of-12, .flex-sm-12-of-12, .flex-md-1-of-12, .flex-md-2-of-12, .flex-md-3-of-12, .flex-md-4-of-12, .flex-md-5-of-12, .flex-md-6-of-12, .flex-md-7-of-12, .flex-md-8-of-12, .flex-md-9-of-12, .flex-md-10-of-12, .flex-md-11-of-12, .flex-md-12-of-12, .flex-lg-1-of-12, .flex-lg-2-of-12, .flex-lg-3-of-12, .flex-lg-4-of-12, .flex-lg-5-of-12, .flex-lg-6-of-12, .flex-lg-7-of-12, .flex-lg-8-of-12, .flex-lg-9-of-12, .flex-lg-10-of-12, .flex-lg-11-of-12, .flex-lg-12-of-12, .flex-xl-1-of-12, .flex-xl-2-of-12, .flex-xl-3-of-12, .flex-xl-4-of-12, .flex-xl-5-of-12, .flex-xl-6-of-12, .flex-xl-7-of-12, .flex-xl-8-of-12, .flex-xl-9-of-12, .flex-xl-10-of-12, .flex-xl-11-of-12, .flex-xl-12-of-12, .flex-2xl-1-of-12, .flex-2xl-2-of-12, .flex-2xl-3-of-12, .flex-2xl-4-of-12, .flex-2xl-5-of-12, .flex-2xl-6-of-12, .flex-2xl-7-of-12, .flex-2xl-8-of-12, .flex-2xl-9-of-12, .flex-2xl-10-of-12, .flex-2xl-11-of-12, .flex-2xl-12-of-12 { position: relative; width: 100%; min-height: 1px; padding: 1rem; } +.flex-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; } + @media only screen and (min-width: 0) { - .flex-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } - .flex-push-1 { + .flex-push-xs-0 { + margin-left: 0; } + .flex-push-xs-1 { margin-left: 8.3333333333%; } - .flex-push-2 { + .flex-push-xs-2 { margin-left: 16.6666666667%; } - .flex-push-3 { + .flex-push-xs-3 { margin-left: 25%; } - .flex-push-4 { + .flex-push-xs-4 { margin-left: 33.3333333333%; } - .flex-push-5 { + .flex-push-xs-5 { margin-left: 41.6666666667%; } - .flex-push-6 { + .flex-push-xs-6 { margin-left: 50%; } - .flex-push-7 { + .flex-push-xs-7 { margin-left: 58.3333333333%; } - .flex-push-8 { + .flex-push-xs-8 { margin-left: 66.6666666667%; } - .flex-push-9 { + .flex-push-xs-9 { margin-left: 75%; } - .flex-push-10 { + .flex-push-xs-10 { margin-left: 83.3333333333%; } - .flex-push-11 { + .flex-push-xs-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 576px) { - .flex-sm-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-sm-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-sm-0 { margin-left: 0; } .flex-push-sm-1 { @@ -417,19 +406,6 @@ template { margin-left: 91.6666666667%; } } @media only screen and (min-width: 768px) { - .flex-md-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-md-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-md-0 { margin-left: 0; } .flex-push-md-1 { @@ -456,19 +432,6 @@ template { margin-left: 91.6666666667%; } } @media only screen and (min-width: 992px) { - .flex-lg-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-lg-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-lg-0 { margin-left: 0; } .flex-push-lg-1 { @@ -495,19 +458,6 @@ template { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1200px) { - .flex-xl-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-xl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-xl-0 { margin-left: 0; } .flex-push-xl-1 { @@ -534,19 +484,6 @@ template { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1500px) { - .flex-2xl-of-12 { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; } - .flex-2xl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; } .flex-push-2xl-0 { margin-left: 0; } .flex-push-2xl-1 { @@ -607,41 +544,6 @@ template { flex: 0 0 calc(8.3333333333% - 34.8333333333px); max-width: calc(8.3333333333% - 34.8333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-1-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); - flex: 0 0 calc(8.3333333333% - 29.3333333333px); - max-width: calc(8.3333333333% - 29.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-2-of-12 { -webkit-box-flex: 0; @@ -677,41 +579,6 @@ template { flex: 0 0 calc(16.6666666667% - 31.6666666667px); max-width: calc(16.6666666667% - 31.6666666667px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-2-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); - flex: 0 0 calc(16.6666666667% - 26.6666666667px); - max-width: calc(16.6666666667% - 26.6666666667px); } } - @media only screen and (min-width: 576px) { .flex-3-of-12 { -webkit-box-flex: 0; @@ -747,41 +614,6 @@ template { flex: 0 0 calc(25% - 28.5px); max-width: calc(25% - 28.5px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-3-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(25% - 24px); - flex: 0 0 calc(25% - 24px); - max-width: calc(25% - 24px); } } - @media only screen and (min-width: 576px) { .flex-4-of-12 { -webkit-box-flex: 0; @@ -817,41 +649,6 @@ template { flex: 0 0 calc(33.3333333333% - 25.3333333333px); max-width: calc(33.3333333333% - 25.3333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-4-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); - flex: 0 0 calc(33.3333333333% - 21.3333333333px); - max-width: calc(33.3333333333% - 21.3333333333px); } } - @media only screen and (min-width: 576px) { .flex-5-of-12 { -webkit-box-flex: 0; @@ -887,41 +684,6 @@ template { flex: 0 0 calc(41.6666666667% - 22.1666666667px); max-width: calc(41.6666666667% - 22.1666666667px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-5-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); - flex: 0 0 calc(41.6666666667% - 18.6666666667px); - max-width: calc(41.6666666667% - 18.6666666667px); } } - @media only screen and (min-width: 576px) { .flex-6-of-12 { -webkit-box-flex: 0; @@ -957,41 +719,6 @@ template { flex: 0 0 calc(50% - 19px); max-width: calc(50% - 19px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 992px) and (max-width: 1199px) { - .flex-lg-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 1200px) and (max-width: 1499px) { - .flex-xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - -@media only screen and (min-width: 1500px) { - .flex-2xl-6-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(50% - 16px); - flex: 0 0 calc(50% - 16px); - max-width: calc(50% - 16px); } } - @media only screen and (min-width: 576px) { .flex-7-of-12 { -webkit-box-flex: 0; @@ -1027,15 +754,449 @@ template { flex: 0 0 calc(58.3333333333% - 15.8333333333px); max-width: calc(58.3333333333% - 15.8333333333px); } } -@media only screen and (min-width: 576px) and (max-width: 767px) { - .flex-sm-7-of-12 { +@media only screen and (min-width: 576px) { + .flex-8-of-12 { -webkit-box-flex: 0; - -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); - flex: 0 0 calc(58.3333333333% - 13.3333333333px); - max-width: calc(58.3333333333% - 13.3333333333px); } } + -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); + flex: 0 0 calc(66.6666666667% - 10.6666666667px); + max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 768px) and (max-width: 991px) { - .flex-md-7-of-12 { +@media only screen and (min-width: 768px) { + .flex-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 992px) { + .flex-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1200px) { + .flex-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12px); + flex: 0 0 calc(66.6666666667% - 12px); + max-width: calc(66.6666666667% - 12px); } } + +@media only screen and (min-width: 1500px) { + .flex-8-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); + flex: 0 0 calc(66.6666666667% - 12.6666666667px); + max-width: calc(66.6666666667% - 12.6666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 8px); + flex: 0 0 calc(75% - 8px); + max-width: calc(75% - 8px); } } + +@media only screen and (min-width: 768px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 992px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1200px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9px); + flex: 0 0 calc(75% - 9px); + max-width: calc(75% - 9px); } } + +@media only screen and (min-width: 1500px) { + .flex-9-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(75% - 9.5px); + flex: 0 0 calc(75% - 9.5px); + max-width: calc(75% - 9.5px); } } + +@media only screen and (min-width: 576px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); + flex: 0 0 calc(83.3333333333% - 5.3333333333px); + max-width: calc(83.3333333333% - 5.3333333333px); } } + +@media only screen and (min-width: 768px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 992px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1200px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6px); + flex: 0 0 calc(83.3333333333% - 6px); + max-width: calc(83.3333333333% - 6px); } } + +@media only screen and (min-width: 1500px) { + .flex-10-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); + flex: 0 0 calc(83.3333333333% - 6.3333333333px); + max-width: calc(83.3333333333% - 6.3333333333px); } } + +@media only screen and (min-width: 576px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); + flex: 0 0 calc(91.6666666667% - 2.6666666667px); + max-width: calc(91.6666666667% - 2.6666666667px); } } + +@media only screen and (min-width: 768px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 992px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1200px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3px); + flex: 0 0 calc(91.6666666667% - 3px); + max-width: calc(91.6666666667% - 3px); } } + +@media only screen and (min-width: 1500px) { + .flex-11-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); + flex: 0 0 calc(91.6666666667% - 3.1666666667px); + max-width: calc(91.6666666667% - 3.1666666667px); } } + +@media only screen and (min-width: 576px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 768px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 992px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1200px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 1500px) { + .flex-12-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(100% - 0px); + flex: 0 0 calc(100% - 0px); + max-width: calc(100% - 0px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-1-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(8.3333333333% - 29.3333333333px); + flex: 0 0 calc(8.3333333333% - 29.3333333333px); + max-width: calc(8.3333333333% - 29.3333333333px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-2-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(16.6666666667% - 26.6666666667px); + flex: 0 0 calc(16.6666666667% - 26.6666666667px); + max-width: calc(16.6666666667% - 26.6666666667px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-3-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(25% - 24px); + flex: 0 0 calc(25% - 24px); + max-width: calc(25% - 24px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-4-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(33.3333333333% - 21.3333333333px); + flex: 0 0 calc(33.3333333333% - 21.3333333333px); + max-width: calc(33.3333333333% - 21.3333333333px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-5-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(41.6666666667% - 18.6666666667px); + flex: 0 0 calc(41.6666666667% - 18.6666666667px); + max-width: calc(41.6666666667% - 18.6666666667px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .flex-lg-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 1200px) and (max-width: 1499px) { + .flex-xl-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 1500px) { + .flex-2xl-6-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 16px); + flex: 0 0 calc(50% - 16px); + max-width: calc(50% - 16px); } } + +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 576px) and (max-width: 767px) { + .flex-sm-7-of-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); + flex: 0 0 calc(58.3333333333% - 13.3333333333px); + max-width: calc(58.3333333333% - 13.3333333333px); } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .flex-md-7-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(58.3333333333% - 13.3333333333px); flex: 0 0 calc(58.3333333333% - 13.3333333333px); @@ -1062,41 +1223,13 @@ template { flex: 0 0 calc(58.3333333333% - 13.3333333333px); max-width: calc(58.3333333333% - 13.3333333333px); } } -@media only screen and (min-width: 576px) { - .flex-8-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-8-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(66.6666666667% - 10.6666666667px); flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 992px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1200px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12px); - flex: 0 0 calc(66.6666666667% - 12px); - max-width: calc(66.6666666667% - 12px); } } - -@media only screen and (min-width: 1500px) { - .flex-8-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(66.6666666667% - 12.6666666667px); - flex: 0 0 calc(66.6666666667% - 12.6666666667px); - max-width: calc(66.6666666667% - 12.6666666667px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-8-of-12 { -webkit-box-flex: 0; @@ -1132,41 +1265,13 @@ template { flex: 0 0 calc(66.6666666667% - 10.6666666667px); max-width: calc(66.6666666667% - 10.6666666667px); } } -@media only screen and (min-width: 576px) { - .flex-9-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-9-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(75% - 8px); flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } -@media only screen and (min-width: 768px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 992px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1200px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9px); - flex: 0 0 calc(75% - 9px); - max-width: calc(75% - 9px); } } - -@media only screen and (min-width: 1500px) { - .flex-9-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(75% - 9.5px); - flex: 0 0 calc(75% - 9.5px); - max-width: calc(75% - 9.5px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-9-of-12 { -webkit-box-flex: 0; @@ -1202,41 +1307,13 @@ template { flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); } } -@media only screen and (min-width: 576px) { - .flex-10-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-10-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(83.3333333333% - 5.3333333333px); flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 768px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 992px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1200px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6px); - flex: 0 0 calc(83.3333333333% - 6px); - max-width: calc(83.3333333333% - 6px); } } - -@media only screen and (min-width: 1500px) { - .flex-10-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(83.3333333333% - 6.3333333333px); - flex: 0 0 calc(83.3333333333% - 6.3333333333px); - max-width: calc(83.3333333333% - 6.3333333333px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-10-of-12 { -webkit-box-flex: 0; @@ -1272,41 +1349,13 @@ template { flex: 0 0 calc(83.3333333333% - 5.3333333333px); max-width: calc(83.3333333333% - 5.3333333333px); } } -@media only screen and (min-width: 576px) { - .flex-11-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-11-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(91.6666666667% - 2.6666666667px); flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 768px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 992px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1200px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3px); - flex: 0 0 calc(91.6666666667% - 3px); - max-width: calc(91.6666666667% - 3px); } } - -@media only screen and (min-width: 1500px) { - .flex-11-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(91.6666666667% - 3.1666666667px); - flex: 0 0 calc(91.6666666667% - 3.1666666667px); - max-width: calc(91.6666666667% - 3.1666666667px); } } - @media only screen and (min-width: 576px) and (max-width: 767px) { .flex-sm-11-of-12 { -webkit-box-flex: 0; @@ -1342,36 +1391,8 @@ template { flex: 0 0 calc(91.6666666667% - 2.6666666667px); max-width: calc(91.6666666667% - 2.6666666667px); } } -@media only screen and (min-width: 576px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 768px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 992px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1200px) { - .flex-12-of-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 calc(100% - 0px); - flex: 0 0 calc(100% - 0px); - max-width: calc(100% - 0px); } } - -@media only screen and (min-width: 1500px) { - .flex-12-of-12 { +@media only screen and (min-width: 0) and (max-width: 575px) { + .flex-xs-12-of-12 { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 0px); flex: 0 0 calc(100% - 0px); diff --git a/core/scss/core/flex-grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss index 8df4ee651..d05f733ee 100644 --- a/core/scss/core/flex-grid/_flex-grid.scss +++ b/core/scss/core/flex-grid/_flex-grid.scss @@ -20,6 +20,13 @@ padding: 1rem; } +.flex-auto { + @extend %grid-column; + flex: 0 0 auto; + width: auto; + max-width: none; +} + // Loop through each breakpoint to generate column and push classes // For every column. @each $_breakpoint, $_media-query in $grid-screens { @@ -31,36 +38,15 @@ // For all breakpoints and columns create a default state. @for $n from 1 through $grid-columns { - .flex#{$_insert}-#{$n}-of-#{$grid-columns} { + .flex#{$_insert}-#{$n}-of-#{$grid-columns}, + .flex-#{$n}-of-#{$grid-columns} { @extend %grid-column; } } - // Add a helper class for the default column state. - .flex#{$_insert}-of-#{$grid-columns}, - .flex#{$_insert}-auto { - @extend %grid-column; - } - // At each breakpoint create size and gutter specific settings for each // column. @include grid-media($_breakpoint) { - - // Provide .flex-{bp}-of-12 classes for equal width flexbox columns. - .flex#{$_insert}-of-#{$grid-columns} { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - - // Sizes the item based on its width/height properties - // (or its content if not set). - .flex#{$_insert}-auto { - flex: 0 0 auto; - width: auto; - max-width: none; - } - // Foreach of the columns at this breakpoint create a helper push class. @for $n from 0 through ($grid-columns - 1) { @if not ($_insert == "" and $n == 0) { // No .flex-push-0. @@ -70,32 +56,28 @@ } } } -} - - +} // Loop through each column and breakpoint creating a responsive flex column. // The gutter sizes change as the breakpoints change so as the breakpoints -// get larger for each breakpoint class we have to adjust the gutter. For -// example, the flex-md-1-of-12 grid class will need a breakpoint wrapping -// and gutter size for breakpoints md -> 2xl but flex-xl-1-of-12 will only need -// breakpoints wrapping for breakpoints xl -> 2xl. +// get larger for each breakpoint class we have to adjust the gutter. @for $n from 1 through $grid-columns { - .flex-#{$n}-of-#{$grid-columns} { $cols: $n of $grid-columns; @include responsive-flex-column($cols, map-remove($grid-media, 'xs')); } +} - // Storage for breakpoint codes through each loop of columns. - $_codes: (); - +// Create breakpoint flex overrides. +// Loop through each of the breakpoints and columns to create a grid class. +@for $n from 1 through $grid-columns { + // Loop through each breakpoint. @each $_code, $_screen in $grid-screens { // The breakpoint short code. eg: xs, sm, lg with a dash $_insert: breakpoint-insert($_code, $grid-screens); - @if $_code != 'xs' { + @if str-length($_insert) > 1 { // The flex-breakpoint-column class. .flex#{$_insert}-#{$n}-of-#{$grid-columns} { // Generate the media queries and column size. diff --git a/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss b/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss index eb8171974..2d3fd55b2 100644 --- a/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss +++ b/core/scss/utilities/functions/breakpoint/_breakpoint-insert.scss @@ -16,5 +16,5 @@ // // Style guide: Functions.Breakpoint.breakpoint-insert @function breakpoint-insert($name, $breakpoints: $grid-screens) { - @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); + @return "-#{$name}"; } diff --git a/core/scss/utilities/mixins/flex/_flex-container.scss b/core/scss/utilities/mixins/flex/_flex-container.scss index cf4583c1f..13dc8498a 100644 --- a/core/scss/utilities/mixins/flex/_flex-container.scss +++ b/core/scss/utilities/mixins/flex/_flex-container.scss @@ -20,5 +20,4 @@ @include grid-media('md') { @include padding(null $site-margins); } - } From c2ad808a6b856128a244ce3d268bda28f7da0963 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 15:37:39 -0800 Subject: [PATCH 086/123] Flex grid behaviour fixes. --- core/scss/core/flex-grid/_flex-grid.scss | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/core/scss/core/flex-grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss index d05f733ee..3ff22c1ec 100644 --- a/core/scss/core/flex-grid/_flex-grid.scss +++ b/core/scss/core/flex-grid/_flex-grid.scss @@ -76,14 +76,11 @@ @each $_code, $_screen in $grid-screens { // The breakpoint short code. eg: xs, sm, lg with a dash $_insert: breakpoint-insert($_code, $grid-screens); - - @if str-length($_insert) > 1 { - // The flex-breakpoint-column class. - .flex#{$_insert}-#{$n}-of-#{$grid-columns} { - // Generate the media queries and column size. - @include grid-media-only($_code) { - @include flex-column($n of $grid-columns); - } + // The flex-breakpoint-column class. + .flex#{$_insert}-#{$n}-of-#{$grid-columns} { + // Generate the media queries and column size. + @include grid-media-only($_code) { + @include flex-column($n of $grid-columns); } } } From fec38123be4577ee01ec11a88b5ee0b166e4553a Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 15:46:16 -0800 Subject: [PATCH 087/123] Auto IE fix for lockup to false. --- core/css/decanter.css | 2 -- core/scss/components/lockup/_lockup.scss | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 2367b7688..ca6059b49 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -9468,8 +9468,6 @@ a { width: -moz-fit-content; width: fit-content; text-decoration: none; } - .su-lockup > *:nth-child(1) { - -ms-grid-column: 1; } @media only screen and (min-width: 768px) { .su-lockup { -ms-grid-columns: auto auto 1fr; diff --git a/core/scss/components/lockup/_lockup.scss b/core/scss/components/lockup/_lockup.scss index 65657f88c..df6328eba 100644 --- a/core/scss/components/lockup/_lockup.scss +++ b/core/scss/components/lockup/_lockup.scss @@ -20,7 +20,7 @@ // .su-lockup { @include display-grid; - @include grid-columns(1fr); + @include grid-columns(1fr, false); @include grid-rows(auto auto auto auto); align-items: end; width: fit-content; From 551ff7167cfcf464919fd525b8aa2f1839f3cc8a Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 16:10:09 -0800 Subject: [PATCH 088/123] Fix for repsonsive colors section. --- kss/builder/decanter/kss-assets/css/kss.css | 26 +++++++++++++++++++-- kss/builder/decanter/scss/_colors-demo.scss | 7 ++++++ kss/builder/decanter/scss/_fullscreen.scss | 8 +++++-- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 99ff04a14..b6be1703f 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -628,6 +628,9 @@ sub { @media only screen and (min-width: 35.5625em) { .kss-colors-container { margin-left: -10px; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .kss-colors-container.kss-parameters { + display: block; } } #kss-node .kss-colors-container .kss-parameters__item { display: inline-block; } @@ -806,12 +809,31 @@ sub { right: auto; left: 0; } +.is-fullscreen > .kss-style { + margin: 0 auto; } + @media only screen and (min-width: 0) { + .is-fullscreen > .kss-style { + max-width: -32px; } } + @media only screen and (min-width: 576px) { + .is-fullscreen > .kss-style { + max-width: 544px; } } + @media only screen and (min-width: 768px) { + .is-fullscreen > .kss-style { + max-width: 732px; } } + @media only screen and (min-width: 992px) { + .is-fullscreen > .kss-style { + max-width: 956px; } } + @media only screen and (min-width: 1200px) { + .is-fullscreen > .kss-style { + max-width: 1164px; } } + @media only screen and (min-width: 1500px) { + .is-fullscreen > .kss-style { + max-width: 1462px; } } + .is-fullscreen .kss-title { margin-top: 0; } .is-fullscreen .kss-modifier__wrapper { - margin-left: -20px; - margin-right: -20px; padding-left: 0; padding-right: 0; border: none; } diff --git a/kss/builder/decanter/scss/_colors-demo.scss b/kss/builder/decanter/scss/_colors-demo.scss index 40fe0d920..4677a6683 100644 --- a/kss/builder/decanter/scss/_colors-demo.scss +++ b/kss/builder/decanter/scss/_colors-demo.scss @@ -3,6 +3,13 @@ padding-left: 0; @media only screen and (min-width: 35.5625em) { margin-left: -10px; } + + @include grid-media-only('xs') { + &.kss-parameters{ + display: block; + } + } + } #kss-node .kss-colors-container .kss-parameters__item { diff --git a/kss/builder/decanter/scss/_fullscreen.scss b/kss/builder/decanter/scss/_fullscreen.scss index 8fbf18722..c681f1600 100644 --- a/kss/builder/decanter/scss/_fullscreen.scss +++ b/kss/builder/decanter/scss/_fullscreen.scss @@ -65,14 +65,18 @@ .is-fullscreen { + > .kss-style { + @include centered-column; + } + .kss-title { margin-top: 0; } .kss-modifier__wrapper { // Un-do padding on .kss-section. - margin-left: -20px; - margin-right: -20px; + // margin-left: -20px; + // margin-right: -20px; // Remove all padding on the wrapper padding-left: 0; padding-right: 0; From f7a92a4ecea4db9ec99e07ddd6ec7e11605fa313 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Mon, 10 Dec 2018 18:04:27 -0800 Subject: [PATCH 089/123] updated flex grid demo --- core/templates/core/flex-grid/flex-grid.twig | 108 +++++++++---------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/core/templates/core/flex-grid/flex-grid.twig b/core/templates/core/flex-grid/flex-grid.twig index a8103990c..da2be3712 100644 --- a/core/templates/core/flex-grid/flex-grid.twig +++ b/core/templates/core/flex-grid/flex-grid.twig @@ -1,90 +1,90 @@
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    -
    .flex-2-of-12
    +
    2-of-12 for all
    +
    2-of-12 for all
    +
    2-of-12 for all
    +
    2-of-12 for all
    +
    2-of-12 for all
    +
    2-of-12 for all
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    -
    .flex-sm-2-of-12
    +
    2-of-12 for sm up
    +
    2-of-12 for sm up
    +
    2-of-12 for sm up
    +
    2-of-12 for sm up
    +
    2-of-12 for sm up
    +
    2-of-12 for sm up
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    -
    .flex-md-2-of-12
    +
    2-of-12 for md up
    +
    2-of-12 for md up
    +
    2-of-12 for md up
    +
    2-of-12 for md up
    +
    2-of-12 for md up
    +
    2-of-12 for md up
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    -
    .flex-lg-2-of-12
    +
    2-of-12 for lg up
    +
    2-of-12 for lg up
    +
    2-of-12 for lg up
    +
    2-of-12 for lg up
    +
    2-of-12 for lg up
    +
    2-of-12 for lg up
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    -
    .flex-xl-2-of-12
    +
    2-of-12 for xl up
    +
    2-of-12 for xl up
    +
    2-of-12 for xl up
    +
    2-of-12 for xl up
    +
    2-of-12 for xl up
    +
    2-of-12 for xl up
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    -
    .flex-2xl-2-of-12
    +
    2-of-12 for 2xl up
    +
    2-of-12 for 2xl up
    +
    2-of-12 for 2xl up
    +
    2-of-12 for 2xl up
    +
    2-of-12 for 2xl up
    +
    2-of-12 for 2xl up
    -
    .flex-4-of-12
    -
    .flex-4-of-12
    -
    .flex-4-of-12
    +
    4-of-12 for all
    +
    4-of-12 for all
    +
    4-of-12 for all
    -
    .flex-sm-4-of-12
    -
    .flex-sm-4-of-12
    -
    .flex-sm-4-of-12
    +
    4-of-12 for sm up
    +
    4-of-12 for sm up
    +
    4-of-12 for sm up
    -
    .flex-md-4-of-12
    -
    .flex-md-4-of-12
    -
    .flex-md-4-of-12
    +
    4-of-12 for md up
    +
    4-of-12 for md up
    +
    4-of-12 for md up
    -
    .flex-lg-4-of-12
    -
    .flex-lg-4-of-12
    -
    .flex-lg-4-of-12
    +
    4-of-12 for lg up
    +
    4-of-12 for lg up
    +
    4-of-12 for lg up
    -
    .flex-xl-4-of-12
    -
    .flex-xl-4-of-12
    -
    .flex-xl-4-of-12
    +
    4-of-12 for xl up
    +
    4-of-12 for xl up
    +
    4-of-12 for xl up
    -
    .flex-2xl-4-of-12
    -
    .flex-2xl-4-of-12
    -
    .flex-2xl-4-of-12
    +
    4-of-12 for 2xl up
    +
    4-of-12 for 2xl up
    +
    4-of-12 for 2xl up
    From 737187e9bc582bc5ad777a3f20010408673cf732 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Mon, 10 Dec 2018 20:44:37 -0800 Subject: [PATCH 090/123] fw 1col 2col and 4col FIXUP and intro of 3col layouts with new flexbox and gutters WIP --- core/css/decanter.css | 581 +----------------- core/scss/layout/flex/three-column/_bars.scss | 16 +- .../layout/flex/three-column/_battleship.scss | 12 +- .../flex/three-column/_blastila-right.scss | 10 +- .../layout/flex/three-column/_blastila.scss | 46 +- .../flex/four-column/molive/molive-flex.twig | 8 +- .../flex/full-width/bricks/bricks-flex.twig | 8 +- .../flex/one-column/basic/basic-flex.twig | 6 +- .../bars/{bars.json => bars-flex.json} | 0 .../bars/{bars.png => bars-flex.png} | Bin .../bars/{bars.twig => bars-flex.twig} | 8 +- .../{battleship.json => battleship-flex.json} | 0 .../{battleship.png => battleship-flex.png} | Bin .../{battleship.twig => battleship-flex.twig} | 18 +- .../{blastila.json => blastila-flex.json} | 0 .../{blastila.twig => blastila-flex.twig} | 21 +- ...astila-left.png => blastila-left-flex.png} | Bin ...tila-right.png => blastila-right-flex.png} | Bin .../flex/two-column/donies/donies-flex.twig | 4 +- .../flex/two-column/frogger/frogger-flex.twig | 8 +- .../flex/two-column/pacman/pacman-flex.twig | 4 +- .../flex/two-column/plakes/plakes-flex.twig | 4 +- .../flex/two-column/toucan/toucan-flex.twig | 4 +- .../flex/two-column/trunks/trunks-flex.twig | 4 +- .../flex/two-column/wedge/wedge-flex.twig | 4 +- 25 files changed, 68 insertions(+), 698 deletions(-) rename core/templates/layout/flex/three-column/bars/{bars.json => bars-flex.json} (100%) rename core/templates/layout/flex/three-column/bars/{bars.png => bars-flex.png} (100%) rename core/templates/layout/flex/three-column/bars/{bars.twig => bars-flex.twig} (67%) rename core/templates/layout/flex/three-column/battleship/{battleship.json => battleship-flex.json} (100%) rename core/templates/layout/flex/three-column/battleship/{battleship.png => battleship-flex.png} (100%) rename core/templates/layout/flex/three-column/battleship/{battleship.twig => battleship-flex.twig} (68%) rename core/templates/layout/flex/three-column/blastila/{blastila.json => blastila-flex.json} (100%) rename core/templates/layout/flex/three-column/blastila/{blastila.twig => blastila-flex.twig} (80%) rename core/templates/layout/flex/three-column/blastila/{blastila-left.png => blastila-left-flex.png} (100%) rename core/templates/layout/flex/three-column/blastila/{blastila-right.png => blastila-right-flex.png} (100%) diff --git a/core/css/decanter.css b/core/css/decanter.css index ca6059b49..8ae4de4c8 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1948,582 +1948,11 @@ dfn { font-style: italic; margin-top: 0; } -.layout-bars > div { - margin: 0 auto; - display: grid; - display: -ms-grid; } - @media only screen and (min-width: 0) { - .layout-bars > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-bars > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-bars > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-bars > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-bars > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-bars > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-bars > div { - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; } - .layout-bars > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 32px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 32px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } } - @media only screen and (min-width: 576px) { - .layout-bars > div { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-bars > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 32px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 32px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-bars > div > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 768px) { - .layout-bars > div { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-bars > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 36px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 36px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-bars > div > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 992px) { - .layout-bars > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-bars > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 36px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 36px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-bars > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-bars > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 1200px) { - .layout-bars > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-bars > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 36px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 36px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-bars > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-bars > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 1500px) { - .layout-bars > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-bars > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-bars > div { - grid-column-gap: 38px; } - .layout-bars > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-bars > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-bars > div { - grid-row-gap: 38px; } - .layout-bars > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-bars > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-bars > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-bars > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 0) and (max-width: 575px) { - .layout-bars > div { - display: block; } } - @media (min-width: 576px) and (max-width: 991px) { - .layout-bars > div :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 1; } } - -.layout-battleship > div { - margin: 0 auto; - display: grid; - display: -ms-grid; } - @media only screen and (min-width: 0) { - .layout-battleship > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-battleship > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-battleship > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-battleship > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-battleship > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-battleship > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-battleship > div { - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; } - .layout-battleship > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 32px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 32px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } } - @media only screen and (min-width: 576px) { - .layout-battleship > div { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-battleship > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 32px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 32px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-battleship > div > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 768px) { - .layout-battleship > div { - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-battleship > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 36px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 36px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-battleship > div > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 992px) { - .layout-battleship > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-battleship > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 36px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 36px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-battleship > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-battleship > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 1200px) { - .layout-battleship > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-battleship > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 36px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 36px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-battleship > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-battleship > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 1500px) { - .layout-battleship > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-battleship > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-battleship > div { - grid-column-gap: 38px; } - .layout-battleship > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-battleship > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-battleship > div { - grid-row-gap: 38px; } - .layout-battleship > div > * { - margin-top: 0; - margin-bottom: 0; } } - .layout-battleship > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-battleship > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-battleship > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 0) and (max-width: 575px) { - .layout-battleship > div { - display: block; } } - .layout-battleship > div :first-child { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } - -.layout-blastila > header { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-blastila > header { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-blastila > header { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-blastila > header { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-blastila > header { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-blastila > header { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-blastila > header { - max-width: 1462px; } } - -.layout-blastila > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-blastila > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-blastila > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-blastila > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-blastila > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-blastila > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-blastila > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-blastila > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 32px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 32px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-blastila > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 32px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 32px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-blastila > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 36px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 36px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-blastila > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 36px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 36px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-blastila > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 36px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 36px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-blastila > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-blastila > div { - grid-column-gap: 38px; } - .layout-blastila > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-blastila > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-blastila > div { - grid-row-gap: 38px; } - .layout-blastila > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-blastila > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-blastila > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-blastila > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-blastila > div > *:nth-child(3) { - -ms-grid-column: 3; } } - .layout-blastila > div > aside { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - .layout-blastila > div > section { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 2; } - .layout-blastila > div > div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - .layout-blastila > div div ~ div { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-blastila--right > div { - grid-template-areas: "head head sidebar" "A B sidebar"; } +.layout-blastila-flex--right > div { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } .layout-chess > header, .layout-chess > footer { diff --git a/core/scss/layout/flex/three-column/_bars.scss b/core/scss/layout/flex/three-column/_bars.scss index 5c90f30c1..a9b3b0b60 100644 --- a/core/scss/layout/flex/three-column/_bars.scss +++ b/core/scss/layout/flex/three-column/_bars.scss @@ -6,21 +6,7 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/flex/three-column/bars/bars.twig +// Markup: ../../../../../templates/layout/flex/three-column/bars/bars-flex.twig // // Style guide: Layout.Flex.3Column.Bars // -.layout-bars { - > div { - @include centered-column; - @include responsive-grid-columns($responsive-columns-three); - - // IE 11 fix. - @include grid-media-between('sm', 'md') { - :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 1; - } - } - } -} diff --git a/core/scss/layout/flex/three-column/_battleship.scss b/core/scss/layout/flex/three-column/_battleship.scss index 03b77faa5..86997327b 100644 --- a/core/scss/layout/flex/three-column/_battleship.scss +++ b/core/scss/layout/flex/three-column/_battleship.scss @@ -6,17 +6,7 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/flex/three-column/battleship/battleship.twig +// Markup: ../../../../../templates/layout/flex/three-column/battleship/battleship-flex.twig // // Style guide: Layout.Flex.3Column.Battleship // -.layout-battleship { - > div { - @include centered-column; - @include responsive-grid-columns($responsive-columns-three); - - :first-child { - @include grid-item-spans(1, span 2); - } - } -} diff --git a/core/scss/layout/flex/three-column/_blastila-right.scss b/core/scss/layout/flex/three-column/_blastila-right.scss index 4f013289b..c0543e30a 100644 --- a/core/scss/layout/flex/three-column/_blastila-right.scss +++ b/core/scss/layout/flex/three-column/_blastila-right.scss @@ -3,12 +3,8 @@ // // Blastila Right - Variant // -.layout-blastila--right { - - > div { - grid-template-areas: - "head head sidebar" - "A B sidebar"; +.layout-blastila-flex--right { + >div { + flex-direction: row-reverse; } - } diff --git a/core/scss/layout/flex/three-column/_blastila.scss b/core/scss/layout/flex/three-column/_blastila.scss index 459645201..e3f36dc11 100644 --- a/core/scss/layout/flex/three-column/_blastila.scss +++ b/core/scss/layout/flex/three-column/_blastila.scss @@ -6,49 +6,9 @@ // A complext three column layout with a centered max width header a left // sidebar and a mini two column with header content area. // -// Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila.twig +// .layout-blastila-flex--right - Right sidebar version +// +// Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila-flex.twig // // Style guide: Layout.Flex.3Column.Blastila // -.layout-blastila { - - > header { - @include centered-column; - } - - > div { - @include centered-column; - @include responsive-grid-gap; - - // Enable the grid on md and higher. - // let everything be one column on xs and sm. - @include grid-media('md') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > aside { - // First column, for 1 column, but down two columns. - @include grid-item-spans(1, span 1, 1, span 2); - } - - > section { - // Row 2, column 2 for 2 cells. - @include grid-item-spans(2, span 2, 2); - } - - > div { - // Row 2, column 2 for 1 cell. - @include grid-item-spans(2, span 1, 2, span 1); - } - - div ~ div { - // Row 2, column 3 for 1 cell. - @include grid-item-spans(3, span 1, 2, span 1); - } - } - - - - -} diff --git a/core/templates/layout/flex/four-column/molive/molive-flex.twig b/core/templates/layout/flex/four-column/molive/molive-flex.twig index 28dbf7d38..216391e20 100644 --- a/core/templates/layout/flex/four-column/molive/molive-flex.twig +++ b/core/templates/layout/flex/four-column/molive/molive-flex.twig @@ -30,19 +30,19 @@ {# Because of the responsive behaviour each column is required. #}
    -
    +
    {{ first }}
    -
    +
    {{ second }}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    diff --git a/core/templates/layout/flex/full-width/bricks/bricks-flex.twig b/core/templates/layout/flex/full-width/bricks/bricks-flex.twig index b60e997bb..71d1a571e 100644 --- a/core/templates/layout/flex/full-width/bricks/bricks-flex.twig +++ b/core/templates/layout/flex/full-width/bricks/bricks-flex.twig @@ -27,11 +27,11 @@ {# Required two equal column centered content area. #} {% if first is not empty or second is not empty %}
    -
    +
    {{ first }}
    -
    +
    {{ second}}
    @@ -47,11 +47,11 @@ {# Optional two equal column centered content area. #} {% if third is not empty or fourth is not empty %}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    diff --git a/core/templates/layout/flex/one-column/basic/basic-flex.twig b/core/templates/layout/flex/one-column/basic/basic-flex.twig index d70070742..42f70332e 100644 --- a/core/templates/layout/flex/one-column/basic/basic-flex.twig +++ b/core/templates/layout/flex/one-column/basic/basic-flex.twig @@ -20,8 +20,10 @@ {% endif %} {% if content is not empty %} -
    - {{ content}} +
    +
    + {{ content}} +
    {% endif %} diff --git a/core/templates/layout/flex/three-column/bars/bars.json b/core/templates/layout/flex/three-column/bars/bars-flex.json similarity index 100% rename from core/templates/layout/flex/three-column/bars/bars.json rename to core/templates/layout/flex/three-column/bars/bars-flex.json diff --git a/core/templates/layout/flex/three-column/bars/bars.png b/core/templates/layout/flex/three-column/bars/bars-flex.png similarity index 100% rename from core/templates/layout/flex/three-column/bars/bars.png rename to core/templates/layout/flex/three-column/bars/bars-flex.png diff --git a/core/templates/layout/flex/three-column/bars/bars.twig b/core/templates/layout/flex/three-column/bars/bars-flex.twig similarity index 67% rename from core/templates/layout/flex/three-column/bars/bars.twig rename to core/templates/layout/flex/three-column/bars/bars-flex.twig index b3503152f..c4eff84e7 100644 --- a/core/templates/layout/flex/three-column/bars/bars.twig +++ b/core/templates/layout/flex/three-column/bars/bars-flex.twig @@ -13,17 +13,17 @@ */ #} -
    +
    {% block body %} -
    +
    {{ first }}
    -
    +
    {{ second }}
    -
    +
    {{ third }}
    {% endblock %} diff --git a/core/templates/layout/flex/three-column/battleship/battleship.json b/core/templates/layout/flex/three-column/battleship/battleship-flex.json similarity index 100% rename from core/templates/layout/flex/three-column/battleship/battleship.json rename to core/templates/layout/flex/three-column/battleship/battleship-flex.json diff --git a/core/templates/layout/flex/three-column/battleship/battleship.png b/core/templates/layout/flex/three-column/battleship/battleship-flex.png similarity index 100% rename from core/templates/layout/flex/three-column/battleship/battleship.png rename to core/templates/layout/flex/three-column/battleship/battleship-flex.png diff --git a/core/templates/layout/flex/three-column/battleship/battleship.twig b/core/templates/layout/flex/three-column/battleship/battleship-flex.twig similarity index 68% rename from core/templates/layout/flex/three-column/battleship/battleship.twig rename to core/templates/layout/flex/three-column/battleship/battleship-flex.twig index 08e91f527..c0b38ef51 100644 --- a/core/templates/layout/flex/three-column/battleship/battleship.twig +++ b/core/templates/layout/flex/three-column/battleship/battleship-flex.twig @@ -21,52 +21,52 @@ */ #} -
    +
    {% block body %} {% if first is not empty %} -
    +
    {{ first }}
    {% endif %} {% if second is not empty %} -
    +
    {{ second }}
    {% endif %} {% if third is not empty %} -
    +
    {{ third }}
    {% endif %} {% if fourth is not empty %} -
    +
    {{ fourth }}
    {% endif %} {% if fifth is not empty %} -
    +
    {{ fifth }}
    {% endif %} {% if sixth is not empty %} -
    +
    {{ sixth }}
    {% endif %} {% if seventh is not empty %} -
    +
    {{ seventh }}
    {% endif %} {% if eighth is not empty %} -
    +
    {{ eighth }}
    {% endif %} diff --git a/core/templates/layout/flex/three-column/blastila/blastila.json b/core/templates/layout/flex/three-column/blastila/blastila-flex.json similarity index 100% rename from core/templates/layout/flex/three-column/blastila/blastila.json rename to core/templates/layout/flex/three-column/blastila/blastila-flex.json diff --git a/core/templates/layout/flex/three-column/blastila/blastila.twig b/core/templates/layout/flex/three-column/blastila/blastila-flex.twig similarity index 80% rename from core/templates/layout/flex/three-column/blastila/blastila.twig rename to core/templates/layout/flex/three-column/blastila/blastila-flex.twig index b3a092324..e18611dd7 100644 --- a/core/templates/layout/flex/three-column/blastila/blastila.twig +++ b/core/templates/layout/flex/three-column/blastila/blastila-flex.twig @@ -24,42 +24,49 @@ {% if header is not empty %} -
    +
    {{ header }}
    {% endif %} {# Div for grid container #} -
    +
    +
    {# Sidebar #} {% if sidebar is not empty %} -
    +
    +
    {# Mini header area #} {% if first is not empty %} -
    +
    {{ first }}
    {% endif %} {# Left content column #} {% if second is not empty %} -
    +
    {{ second }}
    {% endif %} {# Right content column #} {% if third is not empty %} -
    +
    {{ third }}
    {% endif %} +
    +
    -
    {# end grid container #} +
    + {# end grid container #}
    diff --git a/core/templates/layout/flex/three-column/blastila/blastila-left.png b/core/templates/layout/flex/three-column/blastila/blastila-left-flex.png similarity index 100% rename from core/templates/layout/flex/three-column/blastila/blastila-left.png rename to core/templates/layout/flex/three-column/blastila/blastila-left-flex.png diff --git a/core/templates/layout/flex/three-column/blastila/blastila-right.png b/core/templates/layout/flex/three-column/blastila/blastila-right-flex.png similarity index 100% rename from core/templates/layout/flex/three-column/blastila/blastila-right.png rename to core/templates/layout/flex/three-column/blastila/blastila-right-flex.png diff --git a/core/templates/layout/flex/two-column/donies/donies-flex.twig b/core/templates/layout/flex/two-column/donies/donies-flex.twig index 1dbea6499..1a5100100 100644 --- a/core/templates/layout/flex/two-column/donies/donies-flex.twig +++ b/core/templates/layout/flex/two-column/donies/donies-flex.twig @@ -24,11 +24,11 @@ {# Mandatory content region #}
    -
    +
    {{ first }}
    -
    +
    {{ second }}
    diff --git a/core/templates/layout/flex/two-column/frogger/frogger-flex.twig b/core/templates/layout/flex/two-column/frogger/frogger-flex.twig index 387a32540..8e9b1d7e7 100644 --- a/core/templates/layout/flex/two-column/frogger/frogger-flex.twig +++ b/core/templates/layout/flex/two-column/frogger/frogger-flex.twig @@ -25,11 +25,11 @@ {# Required content section #}
    -
    +
    {{ first }}
    -
    +
    {{ second }}
    @@ -46,11 +46,11 @@ {# Optional third row #} {% if third is not empty %}
    -
    +
    {{ third }}
    -
    +
    {{ fourth }}
    diff --git a/core/templates/layout/flex/two-column/pacman/pacman-flex.twig b/core/templates/layout/flex/two-column/pacman/pacman-flex.twig index d7f152487..2fcabbbdd 100644 --- a/core/templates/layout/flex/two-column/pacman/pacman-flex.twig +++ b/core/templates/layout/flex/two-column/pacman/pacman-flex.twig @@ -24,11 +24,11 @@ {# Required content section #}
    -
    diff --git a/core/templates/layout/flex/two-column/plakes/plakes-flex.twig b/core/templates/layout/flex/two-column/plakes/plakes-flex.twig index 95af4a72c..b15ac9833 100644 --- a/core/templates/layout/flex/two-column/plakes/plakes-flex.twig +++ b/core/templates/layout/flex/two-column/plakes/plakes-flex.twig @@ -25,12 +25,12 @@ {# Grid Container #}
    {# Manditory sidebar #} -
    diff --git a/core/templates/layout/flex/two-column/toucan/toucan-flex.twig b/core/templates/layout/flex/two-column/toucan/toucan-flex.twig index 908f8c9f0..9960c088e 100644 --- a/core/templates/layout/flex/two-column/toucan/toucan-flex.twig +++ b/core/templates/layout/flex/two-column/toucan/toucan-flex.twig @@ -10,12 +10,12 @@
    {# Required column #} -
    +
    {{ first }}
    {# Required column #} -
    +
    {{ second }}
    diff --git a/core/templates/layout/flex/two-column/trunks/trunks-flex.twig b/core/templates/layout/flex/two-column/trunks/trunks-flex.twig index bfb976d92..4d94a833d 100644 --- a/core/templates/layout/flex/two-column/trunks/trunks-flex.twig +++ b/core/templates/layout/flex/two-column/trunks/trunks-flex.twig @@ -16,11 +16,11 @@ #}
    -
    +
    {{ first }}
    -
    +
    {{ second }}
    diff --git a/core/templates/layout/flex/two-column/wedge/wedge-flex.twig b/core/templates/layout/flex/two-column/wedge/wedge-flex.twig index a3a1e45e6..fc11e8aa2 100644 --- a/core/templates/layout/flex/two-column/wedge/wedge-flex.twig +++ b/core/templates/layout/flex/two-column/wedge/wedge-flex.twig @@ -19,11 +19,11 @@ #}
    -
    +
    {{ first }}
    -
    +
    {{ second }}
    From 52c61c85d5a95b73d2e581d42792148d8eb99380 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 22:55:46 -0800 Subject: [PATCH 091/123] Resolve duplicate twig file name issue by md5 hashing template path and name. --- .../layout/flex/three-column/_battleship.scss | 2 +- .../{battleship-flex.json => battleship.json} | 0 .../{battleship-flex.png => battleship.png} | Bin .../{battleship-flex.twig => battleship.twig} | 0 kss/builder/decanter/builder.js | 97 +++++++++++++++++- package-lock.json | 23 ++++- package.json | 1 + 7 files changed, 115 insertions(+), 8 deletions(-) rename core/templates/layout/flex/three-column/battleship/{battleship-flex.json => battleship.json} (100%) rename core/templates/layout/flex/three-column/battleship/{battleship-flex.png => battleship.png} (100%) rename core/templates/layout/flex/three-column/battleship/{battleship-flex.twig => battleship.twig} (100%) diff --git a/core/scss/layout/flex/three-column/_battleship.scss b/core/scss/layout/flex/three-column/_battleship.scss index 86997327b..dd58fa1aa 100644 --- a/core/scss/layout/flex/three-column/_battleship.scss +++ b/core/scss/layout/flex/three-column/_battleship.scss @@ -6,7 +6,7 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/flex/three-column/battleship/battleship-flex.twig +// Markup: ../../../../../templates/layout/flex/three-column/battleship/battleship.twig // // Style guide: Layout.Flex.3Column.Battleship // diff --git a/core/templates/layout/flex/three-column/battleship/battleship-flex.json b/core/templates/layout/flex/three-column/battleship/battleship.json similarity index 100% rename from core/templates/layout/flex/three-column/battleship/battleship-flex.json rename to core/templates/layout/flex/three-column/battleship/battleship.json diff --git a/core/templates/layout/flex/three-column/battleship/battleship-flex.png b/core/templates/layout/flex/three-column/battleship/battleship.png similarity index 100% rename from core/templates/layout/flex/three-column/battleship/battleship-flex.png rename to core/templates/layout/flex/three-column/battleship/battleship.png diff --git a/core/templates/layout/flex/three-column/battleship/battleship-flex.twig b/core/templates/layout/flex/three-column/battleship/battleship.twig similarity index 100% rename from core/templates/layout/flex/three-column/battleship/battleship-flex.twig rename to core/templates/layout/flex/three-column/battleship/battleship.twig diff --git a/kss/builder/decanter/builder.js b/kss/builder/decanter/builder.js index 84e34944a..4690a9fec 100644 --- a/kss/builder/decanter/builder.js +++ b/kss/builder/decanter/builder.js @@ -16,15 +16,20 @@ * @module kss/builder/twig */ +const path = require('path'), + Promise = require('bluebird'); +const fs = Promise.promisifyAll(require('fs-extra')); +const md5 = require('md5'); + // We want to extend kss-node's Twig builder so we can add options that // are used in our templates. -let KssBuilderBaseTwig; +let BaseTwigBuilder; try { // In order for a builder to be "kss clone"-able, it must use the // require('kss/builder/path') syntax. - KssBuilderBaseTwig = require('kss/builder/base/twig'); + BaseTwigBuilder = require('kss/builder/base/twig'); } catch (e) { // The above require() line will always work. // @@ -33,14 +38,14 @@ try { // which would allow node.js to find it with require('kss/anything'), forcing // you to write a long-winded comment and catch the error and try again using // a relative path. - KssBuilderBaseTwig = require('../base/twig'); + BaseTwigBuilder = require('../base/twig'); } /** * A kss-node builder that takes input files and builds a style guide using Twig * templates. */ -class KssBuilderTwig extends KssBuilderBaseTwig { +class DecanterBuilder extends BaseTwigBuilder { /** * Create a builder object. */ @@ -58,7 +63,89 @@ class KssBuilderTwig extends KssBuilderBaseTwig { default: 'KSS Style Guide' } }); + + } + + /** + * Build the HTML files of the style guide given a KssStyleGuide object. + * + * @param {KssStyleGuide} styleGuide The KSS style guide in object format. + * @returns {Promise.} A `Promise` object resolving to a + * `KssStyleGuide` object. + */ + build(styleGuide) { + let options = {}; + // Returns a promise to read/load a template provided by the builder. + options.readBuilderTemplate = name => { + return this.Twig.twigAsync({ + id: '@builderTwig/' + name + '.twig', + path: path.resolve(this.options.builder, name + '.twig') + }); + }; + // Returns a promise to read/load a template specified by a section. + options.readSectionTemplate = (name, filepath) => { + return this.Twig.twigAsync({ + id: name, + path: filepath + }); + }; + // Returns a promise to load an inline template from markup. + options.loadInlineTemplate = (name, markup) => { + return this.Twig.twigAsync({ + id: name, + data: markup + }); + }; + // Returns a promise to load the data context given a template file path. + options.loadContext = filepath => { + let context; + // Load sample context for the template from the sample .json file. + try { + context = require(path.join(path.dirname(filepath), path.basename(filepath, path.extname(filepath)) + '.json')); + // require() returns a cached object. We want an independent clone of + // the object so we can make changes without affecting the original. + context = JSON.parse(JSON.stringify(context)); + context = this.safeMarkup(context); + } catch (error) { + context = {}; + } + return Promise.resolve(context); + }; + // Returns a promise to get a template by name. + options.getTemplate = name => { + return this.Twig.twigAsync({ + ref: name + }); + }; + // Returns a promise to get a template's markup by name. + options.getTemplateMarkup = name => { + // We don't wrap the rendered template in "new handlebars.SafeString()" + // since we want the ability to display it as a code sample with {{ }} and + // as rendered HTML with {{{ }}}. + return options.getTemplate(name).then(template => { + // The rawMarkup is a custom property set in twigAsync(). + return template.rawMarkup; + }); + }; + // Renders a template and returns the markup. + options.templateRender = (template, context) => { + return template.render(context); + }; + // Converts a filename into a Twig template name. + options.filenameToTemplateRef = filename => { + // Return the filename path hash. + return md5(filename); + }; + options.templateExtension = 'twig'; + options.emptyTemplate = '{# Cannot be an empty string. #}'; + + // Reset the Twig template registry so KSS can be run in a "watch" task that + // does not destroy the Node.js environment between builds. + this.Twig.registryReset(); + + return this.buildGuide(styleGuide, options); } + } -module.exports = KssBuilderTwig; +module.exports = DecanterBuilder; diff --git a/package-lock.json b/package-lock.json index cd0926b17..fc1130ad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -852,6 +852,11 @@ "supports-color": "^2.0.0" } }, + "charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=" + }, "chokidar": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz", @@ -1096,6 +1101,11 @@ "which": "^1.2.9" } }, + "crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -4717,8 +4727,7 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, "is-builtin-module": { "version": "1.0.0", @@ -5242,6 +5251,16 @@ "pretty-bytes": "^1.0.0" } }, + "md5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", + "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=", + "requires": { + "charenc": "~0.0.1", + "crypt": "~0.0.1", + "is-buffer": "~1.1.1" + } + }, "mem": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", diff --git a/package.json b/package.json index 82891dd7d..6b68b5e6f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "grunt-postcss": "^0.9.0", "grunt-run": "^0.8.0", "grunt-sass": "^3.0.0", + "md5": "^2.2.1", "node-sass": "^4.10.0", "grunt-sass-lint": "^0.2.4", "jquery": "^3.3.1", From 8b886bb40a02a297eb2b955898e25a2fe7d7d770 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 23:08:58 -0800 Subject: [PATCH 092/123] Update template file names. --- .../scss/layout/flex/four-column/_molive.scss | 2 +- core/scss/layout/flex/full-width/_bricks.scss | 2 +- core/scss/layout/flex/full-width/_ibeam.scss | 2 +- core/scss/layout/flex/one-column/_basic.scss | 2 +- .../flex/one-column/_centered-container.scss | 2 +- core/scss/layout/flex/three-column/_bars.scss | 2 +- .../layout/flex/three-column/_blastila.scss | 2 +- core/scss/layout/flex/two-column/_donies.scss | 2 +- .../scss/layout/flex/two-column/_frogger.scss | 2 +- core/scss/layout/flex/two-column/_pacman.scss | 2 +- core/scss/layout/flex/two-column/_plakes.scss | 2 +- core/scss/layout/flex/two-column/_toucan.scss | 2 +- core/scss/layout/flex/two-column/_trunks.scss | 2 +- core/scss/layout/flex/two-column/_wedge.scss | 2 +- .../flex/four-column/molive/molive-flex.json | 8 -- .../flex/four-column/molive/molive-flex.png | Bin 4294 -> 0 bytes .../flex/four-column/molive/molive-flex.twig | 58 -------------- .../flex/full-width/bricks/bricks-flex.json | 8 -- .../flex/full-width/bricks/bricks-flex.png | Bin 3832 -> 0 bytes .../flex/full-width/bricks/bricks-flex.twig | 60 --------------- .../flex/full-width/ibeam/ibeam-flex.json | 6 -- .../flex/full-width/ibeam/ibeam-flex.png | Bin 1978 -> 0 bytes .../flex/full-width/ibeam/ibeam-flex.twig | 46 ----------- .../flex/one-column/basic/basic-flex.json | 5 -- .../flex/one-column/basic/basic-flex.png | Bin 1488 -> 0 bytes .../flex/one-column/basic/basic-flex.twig | 36 --------- .../centered-container-flex.json | 3 - .../centered-container-flex.twig | 25 ------ .../flex/three-column/bars/bars-flex.json | 5 -- .../flex/three-column/bars/bars-flex.png | Bin 3298 -> 0 bytes .../flex/three-column/bars/bars-flex.twig | 31 -------- .../three-column/blastila/blastila-flex.json | 7 -- .../three-column/blastila/blastila-flex.twig | 72 ------------------ .../blastila/blastila-left-flex.png | Bin 3864 -> 0 bytes .../blastila/blastila-right-flex.png | Bin 3735 -> 0 bytes .../flex/two-column/donies/donies-flex.json | 6 -- .../flex/two-column/donies/donies-flex.png | Bin 3832 -> 0 bytes .../flex/two-column/donies/donies-flex.twig | 42 ---------- .../flex/two-column/frogger/frogger-flex.json | 9 --- .../flex/two-column/frogger/frogger-flex.png | Bin 4654 -> 0 bytes .../flex/two-column/frogger/frogger-flex.twig | 66 ---------------- .../flex/two-column/pacman/pacman-flex.json | 6 -- .../flex/two-column/pacman/pacman-flex.twig | 42 ---------- .../two-column/pacman/pacman-left-flex.png | Bin 3272 -> 0 bytes .../two-column/pacman/pacman-right-flex.png | Bin 3278 -> 0 bytes .../flex/two-column/plakes/plakes-flex.json | 5 -- .../flex/two-column/plakes/plakes-flex.twig | 38 --------- .../two-column/plakes/plakes-left-flex.png | Bin 952 -> 0 bytes .../two-column/plakes/plakes-right-flex.png | Bin 2827 -> 0 bytes .../flex/two-column/toucan/toucan-flex.json | 4 - .../flex/two-column/toucan/toucan-flex.png | Bin 2090 -> 0 bytes .../flex/two-column/toucan/toucan-flex.twig | 23 ------ .../flex/two-column/trunks/trunks-flex.json | 4 - .../flex/two-column/trunks/trunks-flex.twig | 27 ------- .../two-column/trunks/trunks-left-flex.png | Bin 2467 -> 0 bytes .../two-column/trunks/trunks-right-flex.png | Bin 2280 -> 0 bytes .../flex/two-column/wedge/wedge-flex.json | 4 - .../flex/two-column/wedge/wedge-flex.twig | 30 -------- .../flex/two-column/wedge/wedge-left-flex.png | Bin 2084 -> 0 bytes .../two-column/wedge/wedge-right-flex.png | Bin 2188 -> 0 bytes kss/builder/decanter/builder.js | 9 +++ package-lock.json | 10 ++- 62 files changed, 30 insertions(+), 693 deletions(-) delete mode 100644 core/templates/layout/flex/four-column/molive/molive-flex.json delete mode 100644 core/templates/layout/flex/four-column/molive/molive-flex.png delete mode 100644 core/templates/layout/flex/four-column/molive/molive-flex.twig delete mode 100644 core/templates/layout/flex/full-width/bricks/bricks-flex.json delete mode 100644 core/templates/layout/flex/full-width/bricks/bricks-flex.png delete mode 100644 core/templates/layout/flex/full-width/bricks/bricks-flex.twig delete mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam-flex.json delete mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam-flex.png delete mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam-flex.twig delete mode 100644 core/templates/layout/flex/one-column/basic/basic-flex.json delete mode 100644 core/templates/layout/flex/one-column/basic/basic-flex.png delete mode 100644 core/templates/layout/flex/one-column/basic/basic-flex.twig delete mode 100644 core/templates/layout/flex/one-column/centered-container/centered-container-flex.json delete mode 100644 core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig delete mode 100644 core/templates/layout/flex/three-column/bars/bars-flex.json delete mode 100644 core/templates/layout/flex/three-column/bars/bars-flex.png delete mode 100644 core/templates/layout/flex/three-column/bars/bars-flex.twig delete mode 100644 core/templates/layout/flex/three-column/blastila/blastila-flex.json delete mode 100644 core/templates/layout/flex/three-column/blastila/blastila-flex.twig delete mode 100644 core/templates/layout/flex/three-column/blastila/blastila-left-flex.png delete mode 100644 core/templates/layout/flex/three-column/blastila/blastila-right-flex.png delete mode 100644 core/templates/layout/flex/two-column/donies/donies-flex.json delete mode 100644 core/templates/layout/flex/two-column/donies/donies-flex.png delete mode 100644 core/templates/layout/flex/two-column/donies/donies-flex.twig delete mode 100644 core/templates/layout/flex/two-column/frogger/frogger-flex.json delete mode 100644 core/templates/layout/flex/two-column/frogger/frogger-flex.png delete mode 100644 core/templates/layout/flex/two-column/frogger/frogger-flex.twig delete mode 100644 core/templates/layout/flex/two-column/pacman/pacman-flex.json delete mode 100644 core/templates/layout/flex/two-column/pacman/pacman-flex.twig delete mode 100644 core/templates/layout/flex/two-column/pacman/pacman-left-flex.png delete mode 100644 core/templates/layout/flex/two-column/pacman/pacman-right-flex.png delete mode 100644 core/templates/layout/flex/two-column/plakes/plakes-flex.json delete mode 100644 core/templates/layout/flex/two-column/plakes/plakes-flex.twig delete mode 100644 core/templates/layout/flex/two-column/plakes/plakes-left-flex.png delete mode 100644 core/templates/layout/flex/two-column/plakes/plakes-right-flex.png delete mode 100644 core/templates/layout/flex/two-column/toucan/toucan-flex.json delete mode 100644 core/templates/layout/flex/two-column/toucan/toucan-flex.png delete mode 100644 core/templates/layout/flex/two-column/toucan/toucan-flex.twig delete mode 100644 core/templates/layout/flex/two-column/trunks/trunks-flex.json delete mode 100644 core/templates/layout/flex/two-column/trunks/trunks-flex.twig delete mode 100644 core/templates/layout/flex/two-column/trunks/trunks-left-flex.png delete mode 100644 core/templates/layout/flex/two-column/trunks/trunks-right-flex.png delete mode 100644 core/templates/layout/flex/two-column/wedge/wedge-flex.json delete mode 100644 core/templates/layout/flex/two-column/wedge/wedge-flex.twig delete mode 100644 core/templates/layout/flex/two-column/wedge/wedge-left-flex.png delete mode 100644 core/templates/layout/flex/two-column/wedge/wedge-right-flex.png diff --git a/core/scss/layout/flex/four-column/_molive.scss b/core/scss/layout/flex/four-column/_molive.scss index c9bc9a837..15ac7f787 100644 --- a/core/scss/layout/flex/four-column/_molive.scss +++ b/core/scss/layout/flex/four-column/_molive.scss @@ -5,7 +5,7 @@ // // A four column collapsible layout with a centered header and footer. // -// Markup: ../../../../../templates/layout/flex/four-column/molive/molive-flex.twig +// Markup: ../../../../../templates/layout/flex/four-column/molive/molive.twig // // Style guide: Layout.Flex.4Column.Molive // diff --git a/core/scss/layout/flex/full-width/_bricks.scss b/core/scss/layout/flex/full-width/_bricks.scss index 1bcdfecd1..8faaddfd9 100644 --- a/core/scss/layout/flex/full-width/_bricks.scss +++ b/core/scss/layout/flex/full-width/_bricks.scss @@ -5,7 +5,7 @@ // // A Full width by 2 column collapsible layout that repeats. // -// Markup: ../../../../../templates/layout/flex/full-width/bricks/bricks-flex.twig +// Markup: ../../../../../templates/layout/flex/full-width/bricks/bricks.twig // // Style guide: Layout.Flex.FullWidth.Bricks // diff --git a/core/scss/layout/flex/full-width/_ibeam.scss b/core/scss/layout/flex/full-width/_ibeam.scss index 5e2aa30db..208be7733 100644 --- a/core/scss/layout/flex/full-width/_ibeam.scss +++ b/core/scss/layout/flex/full-width/_ibeam.scss @@ -5,7 +5,7 @@ // // A Full width by 1 column collapsible layout that repeats. // -// Markup: ../../../../../templates/layout/flex/full-width/ibeam/ibeam-flex.twig +// Markup: ../../../../../templates/layout/flex/full-width/ibeam/ibeam.twig // // Style guide: Layout.Flex.FullWidth.IBeam // diff --git a/core/scss/layout/flex/one-column/_basic.scss b/core/scss/layout/flex/one-column/_basic.scss index 9ef2cd6a2..9b59ae9bc 100644 --- a/core/scss/layout/flex/one-column/_basic.scss +++ b/core/scss/layout/flex/one-column/_basic.scss @@ -6,7 +6,7 @@ // A single column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/flex/one-column/basic/basic-flex.twig +// Markup: ../../../../../templates/layout/flex/one-column/basic/basic.twig // // Style guide: Layout.Flex.1Column.Basic // diff --git a/core/scss/layout/flex/one-column/_centered-container.scss b/core/scss/layout/flex/one-column/_centered-container.scss index 5e2c73131..0b721d62f 100644 --- a/core/scss/layout/flex/one-column/_centered-container.scss +++ b/core/scss/layout/flex/one-column/_centered-container.scss @@ -5,7 +5,7 @@ // // Centers the first child element of which this class is applied to. // -// Markup: ../../../../../templates/layout/flex/one-column/centered-container/centered-container-flex.twig +// Markup: ../../../../../templates/layout/flex/one-column/centered-container/centered-container.twig // // Weight: 1 // diff --git a/core/scss/layout/flex/three-column/_bars.scss b/core/scss/layout/flex/three-column/_bars.scss index a9b3b0b60..46ffa47fa 100644 --- a/core/scss/layout/flex/three-column/_bars.scss +++ b/core/scss/layout/flex/three-column/_bars.scss @@ -6,7 +6,7 @@ // A three column cell with header and footer. This layout has a single column // that is centered on the page with a max width determined by the breakpoints. // -// Markup: ../../../../../templates/layout/flex/three-column/bars/bars-flex.twig +// Markup: ../../../../../templates/layout/flex/three-column/bars/bars.twig // // Style guide: Layout.Flex.3Column.Bars // diff --git a/core/scss/layout/flex/three-column/_blastila.scss b/core/scss/layout/flex/three-column/_blastila.scss index e3f36dc11..4f3a99254 100644 --- a/core/scss/layout/flex/three-column/_blastila.scss +++ b/core/scss/layout/flex/three-column/_blastila.scss @@ -8,7 +8,7 @@ // // .layout-blastila-flex--right - Right sidebar version // -// Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila-flex.twig +// Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila.twig // // Style guide: Layout.Flex.3Column.Blastila // diff --git a/core/scss/layout/flex/two-column/_donies.scss b/core/scss/layout/flex/two-column/_donies.scss index 7bf72ead2..5a4306a91 100644 --- a/core/scss/layout/flex/two-column/_donies.scss +++ b/core/scss/layout/flex/two-column/_donies.scss @@ -5,7 +5,7 @@ // // A two column centered 50/50 template with header and footer. // -// Markup: ../../../../../templates/layout/flex/two-column/donies/donies-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/donies/donies.twig // // Style guide: Layout.Flex.2Column.Donies // diff --git a/core/scss/layout/flex/two-column/_frogger.scss b/core/scss/layout/flex/two-column/_frogger.scss index df72de394..f2677027d 100644 --- a/core/scss/layout/flex/two-column/_frogger.scss +++ b/core/scss/layout/flex/two-column/_frogger.scss @@ -5,7 +5,7 @@ // // A two column centered 50/50 template with header and footer repeated. // -// Markup: ../../../../../templates/layout/flex/two-column/frogger/frogger-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/frogger/frogger.twig // // Style guide: Layout.Flex.2Column.Frogger // diff --git a/core/scss/layout/flex/two-column/_pacman.scss b/core/scss/layout/flex/two-column/_pacman.scss index e391ec18f..2d9205242 100644 --- a/core/scss/layout/flex/two-column/_pacman.scss +++ b/core/scss/layout/flex/two-column/_pacman.scss @@ -7,7 +7,7 @@ // // .layout-pacman-flex--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/flex/two-column/pacman/pacman-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/pacman/pacman.twig // // Style guide: Layout.Flex.2Column.Pacman // diff --git a/core/scss/layout/flex/two-column/_plakes.scss b/core/scss/layout/flex/two-column/_plakes.scss index 1889491f5..4dc3d7f3d 100644 --- a/core/scss/layout/flex/two-column/_plakes.scss +++ b/core/scss/layout/flex/two-column/_plakes.scss @@ -7,7 +7,7 @@ // // .layout-plakes-flex--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/flex/two-column/plakes/plakes-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/plakes/plakes.twig // // Style guide: Layout.Flex.2Column.Plakes // diff --git a/core/scss/layout/flex/two-column/_toucan.scss b/core/scss/layout/flex/two-column/_toucan.scss index 16edaa15f..bd3126366 100644 --- a/core/scss/layout/flex/two-column/_toucan.scss +++ b/core/scss/layout/flex/two-column/_toucan.scss @@ -5,7 +5,7 @@ // // A two column centered 50/50 template. // -// Markup: ../../../../../templates/layout/flex/two-column/toucan/toucan-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/toucan/toucan.twig // // Style guide: Layout.Flex.2Column.Toucan // diff --git a/core/scss/layout/flex/two-column/_trunks.scss b/core/scss/layout/flex/two-column/_trunks.scss index 48a08fcb5..3ee2bee30 100644 --- a/core/scss/layout/flex/two-column/_trunks.scss +++ b/core/scss/layout/flex/two-column/_trunks.scss @@ -7,7 +7,7 @@ // // .layout-trunks-flex--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/flex/two-column/trunks/trunks-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/trunks/trunks.twig // // Style guide: Layout.Flex.2Column.Trunks // diff --git a/core/scss/layout/flex/two-column/_wedge.scss b/core/scss/layout/flex/two-column/_wedge.scss index dc6375600..3d01af41b 100644 --- a/core/scss/layout/flex/two-column/_wedge.scss +++ b/core/scss/layout/flex/two-column/_wedge.scss @@ -7,7 +7,7 @@ // // .layout-wedge-flex--right - Right sidebar variant. // -// Markup: ../../../../../templates/layout/flex/two-column/wedge/wedge-flex.twig +// Markup: ../../../../../templates/layout/flex/two-column/wedge/wedge.twig // // Style guide: Layout.Flex.2Column.Wedge // diff --git a/core/templates/layout/flex/four-column/molive/molive-flex.json b/core/templates/layout/flex/four-column/molive/molive-flex.json deleted file mode 100644 index 6d04cab3c..000000000 --- a/core/templates/layout/flex/four-column/molive/molive-flex.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "first": "

    First column

    Example Image", - "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "header": "

    This is your header column

    ", - "footer": "

    This is your footer column

    " -} diff --git a/core/templates/layout/flex/four-column/molive/molive-flex.png b/core/templates/layout/flex/four-column/molive/molive-flex.png deleted file mode 100644 index 454a33eb5c79c5ff8577eeec738e924b2b0a48ed..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4294 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 CHuaPM diff --git a/core/templates/layout/flex/four-column/molive/molive-flex.twig b/core/templates/layout/flex/four-column/molive/molive-flex.twig deleted file mode 100644 index 216391e20..000000000 --- a/core/templates/layout/flex/four-column/molive/molive-flex.twig +++ /dev/null @@ -1,58 +0,0 @@ -{# -/** - * @file - * Molive - Template for a 4 column panel layout. - * - * This template provides a four column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * attributes - html attributes for the template wrapper tag - * modifier_class - Variant modifier css classes - * header - A four column span header area - * first - First of four columns - * second - Second of four columns - * third - Third of four columns - * fourth - Fourth of four columns - * footer - A four column span footer area - */ -#} - - - {# A centered max-width header region #} - {% if header is not empty %} -
    -
    - {{ header }} -
    -
    - {% endif %} - - {# Because of the responsive behaviour each column is required. #} -
    -
    - {{ first }} -
    - -
    - {{ second }} -
    - -
    - {{ third }} -
    - -
    - {{ fourth }} -
    -
    - - {# Centered max-width footer region #} - {% if footer is not empty %} -
    -
    - {{ footer }} -
    -
    - {% endif %} -
    diff --git a/core/templates/layout/flex/full-width/bricks/bricks-flex.json b/core/templates/layout/flex/full-width/bricks/bricks-flex.json deleted file mode 100644 index 558128ca4..000000000 --- a/core/templates/layout/flex/full-width/bricks/bricks-flex.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "hero": "

    Full Width Hero Column 1

    ", - "hero2": "

    Full Width Hero Column 2

    ", - "first": "

    First Column

    ", - "second": "

    Second Column

    ", - "third": "

    Third Column

    ", - "fourth": "

    Fourth Column

    " -} diff --git a/core/templates/layout/flex/full-width/bricks/bricks-flex.png b/core/templates/layout/flex/full-width/bricks/bricks-flex.png deleted file mode 100644 index 288575f9b9a5347fa0f1ec23102d077269ec590f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> diff --git a/core/templates/layout/flex/full-width/bricks/bricks-flex.twig b/core/templates/layout/flex/full-width/bricks/bricks-flex.twig deleted file mode 100644 index 71d1a571e..000000000 --- a/core/templates/layout/flex/full-width/bricks/bricks-flex.twig +++ /dev/null @@ -1,60 +0,0 @@ -{# -/** - * @file - * Bricks - * A two column 50/50 centered row followed by a full width region. - * - * Variables: - * attributes - html attributes for the template wrapper tag - * modifier_class - Variant modifier css classes - * hero - The top most full width region. - * first - First of a 50/50 centered column - * second - Second of a 50/50 centered column - * hero2 - Second full width region - * third - First of a 50/50 centered column - * fourth - Second of a 50/50 centered column - */ -#} - - - {# Full width region #} - {% if hero is not empty %} -
    - {{ hero }} -
    - {% endif %} - - {# Required two equal column centered content area. #} - {% if first is not empty or second is not empty %} -
    -
    - {{ first }} -
    - -
    - {{ second}} -
    -
    - {% endif %} - - {# Full width region #} - {% if hero2 is not empty %} -
    - {{ hero2 }} -
    - {% endif %} - - {# Optional two equal column centered content area. #} - {% if third is not empty or fourth is not empty %} -
    -
    - {{ third }} -
    - -
    - {{ fourth }} -
    -
    - {% endif %} - -
    diff --git a/core/templates/layout/flex/full-width/ibeam/ibeam-flex.json b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.json deleted file mode 100644 index a9746d5e8..000000000 --- a/core/templates/layout/flex/full-width/ibeam/ibeam-flex.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "full_width": "

    Full width region

    ", - "full_width2": "

    Full width region

    ", - "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "content2": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/full-width/ibeam/ibeam-flex.png b/core/templates/layout/flex/full-width/ibeam/ibeam-flex.png deleted file mode 100644 index 989f5e4cb95f7bb1e6bc80acb392f1002a5947ac..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1978 zcmV;r2SxaaP)Ml-MPQIj2FW0q z43cSDWmo^HLdDCMFWG;+Pbfg5w-Q>l)FA?zRdjb+eE7i!?Cw4o4XG?jo__h1zyA3j zTpWT_ZBRglwbF$;aUKnh9kpeS>s?JBwm;1^ra9*<`52!jDv&(lA$3l9|H*gx&2N7- z9#V>M_HE?gKP4AO37?Yv(pRnI5C_2*w5TYK(|C6$$&vMT=$t&nm4PhF7WieGB~6v) zq^@c%zC-)uJ$%(24+-jeNJ5T_g7eF5R}5}(*0gnuIOy3V)AJ?Xsp7C=&6_sbMbaA8e9LDO(=XmQeg3TCZed_yslS<*eTB&(C| zK%Hdn&fJ}88Sc(xb&|>AB#VwJsc(=6A! z{H}uFK%i=!Q*J@ZiV2Xs;@>OCzkg0@Ib7+-I7=JSHG4j9rU@qH8+vn`;b=Z5jcl)rbGyPPR5CS2Dq2s?y ztE`t4aYCNwc<)C;GFdQdGD!DV+1-x=_5bnUFjp^wtr(TjzO9Y&A zh!dQb%YBi%2P|8(uu@7Kzd2hUps1vzBqFMcr~?%)dKEDwVi^$;d{#GY#nr&FJi}#z z&pgfv;#Lo8`<*U%J6rfiv9KjoMc@y={|hOucEXtm^iE2S_b(`W5uZcWc67R3yyk>5 zQWb&N&xiMdI4H|N2vrTVZ&mHBobBB1iYtj` z2kt8+K?88%`vG=MPUNsYPV3&rYr*HW&XOzV%@o&;;1%aq6U{pB_~Ms8ZbqFXB2=fI zP|g}|$%HMC`v2?IV`LDkgAO1Lxwa0!o}v(h7#xTaCwBJBm^_a@#(9TEngI!2Aeju3K{6R6 zlR+{_ra6?gyg_QRL|}WTvy_oZ25Cil@{>orv%6)M)MPF5sk~dX47^o4LVilWVNjCR+xSoIYnpe*ct>Iw7?6iiYjGlL5YKptll`NNF zS|X&B%!->1`%bNw^_IJ9L@=xUm1K<1@WMGe>MbQiS;*ZvCw%g= zk3iwo^EVtFoKY2l6fJmC;P~L26cf%Z*2-JkS`{fKP7Zr~^RL&u`uc#wZ%;UWb58H1 zq&P3B%0Q?RDI{V{{r7z9l^5XZMg!mKyPfv=heB} z9Rt@ORb}AC*DrbX-+f|;){C&NfXV?bvc1#g@skhP``&}mkjkRs*;n82_dh+QyeM(b zyx}?^i380m-haGHx7!^LNt4oh6F7QNQ1mLY%=cGrzHL#qg6Zt}9GNCcBGA@Ad8!lY zBo(B}kzN;nk>hf|K(QI7>C)=YQW@c>itKFkmPcq^#0%28gG%>a@=;F>*<7jog?4l&NELwb@XS0#p%W3 zBnxIuYl385;&%X&g|FuBOiP1g=Cm1!S<*eTBx^lvMrxL14F{7!GDs$aWHLww$<#zh z79!mNNY*2CSKOVE+JIz6Napi4z-aVvh3qDr7!p+(31z$-c{!TAjTV|MpCd*KsZxf5 zG880@;~|L?I@>LF9&Aw+0iXNLG8$Dz4EY{&Fkr+v#xWn}opcV5rq`{g2#)RD7FpYk zht%q1{OG5T*?F){3<>9#Tsi3&*Q;~Xh08wQBKM>ds+LjtQBYB03T(aG=HcVrA)fHY zOurNrO}dhb>Ao|PxsIv#l=_te&daSa_% - - {% if full_width is not empty %} -
    - {{ full_width }} -
    - {% endif %} - - {% if content is not empty %} -
    -
    - {{ content }} -
    -
    - {% endif %} - - {% if full_width2 is not empty %} -
    - {{ full_width2 }} -
    - {% endif %} - - {% if content2 is not empty %} -
    -
    - {{ content2 }} -
    -
    - {% endif %} - -
    diff --git a/core/templates/layout/flex/one-column/basic/basic-flex.json b/core/templates/layout/flex/one-column/basic/basic-flex.json deleted file mode 100644 index 1a723bb68..000000000 --- a/core/templates/layout/flex/one-column/basic/basic-flex.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "header": "

    Header

    ", - "footer": "
    This is the footer
    ", - "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/one-column/basic/basic-flex.png b/core/templates/layout/flex/one-column/basic/basic-flex.png deleted file mode 100644 index 4bdf0e752d6106494f92c786cca9fc85cb1748b8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1488 zcmeAS@N?(olHy`uVBq!ia0vp^89>~|!3HD^gU$y7DaPU;cPEB*=VV?2*>f{PB1$5B zeXNr6bM+Ea@{>~aDsl^esu&n-Dy)Fa+|-gpg^Jvqyke^gTP3gxD1^l#~=$>Fbx5m+O@q>*W`v z>l<2HTIw4Z=^Gj80#)c1SLT%@R_NvxD?a#8ycO zWDy)d+?iUDiLfcJ80syc2lYWR`i6Q2`f#&>T5Uk0Rsoq6sW}lYnYpQX#Xvjk3=K?d z!0It%5H=#|j6~9DjG_}s2CCCWALIcf4?#i;ED8)RJ1!f2c+lH%xwFYSFfcGb^mK6y zsbGA2?V{i10*2O)^}7{MFj)mAb6k&;n16`<`zd#WW9$xkhH428+pcY6isGy4CE~PhXtfyy^d=k7u)c8ur!y z4z$~6uQ%U*&XjGx8>`-_KR6pCEcYeae0AD^NS*D*0h{wq-F)f#v#Ln%LW@HA{9Wu( z5vh8vY5BNXP?Eb3L*S@X!GX2gO?F^G^A?0oUt8cDQE@% z8Xb7rZ#XTm;8hmrcqkCfA+kJ?g~?DRiM#QUNsog5X zmAje#Dg3RppYg7noS<08|8C_eo1Hb84&G;FI@nmpWNX^Qb!MKY45;k&boFyt=akR{ E07!N;KmY&$ diff --git a/core/templates/layout/flex/one-column/basic/basic-flex.twig b/core/templates/layout/flex/one-column/basic/basic-flex.twig deleted file mode 100644 index 42f70332e..000000000 --- a/core/templates/layout/flex/one-column/basic/basic-flex.twig +++ /dev/null @@ -1,36 +0,0 @@ -{# -/** - * @file - * Template for a single celled centered content layout. - * - * Variables: - * attributes - html attributes for the template wrapper tag - * modifier_class - Variant modifier css classes - * header - Centered single column open content area - * footer - Centered single column open content area - * content - Centered single column open content area - */ -#} - - - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {% if content is not empty %} -
    -
    - {{ content}} -
    -
    - {% endif %} - - {% if footer is not empty %} -
    - {{ footer }} -
    - {% endif %} - -
    diff --git a/core/templates/layout/flex/one-column/centered-container/centered-container-flex.json b/core/templates/layout/flex/one-column/centered-container/centered-container-flex.json deleted file mode 100644 index 39711e9e0..000000000 --- a/core/templates/layout/flex/one-column/centered-container/centered-container-flex.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig b/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig deleted file mode 100644 index ab695e406..000000000 --- a/core/templates/layout/flex/one-column/centered-container/centered-container-flex.twig +++ /dev/null @@ -1,25 +0,0 @@ -{# -/** - * @file - * Centered container - * - * An example of how to center a container in the page. - * - * Available modifiers - * - None so far - * - * Available Variables - * - attributes: A series of tag attributes for the wrapper - * - modifier_class: Modifier css classes for this component. - * - body: A block element that is expected to be replaced with your content. - * - content: Your content - * - */ -#} - -
    - {% block body %} - {{ content }} - {% endblock %} -
    -
    diff --git a/core/templates/layout/flex/three-column/bars/bars-flex.json b/core/templates/layout/flex/three-column/bars/bars-flex.json deleted file mode 100644 index aa79e4ede..000000000 --- a/core/templates/layout/flex/three-column/bars/bars-flex.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/three-column/bars/bars-flex.png b/core/templates/layout/flex/three-column/bars/bars-flex.png deleted file mode 100644 index 8419c65111c5bf5109ecb781eff8b7eaf4eb41a7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3298 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 -
    - {% block body %} -
    - {{ first }} -
    - -
    - {{ second }} -
    - -
    - {{ third }} -
    - {% endblock %} -
    -
    diff --git a/core/templates/layout/flex/three-column/blastila/blastila-flex.json b/core/templates/layout/flex/three-column/blastila/blastila-flex.json deleted file mode 100644 index f62059bc8..000000000 --- a/core/templates/layout/flex/three-column/blastila/blastila-flex.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "header": "

    This is the full column header.

    ", - "sidebar": "

    Sidebar Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "first": "

    A mini heading area

    ", - "second": "

    Left content column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "third": "

    Right content area

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/three-column/blastila/blastila-flex.twig b/core/templates/layout/flex/three-column/blastila/blastila-flex.twig deleted file mode 100644 index e18611dd7..000000000 --- a/core/templates/layout/flex/three-column/blastila/blastila-flex.twig +++ /dev/null @@ -1,72 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout with a single - * cell top most column followed by a 3 column layout where a 2 column span - * header region is above two single column regions and a right sidebar. - * - * Variants: - * layout-blastila--right - A right sidebar variant to the layout. - * - * Variables: - * attributes - html attributes for the template wrapper tag - * modifier_class - Variant modifier css classes - * header - A single cell centered columns - * sidebar - A 1/3 row right sidebar open content region - * first - A 2/3 row section below the header and to the left of the sidebar. - * second - A 1/3 column content region below the first region. - * third - A 1/3 column content region below the first region. - * - */ -#} - - - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {# Div for grid container #} -
    - -
    - {# Sidebar #} - {% if sidebar is not empty %} - - {% endif %} -
    - -
    -
    - {# Mini header area #} - {% if first is not empty %} -
    - {{ first }} -
    - {% endif %} - - {# Left content column #} - {% if second is not empty %} -
    - {{ second }} -
    - {% endif %} - - {# Right content column #} - {% if third is not empty %} -
    - {{ third }} -
    - {% endif %} -
    -
    - -
    - {# end grid container #} - -
    diff --git a/core/templates/layout/flex/three-column/blastila/blastila-left-flex.png b/core/templates/layout/flex/three-column/blastila/blastila-left-flex.png deleted file mode 100644 index a31ac6d8cf5cbdf438d737703de4ece3423224c3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3864 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 diff --git a/core/templates/layout/flex/two-column/donies/donies-flex.json b/core/templates/layout/flex/two-column/donies/donies-flex.json deleted file mode 100644 index 8caea6850..000000000 --- a/core/templates/layout/flex/two-column/donies/donies-flex.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "first": "

    First Column

    ", - "second": "

    Second Column

    ", - "header": "

    Header

    ", - "footer": "
    This is the footer
    " -} diff --git a/core/templates/layout/flex/two-column/donies/donies-flex.png b/core/templates/layout/flex/two-column/donies/donies-flex.png deleted file mode 100644 index 288575f9b9a5347fa0f1ec23102d077269ec590f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> diff --git a/core/templates/layout/flex/two-column/donies/donies-flex.twig b/core/templates/layout/flex/two-column/donies/donies-flex.twig deleted file mode 100644 index 1a5100100..000000000 --- a/core/templates/layout/flex/two-column/donies/donies-flex.twig +++ /dev/null @@ -1,42 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - - * - - * - * - * - */ -#} - - {# Optional header region #} - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {# Mandatory content region #} -
    -
    - {{ first }} -
    - -
    - {{ second }} -
    -
    - - {# Optional footer region #} - {% if footer is not empty %} -
    - {{ footer }} -
    - {% endif %} -
    diff --git a/core/templates/layout/flex/two-column/frogger/frogger-flex.json b/core/templates/layout/flex/two-column/frogger/frogger-flex.json deleted file mode 100644 index a78aaa491..000000000 --- a/core/templates/layout/flex/two-column/frogger/frogger-flex.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "first": "

    First Column

    ", - "second": "

    Second Column

    ", - "third": "

    Third Column

    ", - "fourth": "

    Fourth Column

    ", - "middle": "

    Optional Middle content can go here

    ", - "header": "

    Header

    ", - "footer": "
    This is the footer
    " -} diff --git a/core/templates/layout/flex/two-column/frogger/frogger-flex.png b/core/templates/layout/flex/two-column/frogger/frogger-flex.png deleted file mode 100644 index b5e85d7a1966761d32d5b2ff17e696cda335f99a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4654 zcmZu#2UHVVw@zZH61viR7wHgM2#EAv14u_A(tEGcA|0ek^%@8&(o{N9MFgZv?*!?+ zNK<_A-s}JS)_b$o%-M7H{`Q`4&zil@nK(TiRR}RXF#rI7sH-U%;6?}B8BK_fyC$Vc zjNt~Lw}Gl6pkjb=11A?a8kzc-YHP{dcXt)EwRg8e3I@1(;H&@uSbz*pbVd5uvIe-i zxOvM2$g%%zA%l~DO$)KJ{%zvpEXQuDt;c%T-3!SoAt){=%nm1JWo3nV**}mmP*V99 zj=Pg%f9T`mAtNN@@9!_@FDB^jN`})YSv;PY8pW~nBL4Fo(g#MFyI5FAlmu>(6xxBj49isr?j^%Z4hB}IQ*%oy(_a33CxUCP`+@nud zdESi{%|G?Sr0W!Pb5^HI#qDs`a+zm!t<9zVxXGyiKyj2Pak4Sc>IVo`P40R4n*xG| z36mp_3_#V{7I>IwFi48onh?mC($1$jj~@k;3%!UYwPw^GPvND{vPbOGus?eI5G<|A zL2pdy^&=eyNu7A^dY+ztQ61xdai|75zJd{aRne$fTUJ>nR@9Mnjn zxiI#mz@eKinxLGu1DRvTcqpUNyrw=*umxjCUv3bJdaSC?@%lA9|roiFEh z;q_30@f&6=XG8dsxul*fO|@(%TlHpQ*1XSdBVFj_S_p$o3M#}4QUYyh`FdzcT_K*g|Nj7z*kOvr+cg?mFWx1RTVTM)=9};400Txh z=VL%pRtn3FOG{=ecEL~wnHcqjz`c~z-Bbz zxRW6|L}F$Ok$+-Z5OvM1!)^S=L|;$Uv1R{Mpr6GEb;)3_1N}yhi5cn`S-3Of;|K4y z^d*#GCQJ=R(CHzZM|nRsCaqFSp{3AE7epm9s0_wzp3NX^gU}Y)(||Ml6x2i|8MKq-OG$ZBY@5rFD*Nb0MKga0|F3{ zE}`qVH!f4|3QbaBZ*Ujr6O{?{RxI$#R^da_Tdk0&3$TkelPs7)_9} zfpQPS(CAv}SIRxB|Gc=;r;+>h0^9H4Nu2=6mvpnfL6b|B&qnQ3fX+x}Ipx!=#!@jI z^e)|EAXQyg(=gl9OU#;co&h*5@OiXMhFxx?GKUAN?R3IR-cxjO0kGGhw`Y4k*|t*n zI}Qzyq?OI&P9BhEYJX|Z%y~ea8Ok6%J>guKuMzOdL~2-Z~eE_4{kj~3;BlXy%sFfUDSQ@Bsn2aI&VPY1;C zywn)(QRb;HM0asfBen70F)cfM>jsyCy37UsqNv?Ub&uD595)7i-R$z(5Fn3lmoeGbXfuFZV^p-o%@{7waq>t3A z&T_U6nM4v}K zGg-D9G$$6dd#@@VKgb>6$Q#oye=nN3^`^qJ1%#6I-fxGOpn;Gn(nq3{BIOUq{vw(7 zvT~Sy->5v{zIXrF#V)wcqp=SXh?o@>{ysCc@SNXV zAd05OJqfr3iIIC9weB|Wi_Xrp&BO3kl=f8}BQ3YL92o^odX37Bt0*ejqbqUB@q1)d zjk4=Jid^z`HA3B&OKc?A6O^haEhE_^DMc#rBjMTzKb!_yO&rruV>H_7_2Jp8rF8~=k(geuz7z_QvpdCQ1YL2 zo%MKY#yf*BHNv4p0cd^&3`QN5B~CkJX@(P#WkVoVrBXK?)ltT*H0j*&t4ce?UieE z=)^}E{bqM&F?{h`8=|*EO~(8RnX<)|H{Kq)($i(*a6baiE#{3M;BcBJNya*lIu|^8 zY!hzM6?T1Y@rxQfHIDB|o?DAp0E3FUgq{Zfj23%imo z`AXPYM5pfH;O^Cpf;Q|CdX@$b;pq=QpDaD70d66re7gxcG;#}M@scMG&d@x?j>5+t>?IaPfZ z(VjRMoh96DR!U}jGre3$qqNO-HT?Sp-;X_O>jZvRUjjca=fLm~8%a!Ao&UNnOWjLE z<&X?Xc5Y*vh-KXzx`-KGve$A!0fnb{+W4~$q&N1in%}b`jxy{J+065=7`ZyJl$3HA z5(=c!-@_9J^XVXh1HObtlev^mR$tr>PMSMQtJ({UxZ9B9yjDEb-SutzK=a}x7;r?) z{ghxRXn!k3_q4VrG$=ZqsWd6^Nrhh2tCkmO9O57%nW3lxT}HkX7+7^%AeOZ1=+#}J zqSlW9C)EDdf^1UtU(TEuel~G-6m?_P z^(uzAz&sPEIw)HNR^%NpACTNlxgS|mw;I!S-O);zYL^D&UD$~{Uch_1k1C_e+iPQg z;PP78e_+-tY4H_x=yF;5wLk zm+#QOzTp;MsdJ-WS@TSBY+5D#p1Fh*8Knlh=`Cv3z-aROz=mum;S?f{n6w%O?MGC1 z`t@g&x+|4UMHjnRQe@aFNcUqBFo|g%JKwnHuJ&VvIX3R~EiE^D)C7knBwH5_C76cY zB)P?sU8wY>H8-4sIzps{<82sPXAECqC?8ZByYtLnzCjsc`otzZ;roH~LcXa>=T4$) z@UE?XJf!MogUVZ-y}9>%Em7ZAnQQ4z4S%YT=By>es2+bDmvPPV-#cHV$CHybgdLR1Nld{~n>IBfI8oQ!!|ZzKKjk}I`Z`$EqB z_kyyAt1g(^s=>>K;t^OX`kO*PMom_@@>rR8>zGfIr6)w8qWg4_xHYLwkzdXo_Jd+@%h_<{s-x|GB>o09(A_O{`?OA zvA<7IQcA1G=g{!VSAu0^fD6cmXr6qVr2APGbt1_9dFyyWSH2`FkKolUT*3POb7P6> zVo$!6e&#ISv>!_(fgxP;`n?!!qJMX^U0=+nQIt6-KH?dUWE#m1taTrqI%galdsO=Y zS{au#_&Q9ZPJX&nb}tm*fsx?#pj8ffuQGf+N9@CDtwHe{Ov&AK5LcVYdxba^*KHcu zZ1D?gdlkwDB$}bKM~w`V5o=2(b3%Hz=Zz%j4AdjZ@=nc#XyU^Bfw#(UfPI%w2q05+04$gzy{1+HGM08wyezy3ZXB zEyOFto8G+5sCGO)V_&!QZ5;7|uf|v&19&}TgQWVX!)(o$ zvoiZ2iz`aYx{82qmfK$WU=J_$10LKb^}o6j;QBnn(#Q`24;a9q`GB)BO+*50*Thd8 z=N)w3!F-G@x4WZ8E29mK=OLv&a=0h%5ZP(2sHw+gv!uO@KNVQL2+_rkz|o!M-kqAhN5->JrE#DmAFlP zOOF1XhWPEg1w50*{T}SaeCoYDY}8CQty9lgZmP*gP(z4n8NO6=Y^?Tn=W1%MU-RU?$x1)>z*6dFoV^|`8s#I?5!R=pI}k1GsBEbV7a@bqq}?e!|urgzPbu} zE=7AH%0;w5v%@rO+%DoRSWuB_Ej8kN*N?PA&*uQQ0=jMWv9&4Y=d~sfrSVCYHTc(` O9d%_Lr3yux$o~N;ZleYO diff --git a/core/templates/layout/flex/two-column/frogger/frogger-flex.twig b/core/templates/layout/flex/two-column/frogger/frogger-flex.twig deleted file mode 100644 index 8e9b1d7e7..000000000 --- a/core/templates/layout/flex/two-column/frogger/frogger-flex.twig +++ /dev/null @@ -1,66 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - - * - - * - * - * - */ -#} - - - {# Optional Header #} - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {# Required content section #} -
    -
    - {{ first }} -
    - -
    - {{ second }} -
    -
    - - {# Optional centered container #} - {% if middle is not empty %} -
    -
    - {{ middle }} -
    -
    - {% endif %} - - {# Optional third row #} - {% if third is not empty %} -
    -
    - {{ third }} -
    - -
    - {{ fourth }} -
    -
    - {% endif %} - - {# Optional footer #} - {% if footer is not empty %} -
    - {{ footer }} -
    - {% endif %} - -
    {# end layout wrapper #} diff --git a/core/templates/layout/flex/two-column/pacman/pacman-flex.json b/core/templates/layout/flex/two-column/pacman/pacman-flex.json deleted file mode 100644 index 26477b6e3..000000000 --- a/core/templates/layout/flex/two-column/pacman/pacman-flex.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "content": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "header": "

    Header

    ", - "footer": "
    This is the footer
    " -} diff --git a/core/templates/layout/flex/two-column/pacman/pacman-flex.twig b/core/templates/layout/flex/two-column/pacman/pacman-flex.twig deleted file mode 100644 index 2fcabbbdd..000000000 --- a/core/templates/layout/flex/two-column/pacman/pacman-flex.twig +++ /dev/null @@ -1,42 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - - * - - * - * - * - */ -#} - - {# Optional Header #} - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {# Required content section #} -
    - - -
    - {{ content }} -
    -
    - - {# Optional footer #} - {% if footer is not empty %} -
    - {{ footer }} -
    - {% endif %} -
    diff --git a/core/templates/layout/flex/two-column/pacman/pacman-left-flex.png b/core/templates/layout/flex/two-column/pacman/pacman-left-flex.png deleted file mode 100644 index cfa76eeabebbcbce5fb6e1b9c69b88e4a8db97b6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3272 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 diff --git a/core/templates/layout/flex/two-column/pacman/pacman-right-flex.png b/core/templates/layout/flex/two-column/pacman/pacman-right-flex.png deleted file mode 100644 index 7e6ee0a871e5aab86f09db57cde1965b12c4f758..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3278 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 diff --git a/core/templates/layout/flex/two-column/plakes/plakes-flex.json b/core/templates/layout/flex/two-column/plakes/plakes-flex.json deleted file mode 100644 index 585039eed..000000000 --- a/core/templates/layout/flex/two-column/plakes/plakes-flex.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "header": "

    This is the header region

    ", - "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/two-column/plakes/plakes-flex.twig b/core/templates/layout/flex/two-column/plakes/plakes-flex.twig deleted file mode 100644 index b15ac9833..000000000 --- a/core/templates/layout/flex/two-column/plakes/plakes-flex.twig +++ /dev/null @@ -1,38 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - - * - - * - * - * - */ -#} - - {# Optional Header #} - {% if header is not empty %} -
    - {{ header }} -
    - {% endif %} - - {# Grid Container #} -
    - {# Manditory sidebar #} - - - {# Manditory content #} -
    - {{ content }} -
    -
    - -
    diff --git a/core/templates/layout/flex/two-column/plakes/plakes-left-flex.png b/core/templates/layout/flex/two-column/plakes/plakes-left-flex.png deleted file mode 100644 index a0f6171e77ebf9373aa6c92a9d2f557d1428b6cf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 952 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq!^2X+?^QKos)S9WY5kFi71Ki z^|4CM&(%vz$xlkvtH>8? ztx|+t?VyL%(9@GcP=o{)8=)=thYPA80S_NcQq~=7pWag&k6$9>0F0*7o-U3d z8LV$-Mtd_Q3bdv7r)AAr*(uSMDmeE*_qsi=#lPe?FW9Zrv7)=nYvCg1g%>ZXnCgf! z6|$G4hfQn!>2O2#`P|CdZ@2ULwf4Vdl#^ZMUR$2qUAet)-tv>LCAMDPn_W>?b9`Ts z>b5Nt8(*GTveZ25U&VHg^xx*wQnoV*Uu4L-clom0ncb#yTlP#)7nqRg-0-Y}Wv|E4 z%Yrjv{j4q>=u|q`A+NhQ;rr+OsaiGlrU8!m0fAHAy;~vAd1xcUkLG>%uHDU@vS*dn zg`Yf9yB0QDra7#QVlQ|&lg+e#OEGKt^rw#Z6iwxu|2$)o$%{Xb{Zlx~er=~!BZ^o6`A3l9yTsoP3#r0W#HT&MI7ul2{`zJC7uXi_Y&u(huGi&vT=dnOOLPAF)gAxVwK!Aj&w86}vIZQ8pEtgKS>S3Q1}vr^A-Rosc-lZB;D^Smdl68{uZ6f<`MPNnxQKe_n*vvGIl z!h|Kog$A`!J?%9H+vhc97@15tmlvecx8KhF|Kv^4ch=VU`_Hy#5%O$VB^6)-%443c KelF{r5}E*HnssOZ diff --git a/core/templates/layout/flex/two-column/plakes/plakes-right-flex.png b/core/templates/layout/flex/two-column/plakes/plakes-right-flex.png deleted file mode 100644 index a3c84b67fd158ce1dc1d91d4772d852d9514fa25..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2827 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 ZZC(>oEmpO%XxaL0wYIP`zioz%{SRqU7=!=- diff --git a/core/templates/layout/flex/two-column/toucan/toucan-flex.json b/core/templates/layout/flex/two-column/toucan/toucan-flex.json deleted file mode 100644 index 330be3d05..000000000 --- a/core/templates/layout/flex/two-column/toucan/toucan-flex.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "first": "

    First Column

    ", - "second": "

    Second Column

    " -} diff --git a/core/templates/layout/flex/two-column/toucan/toucan-flex.png b/core/templates/layout/flex/two-column/toucan/toucan-flex.png deleted file mode 100644 index 3258a9ca4ce3c3b40e9aa1e14fda30d1e0238141..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2090 zcmZWqeLRzU8{Z_&>sG0Ul4ew1j*aDQx;Go6c_|}rDPdl+*rshVh1SlgG4hf~PE3mQ zDC@{e_~az2BVrvd=U{b0hLpnjP!i8Qb*kri?$77`{jU3WUElBby1u_Z?o{gD-I{8f z)F2RurYnW)4en9k`y)&RTtmf&UVs~v;D;uwQMu9R@2@u+}3RHPG&9f7n)TcIsb z1T`cQ39!Q>?Y+q^U*O;u9u>vq#@b^r@$vEK_?>7L`!L25hr?kkuox`X9IPkdqc zoG!iaw^S_s^_lx|Ivii-{IrDRRZR+8<5z-V?{pVwIkR=u{mS>VVSm0v&xg$=MMnBp z#VHEK1Y8F8} zGBaacmV@i5TGLw4=hM%v%e`8Y+vos0%ELa4l?C4(Q;{}K>Lz~}ieFslb|-sj+-z@l z9+4eC8^^dE-=FlPq`-05_VTF#@$icqLRL}Gi|HK6WkJ=9M71-sOFS}~wp=Wka>AUk zsw(_tVW21Pl~-T%Y*=JhKR%k?{uFzEqJM4ErzO=+adO^Ww<%kG-Yjf+aoXX~q6dHD zT5cv#$z!bBzoK>5F7rwZjg3$rj}nYbLOZu6xt`lsf1gp7qr0^Dh85TqJRVepI`}8W z5cl|p?tYu<2cg5qbcr$-ZD zl(}LhCzB~}DBO^urP|2Vx!73D7q0aQAho9{rQkx~&^D8dde1h4Q@CR0#j#M)dg9^+ zN|nsCw+0wV&>?Xtlup%(7RUB34Sgk3|pc*aHy+junPWLY`oXK7T7ubIQm}c+q@0$ECjVTAhSb& zvXM|(PS|z=@tIwF2fv{dGTZB>tcsMYS=f4_C=g43etp6^l2S^&Qpb}V*gE2%AF(NI zu(m{e447X&kT{UAdDF8NZU6UGJ)f30YP#MzOP8g+Lr86urw?mDTQB88))6~4gfNT9 zSzzlB&a9C@8Nped|MQNuM*MuUdomyu32i+HmCHewX2w+HgkJMmAiem$cynNLh3`pb zmi8mrj%|YcRp($dEea}S#or;5y8leI_mBv;${136d(SLi;1^O0d!x6vAOVD@8O4OoFm7E*? z)(kQgY@s2dNO;W-+GD;tU(yHGJ1KF*ie=@>KvUnF5eKRMl~T#+vT%=>5L%T?n*6dM zT_CbTL>qtf2-19??b~Ns1)sY%Jfo2nbP8`2Ks;)`6`|oAtE8Sfesxj;4K&!h&-c1- zZ|x{VxAn-W(gFk2eEOUF<8FYYLDIcM+v<-C7UK`kKW=W*`gmwwb0KU`ys6JF{qr`` zE3hNLBUey6FQyBJ0>fmD1*!4G##F z>?T4&S@7c_giXzU<0~VC4E^UVv9d1D`nenP{1d@C8p}Z;3nD#ML0Nr`i=J8mw)y$4 z@*L-t0x5Bq0rel-0$6g=Omrd=m_t7be0_-*q zHBTgoj0c+%&pvblns`4=FTuLqXS^G??;d2oRf$$okIKmDf*<82QVRlf8)6t9xTJ++ z86VP(t9ZiKPs$@MW~L*eLu+CUlOzROk>)Q6y=6l`MH`HYFMkZ zkmz_@{-&KS+XpDn55*1H2cOt(BtD65dYY~jWmsRpTGUse@EO}+s diff --git a/core/templates/layout/flex/two-column/toucan/toucan-flex.twig b/core/templates/layout/flex/two-column/toucan/toucan-flex.twig deleted file mode 100644 index 9960c088e..000000000 --- a/core/templates/layout/flex/two-column/toucan/toucan-flex.twig +++ /dev/null @@ -1,23 +0,0 @@ -{# -/** - * @file - * Toucan - * - * - */ -#} - -
    - - {# Required column #} -
    - {{ first }} -
    - - {# Required column #} -
    - {{ second }} -
    - -
    -
    diff --git a/core/templates/layout/flex/two-column/trunks/trunks-flex.json b/core/templates/layout/flex/two-column/trunks/trunks-flex.json deleted file mode 100644 index 1c4721a25..000000000 --- a/core/templates/layout/flex/two-column/trunks/trunks-flex.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/two-column/trunks/trunks-flex.twig b/core/templates/layout/flex/two-column/trunks/trunks-flex.twig deleted file mode 100644 index 4d94a833d..000000000 --- a/core/templates/layout/flex/two-column/trunks/trunks-flex.twig +++ /dev/null @@ -1,27 +0,0 @@ -{# -/** - * @file - * Template for a complex column panel layout. - * - * This template provides a complex column panel display layout, with - * each column roughly equal in width. - * - * Variables: - * - - * - - * - * - * - */ -#} - -
    -
    - {{ first }} -
    - -
    - {{ second }} -
    -
    -
    diff --git a/core/templates/layout/flex/two-column/trunks/trunks-left-flex.png b/core/templates/layout/flex/two-column/trunks/trunks-left-flex.png deleted file mode 100644 index b052303f5f1525daa9637eb56701f253ef9588eb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2467 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 diff --git a/core/templates/layout/flex/two-column/trunks/trunks-right-flex.png b/core/templates/layout/flex/two-column/trunks/trunks-right-flex.png deleted file mode 100644 index f44bb6857bfdd09caabe4350092c215be3c553e1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2280 zcmZWr3p|ti8z0tYE^BmA%xT6^Ct;$RwW(#rDob*WzuYEs+t}F3EhCr8oKop%lITda z(EOt?jN*_>Iw6edDCL$_n%k-KPM6dF^M5~|_x(M;=l*=3=l8yEx+BF-Q%zS51OjQ2 z?MY6+dK9?1su1Am+1%X>EJ{o#yIr6=?Z`I(olA3eXSqA<$NAI4%zOjrepE9~7z5A( zf$$t0K!#CSz9>#uXgCwcA)uEuZ~(1fo1;-nDy$F!+TFnsWlN8wqPCb>nPJd2YA6&6 z9~lscb0Y2eY7XoO=pYu0fipK}v)N{BOEY@pQF9AxYio1NX7kOPO#uy4=CN>=FUK^T zY52v-H$NmQ(?62NVA1H|D1~2NKYA34fJQ3zVI!P4UgOH0g;mOn_oTH?(W1^iIZ z7qphR09-a|c=PYj+o-vzXz77KkU27m=*&@?JkF zoh=pcLc{TyU5at?Xd1OD8K?Jv+KSMKReou46GS>C@fuQDV#I=_u!l`N@&oiRQ= zqdh#}E|!b0z$% zH9QHeHFv0~13uj5mRI+@H7h74nHfV!8cLXjiWcVGnuP;xr3Y`9w=LrbRn{ynYW$Rk ztQ&?dlnTdFG8%0Ck^Fto(ad#2V)@V_q$j%~{NqP#bOnpSt)89ug_j!_`-;|(lt$Q} zTi#Gbf}V5%e=|1=66XfS(mu(VdcBz3*KqBWugx9k+j?A0{ zmsOS1GI|RAU;e6-piRQk)T@p48O@DG#KXpAZ0{^MHo)&3sxRwa9RSCA!TS*T9ToT= zx<>B(m2F!`02CB>Y#o>Nx%~xfg!gDPy|E=;*MoI2qhICM2(((nbPlU7UDZ{mE8ajF zwH7(3qh%LWXYfld7>xqGANn~Tqt8f21)11Fk&(4O6FqBjH#>lkMTysGdEJ~uNYjGf zfsjRTS%C?%^uk{mW##w$QtYvzG}Bef-UZwK4|G5R-iG!FkHVT!MNk8eB(N5xF9u#h zhVs*Vs?>1OUvCqY4aybmRwZ`2rqs)LF3Z7-8sQ;hzmJWdu$`(fO0#hVIQQL)g~~%E zaBS{xeUm4Fbf2FBOCI#kjwwLWy=-*rTK(CFNjEI8jc|`dpi91K;9WtAm|EPc0u2Di z1_bQdk&iC8!%vur0h-z*gRk_a)c}1j^4cmVb$q3BaMS=(x2m9hif9T?)BTrU$9#+~1atycMTL&BUYZ=!VTcb@HT9#@Br#T%VE z1{9=dqY?Mu+lz`>k(@S7*W~#)E{$B>KA{|0e`bPUhe4)yO2PH0UqnbSS*2#SvGJB-cqBLwUgXAOKy=G}(GSb%XM5EKpdMW2fSG?y_jnr6u1Esfn-`W8%xWbRg))U{ZnT0DbndYVK2xfo{ zfdgI0(pDulD2}#*N^A(xT@l5UmmitUGpXn+JszjbXd2TAb1E7Pv=$W+c+iTu7MU|0 z%Ms1rf6yD4TefNZX13dFlE-_o+=HB9s>2vaN9WmISv8g2q}K1fVJ|k^>)1gDeE81x z{NM@e5#b`i%qz=5zo9rWK6^fR#Rl=(1AC^2?G8wvWq0IuDyI~ro|U!im-6wSKdgjj z%9Wa|*UVCfqp|IhBz?~O3s`k56SB?Ca!tkpasha~D|Oh|q$Cv(#Ie$gk@qic-sW#M z=q-Nv@Pg-HxJwf?<7D4)!)z({+s9%d>W*GtbwWms-F60RUX_vg3c3@kRaCLIx~kGF z0h@HIEHxxKt};3l!4hlp7 diff --git a/core/templates/layout/flex/two-column/wedge/wedge-flex.json b/core/templates/layout/flex/two-column/wedge/wedge-flex.json deleted file mode 100644 index 1c4721a25..000000000 --- a/core/templates/layout/flex/two-column/wedge/wedge-flex.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", - "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " -} diff --git a/core/templates/layout/flex/two-column/wedge/wedge-flex.twig b/core/templates/layout/flex/two-column/wedge/wedge-flex.twig deleted file mode 100644 index fc11e8aa2..000000000 --- a/core/templates/layout/flex/two-column/wedge/wedge-flex.twig +++ /dev/null @@ -1,30 +0,0 @@ -{# -/** - * @file - * Wedge 2 column layout - * - * A 25/75 style two column layout. - * - * Variants: - * layout-cuttoner--right - A right sidebar variant to the layout. - * - * Variables: - * attributes - html attributes for the template wrapper tag - * modifier_class - Variant modifier css classes - * first - First column and 25% width - * second - Second Column and 75% width - * - * - */ -#} - -
    -
    - {{ first }} -
    - -
    - {{ second }} -
    -
    -
    diff --git a/core/templates/layout/flex/two-column/wedge/wedge-left-flex.png b/core/templates/layout/flex/two-column/wedge/wedge-left-flex.png deleted file mode 100644 index aec0b65d9aea2e01fb76f264b3725be4651a110e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2084 zcma)7c{E%39=}NwOB`NDEoT(HB8Vj}N)d^s!AP{!Xsba{>uVkoA_#qE@;dajC@Dp2 zE1jq@gHEG%+S490IF43$wxQZ-X=>LHN~w3z>6r8WdH0-qzsv9Q`EKX;``xRa9yF0RV|dgw?1pZVqrjoY3L{BC!ERx~Oj0$7L!Z{o*Eo?|T`2Sh?Gvgkn&mQJstG&!UE1#GoXuE+u z4ed^A#|w|k5krDLkKPgEJIqN00681F^Rd%B#M~`+_SljAmt6znl@Iz?R2MsCuk>aW zVbnGe_A;Z@L(9F#PogoxeC;A+oJP!$%ypJ$5M}q<0JU%ahnsn7P1D_VXI1TszI^yM zdKc$`MXKi|Z%~EkfIDj}h>v63*hi?kg10*KaRhIen!2|5Z0pCLwZ(Tq0#zIuiJKcYGY#c$%p081VYjZ4DiY4FT9aFZBZUzrN+E~XhK`23 zRtsLnZSt+&TDHf91u#PS9(ro-Q2z2#)+6!SPfBi98a4IRCwc!^N{mgj9W7WHjY_{G z#9f>EX`!Td_2@s{M*@8PU9Y|i!IQ@%+;q2!sd=lO*i}DL;V20?b@1W%o1B?OGaD1>oxYc&nt^>?{q&>4wGTx# z5ZPxloW?BZ?U~hyX%(3beYBrUWlGiyyB!K{k=_@TWj3j;abArVSS~#k6RLCDk7qWN zL>?`(K7P=&a&+!RU`LUs#yxM77rE0uby8*?J5qYyqDVgfzEfI`0dBmlnX~x5gY1%+ zqK`)kpU&3Xc|Lqr-FEL}Gh$k1pv85_Soh^yPg^dGy+qLpZ6QDX*B!HUt1|k~McLWx zN;TzXov)G!6fN1!1XeWv!M;uuZJssEi|&1fL1edFM9k9%!6}`xe>4_FRLYD-qiDnPaz^3h?vG0$hiUuu_kLF?N|i(i|-0 zQ8Zq(!qs9xaaE|pSMy5ibYal<8{*J_F;0tW&c`Vn@Uj6@ot-+-0#p$7M>(P3ftF9Iy3JGN@o z*K;liiWJ*ojt8ffrNPRyfY2c{8dn?;P=)A9pKUHh;x>wfIpXR%K=E6nrd)rCKVKM& zjA+0B*?!5@Jb9d{RdXDY#*)>&^5>^iIG9fRa$@G?7skgq$;-F zYQP?}j-aaZ?VuvqG%%EwKoMcT_cP*8cn6w}Bf8QuSjF&cd^@XWi3@P`F}+=H2YvYy zNARsPaE$HZ(6mOQ#40D9{|Oz<^DYt!uxFNFKLjtu^g^dbDahl)Dmmj^0Wn@ zOHhL>cpEpY`@U15d53amocSs8@(rSy)(ZC}m!{HEna6tA2R~lfPyzy?h~J^pw{;^6n@}Zw^cj?SGT_JkGB; zbaeLA?WOyNwJklOB7!xRL|Xb0BJqpiIxy^maq`BLUb6IkNw(Qt{HvyA2(Km^0s6uU*kC))kMPC}x@|dIYwK2AF=p8-PM#qx6!jx59n&xzAp>Kfs&!{%eT~{W;@O?4(Pt_ z>Q^LR{KoBryiY_Uf!6vTxA0$w&rOM>{!O-~aihW2cdxAlpQ>njAY9~$dqYQ4BAui+ sji}w2jElAT9c`xw@MX~mFy+By;9O*G#+aQ--uC~T?&9HGLp^`#zh7gD=>Px# diff --git a/core/templates/layout/flex/two-column/wedge/wedge-right-flex.png b/core/templates/layout/flex/two-column/wedge/wedge-right-flex.png deleted file mode 100644 index b84f814a0614d0790455e0c69886c61d6f887b97..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2188 zcmZWr3pkVeA0HjJxm8lp>okj}q+J-Axkavtv?In@hsDfJjkPUJn}mkMOyssDLU&Sb zm5$0BVkkL>$e|^ZOGD};<8)rtzti*l-{<+gzwht+{eHfe&-4Ag&wI+x*Fzg>2!%i( z+FqWncyOnHD@k1yd<$|^XyB&A#Cy0vD!YJjP(DZXC$I=UyK!OBG$biJ`T!ZprqMw! z2*jR^14SB{MS`(uhoYD`wgddL2M&~%)hIaZvkU8>1DxRF2iqCVAj7PYR!B755ekFB z>>1$^IJ~R-S2%cbfJd@ebQ}tG^ypFKQ4BJgK|xvA+S;PfmMBY01n7Za#zwJ7Y(x}u z)0ZIsi{naWhB2sg7BxBwwj7sqAo>W)0S;eI^zHdlCz(zCFH;orYg=H0sAUVv0*OX_ ziw#2Um$f)QDw}+W;7X;DqnKb0M+-E@{adBUpl3_QCv-N-IWUvft7Jfw13Zws;$V0$D$Qb*^VS8IlT_#{Ts(*s^A zH;VjWF;C57c5M}`#icH4Sf09|-h6(*yEms2dV0qADi;6X4<9&nfKkhql4^pHe~*y)smHrpc)n{`0e= zft%6m^*xJkbC#Z~EY2@^vlU~eW#S*2kFCb|*OyM%jiLwkJ#W_uc;5baRKYlZms7JZ z?`_3kNUeGNlYss!$0xU|zj$?eCwuk{hK<9eumm|TUeV)XHSafaRh*V)G>Ph-UWO9& zX^)2ucki6#y>;#kc~ASRh-|BsY<6#6X2y**$ZUywu<>fkjlih{`_ zLxY;y@Kq>e6Co$(*NVKuX$zU7M%UCQNKpRU6`1P6!lhwijrp##8!AX+s%!WS$78l? zwZqD*uB-8SuKZwM;Hv~pk$c>29IBgaYL20nVyv!1cwubIz~p*jg`s4niKu0QU{glt z2H}(4b{dqe$$ei;-_}PE7jFNt=!2*Q&pYUe*-SJNrQ3UA8~vwYQo_*K1`1U`$1)9X zWXiQ|nRol{9mS{y^>Rzrn*c*hZcveq!XR9R?MS-qE}dtj8yg?`RII7@ygZ|euDDV^ z;VhlUr`JOdbHZ|*caeg0p%ex7-V`ZluBC7Y%|3+o5z>K%nr?%-cRTyeHO-Q} z#xMNZ&$sk6+cxPetw`GCQ68@cm#^FMobND4pAzT27z z7V3D?`j;KfO|zqedSIL0eYcFoH?=~0-Z?i(9Vk6#ss>v)d@@9Majc`ij6Z7QglS!O zLtE_jnFRH>J3{l{Bx&ziE_UO##f1bvRWlyhVT<-dW}P5;9_?1=nmPn4f%5do>@Wk|@RQPLra66n*+L>nBdq0Jx&(c) zLWwrASpr1^5{Qk@W4g_iusa!2f@&4@SaP+Ok%YE}FIPK3rZf~5#gDPd-|5WFOpAv(#Ps6Oj13NKj)=4vU7^@|Heyc;(pw|Y>;${$GV zLfg31%N`bB(IiW-;#}|=a}qm%zovn}T)cozTop3rA)qgAJJ|TDA*zi!aD;UCx&Y|}LSowY!x8Vhd8ghyb*B&vdzulvumh?;GASxsfRMD=E~(9A>es=unmbp4 z!=GrnNer_~3$n`)a=;Pnz1o|llvm3?`FE^ga4(l%meQD_>G4P9zPTrEwe_YCAcFF!)ADh9YpJ?VzdDD`(33+$G z{`PuC{GXMJ&OehcEtHhbt_~2ZTzCJ8V0z~fjO2ey{4=+{BiAJxSX-?X;Br2*68spg zD(tJx8$KNaIHkdD1N+s0izhHZ`ONDchy39PfzI!@CMJ0=%e+(nrqEfA32hG{XRNZ6 zuLyVn0uzn&5AHLs!*v--W=8qlCLyl`&^Mda!cq^E#m4K?yNUpD->^f9@R~uhhT&eZ z0$DVyf!z!L#~=c23p9=QYfKsOjeV!h?VASd48_@F=f#`VHsud>OrPYieF7xqPwbMb zTU*h2IG_1OmH}L0MTr%l{2tZoaOSE}@D40vVLy2mk;8 diff --git a/kss/builder/decanter/builder.js b/kss/builder/decanter/builder.js index 4690a9fec..1d8309cb2 100644 --- a/kss/builder/decanter/builder.js +++ b/kss/builder/decanter/builder.js @@ -75,6 +75,7 @@ class DecanterBuilder extends BaseTwigBuilder { */ build(styleGuide) { let options = {}; + // Returns a promise to read/load a template provided by the builder. options.readBuilderTemplate = name => { return this.Twig.twigAsync({ @@ -82,6 +83,7 @@ class DecanterBuilder extends BaseTwigBuilder { path: path.resolve(this.options.builder, name + '.twig') }); }; + // Returns a promise to read/load a template specified by a section. options.readSectionTemplate = (name, filepath) => { return this.Twig.twigAsync({ @@ -89,6 +91,7 @@ class DecanterBuilder extends BaseTwigBuilder { path: filepath }); }; + // Returns a promise to load an inline template from markup. options.loadInlineTemplate = (name, markup) => { return this.Twig.twigAsync({ @@ -96,6 +99,7 @@ class DecanterBuilder extends BaseTwigBuilder { data: markup }); }; + // Returns a promise to load the data context given a template file path. options.loadContext = filepath => { let context; @@ -111,12 +115,14 @@ class DecanterBuilder extends BaseTwigBuilder { } return Promise.resolve(context); }; + // Returns a promise to get a template by name. options.getTemplate = name => { return this.Twig.twigAsync({ ref: name }); }; + // Returns a promise to get a template's markup by name. options.getTemplateMarkup = name => { // We don't wrap the rendered template in "new handlebars.SafeString()" @@ -127,15 +133,18 @@ class DecanterBuilder extends BaseTwigBuilder { return template.rawMarkup; }); }; + // Renders a template and returns the markup. options.templateRender = (template, context) => { return template.render(context); }; + // Converts a filename into a Twig template name. options.filenameToTemplateRef = filename => { // Return the filename path hash. return md5(filename); }; + options.templateExtension = 'twig'; options.emptyTemplate = '{# Cannot be an empty string. #}'; diff --git a/package-lock.json b/package-lock.json index fc1130ad4..15b38973c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -855,7 +855,8 @@ "charenc": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", - "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=" + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", + "dev": true }, "chokidar": { "version": "2.0.3", @@ -1104,7 +1105,8 @@ "crypt": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", - "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=" + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", + "dev": true }, "currently-unhandled": { "version": "0.4.1", @@ -4727,7 +4729,8 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true }, "is-builtin-module": { "version": "1.0.0", @@ -5255,6 +5258,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=", + "dev": true, "requires": { "charenc": "~0.0.1", "crypt": "~0.0.1", From b7894473468fa99a70db63fd6929383f21853237 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 23:09:15 -0800 Subject: [PATCH 093/123] Update template file names. --- .../flex/four-column/molive/molive.json | 8 ++ .../layout/flex/four-column/molive/molive.png | Bin 0 -> 4294 bytes .../flex/four-column/molive/molive.twig | 58 ++++++++++++++ .../layout/flex/full-width/bricks/bricks.json | 8 ++ .../layout/flex/full-width/bricks/bricks.png | Bin 0 -> 3832 bytes .../layout/flex/full-width/bricks/bricks.twig | 60 +++++++++++++++ .../layout/flex/full-width/ibeam/ibeam.json | 6 ++ .../layout/flex/full-width/ibeam/ibeam.png | Bin 0 -> 1978 bytes .../layout/flex/full-width/ibeam/ibeam.twig | 46 +++++++++++ .../layout/flex/one-column/basic/basic.json | 5 ++ .../layout/flex/one-column/basic/basic.png | Bin 0 -> 1488 bytes .../layout/flex/one-column/basic/basic.twig | 36 +++++++++ .../centered-container.json | 3 + .../centered-container.twig | 25 ++++++ .../layout/flex/three-column/bars/bars.json | 5 ++ .../layout/flex/three-column/bars/bars.png | Bin 0 -> 3298 bytes .../layout/flex/three-column/bars/bars.twig | 31 ++++++++ .../three-column/blastila/blastila-left.png | Bin 0 -> 3864 bytes .../three-column/blastila/blastila-right.png | Bin 0 -> 3735 bytes .../flex/three-column/blastila/blastila.json | 7 ++ .../flex/three-column/blastila/blastila.twig | 72 ++++++++++++++++++ .../layout/flex/two-column/donies/donies.json | 6 ++ .../layout/flex/two-column/donies/donies.png | Bin 0 -> 3832 bytes .../layout/flex/two-column/donies/donies.twig | 42 ++++++++++ .../flex/two-column/frogger/frogger.json | 9 +++ .../flex/two-column/frogger/frogger.png | Bin 0 -> 4654 bytes .../flex/two-column/frogger/frogger.twig | 66 ++++++++++++++++ .../flex/two-column/pacman/pacman-left.png | Bin 0 -> 3272 bytes .../flex/two-column/pacman/pacman-right.png | Bin 0 -> 3278 bytes .../layout/flex/two-column/pacman/pacman.json | 6 ++ .../layout/flex/two-column/pacman/pacman.twig | 42 ++++++++++ .../flex/two-column/plakes/plakes-left.png | Bin 0 -> 952 bytes .../flex/two-column/plakes/plakes-right.png | Bin 0 -> 2827 bytes .../layout/flex/two-column/plakes/plakes.json | 5 ++ .../layout/flex/two-column/plakes/plakes.twig | 38 +++++++++ .../layout/flex/two-column/toucan/toucan.json | 4 + .../layout/flex/two-column/toucan/toucan.png | Bin 0 -> 2090 bytes .../layout/flex/two-column/toucan/toucan.twig | 23 ++++++ .../flex/two-column/trunks/trunks-left.png | Bin 0 -> 2467 bytes .../flex/two-column/trunks/trunks-right.png | Bin 0 -> 2280 bytes .../layout/flex/two-column/trunks/trunks.json | 4 + .../layout/flex/two-column/trunks/trunks.twig | 27 +++++++ .../flex/two-column/wedge/wedge-left.png | Bin 0 -> 2084 bytes .../flex/two-column/wedge/wedge-right.png | Bin 0 -> 2188 bytes .../layout/flex/two-column/wedge/wedge.json | 4 + .../layout/flex/two-column/wedge/wedge.twig | 30 ++++++++ 46 files changed, 676 insertions(+) create mode 100644 core/templates/layout/flex/four-column/molive/molive.json create mode 100644 core/templates/layout/flex/four-column/molive/molive.png create mode 100644 core/templates/layout/flex/four-column/molive/molive.twig create mode 100644 core/templates/layout/flex/full-width/bricks/bricks.json create mode 100644 core/templates/layout/flex/full-width/bricks/bricks.png create mode 100644 core/templates/layout/flex/full-width/bricks/bricks.twig create mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam.json create mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam.png create mode 100644 core/templates/layout/flex/full-width/ibeam/ibeam.twig create mode 100644 core/templates/layout/flex/one-column/basic/basic.json create mode 100644 core/templates/layout/flex/one-column/basic/basic.png create mode 100644 core/templates/layout/flex/one-column/basic/basic.twig create mode 100644 core/templates/layout/flex/one-column/centered-container/centered-container.json create mode 100644 core/templates/layout/flex/one-column/centered-container/centered-container.twig create mode 100644 core/templates/layout/flex/three-column/bars/bars.json create mode 100644 core/templates/layout/flex/three-column/bars/bars.png create mode 100644 core/templates/layout/flex/three-column/bars/bars.twig create mode 100644 core/templates/layout/flex/three-column/blastila/blastila-left.png create mode 100644 core/templates/layout/flex/three-column/blastila/blastila-right.png create mode 100644 core/templates/layout/flex/three-column/blastila/blastila.json create mode 100644 core/templates/layout/flex/three-column/blastila/blastila.twig create mode 100644 core/templates/layout/flex/two-column/donies/donies.json create mode 100644 core/templates/layout/flex/two-column/donies/donies.png create mode 100644 core/templates/layout/flex/two-column/donies/donies.twig create mode 100644 core/templates/layout/flex/two-column/frogger/frogger.json create mode 100644 core/templates/layout/flex/two-column/frogger/frogger.png create mode 100644 core/templates/layout/flex/two-column/frogger/frogger.twig create mode 100644 core/templates/layout/flex/two-column/pacman/pacman-left.png create mode 100644 core/templates/layout/flex/two-column/pacman/pacman-right.png create mode 100644 core/templates/layout/flex/two-column/pacman/pacman.json create mode 100644 core/templates/layout/flex/two-column/pacman/pacman.twig create mode 100644 core/templates/layout/flex/two-column/plakes/plakes-left.png create mode 100644 core/templates/layout/flex/two-column/plakes/plakes-right.png create mode 100644 core/templates/layout/flex/two-column/plakes/plakes.json create mode 100644 core/templates/layout/flex/two-column/plakes/plakes.twig create mode 100644 core/templates/layout/flex/two-column/toucan/toucan.json create mode 100644 core/templates/layout/flex/two-column/toucan/toucan.png create mode 100644 core/templates/layout/flex/two-column/toucan/toucan.twig create mode 100644 core/templates/layout/flex/two-column/trunks/trunks-left.png create mode 100644 core/templates/layout/flex/two-column/trunks/trunks-right.png create mode 100644 core/templates/layout/flex/two-column/trunks/trunks.json create mode 100644 core/templates/layout/flex/two-column/trunks/trunks.twig create mode 100644 core/templates/layout/flex/two-column/wedge/wedge-left.png create mode 100644 core/templates/layout/flex/two-column/wedge/wedge-right.png create mode 100644 core/templates/layout/flex/two-column/wedge/wedge.json create mode 100644 core/templates/layout/flex/two-column/wedge/wedge.twig diff --git a/core/templates/layout/flex/four-column/molive/molive.json b/core/templates/layout/flex/four-column/molive/molive.json new file mode 100644 index 000000000..6d04cab3c --- /dev/null +++ b/core/templates/layout/flex/four-column/molive/molive.json @@ -0,0 +1,8 @@ +{ + "first": "

    First column

    Example Image", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Third Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "fourth": "

    Fourth Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    This is your header column

    ", + "footer": "

    This is your footer column

    " +} diff --git a/core/templates/layout/flex/four-column/molive/molive.png b/core/templates/layout/flex/four-column/molive/molive.png new file mode 100644 index 0000000000000000000000000000000000000000..454a33eb5c79c5ff8577eeec738e924b2b0a48ed GIT binary patch literal 4294 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 CHuaPM literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/four-column/molive/molive.twig b/core/templates/layout/flex/four-column/molive/molive.twig new file mode 100644 index 000000000..216391e20 --- /dev/null +++ b/core/templates/layout/flex/four-column/molive/molive.twig @@ -0,0 +1,58 @@ +{# +/** + * @file + * Molive - Template for a 4 column panel layout. + * + * This template provides a four column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A four column span header area + * first - First of four columns + * second - Second of four columns + * third - Third of four columns + * fourth - Fourth of four columns + * footer - A four column span footer area + */ +#} + + + {# A centered max-width header region #} + {% if header is not empty %} +
    +
    + {{ header }} +
    +
    + {% endif %} + + {# Because of the responsive behaviour each column is required. #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + + {# Centered max-width footer region #} + {% if footer is not empty %} +
    +
    + {{ footer }} +
    +
    + {% endif %} +
    diff --git a/core/templates/layout/flex/full-width/bricks/bricks.json b/core/templates/layout/flex/full-width/bricks/bricks.json new file mode 100644 index 000000000..558128ca4 --- /dev/null +++ b/core/templates/layout/flex/full-width/bricks/bricks.json @@ -0,0 +1,8 @@ +{ + "hero": "

    Full Width Hero Column 1

    ", + "hero2": "

    Full Width Hero Column 2

    ", + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    " +} diff --git a/core/templates/layout/flex/full-width/bricks/bricks.png b/core/templates/layout/flex/full-width/bricks/bricks.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/full-width/bricks/bricks.twig b/core/templates/layout/flex/full-width/bricks/bricks.twig new file mode 100644 index 000000000..71d1a571e --- /dev/null +++ b/core/templates/layout/flex/full-width/bricks/bricks.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Bricks + * A two column 50/50 centered row followed by a full width region. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * hero - The top most full width region. + * first - First of a 50/50 centered column + * second - Second of a 50/50 centered column + * hero2 - Second full width region + * third - First of a 50/50 centered column + * fourth - Second of a 50/50 centered column + */ +#} + + + {# Full width region #} + {% if hero is not empty %} +
    + {{ hero }} +
    + {% endif %} + + {# Required two equal column centered content area. #} + {% if first is not empty or second is not empty %} +
    +
    + {{ first }} +
    + +
    + {{ second}} +
    +
    + {% endif %} + + {# Full width region #} + {% if hero2 is not empty %} +
    + {{ hero2 }} +
    + {% endif %} + + {# Optional two equal column centered content area. #} + {% if third is not empty or fourth is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + +
    diff --git a/core/templates/layout/flex/full-width/ibeam/ibeam.json b/core/templates/layout/flex/full-width/ibeam/ibeam.json new file mode 100644 index 000000000..a9746d5e8 --- /dev/null +++ b/core/templates/layout/flex/full-width/ibeam/ibeam.json @@ -0,0 +1,6 @@ +{ + "full_width": "

    Full width region

    ", + "full_width2": "

    Full width region

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content2": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/full-width/ibeam/ibeam.png b/core/templates/layout/flex/full-width/ibeam/ibeam.png new file mode 100644 index 0000000000000000000000000000000000000000..989f5e4cb95f7bb1e6bc80acb392f1002a5947ac GIT binary patch literal 1978 zcmV;r2SxaaP)Ml-MPQIj2FW0q z43cSDWmo^HLdDCMFWG;+Pbfg5w-Q>l)FA?zRdjb+eE7i!?Cw4o4XG?jo__h1zyA3j zTpWT_ZBRglwbF$;aUKnh9kpeS>s?JBwm;1^ra9*<`52!jDv&(lA$3l9|H*gx&2N7- z9#V>M_HE?gKP4AO37?Yv(pRnI5C_2*w5TYK(|C6$$&vMT=$t&nm4PhF7WieGB~6v) zq^@c%zC-)uJ$%(24+-jeNJ5T_g7eF5R}5}(*0gnuIOy3V)AJ?Xsp7C=&6_sbMbaA8e9LDO(=XmQeg3TCZed_yslS<*eTB&(C| zK%Hdn&fJ}88Sc(xb&|>AB#VwJsc(=6A! z{H}uFK%i=!Q*J@ZiV2Xs;@>OCzkg0@Ib7+-I7=JSHG4j9rU@qH8+vn`;b=Z5jcl)rbGyPPR5CS2Dq2s?y ztE`t4aYCNwc<)C;GFdQdGD!DV+1-x=_5bnUFjp^wtr(TjzO9Y&A zh!dQb%YBi%2P|8(uu@7Kzd2hUps1vzBqFMcr~?%)dKEDwVi^$;d{#GY#nr&FJi}#z z&pgfv;#Lo8`<*U%J6rfiv9KjoMc@y={|hOucEXtm^iE2S_b(`W5uZcWc67R3yyk>5 zQWb&N&xiMdI4H|N2vrTVZ&mHBobBB1iYtj` z2kt8+K?88%`vG=MPUNsYPV3&rYr*HW&XOzV%@o&;;1%aq6U{pB_~Ms8ZbqFXB2=fI zP|g}|$%HMC`v2?IV`LDkgAO1Lxwa0!o}v(h7#xTaCwBJBm^_a@#(9TEngI!2Aeju3K{6R6 zlR+{_ra6?gyg_QRL|}WTvy_oZ25Cil@{>orv%6)M)MPF5sk~dX47^o4LVilWVNjCR+xSoIYnpe*ct>Iw7?6iiYjGlL5YKptll`NNF zS|X&B%!->1`%bNw^_IJ9L@=xUm1K<1@WMGe>MbQiS;*ZvCw%g= zk3iwo^EVtFoKY2l6fJmC;P~L26cf%Z*2-JkS`{fKP7Zr~^RL&u`uc#wZ%;UWb58H1 zq&P3B%0Q?RDI{V{{r7z9l^5XZMg!mKyPfv=heB} z9Rt@ORb}AC*DrbX-+f|;){C&NfXV?bvc1#g@skhP``&}mkjkRs*;n82_dh+QyeM(b zyx}?^i380m-haGHx7!^LNt4oh6F7QNQ1mLY%=cGrzHL#qg6Zt}9GNCcBGA@Ad8!lY zBo(B}kzN;nk>hf|K(QI7>C)=YQW@c>itKFkmPcq^#0%28gG%>a@=;F>*<7jog?4l&NELwb@XS0#p%W3 zBnxIuYl385;&%X&g|FuBOiP1g=Cm1!S<*eTBx^lvMrxL14F{7!GDs$aWHLww$<#zh z79!mNNY*2CSKOVE+JIz6Napi4z-aVvh3qDr7!p+(31z$-c{!TAjTV|MpCd*KsZxf5 zG880@;~|L?I@>LF9&Aw+0iXNLG8$Dz4EY{&Fkr+v#xWn}opcV5rq`{g2#)RD7FpYk zht%q1{OG5T*?F){3<>9#Tsi3&*Q;~Xh08wQBKM>ds+LjtQBYB03T(aG=HcVrA)fHY zOurNrO}dhb>Ao|PxsIv#l=_te&daSa_% + + {% if full_width is not empty %} +
    + {{ full_width }} +
    + {% endif %} + + {% if content is not empty %} +
    +
    + {{ content }} +
    +
    + {% endif %} + + {% if full_width2 is not empty %} +
    + {{ full_width2 }} +
    + {% endif %} + + {% if content2 is not empty %} +
    +
    + {{ content2 }} +
    +
    + {% endif %} + + diff --git a/core/templates/layout/flex/one-column/basic/basic.json b/core/templates/layout/flex/one-column/basic/basic.json new file mode 100644 index 000000000..1a723bb68 --- /dev/null +++ b/core/templates/layout/flex/one-column/basic/basic.json @@ -0,0 +1,5 @@ +{ + "header": "

    Header

    ", + "footer": "
    This is the footer
    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/one-column/basic/basic.png b/core/templates/layout/flex/one-column/basic/basic.png new file mode 100644 index 0000000000000000000000000000000000000000..4bdf0e752d6106494f92c786cca9fc85cb1748b8 GIT binary patch literal 1488 zcmeAS@N?(olHy`uVBq!ia0vp^89>~|!3HD^gU$y7DaPU;cPEB*=VV?2*>f{PB1$5B zeXNr6bM+Ea@{>~aDsl^esu&n-Dy)Fa+|-gpg^Jvqyke^gTP3gxD1^l#~=$>Fbx5m+O@q>*W`v z>l<2HTIw4Z=^Gj80#)c1SLT%@R_NvxD?a#8ycO zWDy)d+?iUDiLfcJ80syc2lYWR`i6Q2`f#&>T5Uk0Rsoq6sW}lYnYpQX#Xvjk3=K?d z!0It%5H=#|j6~9DjG_}s2CCCWALIcf4?#i;ED8)RJ1!f2c+lH%xwFYSFfcGb^mK6y zsbGA2?V{i10*2O)^}7{MFj)mAb6k&;n16`<`zd#WW9$xkhH428+pcY6isGy4CE~PhXtfyy^d=k7u)c8ur!y z4z$~6uQ%U*&XjGx8>`-_KR6pCEcYeae0AD^NS*D*0h{wq-F)f#v#Ln%LW@HA{9Wu( z5vh8vY5BNXP?Eb3L*S@X!GX2gO?F^G^A?0oUt8cDQE@% z8Xb7rZ#XTm;8hmrcqkCfA+kJ?g~?DRiM#QUNsog5X zmAje#Dg3RppYg7noS<08|8C_eo1Hb84&G;FI@nmpWNX^Qb!MKY45;k&boFyt=akR{ E07!N;KmY&$ literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/one-column/basic/basic.twig b/core/templates/layout/flex/one-column/basic/basic.twig new file mode 100644 index 000000000..42f70332e --- /dev/null +++ b/core/templates/layout/flex/one-column/basic/basic.twig @@ -0,0 +1,36 @@ +{# +/** + * @file + * Template for a single celled centered content layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - Centered single column open content area + * footer - Centered single column open content area + * content - Centered single column open content area + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {% if content is not empty %} +
    +
    + {{ content}} +
    +
    + {% endif %} + + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + + diff --git a/core/templates/layout/flex/one-column/centered-container/centered-container.json b/core/templates/layout/flex/one-column/centered-container/centered-container.json new file mode 100644 index 000000000..39711e9e0 --- /dev/null +++ b/core/templates/layout/flex/one-column/centered-container/centered-container.json @@ -0,0 +1,3 @@ +{ + "content": "

    My Centered Content

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/one-column/centered-container/centered-container.twig b/core/templates/layout/flex/one-column/centered-container/centered-container.twig new file mode 100644 index 000000000..ab695e406 --- /dev/null +++ b/core/templates/layout/flex/one-column/centered-container/centered-container.twig @@ -0,0 +1,25 @@ +{# +/** + * @file + * Centered container + * + * An example of how to center a container in the page. + * + * Available modifiers + * - None so far + * + * Available Variables + * - attributes: A series of tag attributes for the wrapper + * - modifier_class: Modifier css classes for this component. + * - body: A block element that is expected to be replaced with your content. + * - content: Your content + * + */ +#} + +
    + {% block body %} + {{ content }} + {% endblock %} +
    + diff --git a/core/templates/layout/flex/three-column/bars/bars.json b/core/templates/layout/flex/three-column/bars/bars.json new file mode 100644 index 000000000..aa79e4ede --- /dev/null +++ b/core/templates/layout/flex/three-column/bars/bars.json @@ -0,0 +1,5 @@ +{ + "first": "

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Column 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/three-column/bars/bars.png b/core/templates/layout/flex/three-column/bars/bars.png new file mode 100644 index 0000000000000000000000000000000000000000..8419c65111c5bf5109ecb781eff8b7eaf4eb41a7 GIT binary patch literal 3298 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 +
    + {% block body %} +
    + {{ first }} +
    + +
    + {{ second }} +
    + +
    + {{ third }} +
    + {% endblock %} +
    + diff --git a/core/templates/layout/flex/three-column/blastila/blastila-left.png b/core/templates/layout/flex/three-column/blastila/blastila-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a31ac6d8cf5cbdf438d737703de4ece3423224c3 GIT binary patch literal 3864 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/three-column/blastila/blastila.json b/core/templates/layout/flex/three-column/blastila/blastila.json new file mode 100644 index 000000000..f62059bc8 --- /dev/null +++ b/core/templates/layout/flex/three-column/blastila/blastila.json @@ -0,0 +1,7 @@ +{ + "header": "

    This is the full column header.

    ", + "sidebar": "

    Sidebar Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "first": "

    A mini heading area

    ", + "second": "

    Left content column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "third": "

    Right content area

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/three-column/blastila/blastila.twig b/core/templates/layout/flex/three-column/blastila/blastila.twig new file mode 100644 index 000000000..e18611dd7 --- /dev/null +++ b/core/templates/layout/flex/three-column/blastila/blastila.twig @@ -0,0 +1,72 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout with a single + * cell top most column followed by a 3 column layout where a 2 column span + * header region is above two single column regions and a right sidebar. + * + * Variants: + * layout-blastila--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * header - A single cell centered columns + * sidebar - A 1/3 row right sidebar open content region + * first - A 2/3 row section below the header and to the left of the sidebar. + * second - A 1/3 column content region below the first region. + * third - A 1/3 column content region below the first region. + * + */ +#} + + + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Div for grid container #} +
    + +
    + {# Sidebar #} + {% if sidebar is not empty %} + + {% endif %} +
    + +
    +
    + {# Mini header area #} + {% if first is not empty %} +
    + {{ first }} +
    + {% endif %} + + {# Left content column #} + {% if second is not empty %} +
    + {{ second }} +
    + {% endif %} + + {# Right content column #} + {% if third is not empty %} +
    + {{ third }} +
    + {% endif %} +
    +
    + +
    + {# end grid container #} + + diff --git a/core/templates/layout/flex/two-column/donies/donies.json b/core/templates/layout/flex/two-column/donies/donies.json new file mode 100644 index 000000000..8caea6850 --- /dev/null +++ b/core/templates/layout/flex/two-column/donies/donies.json @@ -0,0 +1,6 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/flex/two-column/donies/donies.png b/core/templates/layout/flex/two-column/donies/donies.png new file mode 100644 index 0000000000000000000000000000000000000000..288575f9b9a5347fa0f1ec23102d077269ec590f GIT binary patch literal 3832 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 U^vAi>j{Z>rLra5lJ@@GU09$(vpa1{> literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/donies/donies.twig b/core/templates/layout/flex/two-column/donies/donies.twig new file mode 100644 index 000000000..1a5100100 --- /dev/null +++ b/core/templates/layout/flex/two-column/donies/donies.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional header region #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Mandatory content region #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional footer region #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/flex/two-column/frogger/frogger.json b/core/templates/layout/flex/two-column/frogger/frogger.json new file mode 100644 index 000000000..a78aaa491 --- /dev/null +++ b/core/templates/layout/flex/two-column/frogger/frogger.json @@ -0,0 +1,9 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    ", + "third": "

    Third Column

    ", + "fourth": "

    Fourth Column

    ", + "middle": "

    Optional Middle content can go here

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/flex/two-column/frogger/frogger.png b/core/templates/layout/flex/two-column/frogger/frogger.png new file mode 100644 index 0000000000000000000000000000000000000000..b5e85d7a1966761d32d5b2ff17e696cda335f99a GIT binary patch literal 4654 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 O9d%_Lr3yux$o~N;ZleYO literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/frogger/frogger.twig b/core/templates/layout/flex/two-column/frogger/frogger.twig new file mode 100644 index 000000000..8e9b1d7e7 --- /dev/null +++ b/core/templates/layout/flex/two-column/frogger/frogger.twig @@ -0,0 +1,66 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + + {# Optional centered container #} + {% if middle is not empty %} +
    +
    + {{ middle }} +
    +
    + {% endif %} + + {# Optional third row #} + {% if third is not empty %} +
    +
    + {{ third }} +
    + +
    + {{ fourth }} +
    +
    + {% endif %} + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + +{# end layout wrapper #} diff --git a/core/templates/layout/flex/two-column/pacman/pacman-left.png b/core/templates/layout/flex/two-column/pacman/pacman-left.png new file mode 100644 index 0000000000000000000000000000000000000000..cfa76eeabebbcbce5fb6e1b9c69b88e4a8db97b6 GIT binary patch literal 3272 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/pacman/pacman-right.png b/core/templates/layout/flex/two-column/pacman/pacman-right.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6ee0a871e5aab86f09db57cde1965b12c4f758 GIT binary patch literal 3278 zcmZWs2{_bU7avQ=5-LkEj8P&nV?xcuD8>?IWSNFac9|HXSRzt z0sUm_$EbiVq_i32AL^0P+lXV80D$znqo^ZpbdfpFlc~E7C?U-w3yOmSX~P~m(4$gm z*190A4|2t;ss$rYDF4V}sRaPtDLDErxth0OM(rPh*?{-zd-1LzF!8RW_Sp^}!{rP1qg%!m7D zN>$BcQW)2 zP^lgtnZ+K46@5e0`51oOxsP`&yo#=>=Snt$Y%~4YS3i7FIF`GA1*njA^fSRg%q|l- z!sB%YyLfTADk8K3^>N^JPMPs8m{5*wO^oj!4V7x(@@fx!yLNS7#!K%JFkH=wQ4KX| z*qEEjkGY5-#jk~nx7={P&69%2s_i^}h+UNNk`XqdWNnWr9L%>35jHy=F^g>Fi&+fy zP1fp2zL}!vyea(LczKe#z)#@?wlYUrYM3YW#34xS=?w*iu!o(BiMTQ(>X4|YP}7pD z%aV+xEX#!-GEg4og_nN0zUYZS;Z3GMs%gu)o`y z&q8GTxM~rnA|4+?$}?zazlysZ)AARVdjFd`J=JQ5#hm`w-9jE+U%c<_1`B3Mg!F1Bw<6WL}ztzT>xx@1#D8?#qF*&q!G34TUW7#M+ z=MQ+j{T{W~pBd(p{6IwUxuhOL{7_)AN$}um7rQE}X(aepxgMDNOM>*B2>tZjdjMC^ z8T&LowbilR^~6-^tCXYlnoRlf`K0e-S*>BlphvlRM(AD^%-7tcdQ#K!_^g`j={MCcXZhQ8lZc-_PuFNrS5{VhJu+yw3bs1&`c=8rmR9w=~*(y@Jfs8!Thy0!q_Tp@kQ+*wLd~Um~C+3|Q zGiAAVDyFlO*~!mprmtD7ty$a)>V-JCS9jYTYzSWpD;eGJD`8;18mOG*jg^h(^fljU ziC!tsAGr`2v6(;=1<@ndUuj0!d|W7;)UYut1o2k)K&HJkBcnE+ntc;XaYjr))>92J zQ}2h)pcY=|>XWX=Pb5Cf`R2LDJUmFBS#rwCxN2#;us}?PeicYB8erDp9K5fcQ4!KM za%rug`+ipw-P;4_n7CfZ5bW2#Vm)TFZS^#ALtJ==lP40V!XEZT7d}LsqbJ`FT9YWw z?K&*oyzxiEW~RG(+MmV+Xj7ThwYyRJNNvaHvZ!m`-cqa((v?I)b@2dE%4f}rA1t1N z3Jb{G)^pN$yQoNkx(_`eY+#p~)Jx3@FKu_nIQ@b`@6nq#6oi|G>?LK3u8D=N-#9B* zl%pCu)}~X6+9(J@~GR;ud~Yier$cGKAdK<_0($txTJej zr(1z(;nrdUl@-UC!do9%TWKlSbt-nqjQc$y3?w<)GoW*XgVhCZ*Ru+rZMoGmI1lgex<$rCgOXs8Q$kmw-VDC)VcO$satR1t$I0yUB|7q8e8Yfdw zn6~AlpMxNpWJt!uCJ*{u&fFj_nRhqU2d@lp!289j1 z@3_n}R*jXQ88Fl#aJiMOC%jZ1O@&lhB1i+csmNktF7o6TV2 zP>*%aI82(xPs_i$cON{t8Yo~|K>mj+LcRFUyjUF(|3QxuXbD=~|*lGXZ|<8fh*rB+hPadjj6@R*6Ozh8)qDM zq}oLE+~z%$ZFtb2L^GY>+tAEz4gZ-60D>mkJg8Ko z$YQ>VYz5sj3aa}=?d)=wrp7&c1LngCU&a57Y;)yHm3fJ@5;%EkBqccAuYt33QF9{- zlMu{k+{Kc<>~EC;nK)Ba-#wg!nYkp=4vCxt&V4BW-NW0s@WuiFLv7Lg*A6BZPSMoW z2);%j(UqGixFwk=f+mAu(0!#)FIsVJxxH_is2O!LR0=X17u-$$c70UzGXy5zmpahV zx-glimp4eSI=}w@O0mU%6Lli2Be>DskHxPK!kqA`sw>W%f`#@*mM#f|P1)+jWmIxM zV>DeiNxk{p7fW6B(pM#pm7pcypybNczB{=DRSU_(hkfKaoIAKF@5obHR zlNHm1W<2)hbKb&Ig{QUXrIQj^{-V5+=3R|9+YZR zv06XRd1a=;_gmLQ#l_zcNYW$i6*G#-Jh#-<7aH1d2P-Vcm)$DXg#7rZRqiC|V;GCx&;hoUIWSLLcMmMr$_COm8#eSSLq5;~sv{YzHVa;aAt`NnXQvg@kU z*j2qP3XeW#iXoyXY2@6(kO{rHe5bm%r=2pMxWemnb!9}<)gLR`4%vLA(<}B3hz(y` m!~qn#VTzr4GOq#Q8}g^OXedof4g?DSJdRppP%KODxc>oGoeBT| literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/pacman/pacman.json b/core/templates/layout/flex/two-column/pacman/pacman.json new file mode 100644 index 000000000..26477b6e3 --- /dev/null +++ b/core/templates/layout/flex/two-column/pacman/pacman.json @@ -0,0 +1,6 @@ +{ + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Content Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "header": "

    Header

    ", + "footer": "
    This is the footer
    " +} diff --git a/core/templates/layout/flex/two-column/pacman/pacman.twig b/core/templates/layout/flex/two-column/pacman/pacman.twig new file mode 100644 index 000000000..2fcabbbdd --- /dev/null +++ b/core/templates/layout/flex/two-column/pacman/pacman.twig @@ -0,0 +1,42 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Required content section #} +
    + + +
    + {{ content }} +
    +
    + + {# Optional footer #} + {% if footer is not empty %} +
    + {{ footer }} +
    + {% endif %} + diff --git a/core/templates/layout/flex/two-column/plakes/plakes-left.png b/core/templates/layout/flex/two-column/plakes/plakes-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a0f6171e77ebf9373aa6c92a9d2f557d1428b6cf GIT binary patch literal 952 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>P!3HG5{~h=bq!^2X+?^QKos)S9WY5kFi71Ki z^|4CM&(%vz$xlkvtH>8? ztx|+t?VyL%(9@GcP=o{)8=)=thYPA80S_NcQq~=7pWag&k6$9>0F0*7o-U3d z8LV$-Mtd_Q3bdv7r)AAr*(uSMDmeE*_qsi=#lPe?FW9Zrv7)=nYvCg1g%>ZXnCgf! z6|$G4hfQn!>2O2#`P|CdZ@2ULwf4Vdl#^ZMUR$2qUAet)-tv>LCAMDPn_W>?b9`Ts z>b5Nt8(*GTveZ25U&VHg^xx*wQnoV*Uu4L-clom0ncb#yTlP#)7nqRg-0-Y}Wv|E4 z%Yrjv{j4q>=u|q`A+NhQ;rr+OsaiGlrU8!m0fAHAy;~vAd1xcUkLG>%uHDU@vS*dn zg`Yf9yB0QDra7#QVlQ|&lg+e#OEGKt^rw#Z6iwxu|2$)o$%{Xb{Zlx~er=~!BZ^o6`A3l9yTsoP3#r0W#HT&MI7ul2{`zJC7uXi_Y&u(huGi&vT=dnOOLPAF)gAxVwK!Aj&w86}vIZQ8pEtgKS>S3Q1}vr^A-Rosc-lZB;D^Smdl68{uZ6f<`MPNnxQKe_n*vvGIl z!h|Kog$A`!J?%9H+vhc97@15tmlvecx8KhF|Kv^4ch=VU`_Hy#5%O$VB^6)-%443c KelF{r5}E*HnssOZ literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/plakes/plakes-right.png b/core/templates/layout/flex/two-column/plakes/plakes-right.png new file mode 100644 index 0000000000000000000000000000000000000000..a3c84b67fd158ce1dc1d91d4772d852d9514fa25 GIT binary patch literal 2827 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 ZZC(>oEmpO%XxaL0wYIP`zioz%{SRqU7=!=- literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/plakes/plakes.json b/core/templates/layout/flex/two-column/plakes/plakes.json new file mode 100644 index 000000000..585039eed --- /dev/null +++ b/core/templates/layout/flex/two-column/plakes/plakes.json @@ -0,0 +1,5 @@ +{ + "header": "

    This is the header region

    ", + "sidebar": "

    Sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "content": "

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/two-column/plakes/plakes.twig b/core/templates/layout/flex/two-column/plakes/plakes.twig new file mode 100644 index 000000000..b15ac9833 --- /dev/null +++ b/core/templates/layout/flex/two-column/plakes/plakes.twig @@ -0,0 +1,38 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + + {# Optional Header #} + {% if header is not empty %} +
    + {{ header }} +
    + {% endif %} + + {# Grid Container #} +
    + {# Manditory sidebar #} + + + {# Manditory content #} +
    + {{ content }} +
    +
    + + diff --git a/core/templates/layout/flex/two-column/toucan/toucan.json b/core/templates/layout/flex/two-column/toucan/toucan.json new file mode 100644 index 000000000..330be3d05 --- /dev/null +++ b/core/templates/layout/flex/two-column/toucan/toucan.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    ", + "second": "

    Second Column

    " +} diff --git a/core/templates/layout/flex/two-column/toucan/toucan.png b/core/templates/layout/flex/two-column/toucan/toucan.png new file mode 100644 index 0000000000000000000000000000000000000000..3258a9ca4ce3c3b40e9aa1e14fda30d1e0238141 GIT binary patch literal 2090 zcmZWqeLRzU8{Z_&>sG0Ul4ew1j*aDQx;Go6c_|}rDPdl+*rshVh1SlgG4hf~PE3mQ zDC@{e_~az2BVrvd=U{b0hLpnjP!i8Qb*kri?$77`{jU3WUElBby1u_Z?o{gD-I{8f z)F2RurYnW)4en9k`y)&RTtmf&UVs~v;D;uwQMu9R@2@u+}3RHPG&9f7n)TcIsb z1T`cQ39!Q>?Y+q^U*O;u9u>vq#@b^r@$vEK_?>7L`!L25hr?kkuox`X9IPkdqc zoG!iaw^S_s^_lx|Ivii-{IrDRRZR+8<5z-V?{pVwIkR=u{mS>VVSm0v&xg$=MMnBp z#VHEK1Y8F8} zGBaacmV@i5TGLw4=hM%v%e`8Y+vos0%ELa4l?C4(Q;{}K>Lz~}ieFslb|-sj+-z@l z9+4eC8^^dE-=FlPq`-05_VTF#@$icqLRL}Gi|HK6WkJ=9M71-sOFS}~wp=Wka>AUk zsw(_tVW21Pl~-T%Y*=JhKR%k?{uFzEqJM4ErzO=+adO^Ww<%kG-Yjf+aoXX~q6dHD zT5cv#$z!bBzoK>5F7rwZjg3$rj}nYbLOZu6xt`lsf1gp7qr0^Dh85TqJRVepI`}8W z5cl|p?tYu<2cg5qbcr$-ZD zl(}LhCzB~}DBO^urP|2Vx!73D7q0aQAho9{rQkx~&^D8dde1h4Q@CR0#j#M)dg9^+ zN|nsCw+0wV&>?Xtlup%(7RUB34Sgk3|pc*aHy+junPWLY`oXK7T7ubIQm}c+q@0$ECjVTAhSb& zvXM|(PS|z=@tIwF2fv{dGTZB>tcsMYS=f4_C=g43etp6^l2S^&Qpb}V*gE2%AF(NI zu(m{e447X&kT{UAdDF8NZU6UGJ)f30YP#MzOP8g+Lr86urw?mDTQB88))6~4gfNT9 zSzzlB&a9C@8Nped|MQNuM*MuUdomyu32i+HmCHewX2w+HgkJMmAiem$cynNLh3`pb zmi8mrj%|YcRp($dEea}S#or;5y8leI_mBv;${136d(SLi;1^O0d!x6vAOVD@8O4OoFm7E*? z)(kQgY@s2dNO;W-+GD;tU(yHGJ1KF*ie=@>KvUnF5eKRMl~T#+vT%=>5L%T?n*6dM zT_CbTL>qtf2-19??b~Ns1)sY%Jfo2nbP8`2Ks;)`6`|oAtE8Sfesxj;4K&!h&-c1- zZ|x{VxAn-W(gFk2eEOUF<8FYYLDIcM+v<-C7UK`kKW=W*`gmwwb0KU`ys6JF{qr`` zE3hNLBUey6FQyBJ0>fmD1*!4G##F z>?T4&S@7c_giXzU<0~VC4E^UVv9d1D`nenP{1d@C8p}Z;3nD#ML0Nr`i=J8mw)y$4 z@*L-t0x5Bq0rel-0$6g=Omrd=m_t7be0_-*q zHBTgoj0c+%&pvblns`4=FTuLqXS^G??;d2oRf$$okIKmDf*<82QVRlf8)6t9xTJ++ z86VP(t9ZiKPs$@MW~L*eLu+CUlOzROk>)Q6y=6l`MH`HYFMkZ zkmz_@{-&KS+XpDn55*1H2cOt(BtD65dYY~jWmsRpTGUse@EO}+s literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/toucan/toucan.twig b/core/templates/layout/flex/two-column/toucan/toucan.twig new file mode 100644 index 000000000..9960c088e --- /dev/null +++ b/core/templates/layout/flex/two-column/toucan/toucan.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Toucan + * + * + */ +#} + +
    + + {# Required column #} +
    + {{ first }} +
    + + {# Required column #} +
    + {{ second }} +
    + +
    + diff --git a/core/templates/layout/flex/two-column/trunks/trunks-left.png b/core/templates/layout/flex/two-column/trunks/trunks-left.png new file mode 100644 index 0000000000000000000000000000000000000000..b052303f5f1525daa9637eb56701f253ef9588eb GIT binary patch literal 2467 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 literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/trunks/trunks-right.png b/core/templates/layout/flex/two-column/trunks/trunks-right.png new file mode 100644 index 0000000000000000000000000000000000000000..f44bb6857bfdd09caabe4350092c215be3c553e1 GIT binary patch literal 2280 zcmZWr3p|ti8z0tYE^BmA%xT6^Ct;$RwW(#rDob*WzuYEs+t}F3EhCr8oKop%lITda z(EOt?jN*_>Iw6edDCL$_n%k-KPM6dF^M5~|_x(M;=l*=3=l8yEx+BF-Q%zS51OjQ2 z?MY6+dK9?1su1Am+1%X>EJ{o#yIr6=?Z`I(olA3eXSqA<$NAI4%zOjrepE9~7z5A( zf$$t0K!#CSz9>#uXgCwcA)uEuZ~(1fo1;-nDy$F!+TFnsWlN8wqPCb>nPJd2YA6&6 z9~lscb0Y2eY7XoO=pYu0fipK}v)N{BOEY@pQF9AxYio1NX7kOPO#uy4=CN>=FUK^T zY52v-H$NmQ(?62NVA1H|D1~2NKYA34fJQ3zVI!P4UgOH0g;mOn_oTH?(W1^iIZ z7qphR09-a|c=PYj+o-vzXz77KkU27m=*&@?JkF zoh=pcLc{TyU5at?Xd1OD8K?Jv+KSMKReou46GS>C@fuQDV#I=_u!l`N@&oiRQ= zqdh#}E|!b0z$% zH9QHeHFv0~13uj5mRI+@H7h74nHfV!8cLXjiWcVGnuP;xr3Y`9w=LrbRn{ynYW$Rk ztQ&?dlnTdFG8%0Ck^Fto(ad#2V)@V_q$j%~{NqP#bOnpSt)89ug_j!_`-;|(lt$Q} zTi#Gbf}V5%e=|1=66XfS(mu(VdcBz3*KqBWugx9k+j?A0{ zmsOS1GI|RAU;e6-piRQk)T@p48O@DG#KXpAZ0{^MHo)&3sxRwa9RSCA!TS*T9ToT= zx<>B(m2F!`02CB>Y#o>Nx%~xfg!gDPy|E=;*MoI2qhICM2(((nbPlU7UDZ{mE8ajF zwH7(3qh%LWXYfld7>xqGANn~Tqt8f21)11Fk&(4O6FqBjH#>lkMTysGdEJ~uNYjGf zfsjRTS%C?%^uk{mW##w$QtYvzG}Bef-UZwK4|G5R-iG!FkHVT!MNk8eB(N5xF9u#h zhVs*Vs?>1OUvCqY4aybmRwZ`2rqs)LF3Z7-8sQ;hzmJWdu$`(fO0#hVIQQL)g~~%E zaBS{xeUm4Fbf2FBOCI#kjwwLWy=-*rTK(CFNjEI8jc|`dpi91K;9WtAm|EPc0u2Di z1_bQdk&iC8!%vur0h-z*gRk_a)c}1j^4cmVb$q3BaMS=(x2m9hif9T?)BTrU$9#+~1atycMTL&BUYZ=!VTcb@HT9#@Br#T%VE z1{9=dqY?Mu+lz`>k(@S7*W~#)E{$B>KA{|0e`bPUhe4)yO2PH0UqnbSS*2#SvGJB-cqBLwUgXAOKy=G}(GSb%XM5EKpdMW2fSG?y_jnr6u1Esfn-`W8%xWbRg))U{ZnT0DbndYVK2xfo{ zfdgI0(pDulD2}#*N^A(xT@l5UmmitUGpXn+JszjbXd2TAb1E7Pv=$W+c+iTu7MU|0 z%Ms1rf6yD4TefNZX13dFlE-_o+=HB9s>2vaN9WmISv8g2q}K1fVJ|k^>)1gDeE81x z{NM@e5#b`i%qz=5zo9rWK6^fR#Rl=(1AC^2?G8wvWq0IuDyI~ro|U!im-6wSKdgjj z%9Wa|*UVCfqp|IhBz?~O3s`k56SB?Ca!tkpasha~D|Oh|q$Cv(#Ie$gk@qic-sW#M z=q-Nv@Pg-HxJwf?<7D4)!)z({+s9%d>W*GtbwWms-F60RUX_vg3c3@kRaCLIx~kGF z0h@HIEHxxKt};3l!4hlp7 literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/trunks/trunks.json b/core/templates/layout/flex/two-column/trunks/trunks.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/flex/two-column/trunks/trunks.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/two-column/trunks/trunks.twig b/core/templates/layout/flex/two-column/trunks/trunks.twig new file mode 100644 index 000000000..4d94a833d --- /dev/null +++ b/core/templates/layout/flex/two-column/trunks/trunks.twig @@ -0,0 +1,27 @@ +{# +/** + * @file + * Template for a complex column panel layout. + * + * This template provides a complex column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - + * - + * + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + diff --git a/core/templates/layout/flex/two-column/wedge/wedge-left.png b/core/templates/layout/flex/two-column/wedge/wedge-left.png new file mode 100644 index 0000000000000000000000000000000000000000..aec0b65d9aea2e01fb76f264b3725be4651a110e GIT binary patch literal 2084 zcma)7c{E%39=}NwOB`NDEoT(HB8Vj}N)d^s!AP{!Xsba{>uVkoA_#qE@;dajC@Dp2 zE1jq@gHEG%+S490IF43$wxQZ-X=>LHN~w3z>6r8WdH0-qzsv9Q`EKX;``xRa9yF0RV|dgw?1pZVqrjoY3L{BC!ERx~Oj0$7L!Z{o*Eo?|T`2Sh?Gvgkn&mQJstG&!UE1#GoXuE+u z4ed^A#|w|k5krDLkKPgEJIqN00681F^Rd%B#M~`+_SljAmt6znl@Iz?R2MsCuk>aW zVbnGe_A;Z@L(9F#PogoxeC;A+oJP!$%ypJ$5M}q<0JU%ahnsn7P1D_VXI1TszI^yM zdKc$`MXKi|Z%~EkfIDj}h>v63*hi?kg10*KaRhIen!2|5Z0pCLwZ(Tq0#zIuiJKcYGY#c$%p081VYjZ4DiY4FT9aFZBZUzrN+E~XhK`23 zRtsLnZSt+&TDHf91u#PS9(ro-Q2z2#)+6!SPfBi98a4IRCwc!^N{mgj9W7WHjY_{G z#9f>EX`!Td_2@s{M*@8PU9Y|i!IQ@%+;q2!sd=lO*i}DL;V20?b@1W%o1B?OGaD1>oxYc&nt^>?{q&>4wGTx# z5ZPxloW?BZ?U~hyX%(3beYBrUWlGiyyB!K{k=_@TWj3j;abArVSS~#k6RLCDk7qWN zL>?`(K7P=&a&+!RU`LUs#yxM77rE0uby8*?J5qYyqDVgfzEfI`0dBmlnX~x5gY1%+ zqK`)kpU&3Xc|Lqr-FEL}Gh$k1pv85_Soh^yPg^dGy+qLpZ6QDX*B!HUt1|k~McLWx zN;TzXov)G!6fN1!1XeWv!M;uuZJssEi|&1fL1edFM9k9%!6}`xe>4_FRLYD-qiDnPaz^3h?vG0$hiUuu_kLF?N|i(i|-0 zQ8Zq(!qs9xaaE|pSMy5ibYal<8{*J_F;0tW&c`Vn@Uj6@ot-+-0#p$7M>(P3ftF9Iy3JGN@o z*K;liiWJ*ojt8ffrNPRyfY2c{8dn?;P=)A9pKUHh;x>wfIpXR%K=E6nrd)rCKVKM& zjA+0B*?!5@Jb9d{RdXDY#*)>&^5>^iIG9fRa$@G?7skgq$;-F zYQP?}j-aaZ?VuvqG%%EwKoMcT_cP*8cn6w}Bf8QuSjF&cd^@XWi3@P`F}+=H2YvYy zNARsPaE$HZ(6mOQ#40D9{|Oz<^DYt!uxFNFKLjtu^g^dbDahl)Dmmj^0Wn@ zOHhL>cpEpY`@U15d53amocSs8@(rSy)(ZC}m!{HEna6tA2R~lfPyzy?h~J^pw{;^6n@}Zw^cj?SGT_JkGB; zbaeLA?WOyNwJklOB7!xRL|Xb0BJqpiIxy^maq`BLUb6IkNw(Qt{HvyA2(Km^0s6uU*kC))kMPC}x@|dIYwK2AF=p8-PM#qx6!jx59n&xzAp>Kfs&!{%eT~{W;@O?4(Pt_ z>Q^LR{KoBryiY_Uf!6vTxA0$w&rOM>{!O-~aihW2cdxAlpQ>njAY9~$dqYQ4BAui+ sji}w2jElAT9c`xw@MX~mFy+By;9O*G#+aQ--uC~T?&9HGLp^`#zh7gD=>Px# literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/wedge/wedge-right.png b/core/templates/layout/flex/two-column/wedge/wedge-right.png new file mode 100644 index 0000000000000000000000000000000000000000..b84f814a0614d0790455e0c69886c61d6f887b97 GIT binary patch literal 2188 zcmZWr3pkVeA0HjJxm8lp>okj}q+J-Axkavtv?In@hsDfJjkPUJn}mkMOyssDLU&Sb zm5$0BVkkL>$e|^ZOGD};<8)rtzti*l-{<+gzwht+{eHfe&-4Ag&wI+x*Fzg>2!%i( z+FqWncyOnHD@k1yd<$|^XyB&A#Cy0vD!YJjP(DZXC$I=UyK!OBG$biJ`T!ZprqMw! z2*jR^14SB{MS`(uhoYD`wgddL2M&~%)hIaZvkU8>1DxRF2iqCVAj7PYR!B755ekFB z>>1$^IJ~R-S2%cbfJd@ebQ}tG^ypFKQ4BJgK|xvA+S;PfmMBY01n7Za#zwJ7Y(x}u z)0ZIsi{naWhB2sg7BxBwwj7sqAo>W)0S;eI^zHdlCz(zCFH;orYg=H0sAUVv0*OX_ ziw#2Um$f)QDw}+W;7X;DqnKb0M+-E@{adBUpl3_QCv-N-IWUvft7Jfw13Zws;$V0$D$Qb*^VS8IlT_#{Ts(*s^A zH;VjWF;C57c5M}`#icH4Sf09|-h6(*yEms2dV0qADi;6X4<9&nfKkhql4^pHe~*y)smHrpc)n{`0e= zft%6m^*xJkbC#Z~EY2@^vlU~eW#S*2kFCb|*OyM%jiLwkJ#W_uc;5baRKYlZms7JZ z?`_3kNUeGNlYss!$0xU|zj$?eCwuk{hK<9eumm|TUeV)XHSafaRh*V)G>Ph-UWO9& zX^)2ucki6#y>;#kc~ASRh-|BsY<6#6X2y**$ZUywu<>fkjlih{`_ zLxY;y@Kq>e6Co$(*NVKuX$zU7M%UCQNKpRU6`1P6!lhwijrp##8!AX+s%!WS$78l? zwZqD*uB-8SuKZwM;Hv~pk$c>29IBgaYL20nVyv!1cwubIz~p*jg`s4niKu0QU{glt z2H}(4b{dqe$$ei;-_}PE7jFNt=!2*Q&pYUe*-SJNrQ3UA8~vwYQo_*K1`1U`$1)9X zWXiQ|nRol{9mS{y^>Rzrn*c*hZcveq!XR9R?MS-qE}dtj8yg?`RII7@ygZ|euDDV^ z;VhlUr`JOdbHZ|*caeg0p%ex7-V`ZluBC7Y%|3+o5z>K%nr?%-cRTyeHO-Q} z#xMNZ&$sk6+cxPetw`GCQ68@cm#^FMobND4pAzT27z z7V3D?`j;KfO|zqedSIL0eYcFoH?=~0-Z?i(9Vk6#ss>v)d@@9Majc`ij6Z7QglS!O zLtE_jnFRH>J3{l{Bx&ziE_UO##f1bvRWlyhVT<-dW}P5;9_?1=nmPn4f%5do>@Wk|@RQPLra66n*+L>nBdq0Jx&(c) zLWwrASpr1^5{Qk@W4g_iusa!2f@&4@SaP+Ok%YE}FIPK3rZf~5#gDPd-|5WFOpAv(#Ps6Oj13NKj)=4vU7^@|Heyc;(pw|Y>;${$GV zLfg31%N`bB(IiW-;#}|=a}qm%zovn}T)cozTop3rA)qgAJJ|TDA*zi!aD;UCx&Y|}LSowY!x8Vhd8ghyb*B&vdzulvumh?;GASxsfRMD=E~(9A>es=unmbp4 z!=GrnNer_~3$n`)a=;Pnz1o|llvm3?`FE^ga4(l%meQD_>G4P9zPTrEwe_YCAcFF!)ADh9YpJ?VzdDD`(33+$G z{`PuC{GXMJ&OehcEtHhbt_~2ZTzCJ8V0z~fjO2ey{4=+{BiAJxSX-?X;Br2*68spg zD(tJx8$KNaIHkdD1N+s0izhHZ`ONDchy39PfzI!@CMJ0=%e+(nrqEfA32hG{XRNZ6 zuLyVn0uzn&5AHLs!*v--W=8qlCLyl`&^Mda!cq^E#m4K?yNUpD->^f9@R~uhhT&eZ z0$DVyf!z!L#~=c23p9=QYfKsOjeV!h?VASd48_@F=f#`VHsud>OrPYieF7xqPwbMb zTU*h2IG_1OmH}L0MTr%l{2tZoaOSE}@D40vVLy2mk;8 literal 0 HcmV?d00001 diff --git a/core/templates/layout/flex/two-column/wedge/wedge.json b/core/templates/layout/flex/two-column/wedge/wedge.json new file mode 100644 index 000000000..1c4721a25 --- /dev/null +++ b/core/templates/layout/flex/two-column/wedge/wedge.json @@ -0,0 +1,4 @@ +{ + "first": "

    First Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ", + "second": "

    Second Column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    " +} diff --git a/core/templates/layout/flex/two-column/wedge/wedge.twig b/core/templates/layout/flex/two-column/wedge/wedge.twig new file mode 100644 index 000000000..fc11e8aa2 --- /dev/null +++ b/core/templates/layout/flex/two-column/wedge/wedge.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Wedge 2 column layout + * + * A 25/75 style two column layout. + * + * Variants: + * layout-cuttoner--right - A right sidebar variant to the layout. + * + * Variables: + * attributes - html attributes for the template wrapper tag + * modifier_class - Variant modifier css classes + * first - First column and 25% width + * second - Second Column and 75% width + * + * + */ +#} + +
    +
    + {{ first }} +
    + +
    + {{ second }} +
    +
    + From d40b83993a6aa1df381e6867929b380019d2d213 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 23:15:45 -0800 Subject: [PATCH 094/123] Updated blastilla right grid scss. --- core/css/decanter.css | 77 ++++++++++--------- .../grid/three-column/_blastila-right.scss | 24 +++--- 2 files changed, 55 insertions(+), 46 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 8ae4de4c8..28ab4f63f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -4652,51 +4652,46 @@ dfn { .layout-blastila > div > aside { -ms-grid-row: 1; -ms-grid-row-span: 2; - -ms-grid-column: 1; + -ms-grid-column: 3; grid-area: sidebar; } .layout-blastila > div > section { -ms-grid-row: 1; - -ms-grid-column: 2; + -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: head; } .layout-blastila > div :nth-child(3) { -ms-grid-row: 2; - -ms-grid-column: 2; + -ms-grid-column: 1; grid-area: A; } .layout-blastila > div :nth-child(4) { -ms-grid-row: 2; - -ms-grid-column: 3; + -ms-grid-column: 2; grid-area: B; } -.layout-blastila--right > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - -.layout-blastila--right > div > section { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; } - -.layout-blastila--right > div > div { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-blastila--right > div div ~ div { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } +.layout-blastila--right > div { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + -ms-grid-rows: auto; + grid-template-rows: auto; + grid-template-areas: "head head sidebar" "A B sidebar"; } + .layout-blastila--right > div > aside { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 3; + grid-area: sidebar; } + .layout-blastila--right > div > section { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-area: head; } + .layout-blastila--right > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; + grid-area: A; } + .layout-blastila--right > div :nth-child(4) { + -ms-grid-row: 2; + -ms-grid-column: 2; + grid-area: B; } .layout-chess > header, .layout-chess > footer { @@ -5180,6 +5175,16 @@ dfn { -ms-grid-column: 1; } .layout-blastila > div :nth-child(4) { -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-blastila--right > div > section { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-blastila--right > div :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-blastila--right > div :nth-child(4) { + -ms-grid-row: 2; -ms-grid-column: 2; } .layout-cuttoner > div > section > header { -ms-grid-row: 1; @@ -5197,18 +5202,18 @@ dfn { -ms-grid-column: 2; } } .layout-cuttoner > div > section > header { -ms-grid-row: 1; - -ms-grid-column: 2; + -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: head; } .layout-cuttoner > div > section > footer { grid-area: foot; } .layout-cuttoner > div > section :nth-child(2) { -ms-grid-row: 2; - -ms-grid-column: 2; + -ms-grid-column: 1; grid-area: A; } .layout-cuttoner > div > section :nth-child(3) { -ms-grid-row: 2; - -ms-grid-column: 3; + -ms-grid-column: 2; grid-area: B; } .layout-cuttoner > div > aside { -ms-grid-row: 1; diff --git a/core/scss/layout/grid/three-column/_blastila-right.scss b/core/scss/layout/grid/three-column/_blastila-right.scss index 1daf8a482..0802c73e9 100644 --- a/core/scss/layout/grid/three-column/_blastila-right.scss +++ b/core/scss/layout/grid/three-column/_blastila-right.scss @@ -7,25 +7,29 @@ > div { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto; + grid-template-areas: + "head head sidebar" + "A B sidebar"; + > aside { - // First column, for 1 column, but down two columns. - @include grid-item-spans(3, span 1, 1, span 2); + grid-area: sidebar; } > section { - // Row 2, column 2 for 2 cells. - @include grid-item-spans(1, span 2, 1); + grid-area: head; } - > div { - // Row 2, column 2 for 1 cell. - @include grid-item-spans(1, span 1, 2, span 1); + :nth-child(3) { + grid-area: A; } - div ~ div { - // Row 2, column 3 for 1 cell. - @include grid-item-spans(2, span 1, 2, span 1); + :nth-child(4) { + grid-area: B; } + + } } From cc9f36e8f3974cc0cbf13c77032d1d2b8e1c834e Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 10 Dec 2018 23:21:39 -0800 Subject: [PATCH 095/123] Updated blastilla right grid scss. --- core/css/decanter.css | 32 ------------------- .../grid/three-column/_blastila-right.scss | 21 ------------ 2 files changed, 53 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 28ab4f63f..dd5b3c7bc 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -4669,29 +4669,7 @@ dfn { grid-area: B; } .layout-blastila--right > div { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; - -ms-grid-rows: auto; - grid-template-rows: auto; grid-template-areas: "head head sidebar" "A B sidebar"; } - .layout-blastila--right > div > aside { - -ms-grid-row: 1; - -ms-grid-row-span: 2; - -ms-grid-column: 3; - grid-area: sidebar; } - .layout-blastila--right > div > section { - -ms-grid-row: 1; - -ms-grid-column: 1; - -ms-grid-column-span: 2; - grid-area: head; } - .layout-blastila--right > div :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 1; - grid-area: A; } - .layout-blastila--right > div :nth-child(4) { - -ms-grid-row: 2; - -ms-grid-column: 2; - grid-area: B; } .layout-chess > header, .layout-chess > footer { @@ -5175,16 +5153,6 @@ dfn { -ms-grid-column: 1; } .layout-blastila > div :nth-child(4) { -ms-grid-row: 2; - -ms-grid-column: 2; } - .layout-blastila--right > div > section { - -ms-grid-row: 1; - -ms-grid-column: 1; - -ms-grid-column-span: 2; } - .layout-blastila--right > div :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 1; } - .layout-blastila--right > div :nth-child(4) { - -ms-grid-row: 2; -ms-grid-column: 2; } .layout-cuttoner > div > section > header { -ms-grid-row: 1; diff --git a/core/scss/layout/grid/three-column/_blastila-right.scss b/core/scss/layout/grid/three-column/_blastila-right.scss index 0802c73e9..4f013289b 100644 --- a/core/scss/layout/grid/three-column/_blastila-right.scss +++ b/core/scss/layout/grid/three-column/_blastila-right.scss @@ -6,30 +6,9 @@ .layout-blastila--right { > div { - - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: auto; grid-template-areas: "head head sidebar" "A B sidebar"; - - > aside { - grid-area: sidebar; - } - - > section { - grid-area: head; - } - - :nth-child(3) { - grid-area: A; - } - - :nth-child(4) { - grid-area: B; - } - - } } From b6b5e9f876d825daa3abed9dc9add26261c9ed22 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Tue, 11 Dec 2018 12:00:15 -0800 Subject: [PATCH 096/123] Flexbox layouts --- core/css/decanter.css | 1698 +---------------- .../flex/three-column/_blastila-right.scss | 2 +- .../layout/flex/three-column/_blastila.scss | 2 +- .../scss/layout/flex/three-column/_chess.scss | 25 - .../flex/three-column/_cuttoner-right.scss | 16 +- .../layout/flex/three-column/_cuttoner.scss | 39 +- .../flex/three-column/_percles-right.scss | 15 +- .../layout/flex/three-column/_percles.scss | 23 +- .../scss/layout/flex/three-column/_robot.scss | 21 - .../flex/three-column/_space-invader.scss | 16 - .../three-column/_sunset-delorean-right.scss | 22 +- .../flex/three-column/_sunset-delorean.scss | 27 +- .../flex/three-column/_thions-bottom.scss | 12 +- .../layout/flex/three-column/_thions.scss | 35 +- .../flex/three-column/_valmer-right.scss | 15 +- .../layout/flex/three-column/_valmer.scss | 23 +- .../layout/grid/three-column/_blastila.scss | 2 +- .../grid/three-column/_cuttoner-right.scss | 4 +- .../layout/grid/three-column/_cuttoner.scss | 6 +- .../layout/grid/three-column/_percles.scss | 2 +- .../layout/grid/three-column/_thions.scss | 2 +- .../layout/grid/three-column/_valmer.scss | 2 +- .../layout/flex/one-column/basic/basic.twig | 12 +- .../flex/three-column/blastila/blastila.twig | 6 +- .../layout/flex/three-column/chess/chess.twig | 26 +- .../flex/three-column/cuttoner/cuttoner.twig | 61 +- .../flex/three-column/percles/percles.twig | 14 +- .../layout/flex/three-column/robot/robot.twig | 10 +- .../space-invader/space-invader.twig | 10 +- .../sunset-delorean/sunset-delorean.twig | 58 +- .../flex/three-column/thions/thions.twig | 13 +- .../flex/three-column/valmer/valmer.twig | 25 +- .../layout/flex/two-column/donies/donies.twig | 12 +- .../flex/two-column/frogger/frogger.twig | 12 +- .../layout/flex/two-column/pacman/pacman.twig | 12 +- .../layout/flex/two-column/plakes/plakes.twig | 6 +- .../layout/flex/two-column/wedge/wedge.twig | 2 +- .../grid/three-column/cuttoner/cuttoner.twig | 12 +- .../layout/grid/two-column/wedge/wedge.twig | 2 +- package-lock.json | 8 +- 40 files changed, 256 insertions(+), 2054 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index dd5b3c7bc..b9170a62b 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1954,1654 +1954,52 @@ dfn { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -.layout-chess > header, -.layout-chess > footer { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-chess > header, - .layout-chess > footer { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-chess > header, - .layout-chess > footer { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-chess > header, - .layout-chess > footer { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-chess > header, - .layout-chess > footer { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-chess > header, - .layout-chess > footer { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-chess > header, - .layout-chess > footer { - max-width: 1462px; } } - -.layout-chess > section { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-chess > section { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-chess > section { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-chess > section { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-chess > section { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-chess > section { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-chess > section { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-chess > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 32px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 32px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-chess > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 32px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 32px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-chess > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 36px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 36px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-chess > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 36px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 36px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-chess > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 36px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 36px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-chess > section > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-chess > section { - grid-column-gap: 38px; } - .layout-chess > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-chess > section > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-chess > section { - grid-row-gap: 38px; } - .layout-chess > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-chess > section { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-chess > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-chess > section > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 992px) { - .layout-chess > section { - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-chess > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-chess > section > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-chess > section > *:nth-child(3) { - -ms-grid-column: 3; } } - -.layout-cuttoner > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-cuttoner > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-cuttoner > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-cuttoner > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-cuttoner > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-cuttoner > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-cuttoner > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 32px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 32px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 32px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 32px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-cuttoner > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 36px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 36px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-cuttoner > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 36px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 36px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-cuttoner > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 36px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 36px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-cuttoner > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div { - grid-column-gap: 38px; } - .layout-cuttoner > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div { - grid-row-gap: 38px; } - .layout-cuttoner > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-cuttoner > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-cuttoner > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-cuttoner > div > *:nth-child(3) { - -ms-grid-column: 3; } } - @media only screen and (min-width: 0) { - .layout-cuttoner > div > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 32px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-cuttoner > div > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 36px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-cuttoner > div > section > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-cuttoner > div > section { - grid-column-gap: 38px; } - .layout-cuttoner > div > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-cuttoner > div > section > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-cuttoner > div > section { - grid-row-gap: 38px; } - .layout-cuttoner > div > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr; - grid-template-columns: 1fr 1fr; } - .layout-cuttoner > div > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-cuttoner > div > section > *:nth-child(2) { - -ms-grid-column: 2; } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > section > header, - .layout-cuttoner > div > section > footer { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } } - @media only screen and (min-width: 576px) { - .layout-cuttoner > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; } } - -@media only screen and (min-width: 576px) { - .layout-cuttoner--right > div > section { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; } } - -@media only screen and (min-width: 576px) { - .layout-cuttoner--right > div > aside { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } } - -.layout-percles > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-percles > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-percles > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-percles > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-percles > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-percles > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-percles > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-percles > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 32px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 32px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-percles > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 32px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 32px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-percles > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 36px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 36px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-percles > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 36px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 36px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-percles > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 36px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 36px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-percles > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-percles > div { - grid-column-gap: 38px; } - .layout-percles > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-percles > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-percles > div { - grid-row-gap: 38px; } - .layout-percles > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-percles > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-percles > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-percles > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-percles > div > *:nth-child(3) { - -ms-grid-column: 3; } } - > .layout-percles > div:first-child { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; } - .layout-percles > div > header { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; } - -.layout-percles--right > div > :first-child { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - -.layout-percles--right > div > header { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; - -ms-grid-column: 1; } - -.layout-robot > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-robot > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-robot > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-robot > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-robot > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-robot > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-robot > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-robot > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 32px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 32px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-robot > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 32px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 32px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-robot > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 36px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 36px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-robot > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 36px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 36px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-robot > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 36px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 36px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-robot > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-robot > div { - grid-column-gap: 38px; } - .layout-robot > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-robot > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-robot > div { - grid-row-gap: 38px; } - .layout-robot > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-robot > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout-robot > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-robot > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-robot > div > *:nth-child(3) { - -ms-grid-column: 3; } - .layout-robot > div > *:nth-child(4) { - -ms-grid-column: 4; } } - .layout-robot > div > header { - -ms-grid-column: 1; - grid-column: 1 / span 4; - -ms-grid-column-span: 4; } - .layout-robot > div > div:nth-of-type(2) { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; } - -.layout-space-invader > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-space-invader > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-space-invader > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-space-invader > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-space-invader > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-space-invader > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-space-invader > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-space-invader > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 32px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 32px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-space-invader > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 32px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 32px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-space-invader > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 36px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 36px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-space-invader > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 36px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 36px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-space-invader > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 36px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 36px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-space-invader > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-space-invader > div { - grid-column-gap: 38px; } - .layout-space-invader > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-space-invader > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-space-invader > div { - grid-row-gap: 38px; } - .layout-space-invader > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-space-invader > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-space-invader > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-space-invader > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-space-invader > div > *:nth-child(3) { - -ms-grid-column: 3; } } - .layout-space-invader > div > header { - -ms-grid-column: 1; - grid-column: 1 / span 3; - -ms-grid-column-span: 3; } - -.layout-sunset-delorean > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-sunset-delorean > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-sunset-delorean > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-sunset-delorean > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-sunset-delorean > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-sunset-delorean > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-sunset-delorean > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-sunset-delorean > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 32px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 32px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-sunset-delorean > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 32px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 32px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-sunset-delorean > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-sunset-delorean > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-sunset-delorean > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 36px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-sunset-delorean > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-sunset-delorean > div { - grid-column-gap: 38px; } - .layout-sunset-delorean > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-sunset-delorean > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-sunset-delorean > div { - grid-row-gap: 38px; } - .layout-sunset-delorean > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-sunset-delorean > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; } - .layout-sunset-delorean > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-sunset-delorean > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-sunset-delorean > div > *:nth-child(3) { - -ms-grid-column: 3; } } - .layout-sunset-delorean > div > header { - -ms-grid-column: 2; - grid-column: 2 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - .layout-sunset-delorean > div > aside { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - .layout-sunset-delorean > div > section { - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-sunset-delorean--right > div > header { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - -.layout-sunset-delorean--right > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } - -.layout-sunset-delorean--right > div > section { - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; - -ms-grid-column: 1; } - -.layout-sunset-delorean--right > div section:nth-of-type(2) { - -ms-grid-column: 2; } - -.layout-thions > div { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-thions > div { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-thions > div { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-thions > div { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-thions > div { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-thions > div { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-thions > div { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-thions > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 32px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 32px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-thions > div > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 32px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 32px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-thions > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 36px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 36px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-thions > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 36px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 36px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-thions > div > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 36px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 36px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-thions > div > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-thions > div { - grid-column-gap: 38px; } - .layout-thions > div > * { - margin-right: 0; - margin-left: 0; } } - .layout-thions > div > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-thions > div { - grid-row-gap: 38px; } - .layout-thions > div > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-thions > div { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } - .layout-thions > div > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-thions > div > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-thions > div > *:nth-child(3) { - -ms-grid-column: 3; } - .layout-thions > div > *:nth-child(4) { - -ms-grid-column: 4; } - .layout-thions > div > *:nth-child(5) { - -ms-grid-column: 5; } - .layout-thions > div > *:nth-child(6) { - -ms-grid-column: 6; } - .layout-thions > div > *:nth-child(7) { - -ms-grid-column: 7; } - .layout-thions > div > *:nth-child(8) { - -ms-grid-column: 8; } - .layout-thions > div > *:nth-child(9) { - -ms-grid-column: 9; } - .layout-thions > div > *:nth-child(10) { - -ms-grid-column: 10; } - .layout-thions > div > *:nth-child(11) { - -ms-grid-column: 11; } - .layout-thions > div > *:nth-child(12) { - -ms-grid-column: 12; } } - .layout-thions > div > div:nth-of-type(1) { - -ms-grid-column: 1; - grid-column: 1 / span 6; - -ms-grid-column-span: 6; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - .layout-thions > div > div:nth-of-type(2) { - -ms-grid-column: 7; - grid-column: 7 / span 6; - -ms-grid-column-span: 6; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - .layout-thions > div > div:nth-of-type(3) { - -ms-grid-column: 1; - grid-column: 1 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - .layout-thions > div > div:nth-of-type(4) { - -ms-grid-column: 5; - grid-column: 5 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - .layout-thions > div > div:nth-of-type(5) { - -ms-grid-column: 9; - grid-column: 9 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-thions--bottom > div > div:nth-of-type(1) { - -ms-grid-column: 1; - grid-column: 1 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - -.layout-thions--bottom > div > div:nth-of-type(2) { - -ms-grid-column: 5; - grid-column: 5 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - -.layout-thions--bottom > div > div:nth-of-type(3) { - -ms-grid-column: 9; - grid-column: 9 / span 4; - -ms-grid-column-span: 4; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; } - -.layout-thions--bottom > div > div:nth-of-type(4) { - -ms-grid-column: 1; - grid-column: 1 / span 6; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } - -.layout-thions--bottom > div > div:nth-of-type(5) { - -ms-grid-column: 7; - grid-column: 7 / span 6; - -ms-grid-column-span: 6; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } +.layout-cuttoner-flex--right > div { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } -.layout-valmer > header, -.layout-valmer > footer, -.layout-valmer > section { - margin: 0 auto; } - @media only screen and (min-width: 0) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: -32px; } } - @media only screen and (min-width: 576px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: 544px; } } - @media only screen and (min-width: 768px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: 732px; } } - @media only screen and (min-width: 992px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: 956px; } } - @media only screen and (min-width: 1200px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: 1164px; } } - @media only screen and (min-width: 1500px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - max-width: 1462px; } } - @media only screen and (min-width: 0) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 32px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 32px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 576px) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 16px; - margin-left: 16px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 32px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 16px; - margin-bottom: 16px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 32px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 768px) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 992px) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1200px) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 18px; - margin-left: 18px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 18px; - margin-bottom: 18px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 36px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } - @media only screen and (min-width: 1500px) { - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 19px; - margin-left: 19px; } - @supports (grid-column-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-column-gap: 38px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-right: 0; - margin-left: 0; } } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 19px; - margin-bottom: 19px; } - @supports (grid-row-gap: 20px) { - .layout-valmer > header, - .layout-valmer > footer, - .layout-valmer > section { - grid-row-gap: 38px; } - .layout-valmer > header > *, - .layout-valmer > footer > *, - .layout-valmer > section > * { - margin-top: 0; - margin-bottom: 0; } } } +.layout-percles-flex--right header { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; } -@media only screen and (min-width: 576px) { - .layout-valmer > section { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; } - .layout-valmer > section > *:nth-child(1) { - -ms-grid-column: 1; } - .layout-valmer > section > *:nth-child(2) { - -ms-grid-column: 2; } - .layout-valmer > section > *:nth-child(3) { - -ms-grid-column: 3; } - .layout-valmer > section > *:nth-child(4) { - -ms-grid-column: 4; } } +.layout-sunset-delorean-flex--right > div { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } -.layout-valmer > section > div:nth-of-type(1) { - -ms-grid-column: 1; - grid-column: 1 / span 2; - -ms-grid-column-span: 2; } +.layout-thions-flex--bottom > div > div:nth-of-type(1) { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; } -.layout-valmer--right > section > div:nth-of-type(1) { - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; } +.layout-thions-flex--bottom > div > div:nth-of-type(2) { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; } -.layout-valmer--right > section > div:nth-of-type(2) { - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; } +.layout-thions-flex--bottom > div > div:nth-of-type(3) { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } -.layout-valmer--right > section > div:nth-of-type(3) { - -ms-grid-column: 3; - grid-column: 3 / span 2; - -ms-grid-column-span: 2; } +.layout-thions-flex--bottom > div > div:nth-of-type(4) { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + +.layout-thions-flex--bottom > div > div:nth-of-type(5) { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; } + +.layout-valmer-flex--right section > div:nth-of-type(1) { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } .layout-pacman-flex--right > div { -webkit-box-orient: horizontal; @@ -5136,8 +3534,8 @@ dfn { .layout-cuttoner > div > section { display: grid; display: -ms-grid; - -ms-grid-column: 1; - grid-column: 1 / span 2; + -ms-grid-column: 2; + grid-column: 2 / span 2; -ms-grid-column-span: 2; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; @@ -5188,20 +3586,20 @@ dfn { -ms-grid-column: 3; } @media only screen and (min-width: 576px) { .layout-cuttoner > div > aside { - -ms-grid-column: 3; - grid-column: 3 / span 1; + -ms-grid-column: 1; + grid-column: 1 / span 1; -ms-grid-column-span: 1; } } @media only screen and (min-width: 576px) { .layout-cuttoner--right > div > section { - -ms-grid-column: 2; - grid-column: 2 / span 2; + -ms-grid-column: 1; + grid-column: 1 / span 2; -ms-grid-column-span: 2; } } @media only screen and (min-width: 576px) { .layout-cuttoner--right > div > aside { - -ms-grid-column: 1; - grid-column: 1 / span 1; + -ms-grid-column: 3; + grid-column: 3 / span 1; -ms-grid-column-span: 1; -ms-grid-row: 1; grid-row: 1 / span 1; diff --git a/core/scss/layout/flex/three-column/_blastila-right.scss b/core/scss/layout/flex/three-column/_blastila-right.scss index c0543e30a..1849d23d7 100644 --- a/core/scss/layout/flex/three-column/_blastila-right.scss +++ b/core/scss/layout/flex/three-column/_blastila-right.scss @@ -4,7 +4,7 @@ // Blastila Right - Variant // .layout-blastila-flex--right { - >div { + > div { flex-direction: row-reverse; } } diff --git a/core/scss/layout/flex/three-column/_blastila.scss b/core/scss/layout/flex/three-column/_blastila.scss index 4f3a99254..05695e4ca 100644 --- a/core/scss/layout/flex/three-column/_blastila.scss +++ b/core/scss/layout/flex/three-column/_blastila.scss @@ -6,7 +6,7 @@ // A complext three column layout with a centered max width header a left // sidebar and a mini two column with header content area. // -// .layout-blastila-flex--right - Right sidebar version +// .layout-blastila-flex--right - Right sidebar variant // // Markup: ../../../../../templates/layout/flex/three-column/blastila/blastila.twig // diff --git a/core/scss/layout/flex/three-column/_chess.scss b/core/scss/layout/flex/three-column/_chess.scss index 59edf7d40..80e410d68 100644 --- a/core/scss/layout/flex/three-column/_chess.scss +++ b/core/scss/layout/flex/three-column/_chess.scss @@ -10,28 +10,3 @@ // // Style guide: Layout.Flex.3Column.Chess // -.layout-chess { - - > header, - > footer { - @include centered-column; - } - - > section { - @include centered-column; - @include responsive-grid-gap; - - // Enable the grid on md and higher. - // let everything be one column on xs and sm. - @include grid-media('md') { - @include display-grid; - @include grid-columns(1fr 1fr); - } - - @include grid-media('lg') { - @include grid-columns(1fr 1fr 1fr); - } - - } - -} diff --git a/core/scss/layout/flex/three-column/_cuttoner-right.scss b/core/scss/layout/flex/three-column/_cuttoner-right.scss index 3a6c3a5e2..cebefcfe4 100644 --- a/core/scss/layout/flex/three-column/_cuttoner-right.scss +++ b/core/scss/layout/flex/three-column/_cuttoner-right.scss @@ -3,20 +3,8 @@ // // Cuttoner Right - Variant // -.layout-cuttoner--right { - +.layout-cuttoner-flex--right { > div { - > section { - @include grid-media('sm') { - @include grid-item-spans(2, span 2); - } - } - - > aside { - @include grid-media('sm') { - @include grid-item-spans(1, span 1, 1, span 1); - } - } + flex-direction: row-reverse; } - } diff --git a/core/scss/layout/flex/three-column/_cuttoner.scss b/core/scss/layout/flex/three-column/_cuttoner.scss index 5bcd73920..e90e56839 100644 --- a/core/scss/layout/flex/three-column/_cuttoner.scss +++ b/core/scss/layout/flex/three-column/_cuttoner.scss @@ -6,44 +6,9 @@ // A complext three column layout with a sidebar and a 2 column content area // with header and footer. // +// .layout-blastila-flex--right - Right sidebar variant +// // Markup: ../../../../../templates/layout/flex/three-column/cuttoner/cuttoner.twig // // Style guide: Layout.Flex.3Column.Cuttoner // -.layout-cuttoner { - - > div { - @include centered-column; - @include responsive-grid-gap; - - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > section { - @include responsive-grid-gap; - - @include grid-media('sm') { - @include grid-item-spans(1, span 2); - @include display-grid; - @include grid-columns(1fr 1fr); - } - - > header, - > footer { - @include grid-media('sm') { - @include grid-item-spans(1, span 2); - } - } - } - - > aside { - @include grid-media('sm') { - @include grid-item-spans(3, span 1); - } - } - - } - -} diff --git a/core/scss/layout/flex/three-column/_percles-right.scss b/core/scss/layout/flex/three-column/_percles-right.scss index d0f573ea7..141aec507 100644 --- a/core/scss/layout/flex/three-column/_percles-right.scss +++ b/core/scss/layout/flex/three-column/_percles-right.scss @@ -3,17 +3,8 @@ // // Percles Right - Variant // -.layout-percles--right { - - > div { - > :first-child { - @include grid-item-spans(3, span 1, 1, span 1); - } - - > header { - @include grid-item-spans(1, span 2, 1, span 1); - -ms-grid-column: 1; - } +.layout-percles-flex--right { + header { + order: -1; } - } diff --git a/core/scss/layout/flex/three-column/_percles.scss b/core/scss/layout/flex/three-column/_percles.scss index b1379287f..1d548dfde 100644 --- a/core/scss/layout/flex/three-column/_percles.scss +++ b/core/scss/layout/flex/three-column/_percles.scss @@ -5,28 +5,9 @@ // // A complext three column layout // +// .layout-percles-flex--right - Right sidebar variant +// // Markup: ../../../../../templates/layout/flex/three-column/percles/percles.twig // // Style guide: Layout.Flex.3Column.Percles // -.layout-percles { - - > div { - @include centered-column; - @include responsive-grid-gap; - - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > &:first-child { - @include grid-item-spans(1, span 1); - } - - > header { - @include grid-item-spans(2, span 2); - } - } - -} diff --git a/core/scss/layout/flex/three-column/_robot.scss b/core/scss/layout/flex/three-column/_robot.scss index e2df91127..a2616a9ab 100644 --- a/core/scss/layout/flex/three-column/_robot.scss +++ b/core/scss/layout/flex/three-column/_robot.scss @@ -9,24 +9,3 @@ // // Style guide: Layout.Flex.3Column.Robot // -.layout-robot { - > div { - @include centered-column; - @include responsive-grid-gap; - - // Enable grid after sm sizes. - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr 1fr); - } - - > header { - @include grid-item-spans(1, span 4); - } - - > div:nth-of-type(2) { - @include grid-item-spans(2, span 2); - } - - } -} diff --git a/core/scss/layout/flex/three-column/_space-invader.scss b/core/scss/layout/flex/three-column/_space-invader.scss index 5003b42b9..038893bab 100644 --- a/core/scss/layout/flex/three-column/_space-invader.scss +++ b/core/scss/layout/flex/three-column/_space-invader.scss @@ -9,19 +9,3 @@ // // Style guide: Layout.Flex.3Column.SpaceInvader // -.layout-space-invader { - > div { - @include centered-column; - @include responsive-grid-gap; - - // Enable grid after sm sizes. - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > header { - @include grid-item-spans(1, span 3); - } - } -} diff --git a/core/scss/layout/flex/three-column/_sunset-delorean-right.scss b/core/scss/layout/flex/three-column/_sunset-delorean-right.scss index ab066caaa..99800ba1c 100644 --- a/core/scss/layout/flex/three-column/_sunset-delorean-right.scss +++ b/core/scss/layout/flex/three-column/_sunset-delorean-right.scss @@ -3,26 +3,8 @@ // // Sunset Delorean Right - Variant // -.layout-sunset-delorean--right { - +.layout-sunset-delorean-flex--right { > div { - - > header { - @include grid-item-spans(1, span 2, 1, span 1); - } - - > aside { - @include grid-item-spans(3, span 1, 1, span 2); - } - - > section { - @include grid-item-spans(null, null, 2, span 1); - -ms-grid-column: 1; - } - - section:nth-of-type(2) { - -ms-grid-column: 2; - } - + flex-direction: row-reverse; } } diff --git a/core/scss/layout/flex/three-column/_sunset-delorean.scss b/core/scss/layout/flex/three-column/_sunset-delorean.scss index cc738f039..70a8ac605 100644 --- a/core/scss/layout/flex/three-column/_sunset-delorean.scss +++ b/core/scss/layout/flex/three-column/_sunset-delorean.scss @@ -5,32 +5,9 @@ // // A complext three column layout. // +// .layout-sunset-delorean-flex--right - Right sidebar variant +// // Markup: ../../../../../templates/layout/flex/three-column/sunset-delorean/sunset-delorean.twig // // Style guide: Layout.Flex.3Column.SunsetDelorean // -.layout-sunset-delorean { - > div { - @include centered-column; - @include responsive-grid-gap; - - // Enable grid after sm sizes. - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr); - } - - > header { - @include grid-item-spans(2, span 2, 1, span 1); - } - - > aside { - @include grid-item-spans(1, span 1, 1, span 2); - } - - > section { - @include grid-item-spans(null, null, 2, span 1); - } - - } -} diff --git a/core/scss/layout/flex/three-column/_thions-bottom.scss b/core/scss/layout/flex/three-column/_thions-bottom.scss index acf29ecbe..8aaf81d02 100644 --- a/core/scss/layout/flex/three-column/_thions-bottom.scss +++ b/core/scss/layout/flex/three-column/_thions-bottom.scss @@ -3,26 +3,26 @@ // // Thions Bottom - Variant // -.layout-thions--bottom { +.layout-thions-flex--bottom { > div { > div:nth-of-type(1) { - @include grid-item-spans(1, span 4, 1, span 1); + order: 5; } > div:nth-of-type(2) { - @include grid-item-spans(5, span 4, 1, span 1); + order: 4; } > div:nth-of-type(3) { - @include grid-item-spans(9, span 4, 1, span 1); + order: 3; } > div:nth-of-type(4) { - @include grid-item-spans(1, span 6, 2, span 1); + order: 2; } > div:nth-of-type(5) { - @include grid-item-spans(7, span 6, 2, span 1); + order: 1; } } } diff --git a/core/scss/layout/flex/three-column/_thions.scss b/core/scss/layout/flex/three-column/_thions.scss index 348ea372e..2231ad845 100644 --- a/core/scss/layout/flex/three-column/_thions.scss +++ b/core/scss/layout/flex/three-column/_thions.scss @@ -5,40 +5,9 @@ // // A complext three column layout. // +// .layout-thions-flex--bottom - A bottom heavy variant +// // Markup: ../../../../../templates/layout/flex/three-column/thions/thions.twig // // Style guide: Layout.Flex.3Column.Thions // -.layout-thions { - > div { - @include centered-column; - @include responsive-grid-gap; - - // Enable grid after sm sizes. - @include grid-media('sm') { - @include display-grid; - @include grid-columns; - } - - > div:nth-of-type(1) { - @include grid-item-spans(1, span 6, 1, span 1); - } - - > div:nth-of-type(2) { - @include grid-item-spans(7, span 6, 1, span 1); - } - - > div:nth-of-type(3) { - @include grid-item-spans(1, span 4, 2, span 1); - } - - > div:nth-of-type(4) { - @include grid-item-spans(5, span 4, 2, span 1); - } - - > div:nth-of-type(5) { - @include grid-item-spans(9, span 4, 2, span 1); - } - - } -} diff --git a/core/scss/layout/flex/three-column/_valmer-right.scss b/core/scss/layout/flex/three-column/_valmer-right.scss index 6ceb1301d..95eaaa2e8 100644 --- a/core/scss/layout/flex/three-column/_valmer-right.scss +++ b/core/scss/layout/flex/three-column/_valmer-right.scss @@ -3,19 +3,10 @@ // // Valmer Right - Variant // -.layout-valmer--right { - > section { - +.layout-valmer-flex--right { + section { > div:nth-of-type(1) { - @include grid-item-spans(1, span 1); - } - - > div:nth-of-type(2) { - @include grid-item-spans(2, span 1); - } - - > div:nth-of-type(3) { - @include grid-item-spans(3, span 2); + order: 3; } } } diff --git a/core/scss/layout/flex/three-column/_valmer.scss b/core/scss/layout/flex/three-column/_valmer.scss index 0560958e0..6a490958a 100644 --- a/core/scss/layout/flex/three-column/_valmer.scss +++ b/core/scss/layout/flex/three-column/_valmer.scss @@ -5,28 +5,9 @@ // // A complext three column layout. // +// .layout-valmer-flex--right - Right sidebar variant +// // Markup: ../../../../../templates/layout/flex/three-column/valmer/valmer.twig // // Style guide: Layout.Flex.3Column.Valmer // -.layout-valmer { - > header, - > footer, - > section { - @include centered-column; - @include responsive-grid-gap; - } - - > section { - // Enable grid after sm sizes. - @include grid-media('sm') { - @include display-grid; - @include grid-columns(1fr 1fr 1fr 1fr); - } - - > div:nth-of-type(1) { - @include grid-item-spans(1, span 2); - } - - } -} diff --git a/core/scss/layout/grid/three-column/_blastila.scss b/core/scss/layout/grid/three-column/_blastila.scss index cc3708b29..e17a3be7f 100644 --- a/core/scss/layout/grid/three-column/_blastila.scss +++ b/core/scss/layout/grid/three-column/_blastila.scss @@ -6,7 +6,7 @@ // A complext three column layout with a centered max width header a left // sidebar and a mini two column with header content area. // -// .layout-blastila--right - Right sidebar version +// .layout-blastila--right - Right sidebar variant // // Markup: ../../../../../templates/layout/grid/three-column/blastila/blastila.twig // diff --git a/core/scss/layout/grid/three-column/_cuttoner-right.scss b/core/scss/layout/grid/three-column/_cuttoner-right.scss index 3a6c3a5e2..b2fa19237 100644 --- a/core/scss/layout/grid/three-column/_cuttoner-right.scss +++ b/core/scss/layout/grid/three-column/_cuttoner-right.scss @@ -8,13 +8,13 @@ > div { > section { @include grid-media('sm') { - @include grid-item-spans(2, span 2); + @include grid-item-spans(1, span 2); } } > aside { @include grid-media('sm') { - @include grid-item-spans(1, span 1, 1, span 1); + @include grid-item-spans(3, span 1, 1, span 1); } } } diff --git a/core/scss/layout/grid/three-column/_cuttoner.scss b/core/scss/layout/grid/three-column/_cuttoner.scss index 0a94c2ac8..1ff02e767 100644 --- a/core/scss/layout/grid/three-column/_cuttoner.scss +++ b/core/scss/layout/grid/three-column/_cuttoner.scss @@ -6,7 +6,7 @@ // A complext three column layout with a sidebar and a 2 column content area // with header and footer. // -// .layout-cuttoner--right - Right sidebar variant. +// .layout-cuttoner--right - Right sidebar variant // // Markup: ../../../../../templates/layout/grid/three-column/cuttoner/cuttoner.twig // @@ -29,7 +29,7 @@ @include grid-media('sm') { @include display-grid; - @include grid-item-spans(1, span 2); + @include grid-item-spans(2, span 2); grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: @@ -58,7 +58,7 @@ > aside { @include grid-media('sm') { - @include grid-item-spans(3, span 1); + @include grid-item-spans(1, span 1); } -ms-grid-row: 1; -ms-grid-column: 3; diff --git a/core/scss/layout/grid/three-column/_percles.scss b/core/scss/layout/grid/three-column/_percles.scss index 125672e08..f09fe97f6 100644 --- a/core/scss/layout/grid/three-column/_percles.scss +++ b/core/scss/layout/grid/three-column/_percles.scss @@ -5,7 +5,7 @@ // // A complext three column layout // -// .layout-percles--right - Right side variant. +// .layout-percles--right - Right side variant // // Markup: ../../../../../templates/layout/grid/three-column/percles/percles.twig // diff --git a/core/scss/layout/grid/three-column/_thions.scss b/core/scss/layout/grid/three-column/_thions.scss index d37ad56e7..da9721583 100644 --- a/core/scss/layout/grid/three-column/_thions.scss +++ b/core/scss/layout/grid/three-column/_thions.scss @@ -5,7 +5,7 @@ // // A complext three column layout. // -// .layout-thions--bottom - A bottom heavy variant. +// .layout-thions--bottom - A bottom heavy variant // // Markup: ../../../../../templates/layout/grid/three-column/thions/thions.twig // diff --git a/core/scss/layout/grid/three-column/_valmer.scss b/core/scss/layout/grid/three-column/_valmer.scss index 559bd9775..7a65cac6a 100644 --- a/core/scss/layout/grid/three-column/_valmer.scss +++ b/core/scss/layout/grid/three-column/_valmer.scss @@ -5,7 +5,7 @@ // // A complext three column layout. // -// .layout-valmer--right - A right heavy variant. +// .layout-valmer--right - A right heavy variant // // Markup: ../../../../../templates/layout/grid/three-column/valmer/valmer.twig // diff --git a/core/templates/layout/flex/one-column/basic/basic.twig b/core/templates/layout/flex/one-column/basic/basic.twig index 42f70332e..d2d751322 100644 --- a/core/templates/layout/flex/one-column/basic/basic.twig +++ b/core/templates/layout/flex/one-column/basic/basic.twig @@ -14,8 +14,10 @@ {% if header is not empty %} -
    - {{ header }} +
    +
    + {{ header }} +
    {% endif %} @@ -28,8 +30,10 @@ {% endif %} {% if footer is not empty %} -