mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +03:00
Resolves #832. Move to using BS4 shadow variables. Compared/updated relative to the BS4 dev branch
This commit is contained in:
parent
aed35fcafd
commit
fd73b5a5f0
10
.travis.yml
10
.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"
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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
|
||||
//
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
transform: scale(0);
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
@include shadow-2dp();
|
||||
|
||||
.open > & {
|
||||
//z-index: 999;
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
//}
|
||||
|
|
21
scss/variables/_bootstrap.scss
Normal file
21
scss/variables/_bootstrap.scss
Normal 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";
|
35
scss/variables/_shadow.scss
Normal file
35
scss/variables/_shadow.scss
Normal 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);
|
|
@ -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
|
||||
|
|
20
scss/variables/bootstrap/_dropdown.scss
Normal file
20
scss/variables/bootstrap/_dropdown.scss
Normal 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;
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue
Block a user