mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
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
parent
a74bdccf2b
commit
a1212eea18
735
dist/css/material-fullpalette.css
vendored
735
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
203
dist/css/material.css
vendored
203
dist/css/material.css
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
47
dist/js/material.js
vendored
47
dist/js/material.js
vendored
|
|
@ -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);
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -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
|
||||
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
|
|
@ -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"}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user