[SDPA-2594] Hero Banner background position. (#478)

* [SDPA-2594] WIP - Hero Banner background position updates. * [SDPA-2594] Hero Banner background position. * Use grid and layout variables to calculate background position. * Move scss variables into an array / map to reduce repetition.
dpc-sdp · Aug 14, 2019 · e10fe6a · e10fe6a
1 parent fc66b5a
commit e10fe6a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 32 deletions.
diff --git a/packages/components/Molecules/Layout/PageLayout.vue b/packages/components/Molecules/Layout/PageLayout.vue
@@ -143,11 +143,6 @@ $rpl-search-back-to-top-offset: 72px / 2;
 
   @media (min-width: 1900px) {
     background-position: left -13rem;
-    background-size: 40rem;
-  }
-
-  @include rpl_breakpoint(xxxl) {
-    background-position: left -13rem;
   }
 
   @include rpl_print {

diff --git a/packages/components/Organisms/HeroBanner/HeroBanner.vue b/packages/components/Organisms/HeroBanner/HeroBanner.vue
@@ -160,39 +160,66 @@ export default {
 
   $rpl-hero-banner-left-padding: rem(60px) - $rpl-component-gutter-l;
 
+  // Background graphic positioning - Set positioning for a breakpoint:
+  //  - pos: 'edge / right' - Edge starts graphic at right screen edge.
+  //  - size: The graphic size. This matches the top layout graphic.
+  //  - gutter: Edge only. Defines space between container & screen edge.
+  //  - v-offset: Edge & Right. Additional vertical offset to place on graphic.
+  //  - h-offset: Edge only. Additional horizontal offset to place on graphic.
+  $rpl-hero-banner-background-graphic-links-overlap: rem(100px) !default;
+  $rpl-hero-banner-background-graphic-gutter-xl: '((100vw - #{map-get(map-get($rpl-layout, 'site_max_width'), 'xl')})/2)';
+  $rpl-hero-banner-background-graphic-v-offset-xxl: rem(-68px);
+  $rpl-hero-banner-background-graphic: (
+    'xs': ('pos': 'right', 'size': 18rem, 'v-offset': ($rpl-space * -5)),
+    's': ('pos': 'edge', 'size': 20rem, 'gutter': $rpl-component-padding-xs, 'v-offset': rem(-16px)),
+    'm': ('pos': 'edge', 'gutter': map-get(map-get($rpl-layout, 'site_padding'), 'm')),
+    'l': ('pos': 'edge', 'gutter': map-get(map-get($rpl-layout, 'site_padding'), 'l')),
+    'xl': ('pos': 'edge', 'gutter': $rpl-hero-banner-background-graphic-gutter-xl),
+    '1490px': ('pos': 'right'),
+    'xxl': ('pos': 'edge', 'size': 40rem, 'gutter': $rpl-hero-banner-background-graphic-gutter-xl, 'h-offset': rem(33px), 'v-offset': $rpl-hero-banner-background-graphic-v-offset-xxl),
+    '2072px': ('pos': 'right', 'v-offset': $rpl-hero-banner-background-graphic-v-offset-xxl),
+    'xxxl': ('pos': 'right', 'v-offset': $rpl-hero-banner-background-graphic-v-offset-xxl),
+    '2660px': ('pos': 'right')
+  ) !default;
+
+  @mixin rpl_position_background_graphic($vars) {
+    $pos: map-get($vars, 'pos');
+    $size: map-get($vars, 'size');
+    $gutter: map-get($vars, 'gutter');
+    $h-offset: map-get($vars, 'h-offset');
+    $v-offset: map-get($vars, 'v-offset');
+    @if $size {
+      background-size: $size;
+    }
+    @if $pos == 'edge' {
+      $static-offset: $rpl-hero-banner-background-graphic-links-overlap;
+      @if $h-offset {
+        $static-offset: $static-offset + $h-offset;
+      }
+      $left-offset: calc(100vw - #{$gutter} - #{$static-offset});
+      background-position: left #{$left-offset} bottom #{$v-offset};
+    } @else {
+      background-position: right bottom #{$v-offset};
+    }
+  }
+
   .rpl-hero-banner {
     $root: &;
     @include rpl_mobile_padding;
     position: relative;
     background-repeat: no-repeat;
-    background-position: right -3.75rem bottom -1rem;
-    background-size: 18rem;
-
-    @include rpl_breakpoint('s') {
-      background-position: right -1rem bottom -1.5rem;
-    }
-
-    @include rpl_breakpoint('m') {
-      background-position: right -20rem bottom -3rem;
-      background-size: 40rem;
-      border-bottom: $rpl-hero-banner-border;
-    }
 
-    @include rpl_breakpoint('l') {
-      background-position: right -20rem bottom -5rem;
-      background-size: 50rem;
-    }
-
-    @include rpl_breakpoint('xl') {
-      background-position: right -30rem bottom -4rem;
-    }
-
-    @include rpl_breakpoint('xxl') {
-      background-position: right -10rem bottom -5rem;
-    }
-
-    @include rpl_breakpoint('xxxl') {
-      background-position: right bottom -2rem;
+    // Background graphic positions.
+    @each $bp, $vars in $rpl-hero-banner-background-graphic {
+      @if str-index($bp, 'px') {
+        @media screen and (min-width: $bp) {
+          @include rpl_position_background_graphic($vars);
+        }
+      } @else {
+        @include rpl_breakpoint($bp) {
+          @include rpl_position_background_graphic($vars);
+        }
+      }
     }
 
     @each $bp, $spacing in $rpl-hero-banner-vertical-spacing {