From ded6c4dbb020ae0f04b740afbd33e480605100b0 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 21 Apr 2015 16:41:45 -0400
Subject: [PATCH] fix: resolving edx.org and Open edX breakpoint clash *
 simplifying edx.org breakpoints to use min-width * creating -bp-* centric
 Sass variables * converting all existing edx.org centric media queries to use
 new Sass variables

ECOM-1457
---
 lms/static/sass/base/_grid-settings.scss | 20 ++++++++++++++------
 lms/static/sass/shared/_footer.scss      |  4 ++--
 lms/static/sass/shared/_header.scss      |  4 ++--
 lms/static/sass/views/_verification.scss |  4 ++--
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/lms/static/sass/base/_grid-settings.scss b/lms/static/sass/base/_grid-settings.scss
index 3ae64b02ee..1722748a53 100644
--- a/lms/static/sass/base/_grid-settings.scss
+++ b/lms/static/sass/base/_grid-settings.scss
@@ -1,16 +1,24 @@
-@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
+@import "neat/neat-helpers";
 
-/* Change the grid settings */
+// Change the grid settings
 $max-width: 1200px;
-/* Override the default global box-sizing */
+
+// Override the default global box-sizing
 $border-box-sizing: false;
-/* Grid width variables */
+
+// Grid width variables
 $large-min-width: 769px;
 
-
-/* Breakpoints */
+// breakpoints
 $bp-tiny: new-breakpoint(max-width 320px 4);
 $bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
 $bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
 $bp-large: new-breakpoint(min-width $large-min-width max-width 979px, 12);
 $bp-huge:  new-breakpoint(min-width 980px 12);
+
+// edX-centric breakpoints (to be temporarily used with edx.org features only)
+$edx-bp-tiny: new-breakpoint(max-width 320px 4);
+$edx-bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
+$edx-bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
+$edx-bp-large: new-breakpoint(min-width $large-min-width 12);
+$edx-bp-huge:  new-breakpoint(min-width 980px 12);
diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index 502592f767..a797a8a48a 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -445,10 +445,10 @@ $edx-footer-bg-color: rgb(252,252,252);
       @include span-columns(12);
     }
 
-    @include media( $bp-medium ) {
+    @include media( $edx-bp-medium ) {
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .footer-about {
         @include span-columns(6);
       }
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 907207fae0..ea72a3582f 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -765,7 +765,7 @@ header.global-new {
       }
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .wrapper-header {
         width: 100%;
         min-width: 800px;
@@ -828,7 +828,7 @@ header.global-new {
       }
     }
 
-    @include media( $bp-huge ) {
+    @include media( $edx-bp-huge ) {
       .wrapper-header {
         padding: 17px 0;
       }
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index cb93181cb7..58904c298f 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -1431,7 +1431,7 @@
       }
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .contribution-options {
         .field {
           width: auto;
@@ -1454,7 +1454,7 @@
       }
     }
 
-    @include media( $bp-huge ) {
+    @include media( $edx-bp-huge ) {
       .register-choice {
         .list-actions {
           float: right;