some improvement on navbars

dist/css/ripples.css

@@ -20,22 +20,16 @@
   margin-top: -10px;
   border-radius: 100%;
   background-color: rgba(0, 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 {
-  -webkit-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.15;
 }
 .ripple.ripple-out {
-  -webkit-transition: opacity 0.1s linear 0s !important;
   transition: opacity 0.1s linear 0s !important;
   opacity: 0;
 }

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,wGAAA;UAAA,wFAAA;EACA,eAAA;ECCH;ADCD;EACI,uDAAA;UAAA,+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.15;\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.15;\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,aAAA;;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.15;\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,2 @@
-.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{-webkit-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:.15}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
+.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:.15}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}
 /*# sourceMappingURL=ripples.min.css.map */

dist/css/ripples.min.css.map

@@ -1 +1 @@
-{"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,6FAAA,CACA,4EAAA,CAAA,WAAA,CAAA,kBAGA,mDAAA,CACA,0CAAA,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"]}
+{"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"]}

index.html

@@ -526,14 +526,14 @@
 
               <div class="navbar navbar-inverse">
                 <div class="navbar-header">
-                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
+                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                   </button>
                   <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                 </div>
-                <div class="navbar-collapse collapse navbar-warning-collapse">
+                <div class="navbar-collapse collapse navbar-inverse-collapse">
                   <ul class="nav navbar-nav">
                     <li class="active"><a href="javascript:void(0)">Active</a></li>
                     <li><a href="javascript:void(0)">Link</a></li>
@@ -571,14 +571,14 @@
 
               <div class="navbar navbar-material-light-blue-300">
                 <div class="navbar-header">
-                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
+                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                   </button>
                   <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                 </div>
-                <div class="navbar-collapse collapse navbar-warning-collapse">
+                <div class="navbar-collapse collapse navbar-material-light-blue-collapse">
                   <ul class="nav navbar-nav">
                     <li class="active"><a href="javascript:void(0)">Active</a></li>
                     <li><a href="javascript:void(0)">Link</a></li>

less/_mixins.less

@@ -206,6 +206,87 @@
   .background-variations-factory(~"blue-grey");
 
 
+}
+
+.text-variations(@extra, @default) {
+
+  @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);
+    }
+    &-primary@{extra} {
+    .set-font-color(@primary);
+    }
+    &-success@{extra} {
+    .set-font-color(@success);
+    }
+    &-info@{extra} {
+    .set-font-color(@info);
+    }
+    &-warning@{extra} {
+    .set-font-color(@warning);
+    }
+    &-danger@{extra} {
+    .set-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-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");
+
+
 }
 
 @all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/_navbar.less

@@ -1,5 +1,5 @@
 .navbar {
-    background-color: @navbar-default-bg;
+  background-color: @primary;
   border: 0;
   border-radius: 0;
 
@@ -7,59 +7,60 @@
     position: relative;
     height: 60px;
     line-height: 30px;
-        color: @navbar-brand-color;
+    color: inherit;
     &:hover,
     &:focus {
-            color: @navbar-brand-color;
+      color: inherit;
       background-color: transparent;
     }
   }
 
   .navbar-text {
-        color: @navbar-color;
+    color: inherit;
     margin-top: 20px;
     margin-bottom: 20px;
   }
 
   .navbar-nav {
     > li > a {
-            color: @navbar-link-color;
+      color: inherit;
       padding-top: 20px;
       padding-bottom: 20px;
 
       &:hover,
       &:focus {
-                color: @navbar-link-hover-color;
+        color: inherit;
-                background-color: @navbar-link-hover-bg;
+        background-color: transparent;
       }
     }
     > .active > a {
       &,
       &:hover,
       &:focus {
-                color: @navbar-link-active-color;
+        color: inherit;
-                background-color: @navbar-link-active-bg;
+        background-color: transparent;
       }
     }
     > .disabled > a {
       &,
       &:hover,
       &:focus {
-                color: @navbar-link-disabled-color;
+        color: inherit;
-                background-color: @navbar-link-disabled-bg;
+        background-color: transparent;
       }
     }
   }
 
   // Darken the responsive nav toggle
   .navbar-toggle {
-        border-color: transparent;
+    border: 0;
     &:hover,
     &:focus {
-            background-color: @navbar-toggle-hover-bg;
+      background-color: transparent;
     }
     .icon-bar {
-            background-color: @navbar-toggle-icon-bar-bg;
+      background-color: inherit;
+      border: 1px solid;
     }
   }
 
@@ -79,8 +80,8 @@
       &,
       &:hover,
       &:focus {
-                background-color: @navbar-link-active-bg;
+        background-color: transparent;
-                color: @navbar-link-active-color;
+        color: inherit;
       }
     }
 
