From 04ab7ddc41a48061dd3cd4d1a583e2185833e927 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Sat, 21 Nov 2015 08:56:29 -0600
Subject: [PATCH] @mdb- namespace known material variables before beginning to
 use bs variables directly

---
 less/_alerts.less             |   6 +-
 less/_buttons.less            |   8 +--
 less/_cards.less              |   6 +-
 less/_checkboxes.less         |  36 +++++-----
 less/_inputs-size.less        | 105 +++++++++++++--------------
 less/_inputs.less             |  52 +++++++-------
 less/_mixins-fullpalette.less |  90 +++++++++++------------
 less/_mixins-shared.less      |  12 ++--
 less/_mixins.less             |  90 +++++++++++------------
 less/_navbar.less             |  20 +++---
 less/_popups.less             |   6 +-
 less/_radios.less             |  16 ++---
 less/_togglebutton.less       |  12 ++--
 less/_variables.less          | 130 ++++++++++++++++------------------
 less/material.less            |   3 +
 15 files changed, 296 insertions(+), 296 deletions(-)

diff --git a/less/_alerts.less b/less/_alerts.less
index 0f4c12f5..224e0903 100755
--- a/less/_alerts.less
+++ b/less/_alerts.less
@@ -4,11 +4,11 @@
 
     // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
     .generic-variations(~"", @darkbg-text, {
-        background-color: @material-color;
-        color: @material-text-color;
+        background-color: @mdb-color;
+        color: @mdb-text-color;
 
         a, .alert-link {
-            color: @material-text-color;
+            color: @mdb-text-color;
         }
     });
 
diff --git a/less/_buttons.less b/less/_buttons.less
index 5afc20f2..7fe52892 100644
--- a/less/_buttons.less
+++ b/less/_buttons.less
@@ -34,22 +34,22 @@
   // BTN hover effect
   // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
-    background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor);
+    background-color: contrast(@mdb-color, darken(@mdb-color, 4%), lighten(@mdb-color, 4%), @contrast-factor);
   });
   // BTN active effect
   // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
-    background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
+    background-color: contrast(@mdb-color, darken(@mdb-color, 6%), lighten(@mdb-color, 6%), @contrast-factor);
   });
   // BTN .active effect
   // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
   .generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
-    background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
+    background-color: contrast(@mdb-color, darken(@mdb-color, 6%), lighten(@mdb-color, 6%), @contrast-factor);
   });
   // BTN flat hover effect
   // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
   .generic-variations(~".btn-flat:hover:not(.btn-link)", @btn-default, {
-    background-color: fade(@material-color, 20%);
+    background-color: fade(@mdb-color, 20%);
   });
 
 }
diff --git a/less/_cards.less b/less/_cards.less
index 2fb0cd2c..52813af1 100644
--- a/less/_cards.less
+++ b/less/_cards.less
@@ -20,8 +20,8 @@
 
 
     border-radius: 2px;
-    color: @card-body-text;
-    background: @card-body-background;
+    color: @mdb-card-body-text;
+    background: @mdb-card-body-background;
 
     .shadow-z-2();
 
@@ -40,7 +40,7 @@
             position: absolute;
             bottom: 16px;
             left: 18px;
-            color: @card-image-headline;
+            color: @mdb-card-image-headline;
             font-size: 2em;
         }
     }
diff --git a/less/_checkboxes.less b/less/_checkboxes.less
index abf4d434..06c82a7b 100644
--- a/less/_checkboxes.less
+++ b/less/_checkboxes.less
@@ -12,23 +12,23 @@
 .form-group {
 
   //// default label size/location
-  .form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
+  .form-group-checkbox-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
 
   // sm label size/location
   &.form-group-sm {
-    .form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small);
+    .form-group-checkbox-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
   }
 
   // lg label size/location
   &.form-group-lg {
-    .form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large);
+    .form-group-checkbox-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
   }
 
   .checkbox {
     label {
       cursor: pointer;
       padding-left: 0; // Reset for Bootstrap rule
-      color: @checkbox-label-color;
+      color: @mdb-checkbox-label-color;
     }
 
     // Hide native checkbox
@@ -54,8 +54,8 @@
         left: 0;
         content: "";
         background-color: rgba(0,0,0,.84);
-        height: @checkbox-size;
-        width: @checkbox-size;
+        height: @mdb-checkbox-size;
+        width: @mdb-checkbox-size;
         border-radius: 100%;
         z-index: 1;
         opacity: 0;
@@ -66,9 +66,9 @@
       .check {
         position: relative;
         display: inline-block;
-        width: @checkbox-size;
-        height: @checkbox-size;
-        border: 2px solid @checkbox-border-color;
+        width: @mdb-checkbox-size;
+        height: @mdb-checkbox-size;
+        border: 2px solid @mdb-checkbox-border-color;
         border-radius: 2px;
         overflow: hidden;
         z-index: 1;
@@ -90,7 +90,7 @@
           0 0 0 0,
           0 0 0 0,
           0 0 0 0 inset;
-        animation: checkbox-off @checkbox-animation-check forwards;
+        animation: checkbox-off @mdb-checkbox-animation-check forwards;
       }
     }
 
