Updating themes for bootstrap.

LEARNER-1785

This story was to update the existing custom themes to work with the flexible bootstrap design. It also updates the red theme to more closely resemble the real implementation on openedx.

lms/static/sass/bootstrap/_footer.scss

@@ -4,7 +4,7 @@
 .wrapper-footer {
   box-shadow: 0 -1px 5px 0 $black-t0;
   border-top: 1px solid $navbar-light-disabled-color;
-  background-color: $body-bg;
+  background-color: $footer-bg;
   margin-top: $baseline/2;
   padding: $baseline;
   font-family: $font-family-sans-serif;

lms/static/sass/bootstrap/_navigation.scss

@@ -2,6 +2,7 @@
 .navigation-container {
   border-bottom: 1px solid $brand-primary;
   text-decoration: none;
+  background-color: $header-bg;
 
   &.slim {
     border-bottom: 1px solid $inverse-color;
@@ -29,7 +30,7 @@
     .nav-item {
       margin: 0 $baseline 0 0;
       font-weight: $font-weight-normal;
-      font-family: $font-family-sans-serif;
+      font-family: $font-family-base;
       text-transform: uppercase;
       list-style: none;
 
@@ -47,7 +48,7 @@
         display: none;
       }
 
-      @media (max-width: map-get($grid-breakpoints,lg)) {
+      @media (max-width: map-get($grid-breakpoints,md)) {
         &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
@@ -73,7 +74,7 @@
     }
 
     .navbar-right .nav-item {
-      @media (min-width: map-get($grid-breakpoints,lg)) {
+      @media (min-width: map-get($grid-breakpoints,md)) {
         .nav-link {
           text-transform: none;
           color: $brand-inverse;

lms/static/sass/bootstrap/_variables.scss

@@ -48,6 +48,9 @@ $black-t3:  rgba($black, 0.75) !default;
 $light-grey-transparent: rgba(200,200,200, 0) !default;
 $light-grey-solid: rgba(200,200,200, 1) !default;
 
+$header-bg: $white !default;
+$footer-bg: $white !default;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------

lms/static/sass/bootstrap/lms-main.scss

@@ -3,7 +3,7 @@
 // -----------------------------
 
 // Bootstrap theme
-@import 'edx-bootstrap/sass/open-edx/theme';
+@import 'bootstrap/theme';
 @import 'bootstrap/scss/bootstrap';
 
 // Variables
@@ -13,4 +13,3 @@
 @import 'footer';
 @import 'navigation';
 @import 'layouts';
-

lms/static/sass/partials/README.rst

@@ -0,0 +1,4 @@
+Any partials in this directory can be overridden by a theme by matching
+the directory structure as in lms/static/sass/partials.
+
+As an example, look at the red-theme.

lms/static/sass/partials/bootstrap/_theme.scss

@@ -0,0 +1,3 @@
+// Default bootstrap theming
+
+@import 'edx-bootstrap/sass/open-edx/theme';

lms/static/sass/shared-v2/_header.scss

@@ -5,7 +5,7 @@
     box-sizing: border-box;
     position: relative;
     width: 100%;
-    border-bottom: 1px solid $gray-l1;
+    border-bottom: 1px solid $header-border-color;
     box-shadow: 0 1px 5px 0 $shadow-l1;
     background: $header-bg;
 

lms/static/sass/shared-v2/_variables.scss

@@ -42,6 +42,8 @@ $black-t3:  rgba($black, 0.75) !default;
 $light-grey-transparent: rgba(200,200,200, 0) !default;
 $light-grey-solid: rgba(200,200,200, 1) !default;
 
+$header-border-color: $gray-l1 !default;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------