mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-01-30 19:24:10 +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 { .form-control:focus:disabled {
border-style: dashed; border-style: dashed;
} }
select.form-control {
height: 23px;
}
select[multiple].form-control,
select[multiple].form-control:focus {
height: 85px;
}
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
/* active state */ /* active state */
@ -1204,16 +1211,11 @@ h6,
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 12px; left: 0px;
top: 7px; top: 5px;
transition: 0.2s ease all; transition: 0.2s ease all;
opacity: 0; 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 { .form-control-wrapper .form-control:not(.empty) ~ .floating-label {
top: -10px; top: -10px;
font-size: 10px; font-size: 10px;
@ -1286,7 +1288,7 @@ h6,
background: #ff5722; background: #ff5722;
} }
.form-group.has-warning .control-label, .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; color: #ff5722;
} }
.form-group.has-error .material-input:before, .form-group.has-error .material-input:before,
@ -1294,7 +1296,7 @@ h6,
background: #f44336; background: #f44336;
} }
.form-group.has-error .control-label, .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; color: #f44336;
} }
.form-group.has-success .material-input:before, .form-group.has-success .material-input:before,
@ -1302,7 +1304,7 @@ h6,
background: #0f9d58; background: #0f9d58;
} }
.form-group.has-success .control-label, .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; color: #0f9d58;
} }
.form-group.has-info .material-input:before, .form-group.has-info .material-input:before,
@ -1310,7 +1312,7 @@ h6,
background: #03a9f4; background: #03a9f4;
} }
.form-group.has-info .control-label, .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; color: #03a9f4;
} }
.form-group .material-input:before, .form-group .material-input:before,
@ -1523,74 +1525,74 @@ h6,
.form-group-material-lightgrey .control-label { .form-group-material-lightgrey .control-label {
color: #ececec; color: #ececec;
} }
.form-group input.form-control:focus ~ .floating-label, .form-group input.form-control:not(.empty) ~ .floating-label,
.form-group-default input.form-control:focus ~ .floating-label { .form-group-default input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5; color: #3f51b5;
} }
.form-group-primary input.form-control:focus ~ .floating-label { .form-group-primary input.form-control:not(.empty) ~ .floating-label {
color: #4285f4; color: #4285f4;
} }
.form-group-success input.form-control:focus ~ .floating-label { .form-group-success input.form-control:not(.empty) ~ .floating-label {
color: #0f9d58; color: #0f9d58;
} }
.form-group-info input.form-control:focus ~ .floating-label { .form-group-info input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4; color: #03a9f4;
} }
.form-group-warning input.form-control:focus ~ .floating-label { .form-group-warning input.form-control:not(.empty) ~ .floating-label {
color: #ff5722; color: #ff5722;
} }
.form-group-danger input.form-control:focus ~ .floating-label { .form-group-danger input.form-control:not(.empty) ~ .floating-label {
color: #f44336; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; color: #ececec;
} }
.input-group .form-control-wrapper { .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 { .form-control-wrapper {
position: relative; position: relative;
@ -28,16 +36,11 @@
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 12px; left: 0px;
top: 7px; top: 5px;
transition: 0.2s ease all; transition: 0.2s ease all;
opacity: 0; opacity: 0;
} }
.form-control:focus ~ .floating-label {
top: -10px;
font-size: 10px;
color: @input-default;
}
.form-control:not(.empty) ~ .floating-label { .form-control:not(.empty) ~ .floating-label {
top: -10px; top: -10px;
font-size: 10px; font-size: 10px;
@ -115,7 +118,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after { .material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-warning; background: @input-warning;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-warning; color: @input-warning;
} }
} }
@ -123,7 +126,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after { .material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-danger; background: @input-danger;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-danger; color: @input-danger;
} }
} }
@ -131,7 +134,7 @@
.material-input:before, input.form-control:focus ~ .material-input:after { .material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-success; background: @input-success;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-success; color: @input-success;
} }
} }
@ -139,14 +142,14 @@
.material-input:before, input.form-control:focus ~ .material-input:after { .material-input:before, input.form-control:focus ~ .material-input:after {
background: @input-info; background: @input-info;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:not(.empty) ~ .floating-label {
color: @input-info; color: @input-info;
} }
} }
.variations(~" .material-input:before", background-color, @indigo); .variations(~" .material-input:before", background-color, @indigo);
.variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo); .variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
.variations(~" .control-label", color, @lightbg-text); .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() !== "") { if ($(this).val() !== "") {
$(this).removeClass("empty"); $(this).removeClass("empty");
} else { } else {