re-refactored inputs.less - this time kept sibling ~ references properly intact

This commit is contained in:
Kevin Ross 2015-11-06 13:17:17 -06:00
parent a4216fc98b
commit 86f056230b
14 changed files with 294 additions and 337 deletions

View File

@ -20563,6 +20563,29 @@ body .jumbotron-material-blue-grey-A700,
opacity: 0;
}
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
fieldset[disabled] .form-control,
.form-control,
fieldset[disabled] .form-control:focus,
@ -20584,51 +20607,12 @@ fieldset[disabled] .form-control.focus:disabled,
border-style: dashed;
border-bottom: 1px solid #757575;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
height: 85px;
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
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 {
border: 0;
}
.form-control:focus,
.form-control.focus {
outline: none;
@ -20637,56 +20621,54 @@ fieldset[disabled] .form-control.focus:disabled,
box-shadow: none;
transition-duration: 0.3s;
}
.form-group {
position: relative;
.form-control:focus ~ .material-input:after,
.form-control.focus ~ .material-input:after {
background-color: #009688;
}
.form-group .floating-label {
.form-control:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.floating-label {
color: #bdbdbd;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.form-group .floating-label {
font-size: 14px;
}
.form-group .form-control:focus ~ .floating-label,
.form-group .form-control:not(.empty) ~ .floating-label {
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
top: -9.8px;
font-size: 9.8px;
}
.form-group .input-sm + .floating-label {
.input-sm + .floating-label {
font-size: 12px;
top: 7px;
}
.form-group .form-control.input-sm:focus ~ .floating-label,
.form-group .form-control.input-sm:not(.empty) ~ .floating-label {
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~ .floating-label {
top: -8.4px;
font-size: 8.4px;
}
.form-group .input-lg + .floating-label {
.input-lg + .floating-label {
font-size: 18px;
top: 10px;
}
.form-group .form-control.input-lg:focus ~ .floating-label,
.form-group .form-control.input-lg:not(.empty) ~ .floating-label {
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
top: -12.6px;
font-size: 12.6px;
}
.form-group .form-control:focus ~ .floating-label {
.form-control:focus ~ .floating-label {
color: #009688;
}
.form-group .form-control:not(.empty):invalid ~ .floating-label,
.form-group .form-control.focus:invalid ~ .floating-label {
.form-control:not(.empty):invalid ~ .floating-label,
.form-control.focus:invalid ~ .floating-label {
color: #f44336;
}
.form-group .form-control:focus ~ .material-input:after,
.form-group .form-control.focus ~ .material-input:after {
background-color: #009688;
}
.form-group .form-control:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
.form-group {
position: relative;
}
.form-group textarea {
resize: none;
@ -23425,6 +23407,11 @@ fieldset[disabled] .form-control.focus:disabled,
border-radius: 4px;
margin: 0;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
height: 85px;
}
select.form-control {
border: 0;
box-shadow: none;
@ -23446,6 +23433,17 @@ select.form-control.focus {
height: 100%;
z-index: 100;
}
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 {
border: 0;
}
legend {
border-bottom: 0;
}

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

120
dist/css/material.css vendored
View File

@ -4869,6 +4869,29 @@ body .jumbotron-material-blue-grey,
opacity: 0;
}
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
fieldset[disabled] .form-control,
.form-control,
fieldset[disabled] .form-control:focus,
@ -4890,51 +4913,12 @@ fieldset[disabled] .form-control.focus:disabled,
border-style: dashed;
border-bottom: 1px solid #757575;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
height: 85px;
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
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 {
border: 0;
}
.form-control:focus,
.form-control.focus {
outline: none;
@ -4943,56 +4927,54 @@ fieldset[disabled] .form-control.focus:disabled,
box-shadow: none;
transition-duration: 0.3s;
}
.form-group {
position: relative;
.form-control:focus ~ .material-input:after,
.form-control.focus ~ .material-input:after {
background-color: #009688;
}
.form-group .floating-label {
.form-control:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.floating-label {
color: #bdbdbd;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.form-group .floating-label {
font-size: 14px;
}
.form-group .form-control:focus ~ .floating-label,
.form-group .form-control:not(.empty) ~ .floating-label {
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
top: -9.8px;
font-size: 9.8px;
}
.form-group .input-sm + .floating-label {
.input-sm + .floating-label {
font-size: 12px;
top: 7px;
}
.form-group .form-control.input-sm:focus ~ .floating-label,
.form-group .form-control.input-sm:not(.empty) ~ .floating-label {
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~ .floating-label {
top: -8.4px;
font-size: 8.4px;
}
.form-group .input-lg + .floating-label {
.input-lg + .floating-label {
font-size: 18px;
top: 10px;
}
.form-group .form-control.input-lg:focus ~ .floating-label,
.form-group .form-control.input-lg:not(.empty) ~ .floating-label {
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
top: -12.6px;
font-size: 12.6px;
}
.form-group .form-control:focus ~ .floating-label {
.form-control:focus ~ .floating-label {
color: #009688;
}
.form-group .form-control:not(.empty):invalid ~ .floating-label,
.form-group .form-control.focus:invalid ~ .floating-label {
.form-control:not(.empty):invalid ~ .floating-label,
.form-control.focus:invalid ~ .floating-label {
color: #f44336;
}
.form-group .form-control:focus ~ .material-input:after,
.form-group .form-control.focus ~ .material-input:after {
background-color: #009688;
}
.form-group .form-control:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
.form-group {
position: relative;
}
.form-group textarea {
resize: none;
@ -5337,6 +5319,11 @@ fieldset[disabled] .form-control.focus:disabled,
border-radius: 4px;
margin: 0;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
height: 85px;
}
select.form-control {
border: 0;
box-shadow: none;
@ -5358,6 +5345,17 @@ select.form-control.focus {
height: 100%;
z-index: 100;
}
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 {
border: 0;
}
legend {
border-bottom: 0;
}

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

46
dist/js/material.js vendored
View File

@ -70,43 +70,45 @@
.filter(":notmdproc")
.data("mdproc", true)
.each( function() {
var $this = $(this);
var $input = $(this);
// Now using/requiring form-group (instead of the old div.form-control-wrapper)
var formGroup = $this.parent(".form-group");
// 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){
console.error("Expected form-group for input", $this);
//console.debug("Generating form-group for input", $this);
formGroup = $input.wrap("<div class='form-group'></div>");
}
//
formGroup.append("<span class='material-input'></span>");
//if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
// return;
//}
$this.after("<span class=material-input></span>");
// Add floating label if required
if ($this.hasClass("floating-label")) {
var placeholder = $this.attr("placeholder");
$this.attr("placeholder", null).removeClass("floating-label");
$this.after("<div class=floating-label>" + placeholder + "</div>");
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
if ($input.hasClass("floating-label")) {
var placeholder = $input.attr("placeholder");
$input.attr("placeholder", null).removeClass("floating-label");
var id = $input.attr("id");
var forAttribute = "";
if(id) {
forAttribute = "for='" + id + "'";
}
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
}
// Add hint label if using the shorthand data-hint attribute on the input
if ($this.attr("data-hint")) {
$this.after("<p class='help-block hint'>" + $this.attr("data-hint") + "</p>");
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
if ($input.attr("data-hint")) {
$input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
}
// Set as empty if is empty (damn I must improve this...)
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
$this.addClass("empty");
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
$input.addClass("empty");
}
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");
var $input = formGroup.next().detach();
$this.after($input);
var $nextInput = formGroup.next().detach();
$input.after($nextInput);
}
});
},

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&&console.error("Expected form-group for input",b),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var d=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+d+"</div>")}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.next().is("[type=file]")){c.addClass("fileinput");var e=c.next().detach();b.after(e)}})},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.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-group.fileinput",function(){a(this).find("input").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(){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","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>")),c.append("<span class='material-input'></span>"),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>")}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.next().is("[type=file]")){c.addClass("fileinput");var g=c.next().detach();b.after(g)}})},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.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-group.fileinput",function(){a(this).find("input").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(){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","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","$this","formGroup","parent","length","console","error","hasClass","placeholder","attr","removeClass","val","addClass","next","is","$input","detach","attachInputEventHandlers","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$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","append","hasClass","placeholder","attr","removeClass","id","forAttribute","val","addClass","next","is","$nextInput","detach","attachInputEventHandlers","document","on","blur","e","$this","checkValidity","find","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

View File

@ -1,26 +1,14 @@
fieldset[disabled] .form-control, .form-control {
&, &:focus, &.focus {
padding: 0;
float: none;
border: 0;
// usage: .input-validation-state(@input-danger);
.input-validation-state(@color) {
.form-control {
box-shadow: none;
border-radius: 0;
&:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
}
fieldset[disabled] .form-control, .form-control {
&:textarea {
height: 40px;
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
.control-label, input.form-control:focus ~ .floating-label {
color: @color;
}
}
@ -42,24 +30,34 @@ select[multiple].form-control {
&:-ms-input-placeholder {
color: @input-placeholder-color;
}
fieldset[disabled] &, & {
&:textarea {
height: 40px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
&, &:focus, &.focus {
padding: 0;
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
}
}
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
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 {
border: 0; // Ugly override of Bootstrap border
}
.form-control:focus, .form-control.focus {
&:focus,
&.focus {
outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 100% 2px, 100% 1px;
@ -67,9 +65,15 @@ fieldset[disabled] .form-control.focus:disabled,
transition-duration: 0.3s;
}
&:focus ~ .material-input:after,
&.focus ~ .material-input:after {
background-color: @input-default;
}
.form-group {
position: relative;
&:invalid {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
}
}
.floating-label {
color: @input-placeholder-color;
@ -78,51 +82,50 @@ fieldset[disabled] .form-control.focus:disabled,
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
font-size: @font-size-base; // Input sizes
// Input sizes
.floating-label { // base
font-size: @font-size-base;
}
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
.form-control:focus ~ &,
.form-control:not(.empty) ~ & {
top: @floating-label-size-ratio * -@font-size-base;
font-size: @floating-label-size-ratio * @font-size-base;
}
.input-sm + .floating-label { // small
.input-sm + & { // small
font-size: @font-size-small;
top: 7px;
}
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~.floating-label {
.form-control.input-sm:focus ~ &,
.form-control.input-sm:not(.empty) ~ & {
top: @floating-label-size-ratio * -@font-size-small;
font-size: @floating-label-size-ratio * @font-size-small;
}
.input-lg + .floating-label {
.input-lg + & {
font-size: @font-size-large;
top: 10px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
.form-control.input-lg:focus ~ &,
.form-control.input-lg:not(.empty) ~ & {
top: @floating-label-size-ratio * -@font-size-large;
font-size: @floating-label-size-ratio * @font-size-large;
}
.form-control:focus ~ .floating-label {
.form-control:focus ~ & {
color: @primary;
}
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
.form-control:not(.empty):invalid ~ &,
.form-control.focus:invalid ~ & {
color: @input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: @input-default;
}
.form-control:invalid {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
.form-group {
position: relative;
textarea {
resize: none;
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
margin-top: -11px;
}
@ -133,7 +136,8 @@ fieldset[disabled] .form-control.focus:disabled,
font-size: 80%;
display: none;
}
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
.form-control:focus ~ .hint,
.form-control.focus ~ .hint {
display: block;
}
@ -146,64 +150,25 @@ fieldset[disabled] .form-control.focus:disabled,
appearance: none;
}
}
.form-group {
&.has-warning {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: @input-warning;
}
.input-validation-state(@input-warning);
}
&.has-error {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: @input-danger;
}
.input-validation-state(@input-danger);
}
&.has-success {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: @input-success;
}
.input-validation-state(@input-success);
}
&.has-info {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-info, @input-info), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: @input-info;
}
.input-validation-state(@input-info);
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~" .form-control:focus", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
});
.variations(~" .control-label", color, @lightbg-text);
.variations(~" input.form-control:focus ~ .floating-label", color, @input-default);
}
.input-group {
@ -224,6 +189,12 @@ fieldset[disabled] .form-control.focus:disabled,
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
}
}
select.form-control {
border: 0;
box-shadow: none;
@ -246,3 +217,16 @@ select.form-control {
height: 100%;
z-index: 100;
}
// Ugly override of Bootstrap border
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 {
border: 0;
}

View File

@ -1,5 +1,19 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// usage: @include input-validation-state($input-danger);
@mixin input-validation-state($color){
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $color;
}
}
fieldset[disabled] .form-control, .form-control {
&, &:focus, &.focus {
padding: 0;
@ -80,12 +94,9 @@ fieldset[disabled] .form-control.focus:disabled,
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
// Input sizes
.floating-label { // base
font-size: $font-size-base;
}
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
top: $floating-label-size-ratio * -$font-size-base;
@ -115,10 +126,15 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control:focus ~ .floating-label {
color: $primary;
}
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
.form-control:not(.empty):invalid ~ .floating-label,
.form-control.focus:invalid ~ .floating-label {
color: $input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
//
.form-control:focus ~ .material-input:after,
.form-control.focus ~ .material-input:after {
background-color: $input-default;
}
.form-control:invalid {
@ -148,57 +164,19 @@ fieldset[disabled] .form-control.focus:disabled,
appearance: none;
}
}
.form-group {
&.has-warning {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-warning;
}
@include input-validation-state($input-warning);
}
&.has-error {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-danger;
}
@include input-validation-state($input-danger);
}
&.has-success {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-success;
}
@include input-validation-state($input-success);
}
&.has-info {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-info;
}
@include input-validation-state($input-info);
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
@include bg-img-variations(unquote(" .form-control:focus"), $primary);
@include variations(unquote(" .control-label"), color, $lightbg-text);

View File

@ -79,11 +79,8 @@
formGroup = $input.wrap("<div class='form-group'></div>");
}
//if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
// return;
//}
$input.after("<span class='material-input'></span>");
//
formGroup.append("<span class='material-input'></span>");
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
if ($input.hasClass("floating-label")) {