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

This commit is contained in:
Kevin Ross 2016-01-20 12:55:32 -06:00
parent aed35fcafd
commit fd73b5a5f0
19 changed files with 142 additions and 176 deletions

View File

@ -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"

View File

@ -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";

View File

@ -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,

View File

@ -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) {

View File

@ -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";

View File

@ -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
//

View File

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

View File

@ -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";

View File

@ -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;

View File

@ -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;

View File

@ -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;
// }
//}

View File

@ -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;

View File

@ -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);
}

View File

@ -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;
//}

View File

@ -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";

View File

@ -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);

View File

@ -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

View File

@ -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;

View File

@ -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;