diff --git a/.travis.yml b/.travis.yml index b30592ef..ee45cdf3 100644 --- a/.travis.yml +++ b/.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" diff --git a/scss/_bootstrap.scss b/scss/_bootstrap.scss index d19b4d09..6c81aee1 100644 --- a/scss/_bootstrap.scss +++ b/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"; diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a0b5877e..1d7068ab 100644 --- a/scss/_buttons.scss +++ b/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, diff --git a/scss/_cards.scss b/scss/_cards.scss index b9f2583d..d8323f02 100644 --- a/scss/_cards.scss +++ b/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) { diff --git a/scss/_core.scss b/scss/_core.scss index 95d2f2c4..e94d8790 100644 --- a/scss/_core.scss +++ b/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"; - -// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350 -@import "bootstrap"; - +@import "bootstrap"; // FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350 @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"; diff --git a/scss/_drawer.scss b/scss/_drawer.scss index 961e2118..1de9283a 100644 --- a/scss/_drawer.scss +++ b/scss/_drawer.scss @@ -19,8 +19,7 @@ transition: transform; will-change: transform; transform-style: preserve-3d; - - @include shadow-2dp(); + @include box-shadow($mdb-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 // diff --git a/scss/_menu.scss b/scss/_dropdown.scss similarity index 99% rename from scss/_menu.scss rename to scss/_dropdown.scss index 0f0dbec9..c8f04107 100644 --- a/scss/_menu.scss +++ b/scss/_dropdown.scss @@ -22,7 +22,6 @@ transform: scale(0); transform-origin: 0 0; will-change: transform; - @include shadow-2dp(); .open > & { //z-index: 999; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 471fe203..58903578 100644 --- a/scss/_mixins.scss +++ b/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"; diff --git a/scss/_modal.scss b/scss/_modal.scss index efff1238..152591e3 100644 --- a/scss/_modal.scss +++ b/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; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index e9d4295d..421a1055 100644 --- a/scss/_navbar.scss +++ b/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; diff --git a/scss/_popover.scss b/scss/_popover.scss index 905e2f82..95f91cad 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -1,19 +1,19 @@ - -.popover, .tooltip-inner { - line-height: 1em; - color: $mdb-popover-color; - background: $mdb-popover-background; - border: 0; - border-radius: $border-radius; - @include shadow-z-1(); -} - -.tooltip, .tooltip.in { - opacity: 1; -} - -.popover, .tooltip { - .arrow, .tooltip-arrow { - display: none; - } -} +// +//.popover, .tooltip-inner { +// line-height: 1em; +// color: $mdb-popover-color; +// background: $mdb-popover-background; +// border: 0; +// border-radius: $border-radius; +// @include box-shadow($mdb-shadow-2dp); +//} +// +//.tooltip, .tooltip.in { +// opacity: 1; +//} +// +//.popover, .tooltip { +// .arrow, .tooltip-arrow { +// display: none; +// } +//} diff --git a/scss/_variables.scss b/scss/_variables.scss index ca09fd02..9825eea1 100644 --- a/scss/_variables.scss +++ b/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 -//--- -// 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/bootstrap"; // @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; diff --git a/scss/mixins/_shadows.scss b/scss/mixins/_shadows.scss deleted file mode 100644 index e6f1e7d8..00000000 --- a/scss/mixins/_shadows.scss +++ /dev/null @@ -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); -} diff --git a/scss/plugins/_plugin-snackbarjs.scss b/scss/plugins/_plugin-snackbarjs.scss index ec772b3b..51c92bec 100644 --- a/scss/plugins/_plugin-snackbarjs.scss +++ b/scss/plugins/_plugin-snackbarjs.scss @@ -1,27 +1,27 @@ -// Support for SnackbarJS plugin -// https://github.com/FezVrasta/snackbarjs - -.snackbar { - height: 0; - font-size: 14px; - color: $mdb-text-color-inverse; - background-color: #323232; - 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; - transform: translateY(200%); - - @include shadow-z-1; -} - -.snackbar.snackbar-opened { - height: auto; - padding: 14px 15px; - 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; - transform: none; -} - -// Variations -.snackbar.toast { - border-radius: 200px; -} +//// Support for SnackbarJS plugin +//// https://github.com/FezVrasta/snackbarjs +// +//.snackbar { +// height: 0; +// font-size: 14px; +// color: $mdb-text-color-inverse; +// background-color: #323232; +// 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; +// transform: translateY(200%); +// +// @include box-shadow($mdb-shadow-2dp); +//} +// +//.snackbar.snackbar-opened { +// height: auto; +// padding: 14px 15px; +// 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; +// transform: none; +//} +// +//// Variations +//.snackbar.toast { +// border-radius: 200px; +//} diff --git a/scss/variables/_bootstrap.scss b/scss/variables/_bootstrap.scss new file mode 100644 index 00000000..b43d708e --- /dev/null +++ b/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"; diff --git a/scss/variables/_shadow.scss b/scss/variables/_shadow.scss new file mode 100644 index 00000000..0c5bb087 --- /dev/null +++ b/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); diff --git a/scss/variables/bootstrap/_buttons.scss b/scss/variables/bootstrap/_buttons.scss index 3659c433..e7c5dcff 100644 --- a/scss/variables/bootstrap/_buttons.scss +++ b/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 diff --git a/scss/variables/bootstrap/_dropdown.scss b/scss/variables/bootstrap/_dropdown.scss new file mode 100644 index 00000000..0982f8b2 --- /dev/null +++ b/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; diff --git a/scss/variables/bootstrap/_modals.scss b/scss/variables/bootstrap/_modals.scss index fb2bf5bb..4313bbd9 100644 --- a/scss/variables/bootstrap/_modals.scss +++ b/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;