@@ -105,22 +105,22 @@
         0px 32px 0 20px,
         -5px 5px 0 10px,
         20px -12px 0 11px;
-      animation: checkbox-on @checkbox-animation-check forwards;
+      animation: checkbox-on @mdb-checkbox-animation-check forwards;
     }
 
     input[type=checkbox]:not(:checked) + .checkbox-material:before {
-      animation: rippleOff @checkbox-animation-ripple;
+      animation: rippleOff @mdb-checkbox-animation-ripple;
     }
     input[type=checkbox]:checked + .checkbox-material:before {
-      animation: rippleOn @checkbox-animation-ripple;
+      animation: rippleOn @mdb-checkbox-animation-ripple;
     }
 
     // Ripple effect on click
     input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-      animation: rippleOff @checkbox-animation-ripple forwards;
+      animation: rippleOff @mdb-checkbox-animation-ripple forwards;
     }
     input[type=checkbox]:checked + .checkbox-material .check:after {
-      animation: rippleOn @checkbox-animation-ripple forwards;
+      animation: rippleOn @mdb-checkbox-animation-ripple forwards;
     }
 
     // Style for disabled inputs
@@ -137,9 +137,9 @@
     }
 
     .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
-    .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color);
-    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
-    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);
   }
 }
 
diff --git a/less/_inputs-size.less b/less/_inputs-size.less
index 01fd9ede..93546703 100644
--- a/less/_inputs-size.less
+++ b/less/_inputs-size.less
@@ -8,22 +8,22 @@
 // --------------------------------------------------
 
 legend {
-  margin-bottom: @md-input-line-height-computed;
-  font-size: (@md-input-font-size-base * 1.5);
+  margin-bottom: @mdb-input-line-height-computed;
+  font-size: (@mdb-input-font-size-base * 1.5);
 }
 
 // Adjust output element
 output {
-  padding-top: (@md-input-padding-base-vertical + 1);
-  font-size: @md-input-font-size-base;
-  line-height: @md-input-line-height-base;
+  padding-top: (@mdb-input-padding-base-vertical + 1);
+  font-size: @mdb-input-font-size-base;
+  line-height: @mdb-input-line-height-base;
 }
 
 .form-control {
-  height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal;
-  font-size: @md-input-font-size-base;
-  line-height: @md-input-line-height-base;
+  height: @mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @mdb-input-padding-base-vertical @mdb-input-padding-base-horizontal;
+  font-size: @mdb-input-font-size-base;
+  line-height: @mdb-input-line-height-base;
 }
 
 // Special styles for iOS temporal inputs
@@ -41,17 +41,17 @@ output {
   input[type="datetime-local"],
   input[type="month"] {
     &.form-control {
-      line-height: @md-input-height-base;
+      line-height: @mdb-input-height-base;
     }
 
     &.input-sm,
     .input-group-sm & {
-      line-height: @md-input-height-small;
+      line-height: @mdb-input-height-small;
     }
 
     &.input-lg,
     .input-group-lg & {
-      line-height: @md-input-height-large;
+      line-height: @mdb-input-height-large;
     }
   }
 }
