checkpoint before transitioning label styles to form-group

This commit is contained in:
Kevin Ross 2015-11-17 12:02:44 -06:00
parent a8552009d2
commit 8ebf124500
18 changed files with 1774 additions and 582 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

402
dist/css/material.css vendored
View File

@ -3430,29 +3430,36 @@ body .jumbotron-material-blue-grey,
.btn-material-blue-grey.btn-flat:hover:not(.btn-link) {
background-color: rgba(96, 125, 139, 0.2);
}
.btn.btn-flat {
.btn.btn-flat,
.input-group-btn .btn.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
}
.btn.btn-flat:disabled {
.btn.btn-flat:disabled,
.input-group-btn .btn.btn-flat:disabled {
color: #a8a8a8 !important;
}
.btn.btn-sm {
.btn.btn-sm,
.input-group-btn .btn.btn-sm {
padding: 5px 20px;
}
.btn.btn-xs {
.btn.btn-xs,
.input-group-btn .btn.btn-xs {
padding: 4px 15px;
font-size: 10px;
}
.btn.btn-raised {
.btn.btn-raised,
.input-group-btn .btn.btn-raised {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
.btn.btn-raised:active:not(.btn-link),
.input-group-btn .btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.btn.btn-fab {
.btn.btn-fab,
.input-group-btn .btn.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
@ -3460,166 +3467,260 @@ body .jumbotron-material-blue-grey,
height: 56px;
}
.btn.btn-fab,
.input-group-btn .btn.btn-fab,
.btn.btn-fab:hover,
.input-group-btn .btn.btn-fab:hover,
.btn.btn-fab:active,
.input-group-btn .btn.btn-fab:active,
.btn.btn-fab-default,
.input-group-btn .btn.btn-fab-default,
.btn.btn-fab:hover-default,
.btn.btn-fab:active-default {
.input-group-btn .btn.btn-fab:hover-default,
.btn.btn-fab:active-default,
.input-group-btn .btn.btn-fab:active-default {
background-color: transparent;
}
.btn.btn-fab-black,
.input-group-btn .btn.btn-fab-black,
.btn.btn-fab:hover-black,
.btn.btn-fab:active-black {
.input-group-btn .btn.btn-fab:hover-black,
.btn.btn-fab:active-black,
.input-group-btn .btn.btn-fab:active-black {
background-color: #000000;
}
.btn.btn-fab-white,
.input-group-btn .btn.btn-fab-white,
.btn.btn-fab:hover-white,
.btn.btn-fab:active-white {
.input-group-btn .btn.btn-fab:hover-white,
.btn.btn-fab:active-white,
.input-group-btn .btn.btn-fab:active-white {
background-color: #ffffff;
}
.btn.btn-fab-inverse,
.input-group-btn .btn.btn-fab-inverse,
.btn.btn-fab:hover-inverse,
.btn.btn-fab:active-inverse {
.input-group-btn .btn.btn-fab:hover-inverse,
.btn.btn-fab:active-inverse,
.input-group-btn .btn.btn-fab:active-inverse {
background-color: #3f51b5;
}
.btn.btn-fab-primary,
.input-group-btn .btn.btn-fab-primary,
.btn.btn-fab:hover-primary,
.btn.btn-fab:active-primary {
.input-group-btn .btn.btn-fab:hover-primary,
.btn.btn-fab:active-primary,
.input-group-btn .btn.btn-fab:active-primary {
background-color: #009688;
}
.btn.btn-fab-success,
.input-group-btn .btn.btn-fab-success,
.btn.btn-fab:hover-success,
.btn.btn-fab:active-success {
.input-group-btn .btn.btn-fab:hover-success,
.btn.btn-fab:active-success,
.input-group-btn .btn.btn-fab:active-success {
background-color: #4caf50;
}
.btn.btn-fab-info,
.input-group-btn .btn.btn-fab-info,
.btn.btn-fab:hover-info,
.btn.btn-fab:active-info {
.input-group-btn .btn.btn-fab:hover-info,
.btn.btn-fab:active-info,
.input-group-btn .btn.btn-fab:active-info {
background-color: #03a9f4;
}
.btn.btn-fab-warning,
.input-group-btn .btn.btn-fab-warning,
.btn.btn-fab:hover-warning,
.btn.btn-fab:active-warning {
.input-group-btn .btn.btn-fab:hover-warning,
.btn.btn-fab:active-warning,
.input-group-btn .btn.btn-fab:active-warning {
background-color: #ff5722;
}
.btn.btn-fab-danger,
.input-group-btn .btn.btn-fab-danger,
.btn.btn-fab:hover-danger,
.btn.btn-fab:active-danger {
.input-group-btn .btn.btn-fab:hover-danger,
.btn.btn-fab:active-danger,
.input-group-btn .btn.btn-fab:active-danger {
background-color: #f44336;
}
.btn.btn-fab-material-red,
.input-group-btn .btn.btn-fab-material-red,
.btn.btn-fab:hover-material-red,
.btn.btn-fab:active-material-red {
.input-group-btn .btn.btn-fab:hover-material-red,
.btn.btn-fab:active-material-red,
.input-group-btn .btn.btn-fab:active-material-red {
background-color: #f44336;
}
.btn.btn-fab-material-pink,
.input-group-btn .btn.btn-fab-material-pink,
.btn.btn-fab:hover-material-pink,
.btn.btn-fab:active-material-pink {
.input-group-btn .btn.btn-fab:hover-material-pink,
.btn.btn-fab:active-material-pink,
.input-group-btn .btn.btn-fab:active-material-pink {
background-color: #e91e63;
}
.btn.btn-fab-material-purple,
.input-group-btn .btn.btn-fab-material-purple,
.btn.btn-fab:hover-material-purple,
.btn.btn-fab:active-material-purple {
.input-group-btn .btn.btn-fab:hover-material-purple,
.btn.btn-fab:active-material-purple,
.input-group-btn .btn.btn-fab:active-material-purple {
background-color: #9c27b0;
}
.btn.btn-fab-material-deep-purple,
.input-group-btn .btn.btn-fab-material-deep-purple,
.btn.btn-fab:hover-material-deep-purple,
.btn.btn-fab:active-material-deep-purple {
.input-group-btn .btn.btn-fab:hover-material-deep-purple,
.btn.btn-fab:active-material-deep-purple,
.input-group-btn .btn.btn-fab:active-material-deep-purple {
background-color: #673ab7;
}
.btn.btn-fab-material-indigo,
.input-group-btn .btn.btn-fab-material-indigo,
.btn.btn-fab:hover-material-indigo,
.btn.btn-fab:active-material-indigo {
.input-group-btn .btn.btn-fab:hover-material-indigo,
.btn.btn-fab:active-material-indigo,
.input-group-btn .btn.btn-fab:active-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-blue,
.input-group-btn .btn.btn-fab-material-blue,
.btn.btn-fab:hover-material-blue,
.btn.btn-fab:active-material-blue {
.input-group-btn .btn.btn-fab:hover-material-blue,
.btn.btn-fab:active-material-blue,
.input-group-btn .btn.btn-fab:active-material-blue {
background-color: #2196f3;
}
.btn.btn-fab-material-light-blue,
.input-group-btn .btn.btn-fab-material-light-blue,
.btn.btn-fab:hover-material-light-blue,
.btn.btn-fab:active-material-light-blue {
.input-group-btn .btn.btn-fab:hover-material-light-blue,
.btn.btn-fab:active-material-light-blue,
.input-group-btn .btn.btn-fab:active-material-light-blue {
background-color: #03a9f4;
}
.btn.btn-fab-material-cyan,
.input-group-btn .btn.btn-fab-material-cyan,
.btn.btn-fab:hover-material-cyan,
.btn.btn-fab:active-material-cyan {
.input-group-btn .btn.btn-fab:hover-material-cyan,
.btn.btn-fab:active-material-cyan,
.input-group-btn .btn.btn-fab:active-material-cyan {
background-color: #00bcd4;
}
.btn.btn-fab-material-teal,
.input-group-btn .btn.btn-fab-material-teal,
.btn.btn-fab:hover-material-teal,
.btn.btn-fab:active-material-teal {
.input-group-btn .btn.btn-fab:hover-material-teal,
.btn.btn-fab:active-material-teal,
.input-group-btn .btn.btn-fab:active-material-teal {
background-color: #009688;
}
.btn.btn-fab-material-green,
.input-group-btn .btn.btn-fab-material-green,
.btn.btn-fab:hover-material-green,
.btn.btn-fab:active-material-green {
.input-group-btn .btn.btn-fab:hover-material-green,
.btn.btn-fab:active-material-green,
.input-group-btn .btn.btn-fab:active-material-green {
background-color: #4caf50;
}
.btn.btn-fab-material-light-green,
.input-group-btn .btn.btn-fab-material-light-green,
.btn.btn-fab:hover-material-light-green,
.btn.btn-fab:active-material-light-green {
.input-group-btn .btn.btn-fab:hover-material-light-green,
.btn.btn-fab:active-material-light-green,
.input-group-btn .btn.btn-fab:active-material-light-green {
background-color: #8bc34a;
}
.btn.btn-fab-material-lime,
.input-group-btn .btn.btn-fab-material-lime,
.btn.btn-fab:hover-material-lime,
.btn.btn-fab:active-material-lime {
.input-group-btn .btn.btn-fab:hover-material-lime,
.btn.btn-fab:active-material-lime,
.input-group-btn .btn.btn-fab:active-material-lime {
background-color: #cddc39;
}
.btn.btn-fab-material-yellow,
.input-group-btn .btn.btn-fab-material-yellow,
.btn.btn-fab:hover-material-yellow,
.btn.btn-fab:active-material-yellow {
.input-group-btn .btn.btn-fab:hover-material-yellow,
.btn.btn-fab:active-material-yellow,
.input-group-btn .btn.btn-fab:active-material-yellow {
background-color: #ffeb3b;
}
.btn.btn-fab-material-amber,
.input-group-btn .btn.btn-fab-material-amber,
.btn.btn-fab:hover-material-amber,
.btn.btn-fab:active-material-amber {
.input-group-btn .btn.btn-fab:hover-material-amber,
.btn.btn-fab:active-material-amber,
.input-group-btn .btn.btn-fab:active-material-amber {
background-color: #ffc107;
}
.btn.btn-fab-material-orange,
.input-group-btn .btn.btn-fab-material-orange,
.btn.btn-fab:hover-material-orange,
.btn.btn-fab:active-material-orange {
.input-group-btn .btn.btn-fab:hover-material-orange,
.btn.btn-fab:active-material-orange,
.input-group-btn .btn.btn-fab:active-material-orange {
background-color: #ff9800;
}
.btn.btn-fab-material-deep-orange,
.input-group-btn .btn.btn-fab-material-deep-orange,
.btn.btn-fab:hover-material-deep-orange,
.btn.btn-fab:active-material-deep-orange {
.input-group-btn .btn.btn-fab:hover-material-deep-orange,
.btn.btn-fab:active-material-deep-orange,
.input-group-btn .btn.btn-fab:active-material-deep-orange {
background-color: #ff5722;
}
.btn.btn-fab-material-brown,
.input-group-btn .btn.btn-fab-material-brown,
.btn.btn-fab:hover-material-brown,
.btn.btn-fab:active-material-brown {
.input-group-btn .btn.btn-fab:hover-material-brown,
.btn.btn-fab:active-material-brown,
.input-group-btn .btn.btn-fab:active-material-brown {
background-color: #795548;
}
.btn.btn-fab-material-grey,
.input-group-btn .btn.btn-fab-material-grey,
.btn.btn-fab:hover-material-grey,
.btn.btn-fab:active-material-grey {
.input-group-btn .btn.btn-fab:hover-material-grey,
.btn.btn-fab:active-material-grey,
.input-group-btn .btn.btn-fab:active-material-grey {
background-color: #9e9e9e;
}
.btn.btn-fab-material-blue-grey,
.input-group-btn .btn.btn-fab-material-blue-grey,
.btn.btn-fab:hover-material-blue-grey,
.btn.btn-fab:active-material-blue-grey {
.input-group-btn .btn.btn-fab:hover-material-blue-grey,
.btn.btn-fab:active-material-blue-grey,
.input-group-btn .btn.btn-fab:active-material-blue-grey {
background-color: #607d8b;
}
.btn.btn-fab,
.btn.btn-fab:hover {
.input-group-btn .btn.btn-fab,
.btn.btn-fab:hover,
.input-group-btn .btn.btn-fab:hover {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.btn.btn-fab:active {
.btn.btn-fab:active,
.input-group-btn .btn.btn-fab:active {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.btn.btn-fab,
.btn.btn-fab .ripple-wrapper {
.input-group-btn .btn.btn-fab,
.btn.btn-fab .ripple-wrapper,
.input-group-btn .btn.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn.btn-fab.btn-fab-mini {
.btn.btn-fab.btn-fab-mini,
.input-group-btn .btn.btn-fab.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px 0;
font-size: 15px;
}
.btn.btn-fab i {
.btn.btn-fab i,
.input-group-btn .btn.btn-fab i {
position: relative;
top: -5px;
margin: 0 auto;
@ -4909,7 +5010,7 @@ output {
.input-group-lg input[type="time"],
.input-group-lg input[type="datetime-local"],
.input-group-lg input[type="month"] {
line-height: 42px;
line-height: 46px;
}
}
.radio label,
@ -4958,38 +5059,38 @@ output {
line-height: 1.5;
}
.input-lg '.input-lg' {
height: 42px;
padding: 8px 0px;
height: 46px;
padding: 10px 0px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.input-lg select'.input-lg' {
height: 42px;
line-height: 42px;
height: 46px;
line-height: 46px;
}
.input-lg textarea'.input-lg',
.input-lg select[multiple]'.input-lg' {
height: auto;
}
.form-group-lg .form-control {
height: 42px;
padding: 8px 0px;
height: 46px;
padding: 10px 0px;
font-size: 18px;
line-height: 1.3333333;
}
.form-group-lg select.form-control {
height: 42px;
line-height: 42px;
height: 46px;
line-height: 46px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
height: auto;
}
.form-group-lg .form-control-static {
height: 42px;
height: 46px;
min-height: 40px;
padding: 9px 0px;
padding: 11px 0px;
font-size: 18px;
line-height: 1.3333333;
}
@ -5010,7 +5111,7 @@ output {
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 11.6666664px;
padding-top: 14.333333px;
font-size: 18px;
}
}
@ -5039,38 +5140,23 @@ output {
.form-group.is-focused .form-control .material-input:after {
background-color: #009688;
}
.form-control::-moz-placeholder {
color: #BDBDBD;
font-size: 16px;
font-weight: normal;
}
.form-control:-ms-input-placeholder {
color: #BDBDBD;
font-size: 16px;
font-weight: normal;
}
.form-control::-webkit-input-placeholder {
color: #BDBDBD;
font-size: 16px;
font-weight: normal;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
.form-control:textarea,
fieldset[disabled] .form-control:textarea {
height: 40px;
}
fieldset[disabled] .form-control,
.form-control,
.form-group.is-focused fieldset[disabled] .form-control,
.form-group.is-focused .form-control {
fieldset[disabled] .form-control,
.form-group.is-focused .form-control,
.form-group.is-focused fieldset[disabled] .form-control {
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
}
fieldset[disabled] .form-control:disabled,
.form-control:disabled,
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-control:disabled {
fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-control:disabled,
.form-group.is-focused fieldset[disabled] .form-control:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
@ -5080,14 +5166,32 @@ fieldset[disabled] .form-control {
background-color: rgba(0, 0, 0, 0);
}
.form-group {
border: solid 1px red;
position: relative;
}
.form-group .form-control::-moz-placeholder {
color: #BDBDBD;
font-weight: normal;
}
.form-group .form-control:-ms-input-placeholder {
color: #BDBDBD;
font-weight: normal;
}
.form-group .form-control::-webkit-input-placeholder {
color: #BDBDBD;
font-weight: normal;
}
.form-group label.control-label {
color: #BDBDBD;
font-size: 12px;
font-weight: normal;
margin: 16px 0 0 0;
}
.form-group label.control-label.floating-label {
position: absolute;
pointer-events: none;
left: 0px;
transition: 0.3s ease all;
}
.form-group label.control-label,
.form-group-default label.control-label {
color: #BDBDBD;
@ -5258,19 +5362,104 @@ fieldset[disabled] .form-control {
.form-group-material-blue-grey.is-focused label.control-label {
color: #607d8b;
}
.form-group .form-control {
margin-bottom: 8px;
}
.form-group .form-control::-moz-placeholder {
font-size: 16px;
}
.form-group .form-control:-ms-input-placeholder {
font-size: 16px;
}
.form-group .form-control::-webkit-input-placeholder {
font-size: 16px;
}
.form-group .help-block {
margin-top: 0px;
font-size: 12px;
}
.form-group label.control-label {
font-size: 12px;
line-height: 1.07142857;
}
.form-group label.control-label.floating-label {
top: -8px;
font-size: 16px;
line-height: 1.42857143;
}
.form-group.is-focused label.control-label.floating-label,
.form-group:not(.is-empty) label.control-label.floating-label {
top: -32px;
font-size: 12px;
line-height: 1.07142857;
}
.form-group.form-group-sm .form-control {
margin-bottom: 4px;
}
.form-group.form-group-sm .form-control::-moz-placeholder {
font-size: 11px;
}
.form-group.form-group-sm .form-control:-ms-input-placeholder {
font-size: 11px;
}
.form-group.form-group-sm .form-control::-webkit-input-placeholder {
font-size: 11px;
}
.form-group.form-group-sm .help-block {
margin-top: 0px;
font-size: 9px;
}
.form-group.form-group-sm label.control-label {
font-size: 8.25px;
margin: 12px 0 0 0;
font-size: 9px;
line-height: 1.125;
}
.form-group.form-group-sm label.control-label.floating-label {
top: -12px;
font-size: 11px;
line-height: 1.5;
}
.form-group.form-group-sm.is-focused label.control-label.floating-label,
.form-group.form-group-sm:not(.is-empty) label.control-label.floating-label {
top: -27px;
font-size: 9px;
line-height: 1.125;
}
.form-group.form-group-lg .form-control {
margin-bottom: 10px;
}
.form-group.form-group-lg .form-control::-moz-placeholder {
font-size: 18px;
}
.form-group.form-group-lg .form-control:-ms-input-placeholder {
font-size: 18px;
}
.form-group.form-group-lg .form-control::-webkit-input-placeholder {
font-size: 18px;
}
.form-group.form-group-lg .help-block {
margin-top: 0px;
font-size: 14px;
}
.form-group.form-group-lg label.control-label {
font-size: 13.5px;
font-size: 14px;
line-height: 0.99999998;
}
.form-group .hint {
.form-group.form-group-lg label.control-label.floating-label {
top: -6px;
font-size: 18px;
line-height: 1.3333333;
}
.form-group.form-group-lg.is-focused label.control-label.floating-label,
.form-group.form-group-lg:not(.is-empty) label.control-label.floating-label {
top: -34px;
font-size: 14px;
line-height: 0.99999998;
}
.form-group .help-block {
position: absolute;
font-size: 80%;
display: none;
}
.form-group.is-focused .hint {
.form-group.is-focused .help-block {
display: block;
}
.form-group.is-focused .form-control,
@ -5423,55 +5612,22 @@ select.form-control[multiple],
.form-group.is-focused select.form-control[multiple] {
height: 85px;
}
label.control-label.floating-label {
font-size: 16px;
position: absolute;
pointer-events: none;
left: 0px;
top: -8px;
transition: 0.3s ease all;
.input-group-btn .btn {
margin: 0 0 8px 0;
}
.form-group.is-focused label.control-label.floating-label label.control-label {
font-size: 12px;
.form-group.form-group-sm .input-group-btn .btn {
margin: 0 0 4px 0;
}
.form-group.is-focused label.control-label.floating-label,
.form-group:not(.is-empty) label.control-label.floating-label {
top: -20px;
font-size: 12px;
.form-group.form-group-lg .input-group-btn .btn {
margin: 0 0 10px 0;
}
.form-control.input-sm ~ label.control-label.floating-label {
font-size: 11px;
top: 7px;
}
.form-group.is-focused .form-control.input-sm ~ .form-group.is-focused label.control-label.floating-label,
.form-group.is-empty .form-control.input-sm ~ .form-group.is-empty label.control-label.floating-label {
top: -8.25px;
font-size: 8.25px;
}
.form-control.input-lg ~ label.control-label.floating-label {
font-size: 18px;
top: 7px;
}
.form-group.is-focused .form-control.input-lg ~ .form-group.is-focused label.control-label.floating-label,
.form-group.is-empty .form-control.input-lg ~ .form-group.is-empty label.control-label.floating-label {
top: -13.5px;
font-size: 13.5px;
}
.input-group .form-group {
margin-right: 5px;
margin-left: 5px;
}
.input-group .form-group .form-control {
float: none;
.input-group .input-group-btn {
padding: 0 12px;
}
.input-group .input-group-addon {
border: 0;
background: transparent;
}
.input-group .input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
.form-group input[type=file] {
opacity: 0;
position: absolute;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

70
dist/js/material.js vendored
View File

@ -72,20 +72,37 @@
.each( function() {
var $input = $(this);
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
var $formGroup = $input.parent(".form-group");
// Requires form-group standard markup (will add it if necessary)
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this);
$input.wrap("<div class='form-group'></div>");
$formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
}
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
if ($input.attr("data-hint")) {
$input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
$input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
$input.removeAttr("data-hint");
}
// Always add a help block for uniform vertical spacing using visibility:hidden/visible.
//var $helpBlock = $formGroup.find(".help-block");
//if($helpBlock.length === 0) {
// $input.after("<p class='help-block'>&nbsp;</p>");
//}
// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
var legacySizes = {
"input-lg": "form-group-lg",
"input-sm": "form-group-sm"
};
$.each( legacySizes, function( legacySize, standardSize ) {
if ($input.hasClass(legacySize)) {
$input.removeClass(legacySize);
$formGroup.addClass(standardSize);
}
});
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
if ($input.hasClass("floating-label")) {
var placeholder = $input.attr("placeholder");
@ -99,12 +116,17 @@
}
else {
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
// we need the label to be *after* the input for it to work properly.
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
// we need the label to be *after* the input for it to work properly. (we use these infrequently now that
// .is-focused and .is-empty is standardized on the .form-group.
// @see: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
// Attach it to the same parent, regardless (not necessarily after input) which could cause problems,
// but this is up to the user.
var $label = $formGroup.find("label.floating-label");
if($label.length > 0){
var $labelParent = $label.parent(); // likely the form-group, but may not be in the case of input-groups
$label.detach();
$input.after($label);
$labelParent.append($label);
//$input.after($label);
}
}
@ -113,14 +135,14 @@
$formGroup.addClass("is-empty");
}
// Add at the end of the form-group
// Add at the end of the form-group
$formGroup.append("<span class='material-input'></span>");
// Support for file input
if ($formGroup.next().is("[type=file]")) {
$formGroup.addClass("fileinput");
var $nextInput = $formGroup.next().detach();
$input.after($nextInput);
if ($formGroup.find("input[type=file]").length > 0) {
$formGroup.addClass("is-fileinput");
//var $nextInput = $formGroup.next().detach();
//$input.after($nextInput);
}
});
},
@ -129,12 +151,12 @@
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) {
if(_isChar(e)) {
$(this).parent(".form-group").removeClass("is-empty");
$(this).closest(".form-group").removeClass("is-empty");
}
})
.on("keyup change", ".form-control", function() {
var $input = $(this);
var $formGroup = $input.parent(".form-group");
var $formGroup = $input.closest(".form-group");
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
if ($input.val() === "" && isValid) {
@ -157,26 +179,27 @@
$formGroup.addClass("has-error");
}
})
.on("focus", ".form-control, .form-group.fileinput", function() {
$(this).parent().addClass("is-focused"); // add class to form-group
.on("focus", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
})
.on("blur", ".form-control, .form-group.fileinput", function() {
$(this).parent().removeClass("is-focused"); // remove class from form-group
.on("blur", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
})
.on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this);
// set the fileinput readonly field with the name of the file
.on("change", ".form-group.is-fileinput input[type='file']", function() {
var $input = $(this);
var $formGroup = $input.closest(".form-group");
var value = "";
$.each(this.files, function(i, file) {
value += file.name + ", ";
});
value = value.substring(0, value.length - 2);
var $formGroup = $this.parent(".form-group");
if (value) {
$formGroup.removeClass("is-empty");
} else {
$formGroup.addClass("is-empty");
}
$this.prev().val(value);
$formGroup.find("input.form-control[readonly]").val(value);
});
},
"ripples": function(selector) {
@ -203,7 +226,6 @@
var focused;
$(document)
.on("focus", "input", function() {
console.log($(this).parent());
var $inputs = $(this).parents("form").find("input").not("[type=file]");
focused = setInterval(function() {
$inputs.each(function() {

View File

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

View File

@ -1 +1 @@
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","parent","length","wrap","hasClass","placeholder","attr","removeClass","id","forAttribute","$label","find","detach","val","addClass","append","next","is","$nextInput","attachInputEventHandlers","document","on","blur","e","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":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAA2B,GAAbD,EAAIC,OAEvE,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SAEEC,OAAS,EACTC,SAAW,EACXC,UAAY,EACZC,cAAgB,EAChBC,OAAS,EACTC,QAAU,EACVC,UAAY,EAEZC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,cACA,oEACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBV,SAAY,SAASW,GAEnB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQW,kBACtCK,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,mEAETb,aAAgB,SAASU,GAEvB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQY,sBACtCI,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,+BAETZ,MAAS,SAASS,GAEhB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQa,eACtCG,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,wDAEThB,MAAS,SAASa,GAChB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQU,eACtCM,OAAO,cACPlB,KAAK,UAAU,GACfoB,KAAM,WACL,GAAIC,GAAS/B,EAAE2B,MAGXK,EAAaD,EAAOE,OAAO,cAO/B,IANyB,IAAtBD,EAAWE,SAEZF,EAAaD,EAAOI,KAAK,mCAIvBJ,EAAOK,SAAS,kBAAmB,CACrC,GAAIC,GAAcN,EAAOO,KAAK,cAC9BP,GAAOO,KAAK,cAAe,MAAMC,YAAY,iBAC7C,IAAIC,GAAKT,EAAOO,KAAK,MACjBG,EAAe,EAChBD,KACDC,EAAe,QAAUD,EAAK,KAEhCT,EAAOF,MAAM,UAAYY,EAAe,0BAA4BJ,EAAc,gBAE/E,CAIH,GAAIK,GAASV,EAAWW,KAAK,uBAC1BD,GAAOR,OAAS,IACjBQ,EAAOE,SACPb,EAAOF,MAAMa,IAkBjB,GAbIX,EAAOO,KAAK,cACdP,EAAOF,MAAM,8BAAgCE,EAAOO,KAAK,aAAe,SAIrD,OAAjBP,EAAOc,OAAkC,aAAhBd,EAAOc,OAAyC,KAAjBd,EAAOc,QACjEb,EAAWc,SAAS,YAItBd,EAAWe,OAAO,wCAGdf,EAAWgB,OAAOC,GAAG,eAAgB,CACvCjB,EAAWc,SAAS,YACpB,IAAII,GAAalB,EAAWgB,OAAOJ,QACnCb,GAAOF,MAAMqB,OAInBC,yBAA4B,WAC1BnD,EAAEoD,UACDC,GAAG,SAAU,iCAAkC,WAAarD,EAAE2B,MAAM2B,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1CtD,EAAQsD,IACTvD,EAAE2B,MAAMM,OAAO,eAAeM,YAAY,cAG7Cc,GAAG,eAAgB,gBAAiB,WACnC,GAAItB,GAAS/B,EAAE2B,MACXK,EAAaD,EAAOE,OAAO,eAC3BuB,EAA8C,mBAA5BzB,GAAO,GAAG0B,eAAiC1B,EAAO,GAAG0B,eAEtD,MAAjB1B,EAAOc,OAAgBW,EACzBxB,EAAWc,SAAS,YAGpBd,EAAWO,YAAY,YAMtBiB,EACDxB,EAAWO,YAAY,aAGvBP,EAAWc,SAAS,eAGvBO,GAAG,QAAS,+DAAgE,WAC3ErD,EAAE2B,MAAMM,SAASa,SAAS,gBAE3BO,GAAG,OAAQ,+DAAgE,WAC1ErD,EAAE2B,MAAMM,SAASM,YAAY,gBAG9Bc,GAAG,SAAU,oCAAqC,WACjD,GAAIK,GAAQ1D,EAAE2B,MACVgC,EAAQ,EACZ3D,GAAE8B,KAAKH,KAAKiC,MAAO,SAASC,EAAGC,GAC7BH,GAASG,EAAKC,KAAO,OAEvBJ,EAAQA,EAAMK,UAAU,EAAGL,EAAMzB,OAAS,EAC1C,IAAIF,GAAa0B,EAAMzB,OAAO,cAC1B0B,GACF3B,EAAWO,YAAY,YAEvBP,EAAWc,SAAS,YAEtBY,EAAMO,OAAOpB,IAAIc,MAGrB7C,QAAW,SAASY,GAClB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQQ,aAAaN,WAEtDK,SAAY,WAEV,GAAI+C,GAAUC,YAAY,WACxBnE,EAAE,yBAAyB8B,KAAK,WAC9B,GAAI4B,GAAQ1D,EAAE2B,KACV+B,GAAMb,OAASa,EAAMb,QAAUa,EAAMpB,KAAK,UAC5CoB,EAAMU,QAAQ,aAGjB,IAGHC,YAAW,WACTC,cAAcJ,IACb,MAELK,4BAA+B,WAE7B,GAAIC,EACJxE,GAAEoD,UACDC,GAAG,QAAS,QAAS,WACpBoB,QAAQC,IAAI1E,EAAE2B,MAAMM,SACpB,IAAI0C,GAAU3E,EAAE2B,MAAMiD,QAAQ,QAAQjC,KAAK,SAASkC,IAAI,cACxDL,GAAUL,YAAY,WACpBQ,EAAQ7C,KAAK,WACX,GAAI4B,GAAQ1D,EAAE2B,KACV+B,GAAMb,QAAUa,EAAMpB,KAAK,UAC7BoB,EAAMU,QAAQ,aAGjB,OAEJf,GAAG,OAAQ,oBAAqB,WAC/BiB,cAAcE,MAGlBM,KAAQ,WACN,GAAIC,GAAY/E,EAAEoD,SAEdpD,GAAEgF,GAAGlE,SAAWa,KAAKf,QAAQE,SAC/Ba,KAAKb,UAEHa,KAAKf,QAAQC,QACfc,KAAKd,QACLc,KAAKwB,4BAEHxB,KAAKf,QAAQG,UACfY,KAAKZ,WAEHY,KAAKf,QAAQI,cACfW,KAAKX,eAEHW,KAAKf,QAAQK,OACfU,KAAKV,QAEHU,KAAKf,QAAQO,WACfQ,KAAKR,WACLQ,KAAK4C,+BAGHnB,SAASlC,QAAUS,KAAKf,QAAQM,SAC9BlB,EAAEgF,GAAGlE,SAAWa,KAAKf,QAAQE,SAC/BiE,EAAU7D,OAAOS,KAAKf,QAAQQ,YAAa,WACzCpB,EAAEW,SAASG,QAAQd,EAAE2B,SAGrBA,KAAKf,QAAQC,OACfkE,EAAU7D,OAAOS,KAAKf,QAAQU,cAAe,WAC3CtB,EAAEW,SAASE,MAAMb,EAAE2B,SAGnBA,KAAKf,QAAQG,UACfgE,EAAU7D,OAAOS,KAAKf,QAAQW,iBAAkB,WAC9CvB,EAAEW,SAASI,SAASf,EAAE2B,SAGtBA,KAAKf,QAAQK,OACf8D,EAAU7D,OAAOS,KAAKf,QAAQa,cAAe,WAC3CzB,EAAEW,SAASM,MAAMjB,EAAE2B,SAGnBA,KAAKf,QAAQI,cACf+D,EAAU7D,OAAOS,KAAKf,QAAQY,qBAAsB,WAClDxB,EAAEW,SAASK,aAAahB,EAAE2B,aAQnCsD","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","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","$label","find","$labelParent","parent","detach","append","val","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

View File

@ -269,9 +269,9 @@
width: 80%;
}
#input .form-group {
margin: 30px 0;
}
/*#input .form-group {*/
/*margin: 30px 0;*/
/*}*/
#slider .sample1, #slider .sample2 {
padding: 20px 0;

View File

@ -523,7 +523,6 @@
</div>
</div>
</div>
<div class="well page" id="fileinput">
<h1 class="header">File Input</h1>
@ -552,8 +551,6 @@
</div>
</div>
</div>
<div class="well page" id="navbar">
<h1 class="header">Navbar</h1>

View File

@ -95,9 +95,9 @@
label.control-label { // static label
font-size: @static-font-size; // static (smaller of the two)
line-height: @static-line-height;
&.floating-label {
&.floating-label { // as placeholder (full size)
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: @placeholder-font-size; // as placeholder (full size)
font-size: @placeholder-font-size;
line-height: @line-height;
}
@ -116,6 +116,7 @@
}
.form-group {
border: solid 1px red;
position: relative;
// ----
@ -163,9 +164,9 @@
.form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
}
// Hints
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
.help-block {
position: absolute;
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none;
}
@ -175,6 +176,19 @@
}
}
// Hints - visibility approach - uses a bit too much vertical space, no jumping on blur, good text wrapping
// May need to generate help-block for those without one for even vertical spacing (not a good thing).
//.help-block {
// visibility: hidden; // reserve the vertical space to avoid jumping inputs on blur
// margin-bottom: 0; // keep vertical space to a minimum
//}
//
//&.is-focused {
// .help-block {
// visibility: visible;
// }
//}
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~".is-focused .form-control", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);

View File

@ -48,7 +48,8 @@
}
.btn {
.btn,
.input-group-btn .btn {
&.btn-flat {
background: none;
box-shadow: none;
@ -86,7 +87,8 @@
&:active {
@include shadow-z-1-hover();
}
&, .ripple-wrapper {
&,
.ripple-wrapper {
border-radius: 100%;
}
&.btn-fab-mini {

View File

@ -68,28 +68,43 @@
}
}
@mixin form-group-size-variant($placeholder-font-size, $vertical-padding){
$label-as-placeholder-top: -1 * $vertical-padding !default;
@mixin form-group-size-variant($placeholder-font-size, $vertical-padding, $line-height, $label-as-placeholder-shim){
$static-font-size: ceil(($floating-label-size-ratio * $placeholder-font-size)) !default;
$hint-font-size: ceil(($hint-size-ratio * $placeholder-font-size)) !default;
$static-line-height: ($floating-label-size-ratio * $line-height) !default;
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
//$label-as-placeholder-top: -1 * ($line-height * $static-font-size) !default; way too much on anything but sm
$help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
$help-block-line-height: ($help-block-size-ratio * $line-height) !default;
.form-control {
@include material-placeholder {
font-size: $placeholder-font-size;
}
margin-bottom: $vertical-padding;
//border: 1px solid;
}
.hint {
font-size: $hint-font-size;
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: $help-block-font-size;
//border: 1px solid;
}
label.control-label { // static label
font-size: $static-font-size; // static (smaller of the two)
line-height: $static-line-height;
&.floating-label {
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: $placeholder-font-size; // as placeholder (full size)
line-height: $line-height;
}
//border: 1px solid;
}
// sizing of focused/open/labels
@ -98,6 +113,7 @@
label.control-label.floating-label {
top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding);
font-size: $static-font-size;
line-height: $static-line-height;
}
}
}
@ -139,26 +155,26 @@
@include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
// default floating size/location
@include form-group-size-variant($md-input-font-size-base, $md-input-padding-base-vertical);
@include form-group-size-variant($md-input-font-size-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
// sm floating size/location
&.form-group-sm {
@include form-group-size-variant($md-input-font-size-small, $md-input-padding-small-vertical);
@include form-group-size-variant($md-input-font-size-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
}
// lg floating size/location
&.form-group-lg {
@include form-group-size-variant($md-input-font-size-large, $md-input-padding-large-vertical);
@include form-group-size-variant($md-input-font-size-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
}
// Hints
.hint {
.help-block {
position: absolute;
display: none;
}
&.is-focused {
.hint {
.help-block {
display: block;
}
}
@ -207,22 +223,45 @@ select.form-control {
}
}
.input-group {
.form-group {
.form-control {
float: none;
@mixin input-group-button-variation($vertical-padding){
.input-group-btn {
.btn {
margin: 0 0 $vertical-padding 0;
}
margin-right: 5px;
margin-left: 5px;
}
}
// ----------------
// input group/addon related styles
// default margin
@include input-group-button-variation($md-input-padding-base-vertical);
.form-group {
//.form-control {
// float: none;
//}
// sm margin
&.form-group-sm {
@include input-group-button-variation($md-input-padding-small-vertical);
}
// lg margin
&.form-group-lg {
@include input-group-button-variation($md-input-padding-large-vertical);
}
}
.input-group { // may be in or outside of form-group
.input-group-btn {
padding: 0 12px; // match addon spacing
}
.input-group-addon {
border: 0;
background: transparent;
}
.input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
}
// Input files (kinda hack)

View File

@ -87,7 +87,7 @@ $material-border-radius: 2px !default;
// inputs
$input-placeholder-color: #BDBDBD !default;
$floating-label-size-ratio: 75 / 100 !default;
$hint-size-ratio: 75 / 100 !default;
$help-block-size-ratio: 75 / 100 !default;
$input-underline-color: #D2D2D2 !default;
$md-input-font-size-base: 16px !default;
@ -103,23 +103,25 @@ $md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
$md-input-line-height-base: 1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$md-input-line-height-computed: floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px
$md-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$md-input-line-height-small: 1.5 !default;
//## 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: 8px !default; // was 6.
$md-input-padding-base-horizontal: 0px !default; // was 12.
$md-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder
$md-input-padding-large-vertical: 10px !default; // 10
$md-input-padding-large-horizontal: 0px !default; // 16
$md-input-padding-large-horizontal: 0px !default; // 16
$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
$md-input-padding-small-vertical: 4px !default; // 5
$md-input-padding-small-horizontal: 0px !default; // 10
$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
$md-input-padding-xs-vertical: 2px !default; // 1
$md-input-padding-xs-horizontal: 0px !default; // 5
$md-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$md-input-line-height-small: 1.5 !default;
$md-input-border-radius-base: 4px !default;
$md-input-border-radius-large: 6px !default;
$md-input-border-radius-small: 3px !default;

View File

@ -85,6 +85,12 @@
$input.removeAttr("data-hint");
}
// Always add a help block for uniform vertical spacing using visibility:hidden/visible.
//var $helpBlock = $formGroup.find(".help-block");
//if($helpBlock.length === 0) {
// $input.after("<p class='help-block'>&nbsp;</p>");
//}
// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
var legacySizes = {
"input-lg": "form-group-lg",
@ -129,7 +135,7 @@
$formGroup.addClass("is-empty");
}
// Add at the end of the form-group
// Add at the end of the form-group
$formGroup.append("<span class='material-input'></span>");
// Support for file input