Merge remote-tracking branch 'origin/master'

Author: FezVrasta

README.md

@@ -8,6 +8,12 @@ This theme is in early developement and is not ready for production.
 
 Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/).
 
+## How to install
+
+    bower install bootstrap-material-design --save
+
+
+## Features
 
 Currently supported elements:
 

bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "Material Design for Bootstrap",
+  "version": "0.0.8",
+  "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
+  "authors": [
+    "Federico Zivolo <info@mywebexpression.com>"
+  ],
+  "description": "Material Design theme for Bootstrap 3",
+  "main": "css-compiled/material.css",
+  "keywords": [
+    "material",
+    "design",
+    "bootstrap",
+    "theme",
+    "google",
+    "android"
+  ],
+  "license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

css-compiled/material.css

@@ -1,4 +1,4 @@
-/* Generated by less 1.7.0 */
+/* Generated by less 1.7.5 */
 @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
 @-webkit-keyframes input-highlight {
   0% {
@@ -536,8 +536,8 @@ h6,
 }
 .checkbox input[type=checkbox] ~ .check {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 2px;
+  left: 11px;
   width: 18px;
   height: 18px;
   border: solid 2px;
@@ -1173,11 +1173,15 @@ h6,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+fieldset[disabled] .form-control,
 .form-control-wrapper .form-control,
 .form-control,
+fieldset[disabled] .form-control:focus,
 .form-control-wrapper .form-control:focus,
-.form-control:focus {
-  height: 28px;
+.form-control:focus,
+fieldset[disabled] .form-control.focus,
+.form-control-wrapper .form-control.focus,
+.form-control.focus {
   padding: 0;
   float: none;
   border: 0;
@@ -1186,24 +1190,42 @@ h6,
   background: transparent;
   border-bottom: 1px solid #757575;
 }
+fieldset[disabled] .form-control:not(textarea):not(select),
+.form-control-wrapper .form-control:not(textarea):not(select),
+.form-control:not(textarea):not(select),
+fieldset[disabled] .form-control:focus:not(textarea):not(select),
+.form-control-wrapper .form-control:focus:not(textarea):not(select),
+.form-control:focus:not(textarea):not(select),
+fieldset[disabled] .form-control.focus:not(textarea):not(select),
+.form-control-wrapper .form-control.focus:not(textarea):not(select),
+.form-control.focus:not(textarea):not(select) {
+  height: 28px;
+}
+fieldset[disabled] .form-control:disabled,
 .form-control-wrapper .form-control:disabled,
 .form-control:disabled,
+fieldset[disabled] .form-control:focus:disabled,
 .form-control-wrapper .form-control:focus:disabled,
-.form-control:focus:disabled {
+.form-control:focus:disabled,
+fieldset[disabled] .form-control.focus:disabled,
+.form-control-wrapper .form-control.focus:disabled,
+.form-control.focus:disabled {
   border-style: dashed;
 }
 select.form-control {
   height: 23px;
 }
 select[multiple].form-control,
-select[multiple].form-control:focus {
+select[multiple].form-control:focus,
+select[multiple].form-control.focus {
   height: 85px;
 }
 .form-control-wrapper {
   position: relative;
   /* active state */
 }
-.form-control-wrapper .form-control:focus {
+.form-control-wrapper .form-control:focus,
+.form-control-wrapper .form-control.focus {
   outline: none;
 }
 .form-control-wrapper .floating-label {
@@ -1221,14 +1243,18 @@ select[multiple].form-control:focus {
   font-size: 10px;
   opacity: 1;
 }
-.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
+.form-control-wrapper .form-control:focus:invalid ~ .floating-label,
+.form-control-wrapper .form-control.focus:invalid ~ .floating-label {
   color: #f44336;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   background-color: #5264ae;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
-.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
+.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
   background-color: #f44336;
 }
 .form-control-wrapper .form-control.empty ~ .floating-label {
@@ -1245,7 +1271,8 @@ select[multiple].form-control:focus {
   transform: scaleX(0);
   transition: transform 0s;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:before {
+.form-control-wrapper .form-control:focus ~ .material-input:before,
+.form-control-wrapper .form-control.focus ~ .material-input:before {
   transform: scaleX(1);
   transition: transform 0.2s ease-out;
 }
@@ -1270,7 +1297,8 @@ select[multiple].form-control:focus {
 .form-control-wrapper textarea ~ .form-control-highlight {
   margin-top: -11px;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   -webkit-animation: input-highlight 0.3s ease;
   animation: input-highlight 0.3s ease;
   -webkit-animation-fill-mode: forwards;
@@ -1284,31 +1312,35 @@ select[multiple].form-control:focus {
   display: none;
 }
 .form-group.has-warning .material-input:before,
-.form-group.has-warning input.form-control:focus ~ .material-input:after {
+.form-group.has-warning input.form-control:focus ~ .material-input:after,
+.form-group.has-warning input.form-control.focus ~ .material-input:after {
   background: #ff5722;
 }
 .form-group.has-warning .control-label,
 .form-group.has-warning input.form-control:not(.empty) ~ .floating-label {
   color: #ff5722;
 }
 .form-group.has-error .material-input:before,
-.form-group.has-error input.form-control:focus ~ .material-input:after {
+.form-group.has-error input.form-control:focus ~ .material-input:after,
+.form-group.has-error input.form-control.focus ~ .material-input:after {
   background: #f44336;
 }
 .form-group.has-error .control-label,
 .form-group.has-error input.form-control:not(.empty) ~ .floating-label {
   color: #f44336;
 }
 .form-group.has-success .material-input:before,
-.form-group.has-success input.form-control:focus ~ .material-input:after {
+.form-group.has-success input.form-control:focus ~ .material-input:after,
+.form-group.has-success input.form-control.focus ~ .material-input:after {
   background: #0f9d58;
 }
 .form-group.has-success .control-label,
 .form-group.has-success input.form-control:not(.empty) ~ .floating-label {
   color: #0f9d58;
 }
 .form-group.has-info .material-input:before,
-.form-group.has-info input.form-control:focus ~ .material-input:after {
+.form-group.has-info input.form-control:focus ~ .material-input:after,
+.form-group.has-info input.form-control.focus ~ .material-input:after {
   background: #03a9f4;
 }
 .form-group.has-info .control-label,
@@ -1455,6 +1487,76 @@ select[multiple].form-control:focus {
 .form-group-material-lightgrey input.form-control:focus ~ .material-input:after {
   background-color: #ececec;
 }
+.form-group input.form-control.focus ~ .material-input:after,
+.form-group-default input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-primary input.form-control.focus ~ .material-input:after {
+  background-color: #4285f4;
+}
+.form-group-success input.form-control.focus ~ .material-input:after {
+  background-color: #0f9d58;
+}
+.form-group-info input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-warning input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-danger input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-red input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-pink input.form-control.focus ~ .material-input:after {
+  background-color: #e91e63;
+}
+.form-group-material-purple input.form-control.focus ~ .material-input:after {
+  background-color: #9c27b0;
+}
+.form-group-material-deeppurple input.form-control.focus ~ .material-input:after {
+  background-color: #673ab7;
+}
+.form-group-material-indigo input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-material-cyan input.form-control.focus ~ .material-input:after {
+  background-color: #00bcd4;
+}
+.form-group-material-teal input.form-control.focus ~ .material-input:after {
+  background-color: #009688;
+}
+.form-group-material-lightgreen input.form-control.focus ~ .material-input:after {
+  background-color: #8bc34a;
+}
+.form-group-material-lime input.form-control.focus ~ .material-input:after {
+  background-color: #cddc39;
+}
+.form-group-material-lightyellow input.form-control.focus ~ .material-input:after {
+  background-color: #ffeb3b;
+}
+.form-group-material-orange input.form-control.focus ~ .material-input:after {
+  background-color: #ff9800;
+}
+.form-group-material-deeporange input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-material-grey input.form-control.focus ~ .material-input:after {
+  background-color: #9e9e9e;
+}
+.form-group-material-bluegrey input.form-control.focus ~ .material-input:after {
+  background-color: #607d8b;
+}
+.form-group-material-brown input.form-control.focus ~ .material-input:after {
+  background-color: #795548;
+}
+.form-group-material-lightgrey input.form-control.focus ~ .material-input:after {
+  background-color: #ececec;
+}
 .form-group .control-label,
 .form-group-default .control-label {
   color: rgba(0, 0, 0, 0.84);
@@ -1615,7 +1717,8 @@ select.form-control {
   border-bottom: 1px solid #757575;
   border-radius: 0;
 }
-select.form-control:focus {
+select.form-control:focus,
+select.form-control.focus {
   box-shadow: none;
   border-color: #757575;
 }

demo/index.html

@@ -1342,7 +1342,7 @@ <h1 id="forms">Forms</h1>
 
                         <form class="bs-component">
                             <div class="form-group">
-                                <input class="form-control floating-label" id="focusedInput" type="text" placeholder="Floating label on click input">
+                                <input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
                             </div>
 
                             <div class="form-group">

less/checkboxes.less

@@ -41,8 +41,8 @@
 
     input[type=checkbox] ~ .check {
         position: absolute;
-        top: 0px;
-        left: 0px;
+        top: 2px;
+        left: 11px;
         width: 18px;
         height: 18px;
         border: solid 2px;