@@ -60,7 +60,7 @@ output {
 .checkbox {
 
   label {
-    min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+    min-height: @mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
   }
 }
 
@@ -72,9 +72,9 @@ output {
 
 .form-control-static {
   // Size it appropriately next to real form controls
-  padding-top: (@md-input-padding-base-vertical + 1);
-  padding-bottom: (@md-input-padding-base-vertical + 1);
-  min-height: (@md-input-line-height-computed + @md-input-font-size-base);
+  padding-top: (@mdb-input-padding-base-vertical + 1);
+  padding-bottom: (@mdb-input-padding-base-vertical + 1);
+  min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-base);
 }
 
 
@@ -84,11 +84,12 @@ output {
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
 
-// mixin pulled from bootstrap and altered for less/sass compatibility
-.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
+// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
+//  bootstrap-sass has this one, but we would have to then convert it back to less.  chicken meet egg.
+.input-size(@parent, @mdb-input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
 
   @{parent} {
-    height: @input-height;
+    height: @mdb-input-height;
     padding: @padding-vertical @padding-horizontal;
     font-size: @font-size;
     line-height: @line-height;
@@ -96,8 +97,8 @@ output {
   }
 
   select@{parent} {
-    height: @input-height;
-    line-height: @input-height;
+    height: @mdb-input-height;
+    line-height: @mdb-input-height;
   }
 
   textarea@{parent},
@@ -116,56 +117,56 @@ output {
 // The `.form-group-* form-control` variations are sadly duplicated to avoid the
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 .input-sm {
-  .input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small);
+  .input-size('.input-sm', @mdb-input-height-small, @mdb-input-padding-small-vertical, @mdb-input-padding-small-horizontal, @mdb-input-font-size-small, @mdb-input-line-height-small, @mdb-input-border-radius-small);
 }
 .form-group-sm {
   .form-control {
-    height: @md-input-height-small;
-    padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
-    font-size: @md-input-font-size-small;
-    line-height: @md-input-line-height-small;
+    height: @mdb-input-height-small;
+    padding: @mdb-input-padding-small-vertical @mdb-input-padding-small-horizontal;
+    font-size: @mdb-input-font-size-small;
+    line-height: @mdb-input-line-height-small;
   }
   select.form-control {
-    height: @md-input-height-small;
-    line-height: @md-input-height-small;
+    height: @mdb-input-height-small;
+    line-height: @mdb-input-height-small;
   }
   textarea.form-control,
   select[multiple].form-control {
     height: auto;
   }
   .form-control-static {
-    height: @md-input-height-small;
-    min-height: (@md-input-line-height-computed + @md-input-font-size-small);
-    padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
-    font-size: @md-input-font-size-small;
-    line-height: @md-input-line-height-small;
+    height: @mdb-input-height-small;
+    min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-small);
+    padding: (@mdb-input-padding-small-vertical + 1) @mdb-input-padding-small-horizontal;
+    font-size: @mdb-input-font-size-small;
+    line-height: @mdb-input-line-height-small;
   }
 }
 
 .input-lg {
-  .input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large);
+  .input-size('.input-lg', @mdb-input-height-large, @mdb-input-padding-large-vertical, @mdb-input-padding-large-horizontal, @mdb-input-font-size-large, @mdb-input-line-height-large, @mdb-input-border-radius-large);
 }
 .form-group-lg {
   .form-control {
-    height: @md-input-height-large;
-    padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
-    font-size: @md-input-font-size-large;
-    line-height: @md-input-line-height-large;
+    height: @mdb-input-height-large;
+    padding: @mdb-input-padding-large-vertical @mdb-input-padding-large-horizontal;
+    font-size: @mdb-input-font-size-large;
+    line-height: @mdb-input-line-height-large;
   }
   select.form-control {
-    height: @md-input-height-large;
-    line-height: @md-input-height-large;
+    height: @mdb-input-height-large;
+    line-height: @mdb-input-height-large;
   }
   textarea.form-control,
   select[multiple].form-control {
     height: auto;
   }
   .form-control-static {
-    height: @md-input-height-large;
-    min-height: (@md-input-line-height-computed + @md-input-font-size-large);
-    padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
-    font-size: @md-input-font-size-large;
-    line-height: @md-input-line-height-large;
+    height: @mdb-input-height-large;
+    min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-large);
+    padding: (@mdb-input-padding-large-vertical + 1) @mdb-input-padding-large-horizontal;
+    font-size: @mdb-input-font-size-large;
+    line-height: @mdb-input-line-height-large;
   }
 }
 
@@ -179,20 +180,20 @@ output {
   .checkbox,
   .radio-inline,
   .checkbox-inline {
-    padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+    padding-top: (@mdb-input-padding-base-vertical + 1); // Default padding plus a border
   }
   // Account for padding we're adding to ensure the alignment and of help text
   // and other content below items
   .radio,
   .checkbox {
-    min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1));
+    min-height: (@mdb-input-line-height-computed + (@mdb-input-padding-base-vertical + 1));
   }
 
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
   @media (min-width: @screen-sm-min) {
     .control-label {
-      padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+      padding-top: (@mdb-input-padding-base-vertical + 1); // Default padding plus a border
     }
   }
 
@@ -204,16 +205,16 @@ output {
   .form-group-lg {
     @media (min-width: @screen-sm-min) {
       .control-label {
-        padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
-        font-size: @md-input-font-size-large;
+        padding-top: ((@mdb-input-padding-large-vertical * @mdb-input-line-height-large) + 1);
+        font-size: @mdb-input-font-size-large;
       }
     }
   }
   .form-group-sm {
     @media (min-width: @screen-sm-min) {
       .control-label {
-        padding-top: (@md-input-padding-small-vertical + 1);
-        font-size: @md-input-font-size-small;
+        padding-top: (@mdb-input-padding-small-vertical + 1);
+        font-size: @mdb-input-font-size-small;
       }
     }
   }
diff --git a/less/_inputs.less b/less/_inputs.less
index 725e4e09..72121b9d 100644
--- a/less/_inputs.less
+++ b/less/_inputs.less
@@ -18,7 +18,7 @@
       box-shadow: none;
     }
     &.is-focused .form-control {
-      background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
+      background-image: linear-gradient(@color, @color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
     }
     label.control-label,
     .help-block {
@@ -28,14 +28,14 @@
 }
 
 .form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
-  @static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
-  @static-line-height: (@label-floating-size-ratio * @line-height);
+  @static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
+  @static-line-height: (@mdb-label-static-size-ratio * @line-height);
 
   @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
   @label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
 
-  @help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
-  @help-block-line-height: (@help-block-size-ratio * @line-height);
+  @help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size));
+  @help-block-line-height: (@mdb-help-block-size-ratio * @line-height);
 
   // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
   margin: (@label-top-margin + @static-font-size) 0 0 0;
