Merge pull request #7 from edx/HarryRein/bootstrap-v4-2

Upgrading to 0.2.1

Author: andy-armstrong

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edx-bootstrap",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The Bootstrap theme for Open edX",
   "license": "Apache-2.0",
   "repository": {

samples/edx/dashboard.html

@@ -28,7 +28,7 @@ <h1>Dashboard</h1>
 
             <h2 class="mb-4">Courses</h2>
 
-            <h4>In-Progress</h4>
+            <h3>In-Progress</h3>
             <div class="mb-5">
                 <div class="card mb-2 p-4">
                     <div class="card-block">

sass/edx/_variables.scss

@@ -78,6 +78,12 @@ $theme-colors: map-merge((
   darkest: $black
 ), $theme-colors);
 
+// Set specific theme colors for use in functions
+$theme-color-primary: theme-color("primary");
+$theme-color-inverse: theme-color("inverse");
+$theme-color-darker: theme-color("darker");
+$theme-color-darkest: theme-color("darkest");
+
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
 
@@ -312,9 +318,9 @@ $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba(theme-color("inverse"),.15), 0 1px 1px rgba(theme-color("darkest"),.075) !default;
-$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba(theme-color("darkest"),.125) !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse,.15), 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$btn-focus-box-shadow:           0 0 0 3px rgba($theme-color-primary, .25) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest,.125) !default;
 
 $btn-link-disabled-color:        theme-colors("disabled") !default;
 
@@ -334,9 +340,9 @@ $input-bg:                       theme-color("inverse") !default;
 $input-disabled-bg:              theme-color("light") !default;
 
 $input-color:                    theme-color("secondary") !default;
-$input-border-color:             rgba(theme-color("darkest"),.15) !default;
+$input-border-color:             rgba($theme-color-darkest,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
-$input-box-shadow:               inset 0 1px 1px rgba(theme-color("darkest"),.075) !default;
+$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest,.075) !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
@@ -471,13 +477,13 @@ $dropdown-min-width:             10rem !default;
 $dropdown-padding-y:             .5rem !default;
 $dropdown-spacer:                .125rem !default;
 $dropdown-bg:                    theme-color("inverse") !default;
-$dropdown-border-color:          rgba(theme-color("darkest"),.15) !default;
+$dropdown-border-color:          rgba($theme-color-darkest,.15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            theme-color("light") !default;
-$dropdown-box-shadow:            0 .5rem 1rem rgba(theme-color("darkest"),.175) !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest,.175) !default;
 
 $dropdown-link-color:            theme-color("darker") !default;
-$dropdown-link-hover-color:      darken(theme-color("darker"), 5%) !default;
+$dropdown-link-hover-color:      darken($theme-color-darker, 5%) !default;
 $dropdown-link-hover-bg:         theme-color("lightest") !default;
 
 $dropdown-link-active-color:     $component-active-color !default;

sass/open-edx/_variables.scss

@@ -78,10 +78,15 @@ $theme-colors: map-merge((
   darkest: $black
 ), $theme-colors);
 
+// Set specific theme colors for use in functions
+$theme-color-primary: theme-color("primary");
+$theme-color-inverse: theme-color("inverse");
+$theme-color-darker: theme-color("darker");
+$theme-color-darkest: theme-color("darkest");
+
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
 
-
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
@@ -312,9 +317,9 @@ $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba(theme-color("inverse"),.15), 0 1px 1px rgba(theme-color("darkest"),.075) !default;
-$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba(theme-color("darkest"),.125) !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse,.15), 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$btn-focus-box-shadow:           0 0 0 3px rgba($theme-color-primary, .25) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest,.125) !default;
 
 $btn-link-disabled-color:        theme-colors("disabled") !default;
 
@@ -334,9 +339,9 @@ $input-bg:                       $white !default;
 $input-disabled-bg:              theme-color("light") !default;
 
 $input-color:                    $gray-700 !default;
-$input-border-color:             rgba(theme-color("darkest"),.15) !default;
+$input-border-color:             rgba($theme-color-darkest,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
-$input-box-shadow:               inset 0 1px 1px rgba(theme-color("darkest"),.075) !default;
+$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest,.075) !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
@@ -471,13 +476,13 @@ $dropdown-min-width:             10rem !default;
 $dropdown-padding-y:             .5rem !default;
 $dropdown-spacer:                .125rem !default;
 $dropdown-bg:                    $white !default;
-$dropdown-border-color:          rgba(theme-color("darkest"),.15) !default;
+$dropdown-border-color:          rgba($theme-color-darkest,.15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            theme-color("light") !default;
-$dropdown-box-shadow:            0 .5rem 1rem rgba(theme-color("darkest"),.175) !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest,.175) !default;
 
 $dropdown-link-color:            theme-color("darkest") !default;
-$dropdown-link-hover-color:      darken(theme-color("darkest"), 5%) !default;
+$dropdown-link-hover-color:      darken($theme-color-darkest, 5%) !default;
 $dropdown-link-hover-bg:         theme-color("lightest") !default;
 
 $dropdown-link-active-color:     $component-active-color !default;