mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 03:19:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

due to css ~ adjacent sibling connector, existing <label> elements must be reordered after the input for floating labels to work.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-06 14:20:23 -06:00
parent 86f056230b
commit eb7efcc48a
15 changed files with 167 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/material-fullpalette.css vendored
View File

@ -20653,7 +20653,7 @@ fieldset[disabled] .form-control {
}
.input-lg + .floating-label {
font-size: 18px;
top: 10px;
top: 7px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.css vendored
View File

@ -4959,7 +4959,7 @@ fieldset[disabled] .form-control {
}
.input-lg + .floating-label {
font-size: 18px;
top: 10px;
top: 7px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

16
dist/js/material.js vendored
View File

@ -79,9 +79,6 @@
formGroup = $input.wrap("<div class='form-group'></div>");
}
//
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")) {
var placeholder = $input.attr("placeholder");
@ -93,6 +90,16 @@
}
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
}
else {
// 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");
if($label.length > 0){
$label.detach();
$input.after($label);
}
}
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
if ($input.attr("data-hint")) {
@ -104,6 +111,9 @@
$input.addClass("empty");
}
// Add at the end of the form-group
formGroup.append("<span class='material-input'></span>");
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");

2
dist/js/material.min.js vendored
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>")),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);
!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.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

2
dist/js/material.min.js.map vendored
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","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"}
{"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","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

5
index.html
View File

@ -495,7 +495,6 @@
<div class="form-group">
<label for="i1" class="not-floating">Static label</label>
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div>
@ -505,10 +504,8 @@
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
</div>
<!--<div class="form-group">-->
<!-- Exercise backwards compatibility without form-group -->
<input type="text" class="form-control floating-label" placeholder="Legacy floating label" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
<!--</div>-->
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
<h2>Textarea</h2>

43
less/_inputs.less
View File

@ -3,11 +3,14 @@
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
.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 {
.control-label,
input.form-control:focus ~ .floating-label {
color: @color;
}
}
@ -75,6 +78,20 @@
}
}
// shared sizing
.input-floating-label-size(@name, @size) {
.@{name} + & {
font-size: @size;
top: 7px;
}
.form-control.@{name}:focus ~ &,
.form-control.@{name}:not(.empty) ~ & {
top: @floating-label-size-ratio * -@size;
font-size: @floating-label-size-ratio * @size;
}
}
.floating-label {
color: @input-placeholder-color;
position: absolute;
@ -84,31 +101,15 @@
transition: 0.3s ease all;
font-size: @font-size-base; // Input sizes
// sizing
.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 + & { // small
font-size: @font-size-small;
top: 7px;
}
.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 + & {
font-size: @font-size-large;
top: 10px;
}
.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;
}
.input-floating-label-size(input-sm, @font-size-small);
.input-floating-label-size(input-lg, @font-size-large);
.form-control:focus ~ & {
color: @primary;

209
sass/_inputs.scss
View File

@ -5,41 +5,18 @@
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
.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 {
.control-label,
input.form-control:focus + .floating-label {
color: $color;
}
}
fieldset[disabled] .form-control, .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;
}
}
}
fieldset[disabled] .form-control, .form-control {
&:textarea {
height: 40px;
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
}
}
.form-control {
border: 0;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
@ -47,7 +24,7 @@ select[multiple].form-control {
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0,0,0,0);
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
&::-webkit-input-placeholder {
color: $input-placeholder-color;
@ -58,90 +35,101 @@ select[multiple].form-control {
&:-ms-input-placeholder {
color: $input-placeholder-color;
}
}
.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; // Ugly override of Bootstrap border
}
.form-control:focus, .form-control.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;
}
fieldset[disabled] &, & {
&:textarea {
height: 40px;
}
.form-group {
position: relative;
.floating-label {
color: $input-placeholder-color;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
font-size: $font-size-base;
&, &:focus, &.focus {
padding: 0;
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
}
}
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
&[disabled],
&[readonly],
fieldset[disabled] & {
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);
}
}
// shared sizing
@mixin input-floating-label-size($name, $size){
.#{$name} + & {
font-size: $size;
top: 7px;
}
.form-control.#{$name}:focus + &,
.form-control.#{$name}:not(.empty) + & {
top: $floating-label-size-ratio * -$size;
font-size: $floating-label-size-ratio * $size;
}
}
.floating-label {
color: $input-placeholder-color;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
font-size: $font-size-base; // Input sizes
// sizing
.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
font-size: $font-size-small;
top: 7px;
}
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~ .floating-label {
top: $floating-label-size-ratio * -$font-size-small;
font-size: $floating-label-size-ratio * $font-size-small;
}
@include input-floating-label-size(input-sm, $font-size-small);
@include input-floating-label-size(input-lg, $font-size-large);
.input-lg + .floating-label {
font-size: $font-size-large;
top: 10px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
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-group {
position: relative;
//
.form-control:focus ~ .material-input:after,
.form-control.focus ~ .material-input:after {
background-color: $input-default;
textarea {
resize: none;
}
.form-control:invalid {
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
textarea + .form-control-highlight {
margin-top: -11px;
}
@ -151,11 +139,12 @@ 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;
}
select ~ .material-input:after {
select + .material-input:after {
display: none;
}
@ -180,8 +169,7 @@ fieldset[disabled] .form-control.focus:disabled,
// 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);
@include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
@include variations(unquote(" input.form-control:focus + .floating-label"), color, $input-default);
}
.input-group {
@ -202,6 +190,12 @@ fieldset[disabled] .form-control.focus:disabled,
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
}
}
select.form-control {
border: 0;
box-shadow: none;
@ -224,3 +218,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;
}

16
scripts/material.js
View File

@ -79,9 +79,6 @@
formGroup = $input.wrap("<div class='form-group'></div>");
}
//
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")) {
var placeholder = $input.attr("placeholder");
@ -93,6 +90,16 @@
}
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
}
else {
// 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");
if($label.length > 0){
$label.detach();
$input.after($label);
}
}
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
if ($input.attr("data-hint")) {
@ -104,6 +111,9 @@
$input.addClass("empty");
}
// Add at the end of the form-group
formGroup.append("<span class='material-input'></span>");
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");