Resolves #832. Move to using BS4 shadow variables. Compared/updated relative to the BS4 dev branch

.travis.yml

@@ -11,6 +11,9 @@ node_js:
   - "4"
   - "5"
 before_install:
+  # Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
+  - export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
+
   - rvm install 2.2.2
   - rvm use 2.2.2 --fuzzy
   - export GEMDIR=$(rvm gemdir)
@@ -27,13 +30,6 @@ install:
   - npm install -g bower
   - bower install
 
-# Caching disabled due to https://github.com/travis-ci/travis-ci/issues/5092
-#cache:
-#  directories:
-#    - node_modules
-#    - vendor/bundle
-#    - bower-components
-
 addons:
   sauce_connect:
     username: "bmaterialdesign"

scss/_bootstrap.scss

@@ -1,4 +1,5 @@
 // Core variables and mixins
+@import "../bower_components/bootstrap/scss/custom";
 @import "../bower_components/bootstrap/scss/variables";
 @import "../bower_components/bootstrap/scss/mixins";
 

scss/_buttons.scss

@@ -12,7 +12,6 @@
   background-color: transparent;
   border: 0;
   outline: 0;
-  box-shadow: none;
   transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
   will-change: box-shadow, transform;
 
@@ -37,7 +36,7 @@
     @include hover-focus() {
       //border: 1px solid $blue;
       z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
-      @include shadow-4dp();
+      @include box-shadow($mdb-shadow-4dp);
     }
 
     // :active - momentary press: big shadow, release and it is gone
@@ -45,7 +44,7 @@
     &.active,
     &:active {
       z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
-      @include focus-shadow();
+      @include box-shadow($mdb-shadow-focus);
       //border: 1px solid $green;
     }
   }
