PLAT-238 add media query support ie8

profiles/cr/themes/custom/campaign_base/campaign_base.libraries.yml

@@ -2,7 +2,8 @@ global-css:
   css:
     theme:
       //fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic: { type: external }
-      css/styles.css: {}
+      css/styles.css: { weight: -20}
+      css/ie8.styles.css: { weight: -10, browsers: { IE: 'lte IE 8', '!IE': false }, minified: true }
 
 global-js:
   js:

profiles/cr/themes/custom/campaign_base/sass/components/Navigation/_main-nav.scss

@@ -14,7 +14,7 @@
   width: 100%;
   background: rgba($black, 0.95);
 
-  @include breakpoint($screen-md) {
+  @include breakpoint($screen-md, $no-query: true) {
     position: relative;
     top: 0;
     display: block!important;
@@ -29,10 +29,10 @@
       margin: 0;
       color: $white;
 
-      @include breakpoint($screen-md) {
+      @include breakpoint($screen-md, $no-query: true) {
         display: inline-block;
       }
-      @include breakpoint($screen-md) {
+      @include breakpoint($screen-md, $no-query: true) {
         margin: 0 20px;
       }
       a {
@@ -44,7 +44,7 @@
         font-size: 18px;
 
         @include transition(border-bottom 180ms);
-        @include breakpoint($screen-md) {
+        @include breakpoint($screen-md, $no-query: true) {
           padding: 20px 0 4px;
           font-size: 18px;
         }
@@ -53,7 +53,7 @@
           color: $black;
           background: #acaaa9;
 
-          @include breakpoint($screen-md) {
+          @include breakpoint($screen-md, $no-query: true) {
             border-bottom: 2px solid $black;
             background: transparent;
           }
@@ -63,7 +63,7 @@
           color: $black;
           background: $white;
 
-          @include breakpoint($screen-md) {
+          @include breakpoint($screen-md, $no-query: true) {
             color: $black;
             border-bottom: 2px solid $black;
             background: transparent;

profiles/cr/themes/custom/campaign_base/sass/components/paragraph--cr-rich-text/_paragraph-cr-rich-text.scss

@@ -21,15 +21,15 @@
   max-width: 1200px;
   margin: 20px auto 0;
   padding: 0 20px;
-	@include breakpoint($screen-md) {
+	@include breakpoint($screen-md, $no-query: true) {
 	  position: absolute;
 	  right: 0;
 	  left: 0;
 	  top: 100px;
 	}
 }
 .paragraph--cr-rich-text-paragraph__image {
-	@include breakpoint($screen-md) {
+	@include breakpoint($screen-md, $no-query: true) {
 	  height: 100%;
 	  width: 100%;
 	  position: absolute;
@@ -43,7 +43,7 @@
 }
 .paragraph--cr-rich-text-paragraph__body {
   @include span(12 of 12);
-  @include breakpoint($screen-md) {
+  @include breakpoint($screen-md, $no-query: true) {
     @include span(6 of 12);
   }
 }

profiles/cr/themes/custom/campaign_base/sass/components/paragraph--cr-single-message-row/_paragraph--cr-single-message-row.scss

@@ -58,7 +58,7 @@
   }
 }
 
-@include breakpoint($screen-lg) {
+@include breakpoint($screen-lg, $no-query: true) {
   /* General styles */
   .paragraph--cr-single-message-row {
     .paragraph--cr-single-message-row__image,

profiles/cr/themes/custom/campaign_base/sass/components/promo-header/_promo-header.scss

@@ -60,7 +60,7 @@
   color: $white;
 }
 .promo-header__bg-image {
-  @include breakpoint($screen-sm-max) {
+  @include breakpoint($screen-sm-max, $no-query: true) {
     position: absolute;
     width: 100%;
     height: 100%;

profiles/cr/themes/custom/campaign_base/sass/ie8.styles.scss

@@ -0,0 +1,15 @@
+// Styles for IE 8 and lower.
+
+// Set the legacy IE support variables. These override the !default values set
+// in _init.scss.
+$legacy-support-for-ie6 : false;
+$legacy-support-for-ie7 : false;
+$legacy-support-for-ie8 : true;
+
+// Force the breakpoint mixin to discard all media queries except ones with
+// $no-query set to true. Since we use the default values in styles.scss,
+// we don't need to set these in _init.scss.
+$breakpoint-no-queries  : true;
+$breakpoint-no-query-fallbacks : true;
+
+@import "styles";

profiles/cr/themes/custom/campaign_base/sass/layout/_views.scss

@@ -99,15 +99,15 @@
 .cw-region {
   article.cw-article--small {
     @include span(12);
-    @include breakpoint($screen-md) {
+    @include breakpoint($screen-md, $no-query: true) {
       @include span(4);
     }
   }
 }
 .cw-region {
   article.cw-article--medium {
     @include span(12);
-    @include breakpoint($screen-md) {
+    @include breakpoint($screen-md, $no-query: true) {
       @include span(6);
     }
   }
@@ -121,13 +121,13 @@
       margin: 0;
     }
     .cw-article__image {
-      @include breakpoint($screen-md) {
+      @include breakpoint($screen-md, $no-query: true) {
         @include span(8 no-gutter wide);
         margin-left: gutter();
       }
     }
     .cw-article__body {
-      @include breakpoint($screen-md) {
+      @include breakpoint($screen-md, $no-query: true) {
         @include span(4 no-gutter last);
         margin-right: gutter();
       }

profiles/cr/themes/custom/campaign_base/sass/styles.scss

@@ -6,6 +6,7 @@
 // Import the compass helpers/mixins
 // Please utilize these as much as possible. They are very handy.
 // For more info please see: http://compass-style.org/reference/compass/
+@import "compass/support";
 @import "compass/reset";
 @import "compass/css3";
 @import "compass/utilities";