Merge branch 'korgan00#master'

Conflicts:
	index.html

dist/css/ripples.css

@@ -26,7 +26,6 @@
   pointer-events: none;
 }
 .ripple.ripple-on {
-  transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   opacity: 0.1;
 }

dist/css/ripples.css.map

@@ -1 +1 @@
-{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n",".withripple {\n  position: relative;\n}\n.ripple-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n  pointer-events: none;\n}\n.ripple {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  margin-left: -10px;\n  margin-top: -10px;\n  border-radius: 100%;\n  background-color: rgba(0, 0, 0, 0.05);\n  transform: scale(1);\n  transform-origin: 50%;\n  opacity: 0;\n  pointer-events: none;\n}\n.ripple.ripple-on {\n  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n  opacity: 0.1;\n}\n.ripple.ripple-out {\n  transition: opacity 0.1s linear 0s !important;\n  opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}
+{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,YAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}

dist/css/ripples.min.css

@@ -1,2 +1,3 @@
 .withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}
+
 /*# sourceMappingURL=ripples.min.css.map */

dist/css/ripples.min.css.map

@@ -1,5 +1 @@
-<<<<<<< HEAD
+{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CAAA,sBAAA,CAAA,kBACA,CAAA,4BAAA,CAAA,wBAAA,CAAA,oBACA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CAAA,4EACA,CAAA,UAAA,CAAA,kBAAA,2CAGA,CAAA,SACA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.15;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
-{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
-=======
-{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,WAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.15;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
->>>>>>> korgan00#material-colors-implementation

index.html

@@ -118,18 +118,6 @@
       #source-modal h4 {
         color: black;
       }
-
-      /* FIXME: why do I need these overrides? */
-      .navbar input::-webkit-input-placeholder {
-        color: rgba(255,255,255,.84) !important
-      }
-      .navbar input::-moz-placeholder {
-        color: rgba(255,255,255,.84) !important
-      }
-      .navbar input:-ms-input-placeholder {
-        color: rgba(255,255,255,.84) !important
-      }
-
     </style>
 
 
@@ -724,6 +712,10 @@
               .navbar-material-{{color}}
               .well-material-{{color}}
               etc...</code></pre>
+              <div class="sampleOthers">
+                <button class="btn btn-black btn-lg">Black</button>
+                <button class="btn btn-white btn-lg">White</button>
+              </div>
               <div class="sampleRed">
                 <h2><button class="btn btn-material-red btn-lg">Red</button></h2>
                 <button class="btn btn-material-red-50">050</button>

less/_colors.less

@@ -287,7 +287,7 @@ Then, run this script to get the list.
 @orange-A200: #ffab40;
 @orange-A400: #ff9100;
 @orange-A700: #ff6d00;
-@orange-500: @orange;
+@orange: @orange-500;
 
 
 @deep-orange-50: #fbe9e7;
@@ -360,3 +360,4 @@ Then, run this script to get the list.
 
 @black: #000000;
 @white: #ffffff;
+@inverse: @indigo;

less/_mixins.less

@@ -1,239 +1,156 @@
 // usage: .variations(~" .check", color, transparent);
 .variations(@extra, @property, @default) {
-
+  .generic-variations(@extra, @default, {
-  // Bootstrap shades
+      @{property}: @material-color;
-  &@{extra}, &-default@{extra} {
+    });
-    @{property}: @default;
-  }
-  &-primary@{extra} {
-    @{property}: @primary;
-  }
-  &-success@{extra} {
-    @{property}: @success;
-  }
-  &-info@{extra} {
-    @{property}: @info;
-  }
-  &-warning@{extra} {
-    @{property}: @warning;
-  }
-  &-danger@{extra} {
-    @{property}: @danger;
-  }
-
-
-  .variations-factory(@material-color) {
-    .variations-factory-deep(@material-color-number) {
-
-      &-material-@{material-color}@{material-color-number}@{extra} {
-        @final-color: "@{material-color}@{material-color-number}";
-        @{property}: @@final-color;
-      }
-
-    }
-    .variations-factory-deep(~"");
-    .variations-factory-deep(~"-50");
-    .variations-factory-deep(~"-100");
-    .variations-factory-deep(~"-200");
-    .variations-factory-deep(~"-300");
-    .variations-factory-deep(~"-400");
-    .variations-factory-deep(~"-500");
-    .variations-factory-deep(~"-600");
-    .variations-factory-deep(~"-700");
-    .variations-factory-deep(~"-800");
-    .variations-factory-deep(~"-900");
-    .variations-factory-deep(~"-A100");
-    .variations-factory-deep(~"-A200");
-    .variations-factory-deep(~"-A400");
-    .variations-factory-deep(~"-A700");
-  }
-  .variations-factory(~"red");
-  .variations-factory(~"pink");
-  .variations-factory(~"purple");
-  .variations-factory(~"deep-purple");
-  .variations-factory(~"indigo");
-  .variations-factory(~"blue");
-  .variations-factory(~"light-blue");
-  .variations-factory(~"cyan");
-  .variations-factory(~"teal");
-  .variations-factory(~"green");
-  .variations-factory(~"light-green");
-  .variations-factory(~"lime");
-  .variations-factory(~"yellow");
-  .variations-factory(~"amber");
-  .variations-factory(~"orange");
-  .variations-factory(~"deep-orange");
-  .variations-factory(~"brown");
-  .variations-factory(~"grey");
-  .variations-factory(~"blue-grey");
-
 }
 
 .background-variations(@extra, @default) {
-
+  .generic-variations(@extra, @default, {
-  @contrast-factor: 40%;
+      background-color: @material-color;
-
+      color: @text-color;
-  .set-background-and-font-color(@bg-color) {
+    });
-    background-color: @bg-color;
-
-    color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
-    & when (@bg-color = @btn-default) {
-      color: @lightbg-text;
-    }
-  }
-
-  // bootstrap styles
-  &@{extra}, &-default@{extra} {
-    .set-background-and-font-color(@default);
-  }
-  &-primary@{extra} {
-    .set-background-and-font-color(@primary);
-  }
-  &-success@{extra} {
-    .set-background-and-font-color(@success);
-  }
-  &-info@{extra} {
-    .set-background-and-font-color(@info);
-  }
-  &-warning@{extra} {
-    .set-background-and-font-color(@warning);
-  }
-  &-danger@{extra} {
-    .set-background-and-font-color(@danger);
-  }
-
-  // given a color build multiples dephs
-  .background-variations-factory(@material-color) {
-
-    // given a color and its deph build css
-    .background-variations-factory-deep(@material-color-number) {
-
-      &-material-@{material-color}@{material-color-number}@{extra} {
-        @final-background-color: "@{material-color}@{material-color-number}";
-        .set-background-and-font-color(@@final-background-color);
-      }
-
-    }
-
-    .background-variations-factory-deep(~"");
-    .background-variations-factory-deep(~"-50");
-    .background-variations-factory-deep(~"-100");
-    .background-variations-factory-deep(~"-200");
-    .background-variations-factory-deep(~"-300");
-    .background-variations-factory-deep(~"-400");
-    .background-variations-factory-deep(~"-500");
-    .background-variations-factory-deep(~"-600");
-    .background-variations-factory-deep(~"-700");
-    .background-variations-factory-deep(~"-800");
-    .background-variations-factory-deep(~"-900");
-    .background-variations-factory-deep(~"-A100");
-    .background-variations-factory-deep(~"-A200");
-    .background-variations-factory-deep(~"-A400");
-    .background-variations-factory-deep(~"-A700");
-  }
-
-  .background-variations-factory(~"red");
-  .background-variations-factory(~"pink");
-  .background-variations-factory(~"purple");
-  .background-variations-factory(~"deep-purple");
-  .background-variations-factory(~"indigo");
-  .background-variations-factory(~"blue");
-  .background-variations-factory(~"light-blue");
-  .background-variations-factory(~"cyan");
-  .background-variations-factory(~"teal");
-  .background-variations-factory(~"green");
-  .background-variations-factory(~"light-green");
-  .background-variations-factory(~"lime");
-  .background-variations-factory(~"yellow");
-  .background-variations-factory(~"amber");
-  .background-variations-factory(~"orange");
-  .background-variations-factory(~"deep-orange");
-  .background-variations-factory(~"brown");
-  .background-variations-factory(~"grey");
-  .background-variations-factory(~"blue-grey");
-
-
 }
 
 .text-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+      color: @material-color;
+    });
+}
+
+/**
+ *  To use this mixin u should pass a function as final parameter to define
+ *  the style. In that definition u 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 ...
+ *  @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) {
 
   @contrast-factor: 40%;
 
-  .set-font-color(@bg-color) {
-    color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
-  }
-
   // bootstrap styles
   &@{extra}, &-default@{extra} {
-    .set-font-color(@default);
+    @material-color-name: "default";
+    @material-color-full-name: @material-color-name;
+    @material-color: @default;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-black@{extra} {
+    @material-color-name: "black";
+    @material-color-full-name: @material-color-name;
+    @material-color: @black;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-white@{extra} {
+    @material-color-name: "white";
+    @material-color-full-name: @material-color-name;
+    @material-color: @white;
+    @text-color: @lightbg-text;
+    @func();
+  }
+  &-inverse@{extra} {
+    @material-color-name: "inverse";
+    @material-color-full-name: @material-color-name;
+    @material-color: @inverse;
+    @text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @func();
   }
   &-primary@{extra} {
-    .set-font-color(@primary);
+    @material-color-name: "primary";
+    @material-color-full-name: @material-color-name;
+    @material-color: @primary;
+    @text-color: @darkbg-text;
+    @func();
   }
   &-success@{extra} {
-    .set-font-color(@success);
+    @material-color-name: "success";
+    @material-color-full-name: @material-color-name;
+    @material-color: @success;
+    @text-color: @darkbg-text;
+    @func();
   }
   &-info@{extra} {
-    .set-font-color(@info);
+    @material-color-name: "info";
+    @material-color-full-name: @material-color-name;
+    @material-color: @info;
+    @text-color: @darkbg-text;
+    @func();
   }
   &-warning@{extra} {
-    .set-font-color(@warning);
+    @material-color-name: "warning";
+    @material-color-full-name: @material-color-name;
+    @material-color: @warning;
+    @text-color: @darkbg-text;
+    @func();
   }
   &-danger@{extra} {
-    .set-font-color(@danger);
+    @material-color-name: "danger";
+    @material-color-full-name: @material-color-name;
+    @material-color: @danger;
+    @text-color: @darkbg-text;
+    @func();
   }
 
   // given a color build multiples dephs
-  .background-variations-factory(@material-color) {
+  .generic-variations-factory(@material-color-name) {
 
     // given a color and its deph build css
-    .background-variations-factory-deep(@material-color-number) {
+    .generic-variations-factory-deep(@material-color-number) {
 
-      &-material-@{material-color}@{material-color-number}@{extra} {
+      &-material-@{material-color-name}@{material-color-number}@{extra} {
-        @final-background-color: "@{material-color}@{material-color-number}";
+        @material-color-full-name: "@{material-color-name}@{material-color-number}";
-        .set-font-color(@@final-background-color);
+        @material-color: @@material-color-full-name;
+        @text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @func();
       }
 
     }
 
-    .background-variations-factory-deep(~"");
+    .generic-variations-factory-deep(~"");
-    .background-variations-factory-deep(~"-50");
+    .generic-variations-factory-deep(~"-50");
-    .background-variations-factory-deep(~"-100");
+    .generic-variations-factory-deep(~"-100");
-    .background-variations-factory-deep(~"-200");
+    .generic-variations-factory-deep(~"-200");
-    .background-variations-factory-deep(~"-300");
+    .generic-variations-factory-deep(~"-300");
-    .background-variations-factory-deep(~"-400");
+    .generic-variations-factory-deep(~"-400");
-    .background-variations-factory-deep(~"-500");
+    .generic-variations-factory-deep(~"-500");
-    .background-variations-factory-deep(~"-600");
+    .generic-variations-factory-deep(~"-600");
-    .background-variations-factory-deep(~"-700");
+    .generic-variations-factory-deep(~"-700");
-    .background-variations-factory-deep(~"-800");
+    .generic-variations-factory-deep(~"-800");
-    .background-variations-factory-deep(~"-900");
+    .generic-variations-factory-deep(~"-900");
-    .background-variations-factory-deep(~"-A100");
+    .generic-variations-factory-deep(~"-A100");
-    .background-variations-factory-deep(~"-A200");
+    .generic-variations-factory-deep(~"-A200");
-    .background-variations-factory-deep(~"-A400");
+    .generic-variations-factory-deep(~"-A400");
-    .background-variations-factory-deep(~"-A700");
+    .generic-variations-factory-deep(~"-A700");
   }
 
-  .background-variations-factory(~"red");
+  .generic-variations-factory(~"red");
-  .background-variations-factory(~"pink");
+  .generic-variations-factory(~"pink");
-  .background-variations-factory(~"purple");
+  .generic-variations-factory(~"purple");
-  .background-variations-factory(~"deep-purple");
+  .generic-variations-factory(~"deep-purple");
-  .background-variations-factory(~"indigo");
+  .generic-variations-factory(~"indigo");
-  .background-variations-factory(~"blue");
+  .generic-variations-factory(~"blue");
-  .background-variations-factory(~"light-blue");
+  .generic-variations-factory(~"light-blue");
-  .background-variations-factory(~"cyan");
+  .generic-variations-factory(~"cyan");
-  .background-variations-factory(~"teal");
+  .generic-variations-factory(~"teal");
-  .background-variations-factory(~"green");
+  .generic-variations-factory(~"green");
-  .background-variations-factory(~"light-green");
+  .generic-variations-factory(~"light-green");
-  .background-variations-factory(~"lime");
+  .generic-variations-factory(~"lime");
-  .background-variations-factory(~"yellow");
+  .generic-variations-factory(~"yellow");
-  .background-variations-factory(~"amber");
+  .generic-variations-factory(~"amber");
-  .background-variations-factory(~"orange");
+  .generic-variations-factory(~"orange");
-  .background-variations-factory(~"deep-orange");
+  .generic-variations-factory(~"deep-orange");
-  .background-variations-factory(~"brown");
+  .generic-variations-factory(~"brown");
-  .background-variations-factory(~"grey");
+  .generic-variations-factory(~"grey");
-  .background-variations-factory(~"blue-grey");
+  .generic-variations-factory(~"blue-grey");
-
 
 }
 
+
 @all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/_navbar.less

@@ -159,55 +159,19 @@
       }
     }
   }
-  .background-variations(~"", @primary);
+
-  .text-variations(~" .form-control::placeholder", @primary);
+  .generic-variations(~".navbar", @primary, {
+    background-color: @material-color;
+    color: @text-color;
+    // deeply defined to override welljumbo class without !impotant need
+    .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
+      color: @text-color;
+    }
+  });
 
   &-inverse {
     background-color: @indigo;
   }
-  &-material-white {
-    background-color: #FFF;
-    .navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
-      color: inherit;
-    }
-    .navbar-nav {
-      & > li > a {
-        color: inherit;
-
-        &:hover,
-        &:focus {
-          color: inherit;
-          background-color: transparent;
-        }
-      }
-      & > .active > a {
-        &,
-        &:hover,
-        &:focus {
-          color: inherit;
-          background-color: transparent;
-        }
-      }
-      & > .disabled > a {
-        &,
-        &:hover,
-        &:focus {
-          color: inherit;
-          background-color: transparent;
-        }
-      }
-
-      & > .open > a {
-        &,
-        &:hover,
-        &:focus {
-          background-color: transparent;
-          color: inherit;
-        }
-      }
-
-    }
-  }
 
   @media (max-width: 1199px) {