From 8c78d8a57b1325fe205a1917ec7dc3aea44d1546 Mon Sep 17 00:00:00 2001 From: FezVrasta Date: Sun, 7 Sep 2014 20:12:16 +0200 Subject: [PATCH] tweaks on inputs --- css-compiled/material.css | 72 ++++++++++++++++++++------------------- less/inputs.less | 27 ++++++++------- scripts/material.js | 2 +- 3 files changed, 53 insertions(+), 48 deletions(-) diff --git a/css-compiled/material.css b/css-compiled/material.css index ccf71d53..d2fd2bfa 100644 --- a/css-compiled/material.css +++ b/css-compiled/material.css @@ -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 { diff --git a/less/inputs.less b/less/inputs.less index f86429c3..2e6b58bc 100644 --- a/less/inputs.less +++ b/less/inputs.less @@ -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); } diff --git a/scripts/material.js b/scripts/material.js index 632051bf..04be9b07 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -24,7 +24,7 @@ $(function (){ } }); - $(document).on("change", ".form-control", function() { + $(document).on("keyup", ".form-control", function() { if ($(this).val() !== "") { $(this).removeClass("empty"); } else {