mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-01 22:13:46 +03:00
A lot of work normalizing static control-labels with floating labels. This was primarily achieved by having material.js put the focus on the form-group, and adjusting styles as needed. Also done was a standardization of label/input sizes, and the introduction/testing of standardized form-group sizes.
This commit is contained in:
Kevin Ross
parent
fd2911bfb7
commit
404f54a5c2
3656
dist/css/material-fullpalette.css
vendored
3656
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
464
dist/css/material.css
vendored
464
dist/css/material.css
vendored
|
|
@ -4934,84 +4934,203 @@ fieldset[disabled] .form-control {
|
||||||
.form-control:invalid {
|
.form-control:invalid {
|
||||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
}
|
}
|
||||||
label,
|
|
||||||
.floating-label {
|
|
||||||
color: #bdbdbd;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.floating-label {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
left: 0px;
|
|
||||||
top: 5px;
|
|
||||||
transition: 0.3s ease all;
|
|
||||||
}
|
|
||||||
.form-control:focus ~ .floating-label,
|
|
||||||
.form-control:not(.empty) ~ .floating-label {
|
|
||||||
top: -9.8px;
|
|
||||||
font-size: 9.8px;
|
|
||||||
}
|
|
||||||
.form-control.input-sm ~ .floating-label {
|
|
||||||
font-size: 12px;
|
|
||||||
top: 7px;
|
|
||||||
}
|
|
||||||
.form-control.input-sm:focus ~ .floating-label,
|
|
||||||
.form-control.input-sm:not(.empty) ~ .floating-label {
|
|
||||||
top: -8.4px;
|
|
||||||
font-size: 8.4px;
|
|
||||||
}
|
|
||||||
.form-control.input-lg ~ .floating-label {
|
|
||||||
font-size: 18px;
|
|
||||||
top: 7px;
|
|
||||||
}
|
|
||||||
.form-control.input-lg:focus ~ .floating-label,
|
|
||||||
.form-control.input-lg:not(.empty) ~ .floating-label {
|
|
||||||
top: -12.6px;
|
|
||||||
font-size: 12.6px;
|
|
||||||
}
|
|
||||||
.form-control:focus ~ .floating-label {
|
|
||||||
color: #009688;
|
|
||||||
}
|
|
||||||
.form-control:not(.empty):invalid ~ .floating-label,
|
|
||||||
.form-control.focus:invalid ~ .floating-label {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
.form-group {
|
.form-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.form-group textarea {
|
.form-group label {
|
||||||
resize: none;
|
font-size: 9.8px;
|
||||||
}
|
font-weight: normal;
|
||||||
.form-group textarea ~ .form-control-highlight {
|
padding-left: 0px;
|
||||||
margin-top: -11px;
|
|
||||||
}
|
}
|
||||||
.form-group .hint {
|
.form-group .hint {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.form-group .form-control:focus ~ .hint,
|
.form-group.focus .hint {
|
||||||
.form-group .form-control.focus ~ .hint {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.form-group select ~ .material-input:after {
|
.form-group label.control-label,
|
||||||
display: none;
|
.form-group-default label.control-label {
|
||||||
|
color: rgba(0, 0, 0, 0.84);
|
||||||
}
|
}
|
||||||
.form-group select {
|
.form-group-black label.control-label {
|
||||||
appearance: none;
|
color: #000000;
|
||||||
|
}
|
||||||
|
.form-group-white label.control-label {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.form-group-inverse label.control-label {
|
||||||
|
color: #3f51b5;
|
||||||
|
}
|
||||||
|
.form-group-primary label.control-label {
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
.form-group-success label.control-label {
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
.form-group-info label.control-label {
|
||||||
|
color: #03a9f4;
|
||||||
|
}
|
||||||
|
.form-group-warning label.control-label {
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
.form-group-danger label.control-label {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
.form-group-material-red label.control-label {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
.form-group-material-pink label.control-label {
|
||||||
|
color: #e91e63;
|
||||||
|
}
|
||||||
|
.form-group-material-purple label.control-label {
|
||||||
|
color: #9c27b0;
|
||||||
|
}
|
||||||
|
.form-group-material-deep-purple label.control-label {
|
||||||
|
color: #673ab7;
|
||||||
|
}
|
||||||
|
.form-group-material-indigo label.control-label {
|
||||||
|
color: #3f51b5;
|
||||||
|
}
|
||||||
|
.form-group-material-blue label.control-label {
|
||||||
|
color: #2196f3;
|
||||||
|
}
|
||||||
|
.form-group-material-light-blue label.control-label {
|
||||||
|
color: #03a9f4;
|
||||||
|
}
|
||||||
|
.form-group-material-cyan label.control-label {
|
||||||
|
color: #00bcd4;
|
||||||
|
}
|
||||||
|
.form-group-material-teal label.control-label {
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
.form-group-material-green label.control-label {
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
.form-group-material-light-green label.control-label {
|
||||||
|
color: #8bc34a;
|
||||||
|
}
|
||||||
|
.form-group-material-lime label.control-label {
|
||||||
|
color: #cddc39;
|
||||||
|
}
|
||||||
|
.form-group-material-yellow label.control-label {
|
||||||
|
color: #ffeb3b;
|
||||||
|
}
|
||||||
|
.form-group-material-amber label.control-label {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
.form-group-material-orange label.control-label {
|
||||||
|
color: #ff9800;
|
||||||
|
}
|
||||||
|
.form-group-material-deep-orange label.control-label {
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
.form-group-material-brown label.control-label {
|
||||||
|
color: #795548;
|
||||||
|
}
|
||||||
|
.form-group-material-grey label.control-label {
|
||||||
|
color: #9e9e9e;
|
||||||
|
}
|
||||||
|
.form-group-material-blue-grey label.control-label {
|
||||||
|
color: #607d8b;
|
||||||
|
}
|
||||||
|
.form-group.focus label.control-label,
|
||||||
|
.form-group-default.focus label.control-label {
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
.form-group-black.focus label.control-label {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.form-group-white.focus label.control-label {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.form-group-inverse.focus label.control-label {
|
||||||
|
color: #3f51b5;
|
||||||
|
}
|
||||||
|
.form-group-primary.focus label.control-label {
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
.form-group-success.focus label.control-label {
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
.form-group-info.focus label.control-label {
|
||||||
|
color: #03a9f4;
|
||||||
|
}
|
||||||
|
.form-group-warning.focus label.control-label {
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
.form-group-danger.focus label.control-label {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
.form-group-material-red.focus label.control-label {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
.form-group-material-pink.focus label.control-label {
|
||||||
|
color: #e91e63;
|
||||||
|
}
|
||||||
|
.form-group-material-purple.focus label.control-label {
|
||||||
|
color: #9c27b0;
|
||||||
|
}
|
||||||
|
.form-group-material-deep-purple.focus label.control-label {
|
||||||
|
color: #673ab7;
|
||||||
|
}
|
||||||
|
.form-group-material-indigo.focus label.control-label {
|
||||||
|
color: #3f51b5;
|
||||||
|
}
|
||||||
|
.form-group-material-blue.focus label.control-label {
|
||||||
|
color: #2196f3;
|
||||||
|
}
|
||||||
|
.form-group-material-light-blue.focus label.control-label {
|
||||||
|
color: #03a9f4;
|
||||||
|
}
|
||||||
|
.form-group-material-cyan.focus label.control-label {
|
||||||
|
color: #00bcd4;
|
||||||
|
}
|
||||||
|
.form-group-material-teal.focus label.control-label {
|
||||||
|
color: #009688;
|
||||||
|
}
|
||||||
|
.form-group-material-green.focus label.control-label {
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
.form-group-material-light-green.focus label.control-label {
|
||||||
|
color: #8bc34a;
|
||||||
|
}
|
||||||
|
.form-group-material-lime.focus label.control-label {
|
||||||
|
color: #cddc39;
|
||||||
|
}
|
||||||
|
.form-group-material-yellow.focus label.control-label {
|
||||||
|
color: #ffeb3b;
|
||||||
|
}
|
||||||
|
.form-group-material-amber.focus label.control-label {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
.form-group-material-orange.focus label.control-label {
|
||||||
|
color: #ff9800;
|
||||||
|
}
|
||||||
|
.form-group-material-deep-orange.focus label.control-label {
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
.form-group-material-brown.focus label.control-label {
|
||||||
|
color: #795548;
|
||||||
|
}
|
||||||
|
.form-group-material-grey.focus label.control-label {
|
||||||
|
color: #9e9e9e;
|
||||||
|
}
|
||||||
|
.form-group-material-blue-grey.focus label.control-label {
|
||||||
|
color: #607d8b;
|
||||||
}
|
}
|
||||||
.form-group.has-warning .form-control {
|
.form-group.has-warning .form-control {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.form-group.has-warning .material-input:focus,
|
.form-group.has-warning .material-input:focus,
|
||||||
.form-group.has-warning .form-control:focus,
|
.form-group.has-warning .form-control:focus,
|
||||||
.form-group.has-warning .form-control.focus {
|
.form-group.has-warning.focus .form-control {
|
||||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.form-group.has-warning .control-label,
|
.form-group.has-warning label.control-label,
|
||||||
.form-group.has-warning input.form-control:focus ~ .floating-label {
|
.form-group.has-warning .help-block {
|
||||||
color: #ff5722;
|
color: #ff5722;
|
||||||
}
|
}
|
||||||
.form-group.has-error .form-control {
|
.form-group.has-error .form-control {
|
||||||
|
|
@ -5019,12 +5138,12 @@ label,
|
||||||
}
|
}
|
||||||
.form-group.has-error .material-input:focus,
|
.form-group.has-error .material-input:focus,
|
||||||
.form-group.has-error .form-control:focus,
|
.form-group.has-error .form-control:focus,
|
||||||
.form-group.has-error .form-control.focus {
|
.form-group.has-error.focus .form-control {
|
||||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.form-group.has-error .control-label,
|
.form-group.has-error label.control-label,
|
||||||
.form-group.has-error input.form-control:focus ~ .floating-label {
|
.form-group.has-error .help-block {
|
||||||
color: #f44336;
|
color: #f44336;
|
||||||
}
|
}
|
||||||
.form-group.has-success .form-control {
|
.form-group.has-success .form-control {
|
||||||
|
|
@ -5032,12 +5151,12 @@ label,
|
||||||
}
|
}
|
||||||
.form-group.has-success .material-input:focus,
|
.form-group.has-success .material-input:focus,
|
||||||
.form-group.has-success .form-control:focus,
|
.form-group.has-success .form-control:focus,
|
||||||
.form-group.has-success .form-control.focus {
|
.form-group.has-success.focus .form-control {
|
||||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.form-group.has-success .control-label,
|
.form-group.has-success label.control-label,
|
||||||
.form-group.has-success input.form-control:focus ~ .floating-label {
|
.form-group.has-success .help-block {
|
||||||
color: #4caf50;
|
color: #4caf50;
|
||||||
}
|
}
|
||||||
.form-group.has-info .form-control {
|
.form-group.has-info .form-control {
|
||||||
|
|
@ -5045,14 +5164,38 @@ label,
|
||||||
}
|
}
|
||||||
.form-group.has-info .material-input:focus,
|
.form-group.has-info .material-input:focus,
|
||||||
.form-group.has-info .form-control:focus,
|
.form-group.has-info .form-control:focus,
|
||||||
.form-group.has-info .form-control.focus {
|
.form-group.has-info.focus .form-control {
|
||||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.form-group.has-info .control-label,
|
.form-group.has-info label.control-label,
|
||||||
.form-group.has-info input.form-control:focus ~ .floating-label {
|
.form-group.has-info .help-block {
|
||||||
color: #03a9f4;
|
color: #03a9f4;
|
||||||
}
|
}
|
||||||
|
.form-group.form-group-sm label {
|
||||||
|
font-size: 8.4px;
|
||||||
|
}
|
||||||
|
.form-group.form-group-sm .form-control {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.form-group.form-group-lg label {
|
||||||
|
font-size: 12.6px;
|
||||||
|
}
|
||||||
|
.form-group.form-group-lg .form-control {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.form-group textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
.form-group textarea ~ .form-control-highlight {
|
||||||
|
margin-top: -11px;
|
||||||
|
}
|
||||||
|
.form-group select ~ .material-input:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-group select {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
.form-group .form-control:focus,
|
.form-group .form-control:focus,
|
||||||
.form-group-default .form-control:focus {
|
.form-group-default .form-control:focus {
|
||||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
|
|
@ -5138,176 +5281,41 @@ label,
|
||||||
.form-group-material-blue-grey .form-control:focus {
|
.form-group-material-blue-grey .form-control:focus {
|
||||||
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
|
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
|
||||||
}
|
}
|
||||||
.form-group .control-label,
|
label.floating-label {
|
||||||
.form-group-default .control-label {
|
font-size: 14px;
|
||||||
color: rgba(0, 0, 0, 0.84);
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
left: 0px;
|
||||||
|
top: 5px;
|
||||||
|
transition: 0.3s ease all;
|
||||||
}
|
}
|
||||||
.form-group-black .control-label {
|
.form-control:focus ~ label.floating-label,
|
||||||
color: #000000;
|
.form-control:not(.empty) ~ label.floating-label {
|
||||||
|
top: -9.8px;
|
||||||
|
font-size: 9.8px;
|
||||||
}
|
}
|
||||||
.form-group-white .control-label {
|
.form-control.input-sm ~ label.floating-label {
|
||||||
color: #ffffff;
|
font-size: 12px;
|
||||||
|
top: 7px;
|
||||||
}
|
}
|
||||||
.form-group-inverse .control-label {
|
.form-control.input-sm:focus ~ label.floating-label,
|
||||||
color: #3f51b5;
|
.form-control.input-sm:not(.empty) ~ label.floating-label {
|
||||||
|
top: -8.4px;
|
||||||
|
font-size: 8.4px;
|
||||||
}
|
}
|
||||||
.form-group-primary .control-label {
|
.form-control.input-lg ~ label.floating-label {
|
||||||
color: #009688;
|
font-size: 18px;
|
||||||
|
top: 7px;
|
||||||
}
|
}
|
||||||
.form-group-success .control-label {
|
.form-control.input-lg:focus ~ label.floating-label,
|
||||||
color: #4caf50;
|
.form-control.input-lg:not(.empty) ~ label.floating-label {
|
||||||
|
top: -12.6px;
|
||||||
|
font-size: 12.6px;
|
||||||
}
|
}
|
||||||
.form-group-info .control-label {
|
.form-control:not(.empty):invalid ~ label.floating-label,
|
||||||
color: #03a9f4;
|
.form-control.focus:invalid ~ label.floating-label {
|
||||||
}
|
|
||||||
.form-group-warning .control-label {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group-danger .control-label {
|
|
||||||
color: #f44336;
|
color: #f44336;
|
||||||
}
|
}
|
||||||
.form-group-material-red .control-label {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
.form-group-material-pink .control-label {
|
|
||||||
color: #e91e63;
|
|
||||||
}
|
|
||||||
.form-group-material-purple .control-label {
|
|
||||||
color: #9c27b0;
|
|
||||||
}
|
|
||||||
.form-group-material-deep-purple .control-label {
|
|
||||||
color: #673ab7;
|
|
||||||
}
|
|
||||||
.form-group-material-indigo .control-label {
|
|
||||||
color: #3f51b5;
|
|
||||||
}
|
|
||||||
.form-group-material-blue .control-label {
|
|
||||||
color: #2196f3;
|
|
||||||
}
|
|
||||||
.form-group-material-light-blue .control-label {
|
|
||||||
color: #03a9f4;
|
|
||||||
}
|
|
||||||
.form-group-material-cyan .control-label {
|
|
||||||
color: #00bcd4;
|
|
||||||
}
|
|
||||||
.form-group-material-teal .control-label {
|
|
||||||
color: #009688;
|
|
||||||
}
|
|
||||||
.form-group-material-green .control-label {
|
|
||||||
color: #4caf50;
|
|
||||||
}
|
|
||||||
.form-group-material-light-green .control-label {
|
|
||||||
color: #8bc34a;
|
|
||||||
}
|
|
||||||
.form-group-material-lime .control-label {
|
|
||||||
color: #cddc39;
|
|
||||||
}
|
|
||||||
.form-group-material-yellow .control-label {
|
|
||||||
color: #ffeb3b;
|
|
||||||
}
|
|
||||||
.form-group-material-amber .control-label {
|
|
||||||
color: #ffc107;
|
|
||||||
}
|
|
||||||
.form-group-material-orange .control-label {
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
|
||||||
.form-group-material-deep-orange .control-label {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group-material-brown .control-label {
|
|
||||||
color: #795548;
|
|
||||||
}
|
|
||||||
.form-group-material-grey .control-label {
|
|
||||||
color: #9e9e9e;
|
|
||||||
}
|
|
||||||
.form-group-material-blue-grey .control-label {
|
|
||||||
color: #607d8b;
|
|
||||||
}
|
|
||||||
.form-group input.form-control:focus ~ .floating-label,
|
|
||||||
.form-group-default input.form-control:focus ~ .floating-label {
|
|
||||||
color: #009688;
|
|
||||||
}
|
|
||||||
.form-group-black input.form-control:focus ~ .floating-label {
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
.form-group-white input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.form-group-inverse input.form-control:focus ~ .floating-label {
|
|
||||||
color: #3f51b5;
|
|
||||||
}
|
|
||||||
.form-group-primary input.form-control:focus ~ .floating-label {
|
|
||||||
color: #009688;
|
|
||||||
}
|
|
||||||
.form-group-success input.form-control:focus ~ .floating-label {
|
|
||||||
color: #4caf50;
|
|
||||||
}
|
|
||||||
.form-group-info input.form-control:focus ~ .floating-label {
|
|
||||||
color: #03a9f4;
|
|
||||||
}
|
|
||||||
.form-group-warning input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group-danger input.form-control:focus ~ .floating-label {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
.form-group-material-red input.form-control:focus ~ .floating-label {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
.form-group-material-pink input.form-control:focus ~ .floating-label {
|
|
||||||
color: #e91e63;
|
|
||||||
}
|
|
||||||
.form-group-material-purple input.form-control:focus ~ .floating-label {
|
|
||||||
color: #9c27b0;
|
|
||||||
}
|
|
||||||
.form-group-material-deep-purple input.form-control:focus ~ .floating-label {
|
|
||||||
color: #673ab7;
|
|
||||||
}
|
|
||||||
.form-group-material-indigo input.form-control:focus ~ .floating-label {
|
|
||||||
color: #3f51b5;
|
|
||||||
}
|
|
||||||
.form-group-material-blue input.form-control:focus ~ .floating-label {
|
|
||||||
color: #2196f3;
|
|
||||||
}
|
|
||||||
.form-group-material-light-blue input.form-control:focus ~ .floating-label {
|
|
||||||
color: #03a9f4;
|
|
||||||
}
|
|
||||||
.form-group-material-cyan input.form-control:focus ~ .floating-label {
|
|
||||||
color: #00bcd4;
|
|
||||||
}
|
|
||||||
.form-group-material-teal input.form-control:focus ~ .floating-label {
|
|
||||||
color: #009688;
|
|
||||||
}
|
|
||||||
.form-group-material-green input.form-control:focus ~ .floating-label {
|
|
||||||
color: #4caf50;
|
|
||||||
}
|
|
||||||
.form-group-material-light-green input.form-control:focus ~ .floating-label {
|
|
||||||
color: #8bc34a;
|
|
||||||
}
|
|
||||||
.form-group-material-lime input.form-control:focus ~ .floating-label {
|
|
||||||
color: #cddc39;
|
|
||||||
}
|
|
||||||
.form-group-material-yellow input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ffeb3b;
|
|
||||||
}
|
|
||||||
.form-group-material-amber input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ffc107;
|
|
||||||
}
|
|
||||||
.form-group-material-orange input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
|
||||||
.form-group-material-deep-orange input.form-control:focus ~ .floating-label {
|
|
||||||
color: #ff5722;
|
|
||||||
}
|
|
||||||
.form-group-material-brown input.form-control:focus ~ .floating-label {
|
|
||||||
color: #795548;
|
|
||||||
}
|
|
||||||
.form-group-material-grey input.form-control:focus ~ .floating-label {
|
|
||||||
color: #9e9e9e;
|
|
||||||
}
|
|
||||||
.form-group-material-blue-grey input.form-control:focus ~ .floating-label {
|
|
||||||
color: #607d8b;
|
|
||||||
}
|
|
||||||
.input-group .form-group {
|
.input-group .form-group {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
|
||||||
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
13
dist/js/material.js
vendored
13
dist/js/material.js
vendored
|
|
@ -138,11 +138,13 @@
|
||||||
$this.removeClass("empty");
|
$this.removeClass("empty");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on("focus", ".form-group.fileinput", function() {
|
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||||
$(this).find("input").addClass("focus");
|
//$(this).find("input").addClass("focus");
|
||||||
|
$(this).parent().addClass("focus"); // add class to form-group
|
||||||
})
|
})
|
||||||
.on("blur", ".form-group.fileinput", function() {
|
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||||
$(this).find("input").removeClass("focus");
|
//$(this).find("input").removeClass("focus");
|
||||||
|
$(this).parent().removeClass("focus"); // remove class from form-group
|
||||||
})
|
})
|
||||||
.on("change", ".form-group.fileinput [type=file]", function() {
|
.on("change", ".form-group.fileinput [type=file]", function() {
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
|
@ -183,6 +185,7 @@
|
||||||
var focused;
|
var focused;
|
||||||
$(document)
|
$(document)
|
||||||
.on("focus", "input", function() {
|
.on("focus", "input", function() {
|
||||||
|
console.log($(this).parent());
|
||||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||||
focused = setInterval(function() {
|
focused = setInterval(function() {
|
||||||
$inputs.each(function() {
|
$inputs.each(function() {
|
||||||
|
|
@ -193,7 +196,7 @@
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 100);
|
||||||
})
|
})
|
||||||
.on("blur", "input", function() {
|
.on("blur", ".form-group input", function() {
|
||||||
clearInterval(focused);
|
clearInterval(focused);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
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.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 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);
|
||||||
//# sourceMappingURL=material.min.js.map
|
//# 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","$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","console","log","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
|
||||||
175
index.html
175
index.html
|
|
@ -490,42 +490,57 @@
|
||||||
<h1 class="header">Input</h1>
|
<h1 class="header">Input</h1>
|
||||||
|
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
<h2>Input - static labels</h2>
|
<h2>Input <small>default sizing</small></h2>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="i1" class="not-floating input-sm">Static label input-sm</label>
|
<label for="i2" class="control-label">Static label</label>
|
||||||
<input type="email" class="form-control input-sm" id="i1" placeholder="Placeholder text">
|
|
||||||
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="i2" class="not-floating">Static label</label>
|
|
||||||
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
|
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
|
||||||
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="i3" class="not-floating input-lg">Static label input-lg</label>
|
<label for="i5" class="control-label floating-label">Floating label</label>
|
||||||
<input type="email" class="form-control input-lg" id="i3" placeholder="Placeholder text">
|
|
||||||
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Input - floating labels</h2>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="i4" class="floating-label">Floating label input-sm</label>
|
|
||||||
<input type="email" class="form-control input-sm" id="i4">
|
|
||||||
<span class="help-block hint">This is a hint</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="i5" class="floating-label">Floating label</label>
|
|
||||||
<input type="email" class="form-control" id="i5">
|
<input type="email" class="form-control" id="i5">
|
||||||
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
|
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2>Input - floating labels <small>form-group sizing</small></h2>
|
||||||
|
<div class="form-group form-group-sm has-error">
|
||||||
|
<label for="i4" class="control-label floating-label">Floating label form-group-sm has-error</label>
|
||||||
|
<input type="email" class="form-control input-sm" id="i4">
|
||||||
|
<span class="help-block hint">This is a hint</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group form-group-lg">
|
||||||
|
<label for="i6" class="control-label floating-label">Floating label input-lg</label>
|
||||||
|
<input type="email" class="form-control" id="i6">
|
||||||
|
<span class="help-block hint">This is a hint</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Input - static labels <small>form-group sizing</small></h2>
|
||||||
|
|
||||||
|
<div class="form-group form-group-sm has-error">
|
||||||
|
<label for="i1" class="control-label">Static label form-group-sm has-error</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>
|
||||||
|
|
||||||
|
<div class="form-group form-group-lg">
|
||||||
|
<label for="i3" class="control-label">Static label form-group-lg</label>
|
||||||
|
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
|
||||||
|
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Input - floating labels <small>input sizing</small></h2>
|
||||||
|
<div class="form-group form-group-lg">
|
||||||
|
<label for="i7" class="control-label floating-label">Floating label input-sm</label>
|
||||||
|
<input type="email" class="form-control input-sm" id="i7">
|
||||||
|
<span class="help-block hint">This is a hint</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="i6" class="floating-label">Floating label input-lg</label>
|
<label for="i9" class="control-label floating-label">Floating label input-lg</label>
|
||||||
<input type="email" class="form-control input-lg" id="i6">
|
<input type="email" class="form-control input-lg" id="i9">
|
||||||
<span class="help-block hint">This is a hint</span>
|
<span class="help-block hint">This is a hint</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -580,11 +595,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#input h2 {
|
/*#input h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#input .inputs {
|
#input .inputs {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
@ -849,13 +864,13 @@
|
||||||
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<!--<style>-->
|
||||||
#progress-bar h2 {
|
<!--#progress-bar h2 {-->
|
||||||
font-size: 18.7199993133545px;
|
<!--font-size: 18.7199993133545px;-->
|
||||||
font-weight: bold;
|
<!--font-weight: bold;-->
|
||||||
margin-bottom: 30px;
|
<!--margin-bottom: 30px;-->
|
||||||
}
|
<!--}-->
|
||||||
</style>
|
<!--</style>-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="slider">
|
<div class="well page" id="slider">
|
||||||
|
|
@ -898,12 +913,12 @@
|
||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider h2 {
|
/*#slider h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#slider .slider {
|
#slider .slider {
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
|
|
@ -1325,12 +1340,12 @@
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#button h2 {
|
/*#button h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
</style>
|
</style>
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="floating-action-button">
|
<div class="well page" id="floating-action-button">
|
||||||
|
|
@ -1352,22 +1367,22 @@
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating-action-button h2 {
|
/*#floating-action-button h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
</style>
|
</style>
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="dropdown">
|
<div class="well page" id="dropdown">
|
||||||
<style>
|
<style>
|
||||||
#dropdown h2 {
|
/*#dropdown h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#dropdown .dropdown {
|
#dropdown .dropdown {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
@ -1381,12 +1396,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="dropdown-menu">
|
<div class="well page" id="dropdown-menu">
|
||||||
<style>
|
<style>
|
||||||
#dropdown-menu h2 {
|
/*#dropdown-menu h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#dropdown-menu .sample {
|
#dropdown-menu .sample {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
@ -1476,14 +1491,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<!--<style>-->
|
||||||
#dialog h2 {
|
<!--#dialog h2 {-->
|
||||||
padding: 14px;
|
<!--padding: 14px;-->
|
||||||
margin: 0;
|
<!--margin: 0;-->
|
||||||
font-size: 16px;
|
<!--font-size: 16px;-->
|
||||||
font-weight: 400;
|
<!--font-weight: 400;-->
|
||||||
}
|
<!--}-->
|
||||||
</style>
|
<!--</style>-->
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="shadow">
|
<div class="well page" id="shadow">
|
||||||
<h1 class="header">Shadow</h1>
|
<h1 class="header">Shadow</h1>
|
||||||
|
|
@ -1515,12 +1530,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#shadow h2 {
|
/*#shadow h2 {*/
|
||||||
padding: 14px;
|
/*padding: 14px;*/
|
||||||
margin: 0;
|
/*margin: 0;*/
|
||||||
font-size: 16px;
|
/*font-size: 16px;*/
|
||||||
font-weight: 400;
|
/*font-weight: 400;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#shadow .sample {
|
#shadow .sample {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,21 @@
|
||||||
// usage: .input-validation-state(@input-danger);
|
// usage: .form-group-validation-state(@input-danger);
|
||||||
.input-validation-state(@color) {
|
.form-group-validation-state(@name, @color) {
|
||||||
|
|
||||||
|
&.@{name} { // e.g. has-error
|
||||||
.form-control {
|
.form-control {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.material-input:focus,
|
.material-input:focus,
|
||||||
.form-control:focus,
|
.form-control:focus,
|
||||||
.form-control.focus {
|
&.focus .form-control {
|
||||||
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
|
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.control-label,
|
label.control-label,
|
||||||
input.form-control:focus ~ .floating-label {
|
.help-block {
|
||||||
color: @color;
|
color: @color;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
|
|
@ -78,9 +81,80 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// shared sizing
|
.form-group {
|
||||||
.input-floating-label-size(@name, @size) {
|
position: relative;
|
||||||
|
|
||||||
|
label {
|
||||||
|
//color: @input-placeholder-color;
|
||||||
|
font-size: @floating-label-size-ratio * @font-size-base; // same as focused size of floating
|
||||||
|
font-weight: normal;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hints
|
||||||
|
.hint {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 80%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focus {
|
||||||
|
.hint {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.variations(~" label.control-label", color, @lightbg-text);
|
||||||
|
.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 * @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 * @font-size-large; // same as focused size of floating
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
textarea ~ .form-control-highlight {
|
||||||
|
margin-top: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select ~ .material-input:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix for OS X
|
||||||
|
select {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-floating-label-size(@name, @size) {
|
||||||
.form-control.@{name} ~ & {
|
.form-control.@{name} ~ & {
|
||||||
font-size: @size;
|
font-size: @size;
|
||||||
top: 7px;
|
top: 7px;
|
||||||
|
|
@ -93,15 +167,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
// Do not nest .floating-label inside .form-group - it messes with ~
|
||||||
.floating-label {
|
label.floating-label {
|
||||||
|
|
||||||
color: @input-placeholder-color;
|
|
||||||
font-size: @font-size-base; // Input sizes
|
font-size: @font-size-base; // Input sizes
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-label {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
|
@ -118,67 +186,13 @@ label,
|
||||||
.input-floating-label-size(input-sm, @font-size-small);
|
.input-floating-label-size(input-sm, @font-size-small);
|
||||||
.input-floating-label-size(input-lg, @font-size-large);
|
.input-floating-label-size(input-lg, @font-size-large);
|
||||||
|
|
||||||
.form-control:focus ~ & {
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:not(.empty):invalid ~ &,
|
.form-control:not(.empty):invalid ~ &, // FIXME: where does the invalid class come from? it isnt' bs3.
|
||||||
.form-control.focus:invalid ~ & {
|
.form-control.focus:invalid ~ & {
|
||||||
color: @input-danger;
|
color: @input-danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
textarea ~ .form-control-highlight {
|
|
||||||
margin-top: -11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hints
|
|
||||||
.hint {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 80%;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.form-control:focus ~ .hint,
|
|
||||||
.form-control.focus ~ .hint {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
select ~ .material-input:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix for OS X
|
|
||||||
select {
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-warning {
|
|
||||||
.input-validation-state(@input-warning);
|
|
||||||
}
|
|
||||||
&.has-error {
|
|
||||||
.input-validation-state(@input-danger);
|
|
||||||
}
|
|
||||||
&.has-success {
|
|
||||||
.input-validation-state(@input-success);
|
|
||||||
}
|
|
||||||
&.has-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 {
|
.input-group {
|
||||||
.form-group {
|
.form-group {
|
||||||
.form-control {
|
.form-control {
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,8 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
.form-group {
|
.form-group {
|
||||||
.material-input:before, input:focus ~ .material-input:after {
|
.material-input:before,
|
||||||
|
input:focus ~ .material-input:after {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,23 @@
|
||||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||||
|
|
||||||
// usage: @include input-validation-state($input-danger);
|
// usage: @include form-group-validation-state($input-danger);
|
||||||
@mixin input-validation-state($color){
|
@mixin form-group-validation-state($name, $color){
|
||||||
|
|
||||||
|
&.#{$name} { // e.g. has-error
|
||||||
.form-control {
|
.form-control {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.material-input:focus,
|
.material-input:focus,
|
||||||
.form-control:focus,
|
.form-control:focus,
|
||||||
.form-control.focus {
|
&.focus .form-control {
|
||||||
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
|
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.control-label,
|
label.control-label,
|
||||||
input.form-control:focus + .floating-label {
|
.help-block {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
|
|
@ -70,8 +73,8 @@
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus + .material-input:after,
|
&:focus ~ .material-input:after,
|
||||||
&.focus + .material-input:after {
|
&.focus ~ .material-input:after {
|
||||||
background-color: $input-default;
|
background-color: $input-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,57 +83,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include input-floating-label-size(input-sm, $font-size-small);
|
|
||||||
@include input-floating-label-size(input-lg, $font-size-large);
|
|
||||||
|
|
||||||
.form-control:focus + & {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:not(.empty):invalid + &,
|
|
||||||
.form-control.focus:invalid + & {
|
|
||||||
color: $input-danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
textarea {
|
label {
|
||||||
resize: none;
|
//color: $input-placeholder-color;
|
||||||
}
|
font-size: $floating-label-size-ratio * $font-size-base; // same as focused size of floating
|
||||||
textarea + .form-control-highlight {
|
font-weight: normal;
|
||||||
margin-top: -11px;
|
padding-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hints
|
// Hints
|
||||||
|
|
@ -139,12 +99,49 @@
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.form-control:focus + .hint,
|
|
||||||
.form-control.focus + .hint {
|
&.focus {
|
||||||
|
.hint {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
select + .material-input:after {
|
@include variations(unquote(" label.control-label"), color, $lightbg-text);
|
||||||
|
@include variations(unquote(".focus label.control-label"), color, $input-default);
|
||||||
|
|
||||||
|
@include form-group-validation-state(has-warning, $input-warning);
|
||||||
|
@include form-group-validation-state(has-error, $input-danger);
|
||||||
|
@include form-group-validation-state(has-success, $input-success);
|
||||||
|
@include form-group-validation-state(has-info, $input-info);
|
||||||
|
|
||||||
|
// sm
|
||||||
|
&.form-group-sm {
|
||||||
|
label {
|
||||||
|
font-size: $floating-label-size-ratio * $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 * $font-size-large; // same as focused size of floating
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
textarea ~ .form-control-highlight {
|
||||||
|
margin-top: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select ~ .material-input:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -153,23 +150,47 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-warning {
|
|
||||||
@include input-validation-state($input-warning);
|
|
||||||
}
|
|
||||||
&.has-error {
|
|
||||||
@include input-validation-state($input-danger);
|
|
||||||
}
|
|
||||||
&.has-success {
|
|
||||||
@include input-validation-state($input-success);
|
|
||||||
}
|
|
||||||
&.has-info {
|
|
||||||
@include input-validation-state($input-info);
|
|
||||||
}
|
|
||||||
|
|
||||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
|
// 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 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);
|
|
||||||
|
@mixin input-floating-label-size($name, $size){
|
||||||
|
.form-control.#{$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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Do not nest .floating-label inside .form-group - it messes with ~
|
||||||
|
label.floating-label {
|
||||||
|
font-size: $font-size-base; // Input sizes
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
left: 0px;
|
||||||
|
top: 5px;
|
||||||
|
transition: 0.3s ease all;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include input-floating-label-size(input-sm, $font-size-small);
|
||||||
|
@include input-floating-label-size(input-lg, $font-size-large);
|
||||||
|
|
||||||
|
|
||||||
|
.form-control:not(.empty):invalid ~ &, // FIXME: where does the invalid class come from? it isnt' bs3.
|
||||||
|
.form-control.focus:invalid ~ & {
|
||||||
|
color: $input-danger;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
|
|
|
||||||
|
|
@ -162,7 +162,8 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
.form-group {
|
.form-group {
|
||||||
.material-input:before, input:focus ~ .material-input:after {
|
.material-input:before,
|
||||||
|
input:focus ~ .material-input:after {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -138,11 +138,13 @@
|
||||||
$this.removeClass("empty");
|
$this.removeClass("empty");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on("focus", ".form-group.fileinput", function() {
|
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||||
$(this).find("input").addClass("focus");
|
//$(this).find("input").addClass("focus");
|
||||||
|
$(this).parent().addClass("focus"); // add class to form-group
|
||||||
})
|
})
|
||||||
.on("blur", ".form-group.fileinput", function() {
|
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||||
$(this).find("input").removeClass("focus");
|
//$(this).find("input").removeClass("focus");
|
||||||
|
$(this).parent().removeClass("focus"); // remove class from form-group
|
||||||
})
|
})
|
||||||
.on("change", ".form-group.fileinput [type=file]", function() {
|
.on("change", ".form-group.fileinput [type=file]", function() {
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
|
@ -183,6 +185,7 @@
|
||||||
var focused;
|
var focused;
|
||||||
$(document)
|
$(document)
|
||||||
.on("focus", "input", function() {
|
.on("focus", "input", function() {
|
||||||
|
console.log($(this).parent());
|
||||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||||
focused = setInterval(function() {
|
focused = setInterval(function() {
|
||||||
$inputs.each(function() {
|
$inputs.each(function() {
|
||||||
|
|
@ -193,7 +196,7 @@
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 100);
|
||||||
})
|
})
|
||||||
.on("blur", "input", function() {
|
.on("blur", ".form-group input", function() {
|
||||||
clearInterval(focused);
|
clearInterval(focused);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user