mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

tweaks on inputs

Browse Source
This commit is contained in:
FezVrasta 2014-09-07 20:12:16 +02:00
parent 6037ee0cee
commit 8c78d8a57b
3 changed files with 53 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
css-compiled/material.css
View File

@ -1192,6 +1192,13 @@ h6,
.form-control:focus:disabled {
border-style: dashed;
}
select.form-control {
height: 23px;
}
select[multiple].form-control,
select[multiple].form-control:focus {
height: 85px;
}
.form-control-wrapper {
position: relative;
/* active state */
@ -1204,16 +1211,11 @@ h6,
font-size: 14px;
position: absolute;
pointer-events: none;
left: 12px;
top: 7px;
left: 0px;
top: 5px;
transition: 0.2s ease all;
opacity: 0;
}
.form-control-wrapper .form-control:focus ~ .floating-label {
top: -10px;
font-size: 10px;
color: #5264ae;
}
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
@ -1286,7 +1288,7 @@ h6,
background: #ff5722;
}
.form-group.has-warning .control-label,
.form-group.has-warning input.form-control:focus ~ .floating-label {
.form-group.has-warning input.form-control:not(.empty) ~ .floating-label {
color: #ff5722;
}
.form-group.has-error .material-input:before,
@ -1294,7 +1296,7 @@ h6,
background: #f44336;
}
.form-group.has-error .control-label,
.form-group.has-error input.form-control:focus ~ .floating-label {
.form-group.has-error input.form-control:not(.empty) ~ .floating-label {
color: #f44336;
}
.form-group.has-success .material-input:before,
@ -1302,7 +1304,7 @@ h6,
background: #0f9d58;
}
.form-group.has-success .control-label,
.form-group.has-success input.form-control:focus ~ .floating-label {
.form-group.has-success input.form-control:not(.empty) ~ .floating-label {
color: #0f9d58;
}
.form-group.has-info .material-input:before,
@ -1310,7 +1312,7 @@ h6,
background: #03a9f4;
}
.form-group.has-info .control-label,
.form-group.has-info input.form-control:focus ~ .floating-label {
.form-group.has-info input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
.form-group .material-input:before,
@ -1523,74 +1525,74 @@ h6,
.form-group-material-lightgrey .control-label {
color: #ececec;
}
.form-group input.form-control:focus ~ .floating-label,
.form-group-default input.form-control:focus ~ .floating-label {
.form-group input.form-control:not(.empty) ~ .floating-label,
.form-group-default input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-primary input.form-control:focus ~ .floating-label {
.form-group-primary input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
}
.form-group-success input.form-control:focus ~ .floating-label {
.form-group-success input.form-control:not(.empty) ~ .floating-label {
color: #0f9d58;
}
.form-group-info input.form-control:focus ~ .floating-label {
.form-group-info input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
.form-group-warning input.form-control:focus ~ .floating-label {
.form-group-warning input.form-control:not(.empty) ~ .floating-label {
color: #ff5722;
}
.form-group-danger input.form-control:focus ~ .floating-label {
.form-group-danger input.form-control:not(.empty) ~ .floating-label {
color: #f44336;
}
.form-group-material-red input.form-control:focus ~ .floating-label {
.form-group-material-red input.form-control:not(.empty) ~ .floating-label {
color: #f44336;
}
.form-group-material-pink input.form-control:focus ~ .floating-label {
.form-group-material-pink input.form-control:not(.empty) ~ .floating-label {
color: #e91e63;
}
.form-group-material-purple input.form-control:focus ~ .floating-label {
.form-group-material-purple input.form-control:not(.empty) ~ .floating-label {
color: #9c27b0;
}
.form-group-material-deeppurple input.form-control:focus ~ .floating-label {
.form-group-material-deeppurple input.form-control:not(.empty) ~ .floating-label {
color: #673ab7;
}
.form-group-material-indigo input.form-control:focus ~ .floating-label {
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-material-lightblue input.form-control:focus ~ .floating-label {
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
.form-group-material-cyan input.form-control:focus ~ .floating-label {
.form-group-material-cyan input.form-control:not(.empty) ~ .floating-label {
color: #00bcd4;
}
.form-group-material-teal input.form-control:focus ~ .floating-label {
.form-group-material-teal input.form-control:not(.empty) ~ .floating-label {
color: #009688;
}
.form-group-material-lightgreen input.form-control:focus ~ .floating-label {
.form-group-material-lightgreen input.form-control:not(.empty) ~ .floating-label {
color: #8bc34a;
}
.form-group-material-lime input.form-control:focus ~ .floating-label {
.form-group-material-lime input.form-control:not(.empty) ~ .floating-label {
color: #cddc39;
}
.form-group-material-lightyellow input.form-control:focus ~ .floating-label {
.form-group-material-lightyellow input.form-control:not(.empty) ~ .floating-label {
color: #ffeb3b;
}
.form-group-material-orange input.form-control:focus ~ .floating-label {
.form-group-material-orange input.form-control:not(.empty) ~ .floating-label {
color: #ff9800;
}
.form-group-material-deeporange input.form-control:focus ~ .floating-label {
.form-group-material-deeporange input.form-control:not(.empty) ~ .floating-label {
color: #ff5722;
}
.form-group-material-grey input.form-control:focus ~ .floating-label {
.form-group-material-grey input.form-control:not(.empty) ~ .floating-label {
color: #9e9e9e;
}
.form-group-material-bluegrey input.form-control:focus ~ .floating-label {
.form-group-material-bluegrey input.form-control:not(.empty) ~ .floating-label {
color: #607d8b;
}
.form-group-material-brown input.form-control:focus ~ .floating-label {
.form-group-material-brown input.form-control:not(.empty) ~ .floating-label {
color: #795548;
}
.form-group-material-lightgrey input.form-control:focus ~ .floating-label {
.form-group-material-lightgrey input.form-control:not(.empty) ~ .floating-label {
color: #ececec;
}
.input-group .form-control-wrapper {

27
less/inputs.less
View File

@ -15,6 +15,14 @@
}
}
}
select.form-control {
height: 23px;
}
select[multiple].form-control {
&, &:focus {
height: 85px;
}
}
.form-control-wrapper {
position: relative;
@ -28,16 +36,11 @@
font-size: 14px;
position: absolute;
pointer-events: none;
left: 12px;
top: 7px;
left: 0px;
top: 5px;
transition: 0.2s ease all;
opacity: 0;
}
.form-control:focus ~ .floating-label {
top: -10px;
font-size: 10px;
color: @input-default;
}
.form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
@ -115,7 +118,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-warning;
}
.control-label, input.form-control:focus ~ .floating-label {
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-warning;
}
}
@ -123,7 +126,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-danger;
}
.control-label, input.form-control:focus ~ .floating-label {
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-danger;
}
}
@ -131,7 +134,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-success;
}
.control-label, input.form-control:focus ~ .floating-label {
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-success;
}
}
@ -139,14 +142,14 @@
.material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-info;
}
.control-label, input.form-control:focus ~ .floating-label {
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-info;
}
}
.variations(~" .material-input:before", background-color, @indigo);
.variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
.variations(~" .control-label", color, @lightbg-text);
.variations(~" input.form-control:focus ~ .floating-label", color, @indigo);
.variations(~" input.form-control:not(.empty) ~ .floating-label", color, @indigo);
}

2
scripts/material.js
View File

@ -24,7 +24,7 @@ $(function (){
}
});
$(document).on("change", ".form-control", function() {
$(document).on("keyup", ".form-control", function() {
if ($(this).val() !== "") {
$(this).removeClass("empty");
} else {