Revert "Merge pull request #111 from cb-talent-development/topic/EM-1…

…306-EM-1309-header-large" This reverts commit acadd82, reversing changes made to 9fcc41e.
cb-talent-development · Jul 14, 2017 · b8ad621 · b8ad621
1 parent 65a93d8
commit b8ad621
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 89 deletions.
diff --git a/sass/directives/00_variables/_sizing.scss b/sass/directives/00_variables/_sizing.scss
@@ -30,7 +30,6 @@ $base-spacing-xlarge: 70px;
 
 $section-padding: 70px;
 $section-padding--mobile: 50px;
-$header-padding: 70px;
 $container-edge-padding: 20px; // Use this if using an unconventional body container and still need the default left /right padding our .containers have (20px)
 
 // The following are old spacing values. *Do not use*
@@ -67,11 +66,11 @@ $visual-guide-image-medium: 275px;
 $visual-guide-image-small: 170px;
 
 // Header
-$header-height-home: 445px;
-$header-height-large: 455px;
+$header-height-large: 445px;
+$header-height-product: 455px;
 $header-top-bottom-padding: 32px;
 $header-headline-bottom-margin: 15px;
-$header-width-normal: 650px;
+
 $header-height-small: 300px;
 
 // Tables

diff --git a/sass/directives/03_components/_headers.scss b/sass/directives/03_components/_headers.scss
@@ -13,14 +13,14 @@
     @include flex-direction(column);
     @include justify-content(center);
     @include align-items(flex-start);
-    position: absolute; // TODO this is all specific to background image + gradients
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
-    padding-top: $header-padding;
-    padding-bottom: $header-padding;
+    padding-top: $base-margin;
+    padding-bottom: $base-margin;
 
     @media only screen and (max-width: $small-screen-max) {
       position: relative;
@@ -50,11 +50,11 @@
 @mixin header-hero--home($background-image-large: nil, $background-image-medium: nil) {
   @include heading--hero;
   position: relative;
-  min-height: $header-height-home;
+  min-height: $header-height-large;
   overflow: hidden;
   background-color: $base-background-color;
   background-image: url(asset_path(#{$background-image-large}));
-  background-size: auto $header-height-home;
+  background-size: auto $header-height-large;
   background-position: right bottom;
   background-repeat: repeat no-repeat;
 
@@ -109,12 +109,14 @@
   }
 }
 
+@mixin header--large--background-image($background-image-large, $background-image-medium: nil) {
 @mixin header--large--background-image($background-image-large: nil, $background-image-medium: nil) {
+@mixin header--large($background-image-large: nil, $background-image-medium: nil) {
   @include header-hero;
   @include heading--hero;
-  min-height: $header-height-large;
+  min-height: $header-height-product;
   background-image: url(asset_path(#{$background-image-large}));
-  background-size: auto $header-height-large;
+  background-size: auto $header-height-product;
   background-position: right bottom;
   background-repeat: repeat no-repeat;
 
@@ -135,89 +137,14 @@
     left: 0;
     @include cbGradientTransparent;
   }
-}
 
-@mixin header--large--side-image {
-  @include heading--hero;
-  @include cbGradient;
-  position: relative;
-  overflow: hidden;
-  min-height: $header-height-large;
+}
 
+@mixin header--large--left {
   @media only screen and (max-width: $small-screen-max) {
-    min-height: unset;
-  }
-
-  &__content-wrap {
-    @include display(flex);
-    @include justify-content(space-between);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-
-    @media only screen and (max-width: $small-screen-max) {
-      position: relative;
-    }
+    background-image: none;
   }
 
-  &__text {
-    @include flex-grow(1);
-    @include flex-shrink(1);
-    @include flex-basis(auto);
-    @include display(flex);
-    @include flex-direction(column);
-    @include justify-content(center);
-    @include align-items(flex-start);
-    margin-right: $base-spacing-medium;
-    padding-top: $header-padding;
-    padding-bottom: $header-padding;
-
-    @media only screen and (max-width: $small-screen-max) {
-      position: relative;
-      padding-top: $header-top-bottom-padding;
-      padding-bottom: $header-top-bottom-padding;
-    }
-
-    h1 {
-      margin-top: 0;
-      margin-bottom: $header-headline-bottom-margin;
-      line-height: normal;
-      color: $hero-text-color-light;
-
-      @media only screen and (max-width: $small-screen-max) {
-        margin-bottom: 0;
-      }
-    }
-
-    p {
-      margin-bottom: 0;
-      color: $hero-text-color-light;
-    }
-  }
-
-  .header--large__image-wrap {
-    @include flex-grow(1);
-    @include flex-shrink(0);
-    @include flex-basis(auto);
-    @include display(flex);
-    @include justify-content(flex-end);
-    @include align-items(flex-end);
-
-    @media only screen and (max-width: $small-screen-max) {
-      display: none;
-    }
-  }
-
-  .header--large__image {
-    display: block;
-    max-width: 34.375rem;
-  }
-}
-
-@mixin header--large--left {
   &__text {
     p {
       @media only screen and (max-width: $small-screen-max) {