@@ -102,7 +102,7 @@
   // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
   .form-control {
     border: 0;
-    background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
+    background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
     background-size: 0 2px, 100% 1px;
     background-repeat: no-repeat;
     background-position: center bottom, center calc(~"100% - 1px");
@@ -114,7 +114,7 @@
 
     // Placeholders and and labels-as-placeholders should look the same
     .material-placeholder({
-      color: @input-placeholder-color;
+      color: @mdb-input-placeholder-color;
       font-weight: normal;
     });
 
@@ -132,19 +132,19 @@
     &[disabled],
     fieldset[disabled] & {
       background-image: none;
-      border-bottom: 1px dotted @input-underline-color;
+      border-bottom: 1px dotted @mdb-input-underline-color;
     }
   }
 
   &.is-focused .form-control {
     outline: none;
-    background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
+    background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
     background-size: 100% 2px, 100% 1px;
     box-shadow: none;
     transition-duration: 0.3s;
 
     .material-input:after {
-      background-color: @input-default;
+      background-color: @mdb-input-default;
     }
   }
 
@@ -168,7 +168,7 @@
   label,
   label.control-label {
     // same label properties as form-group placeholder
-    color: @input-placeholder-color;
+    color: @mdb-input-placeholder-color;
     font-weight: normal;
   }
 
@@ -184,21 +184,21 @@
     }
   }
 
-  .variations(~" label.control-label", color, @input-placeholder-color);  // default label color variations
-  .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
-  .variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color);  // default label color variations
+  .variations(~" label.control-label", color, @mdb-input-placeholder-color);  // default label color variations
+  .variations(~".is-focused label.control-label", color, @mdb-input-default); // focused label color variations
+  .variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color);  // default label color variations
 
   // default floating size/location
-  .form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
+  .form-group-size-variant(@mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base);
 
   // sm floating size/location
   &.form-group-sm {
-    .form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
+    .form-group-size-variant(@mdb-input-font-size-small, @mdb-label-top-margin-small, @mdb-input-padding-small-vertical, @mdb-input-line-height-small, @mdb-label-as-placeholder-shim-small);
   }
 
   // lg floating size/location
   &.form-group-lg {
-    .form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
+    .form-group-size-variant(@mdb-input-font-size-large, @mdb-label-top-margin-large, @mdb-input-padding-large-vertical, @mdb-input-line-height-large, @mdb-label-as-placeholder-shim-large);
   }
 
   // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