@@ -89,33 +90,34 @@
       .open .dropdown-menu {
         > .dropdown-header {
           border: 0;
-                    color: darken(@navbar-link-color, 17%)
+          color: inherit;
         }
         .divider {
-                    background-color: @navbar-border;
+          border-bottom: 1px solid;
+          opacity: 0.08;
         }
         > li > a {
-                    color: @navbar-link-color;
+          color: inherit;
           &:hover,
           &:focus {
-                        color: @navbar-link-hover-color;
+            color: inherit;
-                        background-color: @navbar-link-hover-bg;
+            background-color: transparent;
           }
         }
         > .active > a {
           &,
           &:hover,
           &:focus {
-                        color: @navbar-link-active-color;
+            color: inherit;
-                        background-color: @navbar-link-active-bg;
+            background-color: transparent;
           }
         }
         > .disabled > a {
           &,
           &:hover,
           &:focus {
-                        color: @navbar-link-disabled-color;
+            color: inherit;
-                        background-color: @navbar-link-disabled-bg;
+            background-color: transparent;
           }
         }
       }
@@ -123,23 +125,23 @@
   }
 
   .navbar-link {
-        color: @navbar-link-color;
+    color: inherit;
     &:hover {
-            color: @navbar-link-hover-color;
+      color: inherit;
     }
   }
 
   .btn-link {
-        color: @navbar-link-color;
+    color: inherit;
     &:hover,
     &:focus {
-            color: @navbar-link-hover-color;
+      color: inherit;
     }
     &[disabled],
     fieldset[disabled] & {
       &:hover,
       &:focus {
-                color: @navbar-link-disabled-color;
+        color: inherit;
       }
     }
   }
@@ -147,55 +149,50 @@
   .navbar-form {
     margin-top: 16px;
     .form-control-wrapper .form-control, .form-control {
-            border-color: @navbar-border;
+      border-color: inherit;
-            color: @navbar-border;
+      color: inherit;
     }
     .form-control-wrapper {
       .material-input:before, input:focus ~ .material-input:after {
-                background-color: @navbar-border;
+        background-color: inherit;
       }
     }
-        ::-webkit-input-placeholder { color: @navbar-border; }
-        :-moz-placeholder { color: @navbar-border; };
-        ::-moz-placeholder { color: @navbar-border; };
-        :-ms-input-placeholder { color: @navbar-border; };
   }
-
-    //.variations(~"", background-color, @primary);
   .background-variations(~"", @primary);
+  .text-variations(~" .form-control::placeholder", @primary);
 
   &-inverse {
-        background-color: @navbar-inverse-bg;
+    background-color: @indigo;
   }
   &-material-white {
     background-color: #FFF;
     .navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
-            color: @lightbg-text;
+      color: inherit;
     }
     .navbar-nav {
       & > li > a {
-                color: @lightbg-text;
+        color: inherit;
 
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-hover-bg;
+          background-color: transparent;
         }
       }
       & > .active > a {
         &,
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-active-bg;
+          background-color: transparent;
         }
       }
       & > .disabled > a {
         &,
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-disabled-bg;
+          background-color: transparent;
         }
       }
 
@@ -203,8 +200,8 @@
         &,
         &:hover,
         &:focus {
-                    background-color: @navbar-link-active-bg;
+          background-color: transparent;
-                    color: @lightbg-text;
+          color: inherit;
         }
       }
 

less/_tabs.less

@@ -1,5 +1,5 @@
 .nav-tabs {
-    background: @navbar-default-bg;
+    background: @primary;
     > li {
         > a {
             color: #FFFFFF;

less/_variables.less

@@ -69,26 +69,6 @@
 @input-success: @success;
 @input-info:    @info;
 
-@navbar-danger-bg: @danger;
-@navbar-inverse-bg: #5264AE;
-@navbar-warning-bg: @warning;
-@navbar-success-bg: @success;
-@navbar-info-bg:    @info;
-@navbar-default-bg: @primary;
-@navbar-color: @darkbg-text;
-@navbar-link-color: @darkbg-text;
-@navbar-link-hover-color: @darkbg-text;
-@navbar-link-hover-bg: transparent;
-@navbar-link-active-color: @darkbg-text;
-@navbar-link-active-bg: rgba(0,0,0,0.05);
-@navbar-link-disabled-color: #E5E5E5;
-@navbar-link-disabled-bg: transparent;
-@navbar-brand-color: @darkbg-text;
-@navbar-toggle-border-color: @darkbg-text;
-@navbar-toggle-hover-bg: transparent;
-@navbar-toggle-icon-bar-bg: @darkbg-text;
-@navbar-border: @darkbg-text;
-
 @alert-success: @success;
 @alert-info: @info;
 @alert-warning: @warning;