move to is-focused instead of .focus to prevent potential oversight with :focus. Standardizing styles based on form-group instead of a mixture of input state and form-group state, including validity, which now sets form-group.has-error

This commit is contained in:
Kevin Ross 2015-11-10 10:26:00 -06:00
parent a482c287dc
commit 3f1e2ef2d1
18 changed files with 582 additions and 611 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

203
dist/css/material.css vendored
View File

@ -4874,13 +4874,13 @@ legend {
font-size: 24px;
}
output {
padding-top: 5px;
padding-top: 9px;
font-size: 16px;
line-height: 1.42857143;
}
.form-control {
height: 32px;
padding: 4px 0px;
height: 40px;
padding: 8px 0px;
font-size: 16px;
line-height: 1.42857143;
}
@ -4889,7 +4889,7 @@ output {
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 32px;
line-height: 40px;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
@ -4899,7 +4899,7 @@ output {
.input-group-sm input[type="time"],
.input-group-sm input[type="datetime-local"],
.input-group-sm input[type="month"] {
line-height: 22px;
line-height: 26px;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
@ -4917,43 +4917,43 @@ output {
min-height: 22px;
}
.form-control-static {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 9px;
padding-bottom: 9px;
min-height: 38px;
}
.input-sm {
height: 22px;
padding: 2px 0px;
height: 26px;
padding: 4px 0px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 22px;
line-height: 22px;
height: 26px;
line-height: 26px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.form-group-sm .form-control {
height: 22px;
padding: 2px 0px;
height: 26px;
padding: 4px 0px;
font-size: 11px;
line-height: 1.5;
}
.form-group-sm select.form-control {
height: 22px;
line-height: 22px;
height: 26px;
line-height: 26px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
height: auto;
}
.form-group-sm .form-control-static {
height: 22px;
height: 26px;
min-height: 33px;
padding: 3px 0px;
padding: 5px 0px;
font-size: 11px;
line-height: 1.5;
}
@ -4997,15 +4997,15 @@ select[multiple].input-lg {
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 5px;
padding-top: 9px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
min-height: 31px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 5px;
padding-top: 9px;
}
}
@media (min-width: 768px) {
@ -5016,7 +5016,7 @@ select[multiple].input-lg {
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 3px;
padding-top: 5px;
font-size: 11px;
}
}
@ -5029,17 +5029,15 @@ select[multiple].input-lg {
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
font-size: 16px;
.form-group.is-focused .form-control {
outline: none;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
font-size: 16px;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
font-size: 16px;
.form-group.is-focused .form-control .material-input:after {
background-color: #009688;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
@ -5047,10 +5045,8 @@ fieldset[disabled] .form-control:textarea,
}
fieldset[disabled] .form-control,
.form-control,
fieldset[disabled] .form-control:focus,
.form-control:focus,
fieldset[disabled] .form-control.focus,
.form-control.focus {
.form-group.is-focused fieldset[disabled] .form-control,
.form-group.is-focused .form-control {
float: none;
border: 0;
box-shadow: none;
@ -5058,10 +5054,8 @@ fieldset[disabled] .form-control.focus,
}
fieldset[disabled] .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control.focus:disabled {
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-control:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
@ -5070,35 +5064,13 @@ fieldset[disabled] .form-control.focus:disabled,
fieldset[disabled] .form-control {
background-color: rgba(0, 0, 0, 0);
}
.form-control:focus,
.form-control.focus {
outline: none;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
}
.form-control:focus ~ .material-input:after,
.form-control.focus ~ .material-input:after {
background-color: #009688;
}
.form-control:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group {
position: relative;
}
.form-group label.control-label {
font-size: 12px;
font-weight: normal;
}
.form-group .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-group.focus .hint {
display: block;
margin: 16px 0 0 0;
}
.form-group label.control-label,
.form-group-default label.control-label {
@ -5185,97 +5157,112 @@ fieldset[disabled] .form-control {
.form-group-material-blue-grey label.control-label {
color: #607d8b;
}
.form-group.focus label.control-label,
.form-group-default.focus label.control-label {
.form-group.is-focused label.control-label,
.form-group-default.is-focused label.control-label {
color: #009688;
}
.form-group-black.focus label.control-label {
.form-group-black.is-focused label.control-label {
color: #000000;
}
.form-group-white.focus label.control-label {
.form-group-white.is-focused label.control-label {
color: #ffffff;
}
.form-group-inverse.focus label.control-label {
.form-group-inverse.is-focused label.control-label {
color: #3f51b5;
}
.form-group-primary.focus label.control-label {
.form-group-primary.is-focused label.control-label {
color: #009688;
}
.form-group-success.focus label.control-label {
.form-group-success.is-focused label.control-label {
color: #4caf50;
}
.form-group-info.focus label.control-label {
.form-group-info.is-focused label.control-label {
color: #03a9f4;
}
.form-group-warning.focus label.control-label {
.form-group-warning.is-focused label.control-label {
color: #ff5722;
}
.form-group-danger.focus label.control-label {
.form-group-danger.is-focused label.control-label {
color: #f44336;
}
.form-group-material-red.focus label.control-label {
.form-group-material-red.is-focused label.control-label {
color: #f44336;
}
.form-group-material-pink.focus label.control-label {
.form-group-material-pink.is-focused label.control-label {
color: #e91e63;
}
.form-group-material-purple.focus label.control-label {
.form-group-material-purple.is-focused label.control-label {
color: #9c27b0;
}
.form-group-material-deep-purple.focus label.control-label {
.form-group-material-deep-purple.is-focused label.control-label {
color: #673ab7;
}
.form-group-material-indigo.focus label.control-label {
.form-group-material-indigo.is-focused label.control-label {
color: #3f51b5;
}
.form-group-material-blue.focus label.control-label {
.form-group-material-blue.is-focused label.control-label {
color: #2196f3;
}
.form-group-material-light-blue.focus label.control-label {
.form-group-material-light-blue.is-focused label.control-label {
color: #03a9f4;
}
.form-group-material-cyan.focus label.control-label {
.form-group-material-cyan.is-focused label.control-label {
color: #00bcd4;
}
.form-group-material-teal.focus label.control-label {
.form-group-material-teal.is-focused label.control-label {
color: #009688;
}
.form-group-material-green.focus label.control-label {
.form-group-material-green.is-focused label.control-label {
color: #4caf50;
}
.form-group-material-light-green.focus label.control-label {
.form-group-material-light-green.is-focused label.control-label {
color: #8bc34a;
}
.form-group-material-lime.focus label.control-label {
.form-group-material-lime.is-focused label.control-label {
color: #cddc39;
}
.form-group-material-yellow.focus label.control-label {
.form-group-material-yellow.is-focused label.control-label {
color: #ffeb3b;
}
.form-group-material-amber.focus label.control-label {
.form-group-material-amber.is-focused label.control-label {
color: #ffc107;
}
.form-group-material-orange.focus label.control-label {
.form-group-material-orange.is-focused label.control-label {
color: #ff9800;
}
.form-group-material-deep-orange.focus label.control-label {
.form-group-material-deep-orange.is-focused label.control-label {
color: #ff5722;
}
.form-group-material-brown.focus label.control-label {
.form-group-material-brown.is-focused label.control-label {
color: #795548;
}
.form-group-material-grey.focus label.control-label {
.form-group-material-grey.is-focused label.control-label {
color: #9e9e9e;
}
.form-group-material-blue-grey.focus label.control-label {
.form-group-material-blue-grey.is-focused label.control-label {
color: #607d8b;
}
.form-group.form-group-sm label.control-label {
font-size: 8.25px;
margin: 12px 0 0 0;
}
.form-group.form-group-lg label.control-label {
font-size: 13.5px;
}
.form-group .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-group.is-focused .hint {
display: block;
}
.form-group.has-warning .form-control {
box-shadow: none;
}
.form-group.has-warning .material-input:focus,
.form-group.has-warning .form-control:focus,
.form-group.has-warning.focus .form-control {
.form-group.has-warning.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
box-shadow: none;
}
@ -5288,7 +5275,7 @@ fieldset[disabled] .form-control {
}
.form-group.has-error .material-input:focus,
.form-group.has-error .form-control:focus,
.form-group.has-error.focus .form-control {
.form-group.has-error.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
box-shadow: none;
}
@ -5301,7 +5288,7 @@ fieldset[disabled] .form-control {
}
.form-group.has-success .material-input:focus,
.form-group.has-success .form-control:focus,
.form-group.has-success.focus .form-control {
.form-group.has-success.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
box-shadow: none;
}
@ -5314,7 +5301,7 @@ fieldset[disabled] .form-control {
}
.form-group.has-info .material-input:focus,
.form-group.has-info .form-control:focus,
.form-group.has-info.focus .form-control {
.form-group.has-info.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
box-shadow: none;
}
@ -5322,12 +5309,6 @@ fieldset[disabled] .form-control {
.form-group.has-info .help-block {
color: #03a9f4;
}
.form-group.form-group-sm label {
font-size: 8.25px;
}
.form-group.form-group-lg label {
font-size: 13.5px;
}
.form-group textarea {
resize: none;
}
@ -5430,15 +5411,15 @@ label.control-label.floating-label {
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
top: -8px;
transition: 0.3s ease all;
}
.form-group.focus label.control-label.floating-label label.control-label {
.form-group.is-focused label.control-label.floating-label label.control-label {
font-size: 12px;
}
.form-control:focus ~ label.control-label.floating-label,
.form-control:not(.empty) ~ label.control-label.floating-label {
top: -12px;
top: -20px;
font-size: 12px;
}
.form-control.input-sm ~ label.control-label.floating-label {
@ -5459,10 +5440,6 @@ label.control-label.floating-label {
top: -13.5px;
font-size: 13.5px;
}
.form-control:not(.empty):invalid ~ label.control-label.floating-label,
.form-control.focus:invalid ~ label.control-label.floating-label {
color: #f44336;
}
.input-group .form-group {
margin-right: 5px;
margin-left: 5px;
@ -5480,7 +5457,7 @@ label.control-label.floating-label {
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
select[multiple].form-control.is-focused {
height: 85px;
}
select.form-control {
@ -5489,7 +5466,7 @@ select.form-control {
border-radius: 0;
}
select.form-control:focus,
select.form-control.focus {
select.form-control.is-focused {
box-shadow: none;
border-color: #757575;
}
@ -5510,9 +5487,9 @@ fieldset[disabled] .form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-group .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-group .form-control.focus:disabled,
.form-control.focus:disabled {
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-group .form-control:disabled,
.form-group.is-focused .form-control:disabled {
border: 0;
}
legend {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

47
dist/js/material.js vendored
View File

@ -73,10 +73,10 @@
var $input = $(this);
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
var formGroup = $input.parent(".form-group");
if(formGroup.length === 0){
var $formGroup = $input.parent(".form-group");
if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this);
formGroup = $input.wrap("<div class='form-group'></div>");
$formGroup = $input.wrap("<div class='form-group'></div>");
}
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@ -94,7 +94,7 @@
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
// we need the label to be *after* the input for it to work properly.
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
var $label = formGroup.find("label.floating-label");
var $label = $formGroup.find("label.floating-label");
if($label.length > 0){
$label.detach();
$input.after($label);
@ -112,12 +112,12 @@
}
// Add at the end of the form-group
formGroup.append("<span class='material-input'></span>");
$formGroup.append("<span class='material-input'></span>");
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");
var $nextInput = formGroup.next().detach();
if ($formGroup.next().is("[type=file]")) {
$formGroup.addClass("fileinput");
var $nextInput = $formGroup.next().detach();
$input.after($nextInput);
}
});
@ -131,20 +131,33 @@
}
})
.on("keyup change", ".form-control", function() {
var $this = $(this);
if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
$this.addClass("empty");
} else {
$this.removeClass("empty");
var $input = $(this);
var $formGroup = $input.parent(".form-group");
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
if ($input.val() === "" && isValid) {
$input.addClass("empty");
}
else {
$input.removeClass("empty");
}
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
// the form-group on change.
if(isValid){
$formGroup.removeClass("has-error");
}
else{
$formGroup.addClass("has-error");
}
})
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
//$(this).find("input").addClass("focus");
$(this).parent().addClass("focus"); // add class to form-group
$(this).parent().addClass("is-focused"); // add class to form-group
})
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
//$(this).find("input").removeClass("focus");
$(this).parent().removeClass("focus"); // remove class from form-group
$(this).parent().removeClass("is-focused"); // remove class from form-group
// .is(":invalid"))
})
.on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this);

View File

@ -1,2 +1,2 @@
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.parent(".form-group");if(0===c.length&&(c=b.wrap("<div class='form-group'></div>")),b.hasClass("floating-label")){var d=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var e=b.attr("id"),f="";e&&(f="for='"+e+"'"),b.after("<label "+f+"class='floating-label'>"+d+"</label>")}else{var g=c.find("label.floating-label");g.length>0&&(g.detach(),b.after(g))}if(b.attr("data-hint")&&b.after("<p class='help-block hint'>"+b.attr("data-hint")+"</p>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),c.append("<span class='material-input'></span>"),c.next().is("[type=file]")){c.addClass("fileinput");var h=c.next().detach();b.after(h)}})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""!==b.val()||"undefined"!=typeof b[0].checkValidity&&!b[0].checkValidity()?b.removeClass("empty"):b.addClass("empty")}).on("focus",".form-group input, .form-group select, .form-group.fileinput",function(){a(this).parent().addClass("focus")}).on("blur",".form-group input, .form-group select, .form-group.fileinput",function(){a(this).parent().removeClass("focus")}).on("change",".form-group.fileinput [type=file]",function(){var b=a(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){console.log(a(this).parent());var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.parent(".form-group");if(0===c.length&&(c=b.wrap("<div class='form-group'></div>")),b.hasClass("floating-label")){var d=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var e=b.attr("id"),f="";e&&(f="for='"+e+"'"),b.after("<label "+f+"class='floating-label'>"+d+"</label>")}else{var g=c.find("label.floating-label");g.length>0&&(g.detach(),b.after(g))}if(b.attr("data-hint")&&b.after("<p class='help-block hint'>"+b.attr("data-hint")+"</p>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),c.append("<span class='material-input'></span>"),c.next().is("[type=file]")){c.addClass("fileinput");var h=c.next().detach();b.after(h)}})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.parent(".form-group"),d="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()&&d?b.addClass("empty"):b.removeClass("empty"),d?c.removeClass("has-error"):c.addClass("has-error")}).on("focus",".form-group input, .form-group select, .form-group.fileinput",function(){a(this).parent().addClass("is-focused")}).on("blur",".form-group input, .form-group select, .form-group.fileinput",function(){a(this).parent().removeClass("is-focused")}).on("change",".form-group.fileinput [type=file]",function(){var b=a(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){console.log(a(this).parent());var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
//# sourceMappingURL=material.min.js.map

View File

@ -1 +1 @@
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","formGroup","parent","length","wrap","hasClass","placeholder","attr","removeClass","id","forAttribute","$label","find","detach","val","addClass","append","next","is","$nextInput","attachInputEventHandlers","document","on","blur","e","$this","checkValidity","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","console","log","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","parent","length","wrap","hasClass","placeholder","attr","removeClass","id","forAttribute","$label","find","detach","val","addClass","append","next","is","$nextInput","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","$this","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","console","log","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

View File

@ -360,7 +360,9 @@
</div>
</div>
<div class="well page" id="input">
<h1 class="header">Input</h1>
<h1 class="header">Input
<small><a href="http://www.google.com/design/spec/components/text-fields.html">specification</a></small>
</h1>
<div class="inputs">
<h2>Input

View File

@ -1,7 +1,7 @@
//
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
//
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap file to make it easier
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
// to identify differences in sizing approaches to form inputs.
// --------------------------------------------------

View File

@ -9,7 +9,7 @@
}
.material-input:focus,
.form-control:focus,
&.focus .form-control {
&.is-focused .form-control {
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
@ -28,15 +28,20 @@
background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
&::-webkit-input-placeholder {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
.form-group.is-focused & {
outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: @input-default;
}
&::-moz-placeholder {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
}
&:-ms-input-placeholder {
.material-placeholder() {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
}
@ -48,8 +53,7 @@
}
&,
&:focus,
&.focus {
.form-group.is-focused & {
//padding: 0;
float: none;
border: 0;
@ -68,34 +72,33 @@
//background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
&:focus,
&.focus {
outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
}
&:focus ~ .material-input:after,
&.focus ~ .material-input:after {
background-color: @input-default;
}
&:invalid {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
}
}
.form-group {
position: relative;
// Labels
label.control-label {
//color: @input-placeholder-color;
font-size: @md-input-label-font-size-base; // 12px same as focused size of floating
font-weight: normal;
//padding-left: 0px;
margin: 16px 0 0 0; // std and lg
}
.variations(~" label.control-label", color, @input-placeholder-color);
.variations(~".is-focused label.control-label", color, @input-default);
// sm
&.form-group-sm {
label.control-label {
font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
margin: 12px 0 0 0; // sm only
}
}
// lg
&.form-group-lg {
label.control-label {
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
}
}
// Hints
@ -105,41 +108,17 @@
display: none;
}
&.focus {
&.is-focused {
.hint {
display: block;
}
}
//.variations(~" label.control-label", color, @lightbg-text);
.variations(~" label.control-label", color, @input-placeholder-color);
.variations(~".focus label.control-label", color, @input-default);
.form-group-validation-state(has-warning, @input-warning);
.form-group-validation-state(has-error, @input-danger);
.form-group-validation-state(has-success, @input-success);
.form-group-validation-state(has-info, @input-info);
// sm
&.form-group-sm {
label {
font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
}
//.form-control {
// padding-left: 0px;
//}
}
// lg
&.form-group-lg {
label {
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
}
//.form-control {
// padding-left: 0px;
//}
}
textarea {
resize: none;
}
@ -184,10 +163,10 @@ label.control-label.floating-label {
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
top: -1 * @md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding
transition: 0.3s ease all;
.form-group.focus & {
.form-group.is-focused & {
label.control-label {
font-size: @md-input-label-font-size-base; // 12px
}
@ -196,18 +175,12 @@ label.control-label.floating-label {
// sizing
.form-control:focus ~ &,
.form-control:not(.empty) ~ & {
top: -1 * @md-input-label-font-size-base;
top: -1 * (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
font-size: @md-input-label-font-size-base;
}
.input-floating-label-size(input-sm, @md-input-font-size-small);
.input-floating-label-size(input-lg, @md-input-font-size-large);
.form-control:not(.empty):invalid ~ &,
.form-control.focus:invalid ~ & {
color: @input-danger;
}
}
.input-group {
@ -229,7 +202,7 @@ label.control-label.floating-label {
}
select[multiple].form-control {
&, &:focus, &.focus {
&, &:focus, &.is-focused {
height: 85px;
}
}
@ -238,7 +211,7 @@ select.form-control {
border: 0;
box-shadow: none;
border-radius: 0;
&:focus, &.focus {
&:focus, &.is-focused {
box-shadow: none;
border-color: #757575;
}
@ -261,11 +234,13 @@ select.form-control {
fieldset[disabled] .form-control:disabled,
.form-group .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-group .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-group .form-control.focus:disabled,
.form-control.focus:disabled {
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-group .form-control:disabled,
.form-group.is-focused .form-control:disabled {
border: 0;
}

View File

@ -1,3 +1,10 @@
// Placeholder text
.material-placeholder(@func) {
&::-moz-placeholder { @func(); } // Firefox
&:-ms-input-placeholder { @func(); } // Internet Explorer 10+
&::-webkit-input-placeholder { @func(); } // Safari and Chrome
}
// usage: .variations(~" .check", color, transparent);
.variations(@extra, @property, @default) {
.generic-variations(@extra, @default, {

View File

@ -100,16 +100,16 @@
@md-input-line-height-computed: floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@md-input-padding-base-vertical: 4px; // 6
@md-input-padding-base-horizontal: 0px; // 12
@md-input-padding-base-vertical: 8px; // was 6.
@md-input-padding-base-horizontal: 0px; // was 12.
@md-input-padding-large-vertical: 8px; // 10
@md-input-padding-large-horizontal: 0px; // 16
@md-input-padding-small-vertical: 2px; // 5
@md-input-padding-small-vertical: 4px; // 5
@md-input-padding-small-horizontal: 0px; // 10
@md-input-padding-xs-vertical: 1px; // 1
@md-input-padding-xs-vertical: 2px; // 1
@md-input-padding-xs-horizontal: 0px; // 5
@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome

View File

@ -1,7 +1,14 @@
// This file is NOT automatically converted and must be manually merged
@import "mixins-utilities";
// Placeholder text
@mixin material-placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}
// variations(unquote(""), background-color, #FFF);
@mixin variations($extra, $material-param-1, $default) {
@include generic-variations($extra, $default, "variations-content", $material-param-1);

View File

@ -73,10 +73,10 @@
var $input = $(this);
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
var formGroup = $input.parent(".form-group");
if(formGroup.length === 0){
var $formGroup = $input.parent(".form-group");
if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this);
formGroup = $input.wrap("<div class='form-group'></div>");
$formGroup = $input.wrap("<div class='form-group'></div>");
}
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@ -94,7 +94,7 @@
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
// we need the label to be *after* the input for it to work properly.
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
var $label = formGroup.find("label.floating-label");
var $label = $formGroup.find("label.floating-label");
if($label.length > 0){
$label.detach();
$input.after($label);
@ -112,12 +112,12 @@
}
// Add at the end of the form-group
formGroup.append("<span class='material-input'></span>");
$formGroup.append("<span class='material-input'></span>");
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");
var $nextInput = formGroup.next().detach();
if ($formGroup.next().is("[type=file]")) {
$formGroup.addClass("fileinput");
var $nextInput = $formGroup.next().detach();
$input.after($nextInput);
}
});
@ -131,20 +131,33 @@
}
})
.on("keyup change", ".form-control", function() {
var $this = $(this);
if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
$this.addClass("empty");
} else {
$this.removeClass("empty");
var $input = $(this);
var $formGroup = $input.parent(".form-group");
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
if ($input.val() === "" && isValid) {
$input.addClass("empty");
}
else {
$input.removeClass("empty");
}
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
// the form-group on change.
if(isValid){
$formGroup.removeClass("has-error");
}
else{
$formGroup.addClass("has-error");
}
})
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
//$(this).find("input").addClass("focus");
$(this).parent().addClass("focus"); // add class to form-group
$(this).parent().addClass("is-focused"); // add class to form-group
})
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
//$(this).find("input").removeClass("focus");
$(this).parent().removeClass("focus"); // remove class from form-group
$(this).parent().removeClass("is-focused"); // remove class from form-group
// .is(":invalid"))
})
.on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this);