diff --git a/docs/assets/js/src/index.js b/docs/assets/js/src/index.js
index 275f0c3b..c14f4fc3 100644
--- a/docs/assets/js/src/index.js
+++ b/docs/assets/js/src/index.js
@@ -121,7 +121,7 @@ class Application {
$(() => {
let app = new Application()
app.displayTypographyProperties()
- $('.btn-clipboard').mdbRipples()
+ $('.btn-clipboard').bmdRipples()
// FIXME: file inputs seems to be in flux, delete the offending one for now.
$('#exampleInputFile').closest('.form-group').detach()
diff --git a/docs/assets/scss/bmd/_clipboard-js.scss b/docs/assets/scss/bmd/_clipboard-js.scss
index 145cdb60..c9ad2884 100644
--- a/docs/assets/scss/bmd/_clipboard-js.scss
+++ b/docs/assets/scss/bmd/_clipboard-js.scss
@@ -5,6 +5,6 @@
&:hover {
color: $gray; // #fff;
- background-color: $mdb-btn-focus-bg; // #027de7;
+ background-color: $bmd-btn-focus-bg; // #027de7;
}
}
diff --git a/docs/getting-started/customization.md b/docs/getting-started/customization.md
index 35ebba1f..f271f5dd 100644
--- a/docs/getting-started/customization.md
+++ b/docs/getting-started/customization.md
@@ -27,7 +27,7 @@ Installing via `npm` (recommended) or `bower`, customizing BMD is a breeze.
~~~~~~~~
$brand-primary: #3f51b5; // bootstrap variable
-$mdb-label-color-focus: #303f9f; // mdb variable
+$bmd-label-color-focus: #303f9f; // bmd variable
@import "bootstrap-material-design/scss/core"; // make sure to use _core.scss!
~~~~~~~~
diff --git a/docs/material-design/drawers.md b/docs/material-design/drawers.md
index 3be734c8..207dea47 100644
--- a/docs/material-design/drawers.md
+++ b/docs/material-design/drawers.md
@@ -302,8 +302,8 @@ The following positioning marker classes should be placed on the `bmd-layout-con
Globally, you may alter the size of _x_ vs _y_ drawers with the following variables:
-- `$mdb-drawer-x-size`
-- `$mdb-drawer-y-size`
+- `$bmd-drawer-x-size`
+- `$bmd-drawer-y-size`
### Custom responsive drawer
diff --git a/js/src/autofill.js b/js/src/autofill.js
index 76d49e9b..2ada9ec6 100644
--- a/js/src/autofill.js
+++ b/js/src/autofill.js
@@ -8,8 +8,8 @@ const Autofill = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'autofill'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
diff --git a/js/src/base.js b/js/src/base.js
index 8bc9774c..31459dac 100644
--- a/js/src/base.js
+++ b/js/src/base.js
@@ -48,20 +48,20 @@ const Base = (($) => {
addFormGroupFocus() {
if (!this.$element.prop('disabled')) {
- this.$mdbFormGroup.addClass(ClassName.IS_FOCUSED)
+ this.$bmdFormGroup.addClass(ClassName.IS_FOCUSED)
}
}
removeFormGroupFocus() {
- this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED)
+ this.$bmdFormGroup.removeClass(ClassName.IS_FOCUSED)
}
removeIsFilled() {
- this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
+ this.$bmdFormGroup.removeClass(ClassName.IS_FILLED)
}
addIsFilled() {
- this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
+ this.$bmdFormGroup.addClass(ClassName.IS_FILLED)
}
// Find bmd-form-group
diff --git a/js/src/baseInput.js b/js/src/baseInput.js
index 56b8e7b8..da42a833 100644
--- a/js/src/baseInput.js
+++ b/js/src/baseInput.js
@@ -26,7 +26,7 @@ const BaseInput = (($) => {
formGroup: {
required: false
},
- mdbFormGroup: {
+ bmdFormGroup: {
template: `
constructor($element, config) {
super($element, $.extend(true, {}, Default, config))
- this.$mdbFormGroup = this.findMdbFormGroup(true)
+ this.$bmdFormGroup = this.findMdbFormGroup(true)
let collapseSelector = $element.data('target')
this.$collapse = $(collapseSelector)
@@ -46,7 +46,7 @@ const CollapseInline = (($) => {
Util.assert(this.$collapse, !this.$collapse.hasClass(ClassName.COLLAPSE), `${Util.describe(this.$collapse)} is expected to have the '${ClassName.COLLAPSE}' class. It is being targeted by ${Util.describe($element)}`)
// find the first input for focusing
- let $inputs = this.$mdbFormGroup.find(Selector.ANY_INPUT)
+ let $inputs = this.$bmdFormGroup.find(Selector.ANY_INPUT)
if ($inputs.length > 0) {
this.$input = $inputs.first()
}
@@ -71,7 +71,7 @@ const CollapseInline = (($) => {
dispose() {
super.dispose(DATA_KEY)
- this.$mdbFormGroup = null
+ this.$bmdFormGroup = null
this.$collapse = null
this.$input = null
}
diff --git a/js/src/drawer.js b/js/src/drawer.js
index a5d62263..ef0586ed 100644
--- a/js/src/drawer.js
+++ b/js/src/drawer.js
@@ -8,8 +8,8 @@ const Drawer = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'drawer'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Keycodes = {
diff --git a/js/src/file.js b/js/src/file.js
index cfd65b05..ba75a934 100644
--- a/js/src/file.js
+++ b/js/src/file.js
@@ -15,8 +15,8 @@ const File = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'file'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
@@ -42,7 +42,7 @@ const File = (($) => {
//{invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]},
Default, config))
- this.$mdbFormGroup.addClass(ClassName.IS_FILE)
+ this.$bmdFormGroup.addClass(ClassName.IS_FILE)
}
dispose() {
@@ -76,7 +76,7 @@ const File = (($) => {
}
addFocusListener() {
- this.$mdbFormGroup
+ this.$bmdFormGroup
.on('focus', () => {
this.addFormGroupFocus()
})
@@ -98,7 +98,7 @@ const File = (($) => {
} else {
this.removeIsFilled()
}
- this.$mdbFormGroup.find(Selector.FILENAMES).val(value)
+ this.$bmdFormGroup.find(Selector.FILENAMES).val(value)
})
}
diff --git a/js/src/radio.js b/js/src/radio.js
index a95c2ed4..8ceb6a91 100644
--- a/js/src/radio.js
+++ b/js/src/radio.js
@@ -13,8 +13,8 @@ const Radio = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'radio'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
diff --git a/js/src/radioInline.js b/js/src/radioInline.js
index 185f3fa3..679c3037 100644
--- a/js/src/radioInline.js
+++ b/js/src/radioInline.js
@@ -8,12 +8,12 @@ const RadioInline = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'radioInline'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
- mdbFormGroup: {
+ bmdFormGroup: {
create: false, // no bmd-form-group creation if form-group not present. It messes with the layout.
required: false
}
diff --git a/js/src/ripples.js b/js/src/ripples.js
index 5b62d34c..c8321592 100644
--- a/js/src/ripples.js
+++ b/js/src/ripples.js
@@ -8,8 +8,8 @@ const Ripples = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'ripples'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const ClassName = {
diff --git a/js/src/select.js b/js/src/select.js
index cf0d81a9..765f4112 100644
--- a/js/src/select.js
+++ b/js/src/select.js
@@ -15,8 +15,8 @@ const Select = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'select'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
diff --git a/js/src/switch.js b/js/src/switch.js
index d706ff93..cad48065 100644
--- a/js/src/switch.js
+++ b/js/src/switch.js
@@ -8,8 +8,8 @@ const Switch = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'switch'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
diff --git a/js/src/text.js b/js/src/text.js
index ca58175f..f9bbd121 100644
--- a/js/src/text.js
+++ b/js/src/text.js
@@ -15,8 +15,8 @@ const Text = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'text'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
diff --git a/js/src/textarea.js b/js/src/textarea.js
index 205483b1..d5596a05 100644
--- a/js/src/textarea.js
+++ b/js/src/textarea.js
@@ -15,8 +15,8 @@ const Textarea = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'textarea'
- const DATA_KEY = `mdb.${NAME}`
- const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const DATA_KEY = `bmd.${NAME}`
+ const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index e2b62d70..1c9e2ef5 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -3,8 +3,8 @@
// bmd default buttons are flat by default
.btn {
position: relative;
- margin-bottom: $mdb-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
- font-size: $mdb-btn-font-size;
+ margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
+ font-size: $bmd-btn-font-size;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
@@ -12,7 +12,7 @@
background-color: transparent;
border: 0;
outline: 0;
- 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;
+ transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default;
will-change: box-shadow, transform;
@include undo-bs-tab-focus();
@@ -36,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 box-shadow($mdb-shadow-4dp);
+ @include box-shadow($bmd-shadow-4dp);
}
// :active - momentary press: big shadow, release and it is gone
@@ -44,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 box-shadow($mdb-shadow-focus);
+ @include box-shadow($bmd-shadow-focus);
//border: 1px solid $green;
}
}
@@ -55,7 +55,7 @@
.btn-group-raised & {
// baseline shadow
- @include box-shadow($mdb-shadow-2dp);
+ @include box-shadow($bmd-shadow-2dp);
// reverse any of the above for links
&.btn-link {
@@ -75,7 +75,7 @@
&.bmd-btn-icon {
padding: 0;
overflow: hidden;
- font-size: $mdb-btn-fab-font-size;
+ font-size: $bmd-btn-fab-font-size;
line-height: normal;
border-radius: 50%;
@@ -87,17 +87,17 @@
position: absolute;
top: 50%;
left: 50%;
- width: $mdb-btn-fab-font-size;
- line-height: $mdb-btn-fab-font-size;
- transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+ width: $bmd-btn-fab-font-size;
+ line-height: $bmd-btn-fab-font-size;
+ transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2));
}
}
&.bmd-btn-fab {
// see above for color variations
- width: $mdb-btn-fab-size;
- min-width: $mdb-btn-fab-size;
- height: $mdb-btn-fab-size;
+ width: $bmd-btn-fab-size;
+ min-width: $bmd-btn-fab-size;
+ height: $bmd-btn-fab-size;
//margin: auto;
//margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
@@ -108,9 +108,9 @@
&.bmd-btn-fab-sm,
.btn-group-sm & {
- width: $mdb-btn-fab-size-sm;
- min-width: $mdb-btn-fab-size-sm;
- height: $mdb-btn-fab-size-sm;
+ width: $bmd-btn-fab-size-sm;
+ min-width: $bmd-btn-fab-size-sm;
+ height: $bmd-btn-fab-size-sm;
//margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
//.material-icons {
@@ -122,26 +122,26 @@
// Icon buttons
&.bmd-btn-icon {
- width: $mdb-btn-icon-size;
- min-width: $mdb-btn-icon-size;
- height: $mdb-btn-icon-size;
+ width: $bmd-btn-icon-size;
+ min-width: $bmd-btn-icon-size;
+ height: $bmd-btn-icon-size;
margin: 0;
color: inherit;
&.bmd-btn-icon-sm,
.btn-group-sm & {
- width: $mdb-btn-icon-size-sm;
- min-width: $mdb-btn-icon-size-sm;
- height: $mdb-btn-icon-size-sm;
+ width: $bmd-btn-icon-size-sm;
+ min-width: $bmd-btn-icon-size-sm;
+ height: $bmd-btn-icon-size-sm;
.material-icons {
//$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2;
//top: $position;
//left: $position;
- width: $mdb-btn-icon-font-size-sm;
- font-size: $mdb-btn-icon-font-size-sm;
+ width: $bmd-btn-icon-font-size-sm;
+ font-size: $bmd-btn-icon-font-size-sm;
line-height: 1;
- transform: translate(-($mdb-btn-icon-font-size-sm / 2), -($mdb-btn-icon-font-size-sm / 2));
+ transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2));
}
}
}
@@ -154,12 +154,12 @@
// Size variations
&.btn-lg,
.btn-group-lg & {
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $mdb-btn-font-size-lg, $btn-border-radius-lg);
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg);
}
&.btn-sm,
.btn-group-sm & {
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $mdb-btn-font-size-sm, $btn-border-radius-sm);
- font-size: $mdb-btn-font-size-sm;
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm);
+ font-size: $bmd-btn-font-size-sm;
}
}
@@ -170,9 +170,9 @@
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include bmd-disabled() {
- color: $mdb-btn-disabled;
+ color: $bmd-btn-disabled;
.bg-inverse & {
- color: $mdb-inverse-btn-disabled;
+ color: $bmd-inverse-btn-disabled;
}
// flat buttons shouldn't lose transparency on disabled hover/focus
@@ -206,7 +206,7 @@
}
&.btn-group-raised {
- @include box-shadow($mdb-shadow-2dp);
+ @include box-shadow($bmd-shadow-2dp);
}
.btn + .btn,
diff --git a/scss/_cards.scss b/scss/_cards.scss
index 695f4b88..b68e2cb2 100644
--- a/scss/_cards.scss
+++ b/scss/_cards.scss
@@ -4,7 +4,7 @@
border: 0;
// Cards have a default elevation of 2dp.
- @include box-shadow($mdb-shadow-2dp);
+ @include box-shadow($bmd-shadow-2dp);
@extend %std-font;
// spec: see "Avatar, Title, and Subtitle area"
@@ -44,7 +44,7 @@
&.bmd-card-raised {
// Card raised elevation: 8dp
- @include box-shadow($mdb-shadow-8dp);
+ @include box-shadow($bmd-shadow-8dp);
}
@include media-breakpoint-up(lg) {
diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss
index 53eb52bb..bcb5a18e 100644
--- a/scss/_checkboxes.scss
+++ b/scss/_checkboxes.scss
@@ -13,8 +13,8 @@ label.checkbox-inline {
left: 0;
z-index: 1;
display: block;
- width: $mdb-checkbox-size;
- height: $mdb-checkbox-size;
+ width: $bmd-checkbox-size;
+ height: $bmd-checkbox-size;
margin: 0;
content: "";
background-color: rgba($black, .84);
@@ -27,10 +27,10 @@ label.checkbox-inline {
position: relative;
z-index: 1;
display: inline-block;
- width: $mdb-checkbox-size;
- height: $mdb-checkbox-size;
+ width: $bmd-checkbox-size;
+ height: $bmd-checkbox-size;
overflow: hidden;
- border: $mdb-checkbox-border-size solid $mdb-checkbox-border-color;
+ border: $bmd-checkbox-border-size solid $bmd-checkbox-border-color;
border-radius: $border-radius;
// checkbox outline
@@ -54,7 +54,7 @@ label.checkbox-inline {
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
- animation: checkbox-off $mdb-checkbox-animation-check forwards;
+ animation: checkbox-off $bmd-checkbox-animation-check forwards;
}
}
}
@@ -81,32 +81,32 @@ label.checkbox-inline {
// FIXME: once working - combine further to reduce code
+ .checkbox-decorator .check {
- color: $mdb-checkbox-checked-color;
- border-color: $mdb-checkbox-checked-color;
+ color: $bmd-checkbox-checked-color;
+ border-color: $bmd-checkbox-checked-color;
}
+ .checkbox-decorator .check::before {
- color: $mdb-checkbox-checked-color;
+ color: $bmd-checkbox-checked-color;
box-shadow: 0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
032px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
- animation: checkbox-on $mdb-checkbox-animation-check forwards;
+ animation: checkbox-on $bmd-checkbox-animation-check forwards;
}
+ .checkbox-decorator::before {
animation: rippleOn;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
- animation: rippleOn $mdb-checkbox-animation-ripple;
+ animation: rippleOn $bmd-checkbox-animation-ripple;
}
}
+ .checkbox-decorator .check::after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
- animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
+ animation: rippleOn $bmd-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
@@ -115,12 +115,12 @@ label.checkbox-inline {
animation: rippleOff;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
- animation: rippleOff $mdb-checkbox-animation-ripple;
+ animation: rippleOff $bmd-checkbox-animation-ripple;
}
}
+ .checkbox-decorator .check::after {
- animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
+ animation: rippleOff $bmd-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
@@ -133,7 +133,7 @@ label.checkbox-inline {
}
+ .checkbox-decorator .check,
.check {
- border-color: $mdb-checkbox-border-color-disabled;
+ border-color: $bmd-checkbox-border-color-disabled;
}
}
}
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 0c8bad98..34d115ef 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -14,14 +14,14 @@
overflow: visible;
overflow-y: auto;
font-size: .875rem;
- //color: $mdb-layout-drawer-text-color;
- //background: $mdb-layout-drawer-bg-color;
+ //color: $bmd-layout-drawer-text-color;
+ //background: $bmd-layout-drawer-bg-color;
// Transform offscreen.
transition: transform;
will-change: transform;
transform-style: preserve-3d;
- @include box-shadow($mdb-shadow-2dp);
+ @include box-shadow($bmd-shadow-2dp);
@include material-animation-default();
> * {
@@ -58,10 +58,10 @@
// Sizing and positioning below here
// for left or right drawers, setup widths, heights and positions
-@include bmd-drawer-x-out($mdb-drawer-x-size);
+@include bmd-drawer-x-out($bmd-drawer-x-size);
// for top or bottom drawers, setup widths, heights and positions
-@include bmd-drawer-y-out($mdb-drawer-y-size);
+@include bmd-drawer-y-out($bmd-drawer-y-size);
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
@@ -90,8 +90,8 @@
:not(.bmd-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
@each $breakpoint in map-keys($grid-breakpoints) {
- @include bmd-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
- @include bmd-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
+ @include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint);
+ @include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint);
@include bmd-drawer-x-overlay-down($breakpoint);
@include bmd-drawer-y-overlay-down($breakpoint);
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 1ba091c6..9525a890 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -18,7 +18,7 @@
padding: .5rem 0;
border: 0;
opacity: 0;
- transition: transform $mdb-menu-expand-duration $mdb-animation-curve-default, opacity $mdb-menu-fade-duration $mdb-animation-curve-default;
+ transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, opacity $bmd-menu-fade-duration $bmd-animation-curve-default;
transform: scale(0);
transform-origin: 0 0;
will-change: transform;
@@ -61,29 +61,29 @@
display: flex;
flex-flow: row wrap;
- min-width: $mdb-menu-item-min-width;
- max-width: $mdb-menu-item-max-width;
- min-height: $mdb-menu-item-min-height;
+ min-width: $bmd-menu-item-min-width;
+ max-width: $bmd-menu-item-max-width;
+ min-height: $bmd-menu-item-min-height;
align-items: center;
- padding-top: $mdb-menu-item-padding-top;
- padding-right: $mdb-menu-item-padding-right;
- padding-bottom: $mdb-menu-item-padding-bottom;
- padding-left: $mdb-menu-item-padding-left;
+ padding-top: $bmd-menu-item-padding-top;
+ padding-right: $bmd-menu-item-padding-right;
+ padding-bottom: $bmd-menu-item-padding-bottom;
+ padding-left: $bmd-menu-item-padding-left;
// FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
overflow: hidden;
- line-height: $mdb-menu-line-height;
+ line-height: $bmd-menu-line-height;
text-overflow: ellipsis;
word-wrap: break-word;
// Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.
@include media-breakpoint-up(md) {
- padding-right: $mdb-menu-item-padding-right-md;
- padding-left: $mdb-menu-item-padding-left-md;
+ padding-right: $bmd-menu-item-padding-right-md;
+ padding-left: $bmd-menu-item-padding-left-md;
}
}
}
@@ -102,7 +102,7 @@
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
- bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
+ bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
@@ -111,7 +111,7 @@
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
- bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
+ bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 3fce360b..4c8af184 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,6 +1,6 @@
form {
// ensure enough room at the bottom of any form to display a one-line bmd-help
- margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height-base;
+ margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
// reverse the above for navbars (no help expected in a navbar form)
.navbar & {
@@ -23,9 +23,9 @@ form {
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control {
- background-repeat: $mdb-form-control-bg-repeat-y;
- background-position: $mdb-form-control-bg-position;
- background-size: $mdb-form-control-bg-size;
+ background-repeat: $bmd-form-control-bg-repeat-y;
+ background-position: $bmd-form-control-bg-position;
+ background-size: $bmd-form-control-bg-size;
border: 0;
transition: background 0s ease-out;
@@ -38,7 +38,7 @@ form {
// The border bottom should be static in all states, the decorator will be animated over this.
&:focus,
.bmd-form-group.is-focused & {
- background-size: $mdb-form-control-bg-size-active;
+ background-size: $bmd-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s;
}
@@ -77,7 +77,7 @@ form {
// State coloring: default, success, info, warning, danger
//
@include bmd-selection-color();
-@include bmd-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
+@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
.has-success {
@include bmd-form-color($brand-success, $brand-success, $brand-success);
@@ -97,7 +97,7 @@ form {
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
+//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.bmd-form-group {
@@ -155,21 +155,21 @@ form {
}
// default floating size/location with an bmd-form-group
- @include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "bmd-form-group default");
+ @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
// sm floating size/location
&.bmd-form-group-sm {
- @include bmd-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "bmd-form-group sm");
+ @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
}
// lg floating size/location
&.bmd-form-group-lg {
- @include bmd-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "bmd-form-group lg");
+ @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
-@include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height);
+@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
select {
&,
diff --git a/scss/_nav.scss b/scss/_nav.scss
index d93f34de..184ce136 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,16 +1,16 @@
// https://www.google.com/design/spec/components/tabs.html#tabs-specs
.nav-link {
- //line-height: $mdb-nav-link-line-height; // set baseline line-height and font sizes
+ //line-height: $bmd-nav-link-line-height; // set baseline line-height and font sizes
text-transform: uppercase;
}
// navbars
.navbar-nav {
.nav-link {
- padding: $mdb-navbar-link-padding;
- font-size: $mdb-navbar-link-font-size;
- font-weight: $mdb-navbar-link-font-weight;
+ padding: $bmd-navbar-link-padding;
+ font-size: $bmd-navbar-link-font-size;
+ font-weight: $bmd-navbar-link-font-weight;
}
}
@@ -21,9 +21,9 @@
border: 0;
.nav-link {
- padding: $mdb-nav-tabs-pills-link-padding;
- font-size: $mdb-nav-tabs-pills-font-size;
- font-weight: $mdb-nav-tabs-pills-font-weight;
+ padding: $bmd-nav-tabs-pills-link-padding;
+ font-size: $bmd-nav-tabs-pills-font-size;
+ font-weight: $bmd-nav-tabs-pills-font-weight;
border: 0;
}
}
@@ -31,18 +31,18 @@
// tabs only
.nav-tabs {
.nav-link {
- border-bottom: $mdb-nav-tabs-border-size solid transparent;
+ border-bottom: $bmd-nav-tabs-border-size solid transparent;
}
// colors
- @include bmd-tabs-color($mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color, $mdb-nav-tabs-disabled-link-color, $mdb-nav-tabs-disabled-link-color-hover);
+ @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover);
&.bg-primary {
- @include bmd-tabs-color($mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color, $mdb-nav-tabs-primary-disabled-link-color, $mdb-nav-tabs-primary-disabled-link-color-hover);
+ @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover);
}
&.bg-inverse {
- @include bmd-tabs-color($mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color, $mdb-nav-tabs-inverse-disabled-link-color, $mdb-nav-tabs-inverse-disabled-link-color-hover);
+ @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover);
}
}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index f9f120af..e97f8767 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 box-shadow($mdb-shadow-2dp);
+ @include box-shadow($bmd-shadow-2dp);
// #853 start - https://github.com/twbs/bootstrap/pull/18976/files
@if $enable-flex {
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 95f91cad..2f347ae7 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -1,11 +1,11 @@
//
//.popover, .tooltip-inner {
// line-height: 1em;
-// color: $mdb-popover-color;
-// background: $mdb-popover-background;
+// color: $bmd-popover-color;
+// background: $bmd-popover-background;
// border: 0;
// border-radius: $border-radius;
-// @include box-shadow($mdb-shadow-2dp);
+// @include box-shadow($bmd-shadow-2dp);
//}
//
//.tooltip, .tooltip.in {
diff --git a/scss/_radios.scss b/scss/_radios.scss
index 8bf001ac..24fcbdf8 100644
--- a/scss/_radios.scss
+++ b/scss/_radios.scss
@@ -1,26 +1,26 @@
.radio label,
label.radio-inline {
position: relative;
- padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
+ padding-left: $bmd-radio-size + $bmd-radio-label-padding; // absolutely positioned so add the radio size
.bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
.bmd-radio-inner-circle {
position: absolute;
- top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height
+ top: calc-top($line-height-base, $font-size-base, $bmd-radio-size); // vertical center of line-height
left: 0;
display: inline-block;
- width: $mdb-radio-size;
- height: $mdb-radio-size;
+ width: $bmd-radio-size;
+ height: $bmd-radio-size;
transition-duration: 0.2s;
&.bmd-radio-outer-circle {
- border: $mdb-radio-border solid $mdb-radio-color-off;
+ border: $bmd-radio-border solid $bmd-radio-color-off;
border-radius: 50%;
transition: border-color ease .28s;
}
&.bmd-radio-inner-circle {
display: inline-block;
- background-color: $mdb-radio-color-on;
+ background-color: $bmd-radio-color-on;
border-radius: 50%;
transition: transform ease .28s;
transform: scale3d(0, 0, 0);
@@ -28,8 +28,8 @@ label.radio-inline {
// focus/press ripple
&::after {
position: absolute;
- top: -#{$mdb-radio-size};
- left: -#{$mdb-radio-size};
+ top: -#{$bmd-radio-size};
+ left: -#{$bmd-radio-size};
z-index: 1;
display: block;
width: 50px;
@@ -51,7 +51,7 @@ label.radio-inline {
opacity: 0;
&:checked {
- @include bmd-radio-color($mdb-radio-color-on);
+ @include bmd-radio-color($bmd-radio-color-on);
~ .bmd-radio-inner-circle {
transform: scale3d(0.55, 0.55, 1);
@@ -72,10 +72,10 @@ label.radio-inline {
&[disabled],
fieldset[disabled] & {
- @include bmd-radio-color($mdb-radio-color-disabled);
+ @include bmd-radio-color($bmd-radio-color-disabled);
.bg-inverse & {
- @include bmd-radio-color($mdb-radio-color-disabled-inverse);
+ @include bmd-radio-color($bmd-radio-color-disabled-inverse);
}
}
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 170a15fe..8e503faf 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,5 +1,5 @@
body {
- font-weight: $mdb-font-weight-base;
+ font-weight: $bmd-font-weight-base;
}
a {
diff --git a/scss/_switches.scss b/scss/_switches.scss
index a57d0bbb..d1745f7c 100644
--- a/scss/_switches.scss
+++ b/scss/_switches.scss
@@ -2,26 +2,26 @@
.switch {
label {
position: relative;
- padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
+ padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size
.bmd-switch-track {
position: absolute;
- top: calc-top($line-height-base, $font-size-base, $mdb-switch-height);
+ top: calc-top($line-height-base, $font-size-base, $bmd-switch-height);
left: 0;
display: inline-block;
- width: $mdb-switch-width;
- height: $mdb-switch-height;
+ width: $bmd-switch-width;
+ height: $bmd-switch-height;
cursor: pointer;
background-image: linear-gradient(
to right,
- $mdb-switch-unchecked-bg 0%,
- $mdb-switch-unchecked-bg 50%,
- $mdb-switch-checked-bg 50%,
- $mdb-switch-checked-bg 100%
+ $bmd-switch-unchecked-bg 0%,
+ $bmd-switch-unchecked-bg 50%,
+ $bmd-switch-checked-bg 50%,
+ $bmd-switch-checked-bg 100%
);
background-position: 0%;
- background-size: $mdb-switch-width * 2 $mdb-switch-height;
- border-radius: $mdb-switch-width;
+ background-size: $bmd-switch-width * 2 $bmd-switch-height;
+ border-radius: $bmd-switch-width;
transition: background-position 0.2s ease-in;
&::after {
@@ -29,11 +29,11 @@
top: 50%;
left: 0;
display: block;
- width: $mdb-switch-handle-size;
- height: $mdb-switch-handle-size;
+ width: $bmd-switch-handle-size;
+ height: $bmd-switch-handle-size;
align-self: center;
content: "";
- background: $mdb-switch-handle-unchecked-bg;
+ background: $bmd-switch-handle-unchecked-bg;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
@@ -58,8 +58,8 @@
+ .bmd-switch-track {
background-position: -100%;
&::after {
- left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
- background-color: $mdb-switch-handle-checked-bg;
+ left: unquote("calc(100% - #{$bmd-switch-handle-size})"); //calc(100% - $bmd-switch-handle-size);
+ background-color: $bmd-switch-handle-checked-bg;
}
}
}
@@ -72,9 +72,9 @@
+ .bmd-switch-track {
cursor: default;
- background: $mdb-switch-disabled-bg;
+ background: $bmd-switch-disabled-bg;
&::after {
- background: $mdb-switch-handle-disabled-bg;
+ background: $bmd-switch-handle-disabled-bg;
}
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5fbff0a2..0c122e20 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -8,13 +8,13 @@ $gray-light: rgba($black, 0.26) !default;
$gray: rgba($black, .54) !default; // spec color
$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
-$mdb-font-weight-base: 400;
+$bmd-font-weight-base: 400;
// wondering if any of these could still be refactored out, but are definitely in use.
-$mdb-text-color-inverse: rgba($white, 0.84) !default;
-$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
+$bmd-text-color-inverse: rgba($white, 0.84) !default;
+$bmd-text-color-inverse-light: rgba($white, 0.54) !default;
+$bmd-label-color: $gray-light !default;
+$bmd-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";
@@ -43,13 +43,13 @@ $enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "variables/menu";
@import "variables/drawer";
-$mdb-label-color-focus: $brand-primary !default;
+$bmd-label-color-focus: $brand-primary !default;
//---
// verified in use with refactoring to v4
//---
//-- unverified below here
-$mdb-brand-inverse: $indigo !default;
+$bmd-brand-inverse: $indigo !default;
// Typography elements FIXME: review to see if we actually need these
$icon-color: rgba($black, 0.5) !default;
@@ -61,70 +61,70 @@ $icon-color: rgba($black, 0.5) !default;
// --------------------
// inputs
-$mdb-bmd-label-static-size-ratio: 75 / 100 !default;
-$mdb-help-size-ratio: 75 / 100 !default;
+$bmd-bmd-label-static-size-ratio: 75 / 100 !default;
+$bmd-help-size-ratio: 75 / 100 !default;
//$bmd-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon.
-$mdb-form-control-bg-repeat-y: no-repeat !default;
-$mdb-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
-$mdb-form-control-bg-size: 0 100%, 100% 100% !default;
-$mdb-form-control-bg-size-active: 100% 100%, 100% 100% !default;
+$bmd-form-control-bg-repeat-y: no-repeat !default;
+$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
+$bmd-form-control-bg-size: 0 100%, 100% 100% !default;
+$bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default;
// expandable
$input-text-button-size: 32px !default;
// sizing
-$mdb-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
-$mdb-label-top-margin-base: 1rem !default;
+$bmd-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
+$bmd-label-top-margin-base: 1rem !default;
-$mdb-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
-$mdb-label-top-margin-lg: 1rem !default; // 16px
+$bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
+$bmd-label-top-margin-lg: 1rem !default; // 16px
-$mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
-$mdb-label-top-margin-sm: .75rem !default; // 12px
+$bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
+$bmd-label-top-margin-sm: .75rem !default; // 12px
$text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default;
// Checkboxes
-$mdb-checkbox-size: 1.25rem !default;
-$mdb-checkbox-animation-ripple: 500ms !default;
-$mdb-checkbox-animation-check: 0.3s !default;
-$mdb-checkbox-checked-color: $brand-primary !default;
+$bmd-checkbox-size: 1.25rem !default;
+$bmd-checkbox-animation-ripple: 500ms !default;
+$bmd-checkbox-animation-check: 0.3s !default;
+$bmd-checkbox-checked-color: $brand-primary !default;
-$mdb-checkbox-border-size: .125rem !default;
-$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
-$mdb-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default;
+$bmd-checkbox-border-size: .125rem !default;
+$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
+$bmd-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default;
// Switches
-$mdb-switch-label-padding: .3125rem !default; // 5px
-$mdb-switch-width: 2.125rem !default; // 34px
-$mdb-switch-height: .875rem !default; // 14px
-$mdb-switch-handle-size: 1.25rem !default; // 20px (was 18px)
+$bmd-switch-label-padding: .3125rem !default; // 5px
+$bmd-switch-width: 2.125rem !default; // 34px
+$bmd-switch-height: .875rem !default; // 14px
+$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
-$mdb-switch-handle-checked-bg: $brand-primary !default;
-$mdb-switch-handle-unchecked-bg: #f1f1f1 !default;
-$mdb-switch-handle-disabled-bg: #bdbdbd !default;
-$mdb-switch-unchecked-bg: $gray-light !default;
-$mdb-switch-checked-bg: desaturate(lighten($mdb-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
-$mdb-switch-disabled-bg: $gray-lighter !default;
+$bmd-switch-handle-checked-bg: $brand-primary !default;
+$bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
+$bmd-switch-handle-disabled-bg: #bdbdbd !default;
+$bmd-switch-unchecked-bg: $gray-light !default;
+$bmd-switch-checked-bg: desaturate(lighten($bmd-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
+$bmd-switch-disabled-bg: $gray-lighter !default;
// Popovers and Popups
-$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
-$mdb-popover-color: #ececec !default;
+$bmd-popover-background: rgba(101, 101, 101, 0.9) !default;
+$bmd-popover-color: #ececec !default;
// Radio:
-$mdb-radio-border: .125rem !default; // 2px
-$mdb-radio-size: 1.25rem !default;
-$mdb-radio-label-padding: .3125rem !default; // 5px
+$bmd-radio-border: .125rem !default; // 2px
+$bmd-radio-size: 1.25rem !default;
+$bmd-radio-label-padding: .3125rem !default; // 5px
-$mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
-$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%
+$bmd-radio-color-off: $bmd-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
+$bmd-radio-color-on: $brand-primary !default;
+$bmd-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
+$bmd-radio-color-disabled-inverse: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
// 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;
-$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
-$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
+$bmd-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default;
diff --git a/scss/mixins/_animations.scss b/scss/mixins/_animations.scss
index bd2eaaa7..d382165c 100644
--- a/scss/mixins/_animations.scss
+++ b/scss/mixins/_animations.scss
@@ -2,20 +2,20 @@
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
transition-duration: $duration;
- transition-timing-function: $mdb-animation-curve-fast-out-slow-in;
+ transition-timing-function: $bmd-animation-curve-fast-out-slow-in;
}
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
transition-duration: $duration;
- transition-timing-function: $mdb-animation-curve-linear-out-slow-in;
+ transition-timing-function: $bmd-animation-curve-linear-out-slow-in;
}
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
transition-duration: $duration;
- transition-timing-function: $mdb-animation-curve-fast-out-linear-in;
+ transition-timing-function: $bmd-animation-curve-fast-out-linear-in;
}
@mixin material-animation-default($duration:0.2s) {
transition-duration: $duration;
- transition-timing-function: $mdb-animation-curve-default;
+ transition-timing-function: $bmd-animation-curve-default;
}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 6402134a..51ac0403 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -60,14 +60,14 @@
@mixin bmd-flat-button-variant($color) {
- $background: $mdb-btn-bg;
- $border: $mdb-btn-border;
+ $background: $bmd-btn-bg;
+ $border: $bmd-btn-border;
- $focus-background: $mdb-btn-focus-bg;
- $focus-border: $mdb-btn-focus-bg;
+ $focus-background: $bmd-btn-focus-bg;
+ $focus-border: $bmd-btn-focus-bg;
- $active-background: $mdb-btn-active-bg;
- $active-border: $mdb-btn-active-bg;
+ $active-background: $bmd-btn-active-bg;
+ $active-border: $bmd-btn-active-bg;
@include bmd-button-variant($color,
$background,
@@ -79,11 +79,11 @@
// inverse color scheme
.bg-inverse & {
- $focus-background: $mdb-inverse-btn-focus-bg;
- $focus-border: $mdb-inverse-btn-focus-bg;
+ $focus-background: $bmd-inverse-btn-focus-bg;
+ $focus-border: $bmd-inverse-btn-focus-bg;
- $active-background: $mdb-inverse-btn-active-bg;
- $active-border: $mdb-inverse-btn-active-bg;
+ $active-background: $bmd-inverse-btn-active-bg;
+ $active-border: $bmd-inverse-btn-active-bg;
@include bmd-button-variant($color,
$background,
@@ -102,7 +102,7 @@
@mixin bmd-flat-button-color() {
- @include bmd-flat-button-variant($mdb-btn-color);
+ @include bmd-flat-button-variant($bmd-btn-color);
// flat bg with text color variations
&.btn-primary {
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 4432f4c9..217a23f6 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -15,18 +15,18 @@
.switch label {
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
- //color: $mdb-label-color;
+ //color: $bmd-label-color;
&,
.is-focused & {
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
- color: $mdb-label-color;
+ color: $bmd-label-color;
// on focus just darken the specific labels, do not turn them to the brand-primary
@include hover-focus-active() {
//&:hover,
//&:focus {
- color: $mdb-label-color-inner-focus;
+ color: $bmd-label-color-inner-focus;
}
// correct the above focus color for disabled items
@@ -36,7 +36,7 @@
&,
&:hover,
&:focus {
- color: $mdb-label-color;
+ color: $bmd-label-color;
}
}
}
@@ -130,7 +130,7 @@
}
.bmd-help {
- color: $mdb-label-color-inner-focus;
+ color: $bmd-label-color-inner-focus;
}
}
}
@@ -146,8 +146,8 @@
@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
$variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
- $static-font-size: ($mdb-bmd-label-static-size-ratio * $font-size);
- $help-font-size: ($mdb-help-size-ratio * $font-size);
+ $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
+ $help-font-size: ($bmd-help-size-ratio * $font-size);
$label-static-top: $label-top-margin;
$label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
@@ -247,19 +247,19 @@
&.form-control-warning,
&.form-control-danger {
$icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
- background-size: $mdb-form-control-bg-size, $icon-bg-size;
+ background-size: $bmd-form-control-bg-size, $icon-bg-size;
&,
&:focus,
.bmd-form-group.is-focused & {
padding-right: ($input-padding-x * 3);
- background-repeat: $mdb-form-control-bg-repeat-y, no-repeat;
- background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25);
+ background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
+ background-position: $bmd-form-control-bg-position, center right ($variant-input-height * .25);
}
&:focus,
.bmd-form-group.is-focused & {
- background-size: $mdb-form-control-bg-size-active, $icon-bg-size;
+ background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
}
}
}
diff --git a/scss/mixins/_variations.scss b/scss/mixins/_variations.scss
index 4d8612ce..3cb5f9f0 100644
--- a/scss/mixins/_variations.scss
+++ b/scss/mixins/_variations.scss
@@ -1,6 +1,6 @@
// variations(unquote(""), background-color, #FFF);
-@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
- @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
+@mixin variations($component, $selector-suffix, $bmd-param-1, $color-default) {
+ @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $bmd-param-1);
}
@mixin variations-content($args) {
@@ -30,7 +30,7 @@
// .dropdown-menu {
// border-radius: $border-radius;
// li > a {
-// font-size: $mdb-dropdown-font-size;
+// font-size: $bmd-dropdown-font-size;
// padding: 13px 16px;
// &:hover,
// &:focus {
@@ -85,14 +85,14 @@
// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
-@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
+@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $bmd-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
//extra: $selector-suffix,
//default: $color-default,
mixin-name: $mixin-name,
- material-param-1: $mdb-param-1
+ material-param-1: $bmd-param-1
);
// bootstrap styles
@@ -100,49 +100,49 @@
$args-extra: map-merge($args, (
variation-color: $color-default,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-extra);
}
//&#{$component}-inverse#{$selector-suffix} {
// $args-inverse: map-merge($args, (
- // variation-color: $mdb-brand-inverse,
- // variation-color-text: contrast-color($mdb-brand-inverse, $gray-dark, $mdb-text-color-inverse)
+ // variation-color: $bmd-brand-inverse,
+ // variation-color-text: contrast-color($bmd-brand-inverse, $gray-dark, $bmd-text-color-inverse)
// ));
// @include call-variations-content-mixin($args-inverse);
//}
&#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, (
variation-color: $brand-primary,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-primary);
}
&#{$component}-success#{$selector-suffix} {
$args-success: map-merge($args, (
variation-color: $brand-success,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-success);
}
&#{$component}-info#{$selector-suffix} {
$args-info: map-merge($args, (
variation-color: $brand-info,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-info);
}
&#{$component}-warning#{$selector-suffix} {
$args-warning: map-merge($args, (
variation-color: $brand-warning,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-warning);
}
&#{$component}-danger#{$selector-suffix} {
$args-danger: map-merge($args, (
variation-color: $brand-danger,
- variation-color-text: $mdb-text-color-inverse
+ variation-color-text: $bmd-text-color-inverse
));
@include call-variations-content-mixin($args-danger);
}
diff --git a/scss/plugins/_plugin-snackbarjs.scss b/scss/plugins/_plugin-snackbarjs.scss
index 51c92bec..c481fa7b 100644
--- a/scss/plugins/_plugin-snackbarjs.scss
+++ b/scss/plugins/_plugin-snackbarjs.scss
@@ -4,13 +4,13 @@
//.snackbar {
// height: 0;
// font-size: 14px;
-// color: $mdb-text-color-inverse;
+// color: $bmd-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);
+// @include box-shadow($bmd-shadow-2dp);
//}
//
//.snackbar.snackbar-opened {
diff --git a/scss/variables/_colors-map.scss b/scss/variables/_colors-map.scss
index ba450166..b20e34ad 100644
--- a/scss/variables/_colors-map.scss
+++ b/scss/variables/_colors-map.scss
@@ -1,6 +1,6 @@
// these might be useful in a switch to sass...at some point.
-//$mdb-colors: (
+//$bmd-colors: (
// "red": $red,
// "pink": $pink,
// "purple": $purple,
@@ -22,7 +22,7 @@
// "blue-grey": $blue-grey
//);
//
-//$mdb-colors-map: (
+//$bmd-colors-map: (
// "red-50": (name: "red", color: $red-50, number: "-50"),
// "red-100": (name: "red", color: $red-100, number: "-100"),
// "red-200": (name: "red", color: $red-200, number: "-200"),
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
index 3e78560a..d30b021f 100644
--- a/scss/variables/_drawer.scss
+++ b/scss/variables/_drawer.scss
@@ -1,5 +1,5 @@
// Drawer
// Sizing
-$mdb-drawer-x-size: 240px !default;
-$mdb-drawer-y-size: 100px !default;
+$bmd-drawer-x-size: 240px !default;
+$bmd-drawer-y-size: 100px !default;
diff --git a/scss/variables/_menu.scss b/scss/variables/_menu.scss
index d450403f..dda67820 100644
--- a/scss/variables/_menu.scss
+++ b/scss/variables/_menu.scss
@@ -1,23 +1,23 @@
-$mdb-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
+$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
-$mdb-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
-$mdb-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
-$mdb-menu-item-min-height: 3rem !default; // 48px
+$bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
+$bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
+$bmd-menu-item-min-height: 3rem !default; // 48px
-$mdb-menu-item-padding-right: 1rem !default;
-$mdb-menu-item-padding-bottom: 1.25rem !default;
-$mdb-menu-item-padding-left: 1rem !default;
+$bmd-menu-item-padding-right: 1rem !default;
+$bmd-menu-item-padding-bottom: 1.25rem !default;
+$bmd-menu-item-padding-left: 1rem !default;
-$mdb-menu-item-padding-top: ($mdb-menu-item-min-height - $font-size-base - $mdb-menu-item-padding-bottom) !default;
+$bmd-menu-item-padding-top: ($bmd-menu-item-min-height - $font-size-base - $bmd-menu-item-padding-bottom) !default;
// md and up
-$mdb-menu-item-padding-right-md: 1.5rem !default;
-$mdb-menu-item-padding-left-md: 1.5rem !default;
+$bmd-menu-item-padding-right-md: 1.5rem !default;
+$bmd-menu-item-padding-left-md: 1.5rem !default;
// Menu
-$mdb-menu-expand-duration: 0.3s !default;
-$mdb-menu-fade-duration: 0.2s !default;
+$bmd-menu-expand-duration: 0.3s !default;
+$bmd-menu-fade-duration: 0.2s !default;
diff --git a/scss/variables/_shadow.scss b/scss/variables/_shadow.scss
index aece57a2..ef1f786c 100644
--- a/scss/variables/_shadow.scss
+++ b/scss/variables/_shadow.scss
@@ -1,35 +1,35 @@
// Shadows (originally from mdl http://www.getmdl.io/)
-$mdb-shadow-umbra-opacity: 0.2 !default;
-$mdb-shadow-penumbra-opacity: 0.14 !default;
-$mdb-shadow-ambient-opacity: 0.12 !default;
+$bmd-shadow-umbra-opacity: 0.2 !default;
+$bmd-shadow-penumbra-opacity: 0.14 !default;
+$bmd-shadow-ambient-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);
+$bmd-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-penumbra-opacity),
- 0 3px 1px -2px rgba($black, $mdb-shadow-umbra-opacity),
- 0 1px 5px 0 rgba($black, $mdb-shadow-ambient-opacity);
+$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity),
+ 0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity);
-$mdb-shadow-3dp: 0 3px 4px 0 rgba($black, $mdb-shadow-penumbra-opacity),
- 0 3px 3px -2px rgba($black, $mdb-shadow-umbra-opacity),
- 0 1px 8px 0 rgba($black, $mdb-shadow-ambient-opacity);
+$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity),
+ 0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity);
-$mdb-shadow-4dp: 0 4px 5px 0 rgba($black, $mdb-shadow-penumbra-opacity),
- 0 1px 10px 0 rgba($black, $mdb-shadow-ambient-opacity),
- 0 2px 4px -1px rgba($black, $mdb-shadow-umbra-opacity);
+$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity),
+ 0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity);
-$mdb-shadow-6dp: 0 6px 10px 0 rgba($black, $mdb-shadow-penumbra-opacity),
- 0 1px 18px 0 rgba($black, $mdb-shadow-ambient-opacity),
- 0 3px 5px -1px rgba($black, $mdb-shadow-umbra-opacity);
+$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity),
+ 0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity);
-$mdb-shadow-8dp: 0 8px 10px 1px rgba($black, $mdb-shadow-penumbra-opacity),
- 0 3px 14px 2px rgba($black, $mdb-shadow-ambient-opacity),
- 0 5px 5px -3px rgba($black, $mdb-shadow-umbra-opacity);
+$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity),
+ 0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity);
-$mdb-shadow-16dp: 0 16px 24px 2px rgba($black, $mdb-shadow-penumbra-opacity),
- 0 6px 30px 5px rgba($black, $mdb-shadow-ambient-opacity),
- 0 8px 10px -5px rgba($black, $mdb-shadow-umbra-opacity);
+$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity),
+ 0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity);
-$mdb-shadow-24dp: 0 9px 46px 8px rgba($black, $mdb-shadow-penumbra-opacity),
- 0 11px 15px -7px rgba($black, $mdb-shadow-ambient-opacity),
- 0 24px 38px 3px rgba($black, $mdb-shadow-umbra-opacity);
+$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity),
+ 0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity),
+ 0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity);
diff --git a/scss/variables/bootstrap/_buttons.scss b/scss/variables/bootstrap/_buttons.scss
index 9eca892a..5823491a 100644
--- a/scss/variables/bootstrap/_buttons.scss
+++ b/scss/variables/bootstrap/_buttons.scss
@@ -1,30 +1,30 @@
// Buttons:
-$mdb-btn-font-size: .875rem !default; // 14px
-$mdb-btn-font-size-lg: 1.25rem !default;
-$mdb-btn-font-size-sm: .8125rem !default; // 13px
-$mdb-btn-margin-bottom: .3125rem !default; // 5px
+$bmd-btn-font-size: .875rem !default; // 14px
+$bmd-btn-font-size-lg: 1.25rem !default;
+$bmd-btn-font-size-sm: .8125rem !default; // 13px
+$bmd-btn-margin-bottom: .3125rem !default; // 5px
// default btn with no specific type designation
-$mdb-btn-color: $gray-dark !default;
-$mdb-btn-bg: inherit !default; //$body-bg !default; // #fff
-$mdb-btn-border: #ccc !default;
+$bmd-btn-color: $gray-dark !default;
+$bmd-btn-bg: inherit !default; //$body-bg !default; // #fff
+$bmd-btn-border: #ccc !default;
-$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
-$mdb-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
-$mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
+$bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
+$bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
+$bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
-$mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
-$mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
-$mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
+$bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
+$bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
+$bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
-$mdb-btn-fab-size: 3.5rem !default; // 56px
-$mdb-btn-fab-size-sm: 2.5rem !default; // 40px
-$mdb-btn-fab-font-size: 1.5rem !default; // 24px
+$bmd-btn-fab-size: 3.5rem !default; // 56px
+$bmd-btn-fab-size-sm: 2.5rem !default; // 40px
+$bmd-btn-fab-font-size: 1.5rem !default; // 24px
// icons
-$mdb-btn-icon-size: 2rem !default; // 32px
-$mdb-btn-icon-size-sm: (.75 * $mdb-btn-icon-size) !default; // ~24px
-$mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
+$bmd-btn-icon-size: 2rem !default; // 32px
+$bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px
+$bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default;
// Buttons
diff --git a/scss/variables/bootstrap/_dropdown.scss b/scss/variables/bootstrap/_dropdown.scss
index 0982f8b2..67ac5ecc 100644
--- a/scss/variables/bootstrap/_dropdown.scss
+++ b/scss/variables/bootstrap/_dropdown.scss
@@ -6,7 +6,7 @@
//$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-box-shadow: $bmd-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;
diff --git a/scss/variables/bootstrap/_forms.scss b/scss/variables/bootstrap/_forms.scss
index 52d80d76..dce64f99 100644
--- a/scss/variables/bootstrap/_forms.scss
+++ b/scss/variables/bootstrap/_forms.scss
@@ -16,7 +16,7 @@ $input-border-radius: 0 !default; // $border-radius !default;
//$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default;
//
-$input-color-placeholder: $mdb-label-color !default; // #999 !default;
+$input-color-placeholder: $bmd-label-color !default; // #999 !default;
diff --git a/scss/variables/bootstrap/_modals.scss b/scss/variables/bootstrap/_modals.scss
index 8b6d26e4..65857994 100644
--- a/scss/variables/bootstrap/_modals.scss
+++ b/scss/variables/bootstrap/_modals.scss
@@ -1,5 +1,5 @@
// Modals
-$modal-content-xs-box-shadow: $mdb-shadow-24dp !default;
+$modal-content-xs-box-shadow: $bmd-shadow-24dp !default;
// Padding applied to the modal body
//$modal-inner-padding: 15px !default;
diff --git a/scss/variables/bootstrap/_nav.scss b/scss/variables/bootstrap/_nav.scss
index cc3b1be7..09f36b84 100644
--- a/scss/variables/bootstrap/_nav.scss
+++ b/scss/variables/bootstrap/_nav.scss
@@ -3,43 +3,43 @@
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
-$mdb-navbar-link-font-weight: $mdb-font-weight-base !default; //
-$mdb-navbar-link-font-size: .875rem !default; // 14
-$mdb-navbar-link-padding: .5321rem 0; // 7
+$bmd-navbar-link-font-weight: $bmd-font-weight-base !default; //
+$bmd-navbar-link-font-size: .875rem !default; // 14
+$bmd-navbar-link-padding: .5321rem 0; // 7
// tabs & pills
-$mdb-nav-tabs-pills-font-weight: 500 !default; //
-$mdb-nav-tabs-pills-font-size: .875rem !default; // 14
-$mdb-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14
+$bmd-nav-tabs-pills-font-weight: 500 !default; //
+$bmd-nav-tabs-pills-font-size: .875rem !default; // 14
+$bmd-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14
// tabs only
-$mdb-nav-tabs-border-size: .214rem !default; // 3px
+$bmd-nav-tabs-border-size: .214rem !default; // 3px
-$mdb-nav-tabs-color: $gray !default;
-$mdb-nav-tabs-active-color: $gray-dark !default;
-$mdb-nav-tabs-active-border-color: $brand-primary !default;
-$mdb-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
-$mdb-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;
+$bmd-nav-tabs-color: $gray !default;
+$bmd-nav-tabs-active-color: $gray-dark !default;
+$bmd-nav-tabs-active-border-color: $brand-primary !default;
+$bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
+$bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;
-$mdb-nav-tabs-primary-color: $mdb-text-color-inverse !default;
-$mdb-nav-tabs-primary-active-color: #fff !default;
-$mdb-nav-tabs-primary-active-border-color: #fff !default;
-$mdb-nav-tabs-primary-disabled-link-color: $mdb-text-color-inverse-light !default;
-$mdb-nav-tabs-primary-disabled-link-color-hover: $mdb-text-color-inverse-light !default;
+$bmd-nav-tabs-primary-color: $bmd-text-color-inverse !default;
+$bmd-nav-tabs-primary-active-color: #fff !default;
+$bmd-nav-tabs-primary-active-border-color: #fff !default;
+$bmd-nav-tabs-primary-disabled-link-color: $bmd-text-color-inverse-light !default;
+$bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-text-color-inverse-light !default;
-$mdb-nav-tabs-inverse-color: $mdb-text-color-inverse !default;
-$mdb-nav-tabs-inverse-active-color: #fff !default;
-$mdb-nav-tabs-inverse-active-border-color: #fff !default;
-$mdb-nav-tabs-inverse-disabled-link-color: $mdb-text-color-inverse-light !default;
-$mdb-nav-tabs-inverse-disabled-link-color-hover: $mdb-text-color-inverse-light !default;
+$bmd-nav-tabs-inverse-color: $bmd-text-color-inverse !default;
+$bmd-nav-tabs-inverse-active-color: #fff !default;
+$bmd-nav-tabs-inverse-active-border-color: #fff !default;
+$bmd-nav-tabs-inverse-disabled-link-color: $bmd-text-color-inverse-light !default;
+$bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-text-color-inverse-light !default;
//$nav-item-margin: .2rem !default;
-//$mdb-nav-link-line-height: 1 !default; // makes it easier to line up with the spec
+//$bmd-nav-link-line-height: 1 !default; // makes it easier to line up with the spec
//$nav-link-padding: .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity
//$nav-link-hover-bg: $gray-lighter !default;
diff --git a/scss/variables/bootstrap/_state.scss b/scss/variables/bootstrap/_state.scss
index ffc3e074..bb20af1a 100644
--- a/scss/variables/bootstrap/_state.scss
+++ b/scss/variables/bootstrap/_state.scss
@@ -1,15 +1,15 @@
// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.
-$state-success-text: $mdb-text-color-inverse !default;
+$state-success-text: $bmd-text-color-inverse !default;
$state-success-bg: $brand-success !default;
-$state-info-text: $mdb-text-color-inverse !default;
+$state-info-text: $bmd-text-color-inverse !default;
$state-info-bg: $brand-info !default;
-$state-warning-text: $mdb-text-color-inverse !default;
+$state-warning-text: $bmd-text-color-inverse !default;
$state-warning-bg: $brand-warning !default;
-$state-danger-text: $mdb-text-color-inverse !default;
+$state-danger-text: $bmd-text-color-inverse !default;
$state-danger-bg: $brand-danger !default;