@@ -56,7 +55,7 @@
   .btn-group-raised & {
 
     // baseline shadow
-    @include shadow-2dp();
+    @include box-shadow($mdb-shadow-2dp);
 
     // reverse any of the above for links
     &.btn-link {
@@ -207,7 +206,7 @@
   }
 
   &.btn-group-raised {
-    @include shadow-2dp();
+    @include box-shadow($mdb-shadow-2dp);
   }
 
   .btn + .btn,

scss/_cards.scss

@@ -4,7 +4,7 @@
   border: 0;
 
   // Cards have a default elevation of 2dp.
-  @include shadow-2dp();
+  @include box-shadow($mdb-shadow-2dp);
   @extend %std-font;
 
   // spec: see "Avatar, Title, and Subtitle area"
@@ -44,7 +44,7 @@
 
   &.mdb-card-raised {
     // Card raised elevation: 8dp
-    @include shadow-8dp();
+    @include box-shadow($mdb-shadow-8dp);
   }
 
   @include media-breakpoint-up(lg) {

scss/_core.scss

@@ -1,12 +1,10 @@
 // This is the main scss file, provided as an underscored file so that variable contexts remain in-tact when importing from the source.
 @import "variables";
-
+@import "bootstrap"; // FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
-// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
-@import "bootstrap";
-
 @import "mixins";
 
 @import "reboot";
+
 @import "layout";
 @import "buttons";
 @import "checkboxes";
@@ -23,7 +21,7 @@
 @import "popover";
 @import "cards";
 @import "modal";
-@import "menu";
+@import "dropdown";
 @import "drawer";
 @import "themes";
 

scss/_drawer.scss

@@ -19,8 +19,7 @@
   transition: transform;
   will-change: transform;
   transform-style: preserve-3d;
-
+  @include box-shadow($mdb-shadow-2dp);
-  @include shadow-2dp();
   @include material-animation-default();
 
   > * {
@@ -74,6 +73,7 @@
   @include mdb-drawer-y-overlay-down($breakpoint);
 }
 
+
 //----
 // Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
 //

scss/_dropdown.scss

@@ -22,7 +22,6 @@
   transform: scale(0);
   transform-origin: 0 0;
   will-change: transform;
-  @include shadow-2dp();
 
   .open > & {
     //z-index: 999;

scss/_mixins.scss

@@ -4,7 +4,6 @@
 @import "mixins/type";
 @import "mixins/layout";
 @import "mixins/drawer";
-@import "mixins/shadows";
 @import "mixins/variations";
 @import "mixins/forms";
 @import "mixins/buttons";

scss/_modal.scss

@@ -2,7 +2,6 @@
 // https://www.google.com/design/spec/components/dialogs.html#dialogs-specs
 
 .modal-content {
-  @include shadow-z-5();
   border: 0;
   border-radius: $border-radius;
 

scss/_navbar.scss

@@ -2,7 +2,7 @@
   margin-bottom: .25rem; // required to provide space for the shadow to render (need is visible in mobile drawer overlay)
   border: 0;
   border-radius: 0;
-  @include shadow-2dp();
+  @include box-shadow($mdb-shadow-2dp);
 
   //.navbar-brand {
   //  position: relative;

scss/_popover.scss

@@ -1,19 +1,19 @@
-
+//
-.popover, .tooltip-inner {
+//.popover, .tooltip-inner {
-  line-height: 1em;
+//  line-height: 1em;
-  color: $mdb-popover-color;
+//  color: $mdb-popover-color;
-  background: $mdb-popover-background;
+//  background: $mdb-popover-background;
-  border: 0;
+//  border: 0;
-  border-radius: $border-radius;
+//  border-radius: $border-radius;
-  @include shadow-z-1();
+//  @include box-shadow($mdb-shadow-2dp);
-}
+//}
-
+//
-.tooltip, .tooltip.in {
+//.tooltip, .tooltip.in {
-  opacity: 1;
+//  opacity: 1;
-}
+//}
-
+//
-.popover, .tooltip {
+//.popover, .tooltip {
-  .arrow, .tooltip-arrow {
+//  .arrow, .tooltip-arrow {
-    display: none;
+//    display: none;
-  }
+//  }
-}
+//}

scss/_variables.scss

@@ -1,5 +1,6 @@
 // FIXME: re-examine organization of variables, files, ordering etc.  While the ordering works, we need to be sure this is more comprehensible.
 @import "variables/colors";
+@import "variables/shadow";
 
 // redefine ? TODO: do we need this mdb variant?  This is used as $body-color
 $gray-lighter: rgba($black, 0.12) !default;
@@ -15,27 +16,7 @@ $mdb-text-color-inverse-light: rgba($white, 0.54) !default;
 $mdb-label-color: $gray-light !default;
 $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
 
-//---
+@import "variables/bootstrap";
-// Customized BS variables
-@import "variables/bootstrap/components";
-@import "variables/bootstrap/spacing";
-
-@import "variables/bootstrap/body";
-@import "variables/bootstrap/brand";
-@import "variables/bootstrap/buttons";
-@import "variables/bootstrap/card";
-@import "variables/bootstrap/code";
-@import "variables/bootstrap/forms";
-@import "variables/bootstrap/list-group";
-@import "variables/bootstrap/nav";
-@import "variables/bootstrap/state";
-@import "variables/bootstrap/type";
-@import "variables/bootstrap/modals";
-
-// import their vars after customization for use below
-$enable-flex: true;
-@import "../bower_components/bootstrap/scss/variables";
-
 
 //
 @import "variables/layout";
@@ -126,11 +107,6 @@ $mdb-radio-color-on: $brand-primary !default;
 $mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity  26%
 $mdb-radio-color-disabled-inverse:  rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
-// Shadows
-$mdb-shadow-key-umbra-opacity: 0.2 !default;
-$mdb-shadow-key-penumbra-opacity: 0.14 !default;
-$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
-
 // Animations
 $mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;

scss/mixins/_shadows.scss

@@ -1,78 +0,0 @@
-@mixin shadow-z-1() {
-  box-shadow: 0 1px 6px 0 rgba($black, 0.12),
-  0 1px 6px 0 rgba($black, 0.12);
-}
-
-@mixin shadow-z-1-hover() {
-  box-shadow: 0 5px 11px 0 rgba($black, 0.18),
-  0 4px 15px 0 rgba($black, 0.15);
-}
-
-@mixin shadow-z-2() {
-  box-shadow: 0 8px 17px 0 rgba($black, 0.2),
-  0 6px 20px 0 rgba($black, 0.19);
-}
-
-@mixin shadow-z-3() {
-  box-shadow: 0 12px 15px 0 rgba($black, 0.24),
-  0 17px 50px 0 rgba($black, 0.19);
-}
-
-@mixin shadow-z-4() {
-  box-shadow: 0 16px 28px 0 rgba($black, 0.22),
-  0 25px 55px 0 rgba($black, 0.21);
-}
-
-@mixin shadow-z-5() {
-  box-shadow: 0 27px 24px 0 rgba($black, 0.2),
-  0 40px 77px 0 rgba($black, 0.22);
-}
-
-// Shadows (from mdl http://www.getmdl.io/)
-
-// Focus shadow mixin.
-@mixin focus-shadow() {
-  box-shadow: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
-}
-
-@mixin shadow-2dp() {
-  box-shadow: 0 2px 2px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 3px 1px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
-  0 1px 5px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-3dp() {
-  box-shadow: 0 3px 4px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 3px 3px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
-  0 1px 8px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-4dp() {
-  box-shadow: 0 4px 5px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 1px 10px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
-  0 2px 4px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
-}
-
-@mixin shadow-6dp() {
-  box-shadow: 0 6px 10px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 1px 18px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
-  0 3px 5px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
-}
-
-@mixin shadow-8dp() {
-  box-shadow: 0 8px 10px 1px rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 3px 14px 2px rgba($black, $mdb-shadow-ambient-shadow-opacity),
-  0 5px 5px -3px rgba($black, $mdb-shadow-key-umbra-opacity);
-}
-
-@mixin shadow-16dp() {
-  box-shadow: 0 16px 24px 2px rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 6px 30px 5px rgba($black, $mdb-shadow-ambient-shadow-opacity),
-  0 8px 10px -5px rgba($black, $mdb-shadow-key-umbra-opacity);
-}
-
-@mixin shadow-24dp() {
-  box-shadow: 0 9px 46px 8px rgba($black, $mdb-shadow-key-penumbra-opacity),
-  0 11px 15px -7px rgba($black, $mdb-shadow-ambient-shadow-opacity),
-  0 24px 38px 3px rgba($black, $mdb-shadow-key-umbra-opacity);
-}

scss/plugins/_plugin-snackbarjs.scss

@@ -1,27 +1,27 @@
-// Support for SnackbarJS plugin
+//// Support for SnackbarJS plugin
-// https://github.com/FezVrasta/snackbarjs
+//// https://github.com/FezVrasta/snackbarjs
-
+//
-.snackbar {
+//.snackbar {
-  height: 0;
+//  height: 0;
-  font-size: 14px;
+//  font-size: 14px;
-  color: $mdb-text-color-inverse;
+//  color: $mdb-text-color-inverse;
-  background-color: #323232;
+//  background-color: #323232;
-  border-radius: $border-radius;
+//  border-radius: $border-radius;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
+//  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
-  transform: translateY(200%);
+//  transform: translateY(200%);
-
+//
-  @include shadow-z-1;
+//  @include box-shadow($mdb-shadow-2dp);
-}
+//}
-
+//
-.snackbar.snackbar-opened {
+//.snackbar.snackbar-opened {
-  height: auto;
+//  height: auto;
-  padding: 14px 15px;
+//  padding: 14px 15px;
-  margin-bottom: 20px;
+//  margin-bottom: 20px;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
+//  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
-  transform: none;
+//  transform: none;
-}
+//}
-
+//
-// Variations
+//// Variations
-.snackbar.toast {
+//.snackbar.toast {
-  border-radius: 200px;
+//  border-radius: 200px;
-}
+//}

scss/variables/_bootstrap.scss

@@ -0,0 +1,21 @@
+// Customized BS variables
+@import "bootstrap/components";
+@import "bootstrap/spacing";
+
+@import "bootstrap/body";
+@import "bootstrap/brand";
+@import "bootstrap/buttons";
+@import "bootstrap/card";
+@import "bootstrap/code";
+@import "bootstrap/dropdown";
+@import "bootstrap/forms";
+@import "bootstrap/list-group";
+@import "bootstrap/nav";
+@import "bootstrap/state";
+@import "bootstrap/type";
+@import "bootstrap/modals";
+
+// import their vars after customization for use below
+$enable-flex: true;     // fully adopt flexbox layouts
+$enable-shadows: true;  // enable shadows, set to false to turn off shadows
+@import "../../bower_components/bootstrap/scss/variables";

scss/variables/_shadow.scss

@@ -0,0 +1,35 @@
+// Shadows (originally from mdl http://www.getmdl.io/)
+$mdb-shadow-key-umbra-opacity: 0.2 !default;
+$mdb-shadow-key-penumbra-opacity: 0.14 !default;
+$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
+
+// Declare the following for reuse with both mixins and the bootstrap variables
+$mdb-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
+
+$mdb-shadow-2dp: 0 2px 2px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
+
+$mdb-shadow-3dp: 0 3px 4px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
+
+$mdb-shadow-4dp: 0 4px 5px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 1px 10px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
+
+$mdb-shadow-6dp: 0 6px 10px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
+
+$mdb-shadow-8dp: 0 8px 10px 1px rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba($black, $mdb-shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba($black, $mdb-shadow-key-umbra-opacity);
+
+$mdb-shadow-16dp: 0 16px 24px 2px rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 6px 30px 5px rgba($black, $mdb-shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba($black, $mdb-shadow-key-umbra-opacity);
+
+$mdb-shadow-24dp: 0 9px 46px 8px rgba($black, $mdb-shadow-key-penumbra-opacity),
+  0 11px 15px -7px rgba($black, $mdb-shadow-ambient-shadow-opacity),
+  0 24px 38px 3px rgba($black, $mdb-shadow-key-umbra-opacity);

scss/variables/bootstrap/_buttons.scss

@@ -30,7 +30,7 @@ $mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background and border color.
-
+$btn-box-shadow:                 none !default;
 $btn-padding-x:                  1rem !default; // 1rem
 $btn-padding-y:                  .46875rem !default; // .375rem achieve a 36dp height
 $btn-font-weight:                500 !default; // normal

scss/variables/bootstrap/_dropdown.scss

@@ -0,0 +1,20 @@
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+//$dropdown-bg:                    #fff !default;
+//$dropdown-border-color:          rgba(0,0,0,.15) !default;
+//$dropdown-border-width:          $border-width !default;
+//$dropdown-divider-bg:            #e5e5e5 !default;
+$dropdown-box-shadow:            $mdb-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default;
+//
+//$dropdown-link-color:            $gray-dark !default;
+//$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//$dropdown-link-hover-bg:         #f5f5f5 !default;
+//
+//$dropdown-link-active-color:     $component-active-color !default;
+//$dropdown-link-active-bg:        $component-active-bg !default;
+//
+//$dropdown-link-disabled-color:   $gray-light !default;
+//
+//$dropdown-header-color:          $gray-light !default;

scss/variables/bootstrap/_modals.scss

@@ -1,4 +1,5 @@
 // Modals
+$modal-content-xs-box-shadow: $mdb-shadow-24dp !default;
 
 // Padding applied to the modal body
 //$modal-inner-padding:         15px !default;