@@ -215,13 +215,13 @@
 
   // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
   .generic-variations(~".is-focused .form-control", @primary, {
-    background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
+    background-image: linear-gradient(@mdb-color, @mdb-color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
   });
 
-  .form-group-validation-state(has-warning, @input-warning);
-  .form-group-validation-state(has-error, @input-danger);
-  .form-group-validation-state(has-success, @input-success);
-  .form-group-validation-state(has-info, @input-info);
+  .form-group-validation-state(has-warning, @mdb-input-warning);
+  .form-group-validation-state(has-error, @mdb-input-danger);
+  .form-group-validation-state(has-success, @mdb-input-success);
+  .form-group-validation-state(has-info, @mdb-input-info);
 
   textarea {
     resize: none;
@@ -247,7 +247,7 @@ select.form-control {
 
   .form-group.is-focused & {
     box-shadow: none;
-    border-color: @input-underline-color;
+    border-color: @mdb-input-underline-color;
   }
 
   &[multiple] {
@@ -270,7 +270,7 @@ select.form-control {
 // input group/addon related styles
 
 // default margin
-.input-group-button-variation(@md-input-padding-base-vertical);
+.input-group-button-variation(@mdb-input-padding-base-vertical);
 
 .form-group {
   //.form-control {
@@ -279,12 +279,12 @@ select.form-control {
 
   // sm margin
   &.form-group-sm {
-    .input-group-button-variation(@md-input-padding-small-vertical);
+    .input-group-button-variation(@mdb-input-padding-small-vertical);
   }
 
   // lg margin
   &.form-group-lg {
-    .input-group-button-variation(@md-input-padding-large-vertical);
+    .input-group-button-variation(@mdb-input-padding-large-vertical);
   }
 }
 
diff --git a/less/_mixins-fullpalette.less b/less/_mixins-fullpalette.less
index 6f364a0e..ba7e25e4 100755
--- a/less/_mixins-fullpalette.less
+++ b/less/_mixins-fullpalette.less
@@ -4,10 +4,10 @@
 // To use this mixin you should pass a function as final parameter to define
 // the style. In that definition you can use the following variables to define it.
 //
-// @material-color-name ---> "red", "green", "indigo" ...
-// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
-// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
-// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+// @mdb-color-name ---> "red", "green", "indigo" ...
+// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
+// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// @mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
 //
 
 .generic-variations(@extra, @default, @func) {
@@ -16,79 +16,79 @@
 
   // bootstrap styles
   &@{extra}, &-default@{extra} {
-    @material-color-name: "default";
-    @material-color-full-name: @material-color-name;
-    @material-color: @default;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "default";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @default;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-black@{extra} {
-    @material-color-name: "black";
-    @material-color-full-name: @material-color-name;
-    @material-color: @black;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "black";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @black;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-white@{extra} {
-    @material-color-name: "white";
-    @material-color-full-name: @material-color-name;
-    @material-color: @white;
-    @material-text-color: @lightbg-text;
+    @mdb-color-name: "white";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @white;
+    @mdb-text-color: @lightbg-text;
     @func();
   }
   &-inverse@{extra} {
-    @material-color-name: "inverse";
-    @material-color-full-name: @material-color-name;
-    @material-color: @inverse;
-    @material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @mdb-color-name: "inverse";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @inverse;
+    @mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
     @func();
   }
   &-primary@{extra} {
-    @material-color-name: "primary";
-    @material-color-full-name: @material-color-name;
-    @material-color: @primary;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "primary";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @primary;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-success@{extra} {
-    @material-color-name: "success";
-    @material-color-full-name: @material-color-name;
-    @material-color: @success;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "success";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @success;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-info@{extra} {
-    @material-color-name: "info";
-    @material-color-full-name: @material-color-name;
-    @material-color: @info;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "info";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @info;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-warning@{extra} {
-    @material-color-name: "warning";
-    @material-color-full-name: @material-color-name;
-    @material-color: @warning;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "warning";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @warning;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-danger@{extra} {
-    @material-color-name: "danger";
-    @material-color-full-name: @material-color-name;
-    @material-color: @danger;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "danger";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @danger;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
 
   // given a color build multiples dephs
-  .generic-variations-factory(@material-color-name) {
+  .generic-variations-factory(@mdb-color-name) {
 
     // given a color and its deph build css
-    .generic-variations-factory-deep(@material-color-number) {
+    .generic-variations-factory-deep(@mdb-color-number) {
 
       &-material-@{material-color-name}@{material-color-number}@{extra} {
-        @material-color-full-name: "@{material-color-name}@{material-color-number}";
-        @material-color: @@material-color-full-name;
-        @material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @mdb-color-full-name: "@{material-color-name}@{material-color-number}";
+        @mdb-color: @@material-color-full-name;
+        @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
         @func();
       }
 
diff --git a/less/_mixins-shared.less b/less/_mixins-shared.less
index 7ff85836..5a9b1fd8 100755
--- a/less/_mixins-shared.less
+++ b/less/_mixins-shared.less
@@ -8,24 +8,24 @@
 // usage: .variations(~" .check", color, transparent);
 .variations(@extra, @property, @default) {
   .generic-variations(@extra, @default, {
-    @{property}: @material-color;
+    @{property}: @mdb-color;
   });
 }
 
 .background-variations(@extra, @default) {
   .generic-variations(@extra, @default, {
-    background-color: @material-color;
-    & when (@material-color = @btn-default) {
+    background-color: @mdb-color;
+    & when (@mdb-color = @btn-default) {
       color: @lightbg-text;
     }
-    & when not (@material-color = @btn-default) {
-      color: @material-text-color;
+    & when not (@mdb-color = @btn-default) {
+      color: @mdb-text-color;
     }
   });
 }
 
 .text-variations(@extra, @default) {
   .generic-variations(@extra, @default, {
-    color: @material-color;
+    color: @mdb-color;
   });
 }
diff --git a/less/_mixins.less b/less/_mixins.less
index 6c80aac9..3e7204a2 100755
--- a/less/_mixins.less
+++ b/less/_mixins.less
@@ -4,10 +4,10 @@
 // To use this mixin you should pass a function as final parameter to define
 // the style. In that definition you can use the following variables to define it.
 //
-// @material-color-name ---> "red", "green", "indigo" ...
-// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
-// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
-// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+// @mdb-color-name ---> "red", "green", "indigo" ...
+// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
+// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// @mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
 //
 
 
@@ -17,79 +17,79 @@
 
   // bootstrap styles
   &@{extra}, &-default@{extra} {
-    @material-color-name: "default";
-    @material-color-full-name: @material-color-name;
-    @material-color: @default;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "default";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @default;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-black@{extra} {
-    @material-color-name: "black";
-    @material-color-full-name: @material-color-name;
-    @material-color: @black;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "black";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @black;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-white@{extra} {
-    @material-color-name: "white";
-    @material-color-full-name: @material-color-name;
-    @material-color: @white;
-    @material-text-color: @lightbg-text;
+    @mdb-color-name: "white";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @white;
+    @mdb-text-color: @lightbg-text;
     @func();
   }
   &-inverse@{extra} {
-    @material-color-name: "inverse";
-    @material-color-full-name: @material-color-name;
-    @material-color: @inverse;
-    @material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @mdb-color-name: "inverse";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @inverse;
+    @mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
     @func();
   }
   &-primary@{extra} {
-    @material-color-name: "primary";
-    @material-color-full-name: @material-color-name;
-    @material-color: @primary;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "primary";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @primary;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-success@{extra} {
-    @material-color-name: "success";
-    @material-color-full-name: @material-color-name;
-    @material-color: @success;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "success";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @success;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-info@{extra} {
-    @material-color-name: "info";
-    @material-color-full-name: @material-color-name;
-    @material-color: @info;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "info";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @info;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-warning@{extra} {
-    @material-color-name: "warning";
-    @material-color-full-name: @material-color-name;
-    @material-color: @warning;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "warning";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @warning;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
   &-danger@{extra} {
-    @material-color-name: "danger";
-    @material-color-full-name: @material-color-name;
-    @material-color: @danger;
-    @material-text-color: @darkbg-text;
+    @mdb-color-name: "danger";
+    @mdb-color-full-name: @mdb-color-name;
+    @mdb-color: @danger;
+    @mdb-text-color: @darkbg-text;
     @func();
   }
 
   // given a color build multiples dephs
-  .generic-variations-factory(@material-color-name) {
+  .generic-variations-factory(@mdb-color-name) {
 
     // given a color and its deph build css
-    .generic-variations-factory-deep(@material-color-number) {
+    .generic-variations-factory-deep(@mdb-color-number) {
 
       &-material-@{material-color-name}@{material-color-number}@{extra} {
-        @material-color-full-name: "@{material-color-name}@{material-color-number}";
-        @material-color: @@material-color-full-name;
-        @material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @mdb-color-full-name: "@{material-color-name}@{material-color-number}";
+        @mdb-color: @@material-color-full-name;
+        @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
         @func();
       }
 
diff --git a/less/_navbar.less b/less/_navbar.less
index 13fa64a3..a342907f 100755
--- a/less/_navbar.less
+++ b/less/_navbar.less
@@ -174,7 +174,7 @@
 
       // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
       //---
-      //height: @input-height-base;
+      //height: @mdb-input-height-base;
       @bs-line-height-base: 1.428571429;
       @bs-line-height-computed:    floor((@font-size-base * @bs-line-height-base)); // ~20px
       height: (@bs-line-height-computed + 8px);
@@ -186,30 +186,30 @@
 
   // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
   .generic-variations(~".navbar", @primary, {
-    background-color: @material-color;
-    color: @material-text-color;
+    background-color: @mdb-color;
+    color: @mdb-text-color;
     // deeply defined to override welljumbo class without !impotant need
     .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
-      color: @material-text-color;
+      color: @mdb-text-color;
     }
     .dropdown-menu {
-      border-radius: @dropdown-radius;
+      border-radius: @mdb-dropdown-radius;
       li > a {
-        font-size: @dropdown-font-size;
+        font-size: @mdb-dropdown-font-size;
         padding: 13px 16px;
         &:hover,
         &:focus {
-          color: @material-color;
+          color: @mdb-color;
           background-color: @grey-200;
         }
       }
       .active > a {
         &:hover,
         &:focus {
-          color: @material-text-color;
+          color: @mdb-text-color;
         }
-        background-color: @material-color;
-        color: @material-text-color;
+        background-color: @mdb-color;
+        color: @mdb-text-color;
       }
     }
   });
diff --git a/less/_popups.less b/less/_popups.less
index d37b549f..0b7f71b9 100644
--- a/less/_popups.less
+++ b/less/_popups.less
@@ -1,9 +1,9 @@
 .popover, .tooltip-inner {
-  color: @popover-color;
+  color: @mdb-popover-color;
   line-height: 1em;
-  background: @popover-background;
+  background: @mdb-popover-background;
   border: none;
-  border-radius: @material-border-radius;
+  border-radius: @mdb-border-radius;
   .shadow-z-1();
 }
 
diff --git a/less/_radios.less b/less/_radios.less
index fb321d03..c53b13fb 100644
--- a/less/_radios.less
+++ b/less/_radios.less
@@ -11,16 +11,16 @@
 .form-group {
 
   // default label size/location
-  .form-group-radio-variant(@md-input-font-size-base, @md-input-line-height-base);
+  .form-group-radio-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
 
   // sm label size/location
   &.form-group-sm {
-    .form-group-radio-variant(@md-input-font-size-small, @md-input-line-height-small);
+    .form-group-radio-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
   }
 
   // lg label size/location
   &.form-group-lg {
-    .form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large);
+    .form-group-radio-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
   }
 }
 
@@ -29,7 +29,7 @@
     cursor: pointer;
     padding-left: 45px;
     position: relative;
-    color: @radio-label-color;
+    color: @mdb-radio-label-color;
 
     span {
       display: block;
@@ -39,7 +39,7 @@
       transition-duration: 0.2s;
     }
     .circle {
-      border: 2px solid @radio-border-color;
+      border: 2px solid @mdb-radio-border-color;
       height: 15px;
       width: 15px;
       border-radius: 100%;
@@ -48,7 +48,7 @@
       height: 15px;
       width: 15px;
       border-radius: 100%;
-      background-color: @radio-default;
+      background-color: @mdb-radio-default;
       transform: scale3d(0, 0, 0);
     }
     .check:after {
@@ -74,8 +74,8 @@
     }
 
   }
-  .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
-  .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
+  .variations(~" input[type=radio]:checked ~ .check", background-color, @mdb-radio-default);
+  .variations(~" input[type=radio]:checked ~ .circle", border-color, @mdb-radio-default);
 
   input[type=radio][disabled] ~ .check,
   input[type=radio][disabled] ~ .circle {
diff --git a/less/_togglebutton.less b/less/_togglebutton.less
index d878bc5c..cf139eae 100644
--- a/less/_togglebutton.less
+++ b/less/_togglebutton.less
@@ -7,16 +7,16 @@
 .form-group {
 
   //// default label size/location
-  .form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);
+  .form-group-toggle-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
 
   // sm label size/location
   &.form-group-sm {
-    .form-group-toggle-variant(@md-input-font-size-small, @md-input-line-height-small);
+    .form-group-toggle-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
   }
 
   // lg label size/location
   &.form-group-lg {
-    .form-group-toggle-variant(@md-input-font-size-large, @md-input-line-height-large);
+    .form-group-toggle-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
   }
 
   .togglebutton {
@@ -26,7 +26,7 @@
     }
     label {
       cursor: pointer;
-      color: @togglebutton-label-color;
+      color: @mdb-toggle-label-color;
 
       // Hide original checkbox
       input[type=checkbox] {
@@ -79,14 +79,14 @@
     // Switch bg on
     // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
     .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
-      background-color: fade(@material-color, 50%);
+      background-color: fade(@mdb-color, 50%);
     });
     // Handle on
     // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
     .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
     // Ripple on
     .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
-      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@mdb-color, 10%);
     });
   }
 }
diff --git a/less/_variables.less b/less/_variables.less
index b9f0e0a9..6732eed7 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -2,7 +2,7 @@
 @zero: 0;
 
 // material icons path
-@material-font-path: "../fonts";
+@mdb-font-path: "../fonts";
 
 // Bootstrap shades
 @primary: @teal;
@@ -44,21 +44,21 @@
 @btn-danger: @danger;
 @btn-danger-text: @darkbg-text;
 
-@input-unchecked: rgba(137, 137, 137, 0.3);
-@input-checked: rgba(15, 157, 88, 0.3);
+@mdb-input-unchecked: rgba(137, 137, 137, 0.3);
+@mdb-input-checked: rgba(15, 157, 88, 0.3);
 
-@radio-default: @lightbg-text;
-@radio-primary: @primary;
-@radio-success: @success;
-@radio-info:    @info;
-@radio-warning: @warning;
-@radio-danger:  @danger;
+@mdb-radio-default: @lightbg-text;
+@mdb-radio-primary: @primary;
+@mdb-radio-success: @success;
+@mdb-radio-info:    @info;
+@mdb-radio-warning: @warning;
+@mdb-radio-danger:  @danger;
 
-@input-danger: @danger;
-@input-default: @primary;
-@input-warning: @warning;
-@input-success: @success;
-@input-info:    @info;
+@mdb-input-danger: @danger;
+@mdb-input-default: @primary;
+@mdb-input-warning: @warning;
+@mdb-input-success: @success;
+@mdb-input-info:    @info;
 
 @alert-success: @success;
 @alert-info: @info;
@@ -79,92 +79,88 @@
 
 
 // Global Material variables
-@material-border-radius: 2px;
+@mdb-border-radius: 2px;
 
 // --------------------
 // inputs
-@input-placeholder-color: #BDBDBD;
-@label-floating-size-ratio: 75 / 100;
-@help-block-size-ratio: 75 / 100;
-@input-underline-color: #D2D2D2;
+@mdb-input-placeholder-color: #BDBDBD;
+@mdb-input-underline-color: #D2D2D2;
+@mdb-label-static-size-ratio: 75 / 100;
+@mdb-help-block-size-ratio: 75 / 100;
 
-@md-input-font-size-base: 16px;
-@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
-@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
-
-// size when static or floating with focus i.e. 16px
-//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
-//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
-//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
+@mdb-input-font-size-base: 16px;
+@mdb-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
+@mdb-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
 
+// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
 //** Unit-less `line-height` for use in components like buttons.
-@md-input-line-height-base:        1.428571429; // 20/14
+@mdb-input-line-height-base:        1.428571429; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@md-input-line-height-computed:    floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
-@md-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
-@md-input-line-height-small:         1.5;
+@mdb-input-line-height-computed:    floor((@mdb-input-font-size-base * @mdb-input-line-height-base)); // ~20px
+@mdb-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@mdb-input-line-height-small:         1.5;
 
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-@md-input-padding-base-vertical:     8px - 1px; // was 6.
-@md-input-padding-base-horizontal:   0px; // was 12.
-@md-label-as-placeholder-shim-base:  0px; // manual adjustment of label top when positioned as placeholder
-@md-label-top-margin-base:           16px;
+@mdb-input-padding-base-vertical:     8px - 1px; // was 6.
+@mdb-input-padding-base-horizontal:   0px; // was 12.
+@mdb-label-as-placeholder-shim-base:  0px; // manual adjustment of label top when positioned as placeholder
+@mdb-label-top-margin-base:           16px;
 
-@md-input-padding-large-vertical:    10px - 1px; // 10
-@md-input-padding-large-horizontal:  0px;  // 16
-@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
-@md-label-top-margin-large:          16px;
+@mdb-input-padding-large-vertical:    10px - 1px; // 10
+@mdb-input-padding-large-horizontal:  0px;  // 16
+@mdb-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
+@mdb-label-top-margin-large:          16px;
 
-@md-input-padding-small-vertical:    4px - 1px; // 5
-@md-input-padding-small-horizontal:  0px; // 10
-@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
-@md-label-top-margin-small:          12px;
+@mdb-input-padding-small-vertical:    4px - 1px; // 5
+@mdb-input-padding-small-horizontal:  0px; // 10
+@mdb-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
+@mdb-label-top-margin-small:          12px;
 
-@md-input-padding-xs-vertical:       2px; // 1
-@md-input-padding-xs-horizontal:     0px; // 5
+@mdb-input-padding-xs-vertical:       2px; // 1
+@mdb-input-padding-xs-horizontal:     0px; // 5
 
-@md-input-border-radius-base:        4px;
-@md-input-border-radius-large:       6px;
-@md-input-border-radius-small:       3px;
+@mdb-input-border-radius-base:        4px;
+@mdb-input-border-radius-large:       6px;
+@mdb-input-border-radius-small:       3px;
 
 
 //** Default `.form-control` height
-@md-input-height-base:              (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2);
+@mdb-input-height-base:              (@mdb-input-line-height-computed + (@mdb-input-padding-base-vertical * 2) + 2);
 //** Large `.form-control` height
-@md-input-height-large:             (ceil(@md-input-font-size-large * @md-input-line-height-large) + (@md-input-padding-large-vertical * 2) + 2);
+@mdb-input-height-large:             (ceil(@mdb-input-font-size-large * @mdb-input-line-height-large) + (@mdb-input-padding-large-vertical * 2) + 2);
 //** Small `.form-control` height
-@md-input-height-small:             (floor(@md-input-font-size-small * @md-input-line-height-small) + (@md-input-padding-small-vertical * 2) + 2);
+@mdb-input-height-small:             (floor(@mdb-input-font-size-small * @mdb-input-line-height-small) + (@mdb-input-padding-small-vertical * 2) + 2);
 
 
 
 
 // Card
-@card-body-text: @lightbg-text;
-@card-body-background: #fff;
-@card-image-headline: #fff;
+@mdb-card-body-text: @lightbg-text;
+@mdb-card-body-background: #fff;
+@mdb-card-image-headline: #fff;
 
 @text-disabled: #a8a8a8;
 @background-disabled: #eaeaea;
 
 // Checkboxes
-@checkbox-size: 20px;
-@checkbox-animation-ripple: 500ms;
-@checkbox-animation-check: 0.3s;
-@checkbox-checked-color: #4caf50;
-@checkbox-label-color: rgba(0, 0, 0, .54);
-@checkbox-border-color: @checkbox-label-color;
+@mdb-checkbox-size: 20px;
+@mdb-checkbox-animation-ripple: 500ms;
+@mdb-checkbox-animation-check: 0.3s;
+@mdb-checkbox-checked-color: #4caf50;
+@mdb-checkbox-label-color: rgba(0, 0, 0, .54);
+@mdb-checkbox-border-color: @mdb-checkbox-label-color;
 
 // Popovers and Popups
-@popover-background: rgba(101, 101, 101, 0.9);
-@popover-color: #ececec;
+@mdb-popover-background: rgba(101, 101, 101, 0.9);
+@mdb-popover-color: #ececec;
 
 // Dropdown Menu
-@dropdown-radius: 2px;
-@dropdown-font-size: 16px;
+@mdb-dropdown-radius: 2px;
+@mdb-dropdown-font-size: 16px;
 
 // Toggle
-@togglebutton-label-color: @checkbox-label-color;
+@mdb-toggle-label-color: @mdb-checkbox-label-color;
 
 // Radio:
-@radio-label-color: @checkbox-label-color;
-@radio-border-color: @checkbox-border-color;
+@mdb-radio-label-color: @mdb-checkbox-label-color;
+@mdb-radio-border-color: @mdb-checkbox-border-color;
diff --git a/less/material.less b/less/material.less
index 05ad3800..dde05e12 100644
--- a/less/material.less
+++ b/less/material.less
@@ -1,3 +1,6 @@
+@import "../bower_components/bootstrap/less/variables.less";
+@import "../bower_components/bootstrap/less/mixins.less";
+
 @import "_colors.less";
 @import "_variables.less";
 @import "_mixins.less";