mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
Transitioned label styles to be indicated on the form-group
This commit is contained in:
Kevin Ross
parent
3c6f83dec0
commit
564106a5ec
|
|
@ -1973,12 +1973,15 @@
|
|||
<div class="col-lg-4 col-lg-offset-1">
|
||||
|
||||
<form class="bs-component">
|
||||
<div class="form-group">
|
||||
<input class="form-control floating-label" id="focusedInput1" type="text" placeholder="Write something to make the label float">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label" for="focusedInput1">Write something to make the label float</label>
|
||||
<input class="form-control" id="focusedInput1" type="text">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input class="form-control floating-label" id="focusedInput2" type="text" placeholder="Focus to show the help-block" data-hint="You should really write something here">
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label" for="focusedInput2">Focus to show the help-block</label>
|
||||
<input class="form-control" id="focusedInput2" type="text">
|
||||
<p class="help-block">You should really write something here</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -2027,8 +2030,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label floating-label" for="addon2">Floating label addon <small>(right only)</small></label>
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label" for="addon2">Floating label addon <small>(right only)</small></label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="addon2" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
|
|
|
|||
1037
dist/css/material-fullpalette.css
vendored
1037
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
239
dist/css/material.css
vendored
239
dist/css/material.css
vendored
|
|
@ -4975,13 +4975,13 @@ legend {
|
|||
font-size: 24px;
|
||||
}
|
||||
output {
|
||||
padding-top: 9px;
|
||||
padding-top: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
.form-control {
|
||||
height: 40px;
|
||||
padding: 8px 0px;
|
||||
height: 38px;
|
||||
padding: 7px 0px;
|
||||
font-size: 16px;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
|
|
@ -4990,7 +4990,7 @@ output {
|
|||
input[type="time"].form-control,
|
||||
input[type="datetime-local"].form-control,
|
||||
input[type="month"].form-control {
|
||||
line-height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
input[type="date"].input-sm,
|
||||
input[type="time"].input-sm,
|
||||
|
|
@ -5000,7 +5000,7 @@ output {
|
|||
.input-group-sm input[type="time"],
|
||||
.input-group-sm input[type="datetime-local"],
|
||||
.input-group-sm input[type="month"] {
|
||||
line-height: 26px;
|
||||
line-height: 24px;
|
||||
}
|
||||
input[type="date"].input-lg,
|
||||
input[type="time"].input-lg,
|
||||
|
|
@ -5010,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: 46px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.radio label,
|
||||
|
|
@ -5018,79 +5018,79 @@ output {
|
|||
min-height: 22px;
|
||||
}
|
||||
.form-control-static {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
min-height: 38px;
|
||||
}
|
||||
.input-sm '.input-sm' {
|
||||
height: 26px;
|
||||
padding: 4px 0px;
|
||||
height: 24px;
|
||||
padding: 3px 0px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.input-sm select'.input-sm' {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.input-sm textarea'.input-sm',
|
||||
.input-sm select[multiple]'.input-sm' {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-sm .form-control {
|
||||
height: 26px;
|
||||
padding: 4px 0px;
|
||||
height: 24px;
|
||||
padding: 3px 0px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.form-group-sm select.form-control {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.form-group-sm textarea.form-control,
|
||||
.form-group-sm select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-sm .form-control-static {
|
||||
height: 26px;
|
||||
height: 24px;
|
||||
min-height: 33px;
|
||||
padding: 5px 0px;
|
||||
padding: 4px 0px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-lg '.input-lg' {
|
||||
height: 46px;
|
||||
padding: 10px 0px;
|
||||
height: 44px;
|
||||
padding: 9px 0px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-lg select'.input-lg' {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.input-lg textarea'.input-lg',
|
||||
.input-lg select[multiple]'.input-lg' {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-lg .form-control {
|
||||
height: 46px;
|
||||
padding: 10px 0px;
|
||||
height: 44px;
|
||||
padding: 9px 0px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
.form-group-lg select.form-control {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.form-group-lg textarea.form-control,
|
||||
.form-group-lg select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-lg .form-control-static {
|
||||
height: 46px;
|
||||
height: 44px;
|
||||
min-height: 40px;
|
||||
padding: 11px 0px;
|
||||
padding: 10px 0px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
|
|
@ -5098,26 +5098,26 @@ output {
|
|||
.form-horizontal .checkbox,
|
||||
.form-horizontal .radio-inline,
|
||||
.form-horizontal .checkbox-inline {
|
||||
padding-top: 9px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.form-horizontal .radio,
|
||||
.form-horizontal .checkbox {
|
||||
min-height: 31px;
|
||||
min-height: 30px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .control-label {
|
||||
padding-top: 9px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .form-group-lg .control-label {
|
||||
padding-top: 14.333333px;
|
||||
padding-top: 12.9999997px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .form-group-sm .control-label {
|
||||
padding-top: 5px;
|
||||
padding-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
|
@ -5166,8 +5166,9 @@ fieldset[disabled] .form-control {
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.form-group {
|
||||
border: solid 1px red;
|
||||
position: relative;
|
||||
margin: 28px 0 0 0;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.form-group .form-control::-moz-placeholder {
|
||||
color: #BDBDBD;
|
||||
|
|
@ -5181,16 +5182,21 @@ fieldset[disabled] .form-control {
|
|||
color: #BDBDBD;
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-group.label-static label.control-label,
|
||||
.form-group.label-placeholder label.control-label,
|
||||
.form-group.label-floating label.control-label {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
.form-group label.control-label {
|
||||
color: #BDBDBD;
|
||||
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-placeholder:not(.is-empty) label.control-label {
|
||||
display: none;
|
||||
}
|
||||
.form-group label.control-label,
|
||||
.form-group-default label.control-label {
|
||||
|
|
@ -5362,8 +5368,93 @@ fieldset[disabled] .form-control {
|
|||
.form-group-material-blue-grey.is-focused label.control-label {
|
||||
color: #607d8b;
|
||||
}
|
||||
.form-group.is-focused.label-placeholder label.control-label,
|
||||
.form-group-default.is-focused.label-placeholder label.control-label {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
.form-group-black.is-focused.label-placeholder label.control-label {
|
||||
color: #000000;
|
||||
}
|
||||
.form-group-white.is-focused.label-placeholder label.control-label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.form-group-inverse.is-focused.label-placeholder label.control-label {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.form-group-primary.is-focused.label-placeholder label.control-label {
|
||||
color: #009688;
|
||||
}
|
||||
.form-group-success.is-focused.label-placeholder label.control-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
.form-group-info.is-focused.label-placeholder label.control-label {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.form-group-warning.is-focused.label-placeholder label.control-label {
|
||||
color: #ff5722;
|
||||
}
|
||||
.form-group-danger.is-focused.label-placeholder label.control-label {
|
||||
color: #f44336;
|
||||
}
|
||||
.form-group-material-red.is-focused.label-placeholder label.control-label {
|
||||
color: #f44336;
|
||||
}
|
||||
.form-group-material-pink.is-focused.label-placeholder label.control-label {
|
||||
color: #e91e63;
|
||||
}
|
||||
.form-group-material-purple.is-focused.label-placeholder label.control-label {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.form-group-material-deep-purple.is-focused.label-placeholder label.control-label {
|
||||
color: #673ab7;
|
||||
}
|
||||
.form-group-material-indigo.is-focused.label-placeholder label.control-label {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.form-group-material-blue.is-focused.label-placeholder label.control-label {
|
||||
color: #2196f3;
|
||||
}
|
||||
.form-group-material-light-blue.is-focused.label-placeholder label.control-label {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.form-group-material-cyan.is-focused.label-placeholder label.control-label {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.form-group-material-teal.is-focused.label-placeholder label.control-label {
|
||||
color: #009688;
|
||||
}
|
||||
.form-group-material-green.is-focused.label-placeholder label.control-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
.form-group-material-light-green.is-focused.label-placeholder label.control-label {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.form-group-material-lime.is-focused.label-placeholder label.control-label {
|
||||
color: #cddc39;
|
||||
}
|
||||
.form-group-material-yellow.is-focused.label-placeholder label.control-label {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.form-group-material-amber.is-focused.label-placeholder label.control-label {
|
||||
color: #ffc107;
|
||||
}
|
||||
.form-group-material-orange.is-focused.label-placeholder label.control-label {
|
||||
color: #ff9800;
|
||||
}
|
||||
.form-group-material-deep-orange.is-focused.label-placeholder label.control-label {
|
||||
color: #ff5722;
|
||||
}
|
||||
.form-group-material-brown.is-focused.label-placeholder label.control-label {
|
||||
color: #795548;
|
||||
}
|
||||
.form-group-material-grey.is-focused.label-placeholder label.control-label {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.form-group-material-blue-grey.is-focused.label-placeholder label.control-label {
|
||||
color: #607d8b;
|
||||
}
|
||||
.form-group .form-control {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.form-group .form-control::-moz-placeholder {
|
||||
font-size: 16px;
|
||||
|
|
@ -5382,19 +5473,23 @@ fieldset[disabled] .form-control {
|
|||
font-size: 12px;
|
||||
line-height: 1.07142857;
|
||||
}
|
||||
.form-group label.control-label.floating-label {
|
||||
top: -8px;
|
||||
.form-group.label-floating label.control-label,
|
||||
.form-group.label-placeholder label.control-label {
|
||||
top: -7px;
|
||||
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.label-static label.control-label,
|
||||
.form-group.label-floating.is-focused label.control-label,
|
||||
.form-group.label-floating:not(.is-empty) label.control-label {
|
||||
top: -30px;
|
||||
}
|
||||
.form-group.form-group-sm {
|
||||
margin: 21px 0 0 0;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.form-group.form-group-sm .form-control {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.form-group.form-group-sm .form-control::-moz-placeholder {
|
||||
font-size: 11px;
|
||||
|
|
@ -5413,19 +5508,23 @@ fieldset[disabled] .form-control {
|
|||
font-size: 9px;
|
||||
line-height: 1.125;
|
||||
}
|
||||
.form-group.form-group-sm label.control-label.floating-label {
|
||||
top: -12px;
|
||||
.form-group.form-group-sm.label-floating label.control-label,
|
||||
.form-group.form-group-sm.label-placeholder label.control-label {
|
||||
top: -11px;
|
||||
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-sm.label-static label.control-label,
|
||||
.form-group.form-group-sm.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
|
||||
top: -25px;
|
||||
}
|
||||
.form-group.form-group-lg {
|
||||
margin: 30px 0 0 0;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
.form-group.form-group-lg .form-control {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.form-group.form-group-lg .form-control::-moz-placeholder {
|
||||
font-size: 18px;
|
||||
|
|
@ -5444,16 +5543,16 @@ fieldset[disabled] .form-control {
|
|||
font-size: 14px;
|
||||
line-height: 0.99999998;
|
||||
}
|
||||
.form-group.form-group-lg label.control-label.floating-label {
|
||||
top: -6px;
|
||||
.form-group.form-group-lg.label-floating label.control-label,
|
||||
.form-group.form-group-lg.label-placeholder label.control-label {
|
||||
top: -5px;
|
||||
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.form-group-lg.label-static label.control-label,
|
||||
.form-group.form-group-lg.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
|
||||
top: -32px;
|
||||
}
|
||||
.form-group .help-block {
|
||||
position: absolute;
|
||||
|
|
@ -5613,13 +5712,13 @@ select.form-control[multiple],
|
|||
height: 85px;
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 7px 0;
|
||||
}
|
||||
.form-group.form-group-sm .input-group-btn .btn {
|
||||
margin: 0 0 4px 0;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.form-group.form-group-lg .input-group-btn .btn {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 9px 0;
|
||||
}
|
||||
.input-group .input-group-btn {
|
||||
padding: 0 12px;
|
||||
|
|
@ -8523,10 +8622,10 @@ hr.on-light {
|
|||
border: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
.selectize-control.single .selectize-input.floating-label-fix input,
|
||||
.selectize-control.multi .selectize-input.floating-label-fix input,
|
||||
.selectize-control.single .selectize-input.input-active.floating-label-fix input,
|
||||
.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
|
||||
.selectize-control.single .selectize-input.label-floating-fix input,
|
||||
.selectize-control.multi .selectize-input.label-floating-fix input,
|
||||
.selectize-control.single .selectize-input.input-active.label-floating-fix input,
|
||||
.selectize-control.multi .selectize-input.input-active.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
.selectize-control.single .selectize-input > div,
|
||||
|
|
|
|||
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
35
dist/js/material.js
vendored
35
dist/js/material.js
vendored
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
if ($input.hasClass("floating-label")) {
|
||||
var placeholder = $input.attr("placeholder");
|
||||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
|
|
@ -112,23 +112,24 @@
|
|||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
|
||||
}
|
||||
else {
|
||||
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
|
||||
// we need the label to be *after* the input for it to work properly. (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();
|
||||
$labelParent.append($label);
|
||||
//$input.after($label);
|
||||
}
|
||||
$formGroup.addClass('label-floating');
|
||||
$input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
|
||||
}
|
||||
//else {
|
||||
// // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
|
||||
// // we need the label to be *after* the input for it to work properly. (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.control-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();
|
||||
// $labelParent.append($label);
|
||||
// //$input.after($label);
|
||||
// }
|
||||
//}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
|
|
|
|||
119
index.html
119
index.html
|
|
@ -366,40 +366,55 @@
|
|||
</h1>
|
||||
|
||||
<div class="inputs">
|
||||
<h2>Input
|
||||
<h2>Input label styles
|
||||
<small>default sizing</small>
|
||||
</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i2" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
|
||||
|
||||
<div class="form-group label-static">
|
||||
<label for="i2" class="control-label">label-static</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
|
||||
<p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i5" class="control-label floating-label">Floating label</label>
|
||||
<div class="form-group label-floating">
|
||||
<label for="i5" class="control-label">label-floating</label>
|
||||
<input type="email" class="form-control" id="i5">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-placeholder">
|
||||
<label for="i5p" class="control-label">label-placeholder</label>
|
||||
<input type="email" class="form-control" id="i5p">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="i5ps" class="control-label col-lg-2">Column label</label>
|
||||
<div class="col-lg-10">
|
||||
<input type="email" class="form-control" id="i5ps" placeholder="placeholder attribute">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h2>Input - floating labels
|
||||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="i4" class="control-label floating-label">Email address form-group-sm</label>
|
||||
<div class="form-group form-group-sm label-floating">
|
||||
<label for="i4" class="control-label">Email address form-group-sm</label>
|
||||
<input type="email" class="form-control" id="i4">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i5i" class="control-label floating-label">Email address default size</label>
|
||||
<div class="form-group label-floating">
|
||||
<label for="i5i" class="control-label">Email address default size</label>
|
||||
<input type="email" class="form-control" id="i5i">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<label for="i6" class="control-label floating-label">Email address form-group-lg</label>
|
||||
<div class="form-group form-group-lg label-floating">
|
||||
<label for="i6" class="control-label">Email address form-group-lg</label>
|
||||
<input type="email" class="form-control" id="i6">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
|
@ -408,19 +423,19 @@
|
|||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
|
||||
<div class="form-group form-group-sm">
|
||||
<div class="form-group form-group-sm label-static">
|
||||
<label for="si4" class="control-label">Email address form-group-sm</label>
|
||||
<input type="email" class="form-control" id="si4" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group label-static">
|
||||
<label for="si5i" class="control-label">Email address default size</label>
|
||||
<input type="email" class="form-control" id="si5i" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<div class="form-group form-group-lg label-static">
|
||||
<label for="si6" class="control-label">Email address form-group-lg</label>
|
||||
<input type="email" class="form-control" id="si6" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
|
|
@ -431,17 +446,20 @@
|
|||
</h2>
|
||||
|
||||
<div class="form-group form-group-sm">
|
||||
<input type="email" class="form-control" placeholder="Placeholder form-group-sm">
|
||||
<label for="si4n" class="control-label">Email address form-group-sm</label>
|
||||
<input type="email" class="form-control" id="si4n" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" placeholder="Placeholder">
|
||||
<label for="si5in" class="control-label">Email address default size</label>
|
||||
<input type="email" class="form-control" id="si5in" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<input type="email" class="form-control" placeholder="Placeholder form-group-lg">
|
||||
<label for="si6n" class="control-label">Email address form-group-lg</label>
|
||||
<input type="email" class="form-control" id="si6n" placeholder="Placeholder">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -449,20 +467,20 @@
|
|||
<h2>Input -
|
||||
<small>floating label feedback variants</small>
|
||||
</h2>
|
||||
<div class="form-group has-success">
|
||||
<label for="f1" class="control-label floating-label">Email address has-success</label>
|
||||
<div class="form-group has-success label-floating">
|
||||
<label for="f1" class="control-label">Email address has-success</label>
|
||||
<input type="email" class="form-control" id="f1">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group has-warning">
|
||||
<label for="f2" class="control-label floating-label">Email address has-warning</label>
|
||||
<div class="form-group has-warning label-floating">
|
||||
<label for="f2" class="control-label">Email address has-warning</label>
|
||||
<input type="email" class="form-control" id="f2">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group has-error">
|
||||
<label for="f3" class="control-label floating-label">Email address has-error</label>
|
||||
<div class="form-group has-error label-floating">
|
||||
<label for="f3" class="control-label">Email address has-error</label>
|
||||
<input type="email" class="form-control" id="f3">
|
||||
<span class="help-block">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
|
@ -474,52 +492,61 @@
|
|||
|
||||
<h2>Textarea</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="t1" class="control-label floating-label">Floating label</label>
|
||||
<div class="form-group label-floating">
|
||||
<label for="t1" class="control-label">Floating label</label>
|
||||
<textarea id="t1" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="placeholder without label"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control floating-label" placeholder="legacy floating label as placeholder"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- legacy markup -->
|
||||
<textarea class="form-control floating-label" placeholder="legacy floating label as placeholder"></textarea>
|
||||
|
||||
<h2>Validation</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control floating-label" placeholder="email">
|
||||
<div class="form-group label-floating">
|
||||
<label for="111">email</label>
|
||||
<input type="email" class="form-control" id="111">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="number" class="form-control floating-label" placeholder="number">
|
||||
<div class="form-group label-floating">
|
||||
<label for="222">number</label>
|
||||
<input type="number" class="form-control" id="222">
|
||||
</div>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<input disabled type="text" class="form-control floating-label" placeholder="email">
|
||||
<div class="form-group label-floating">
|
||||
<label for="333">email</label>
|
||||
<input disabled type="text" class="form-control" id="333">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input disabled type="text" class="form-control floating-label" placeholder="number">
|
||||
<div class="form-group label-floating">
|
||||
<label for="444">number</label>
|
||||
<input disabled type="text" class="form-control" id="444">
|
||||
</div>
|
||||
|
||||
<h2>Hints</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control floating-label" data-hint="Write here something cool" placeholder="label">
|
||||
<div class="form-group label-floating">
|
||||
<label for="555">label</label>
|
||||
<input type="text" class="form-control" id="555">
|
||||
<p class="help-block">Some helpful hint</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control floating-label" data-hint="A valid email should contain an @ symbol" placeholder="label">
|
||||
<div class="form-group label-floating">
|
||||
<label for="676">label</label>
|
||||
<input type="email" class="form-control" id="676">
|
||||
<p class="help-block">A valid email contains an @ character</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Styling</h2>
|
||||
|
||||
<div class="form-group has-error">
|
||||
<input type="text" class="form-control form-control-success" placeholder="label">
|
||||
<div class="form-group has-success">
|
||||
<input type="text" class="form-control" placeholder="placeholder">
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<input type="text" class="form-control form-control-success floating-label" placeholder="floating label">
|
||||
<div class="form-group has-success label-floating">
|
||||
<label for="777">floating label</label>
|
||||
<input type="text" class="form-control" id="777">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,57 +66,63 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
@static-line-height: (@floating-label-size-ratio * @line-height);
|
||||
.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
|
||||
@static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
|
||||
@static-line-height: (@label-floating-size-ratio * @line-height);
|
||||
|
||||
@label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
|
||||
//@label-as-placeholder-top: -1 * (@line-height * @static-font-size); way too much on anything but sm
|
||||
@label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
|
||||
|
||||
@help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
|
||||
@help-block-line-height: (@help-block-size-ratio * @line-height);
|
||||
|
||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
||||
margin: (@label-top-margin + @static-font-size) 0 0 0;
|
||||
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @placeholder-font-size;
|
||||
});
|
||||
margin-bottom: @vertical-padding;
|
||||
|
||||
//border: 1px solid;
|
||||
margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
|
||||
}
|
||||
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
|
||||
// must also be expressed as form-group padding
|
||||
padding-bottom: @vertical-padding;
|
||||
|
||||
.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)
|
||||
// smaller focused or static size
|
||||
label.control-label {
|
||||
font-size: @static-font-size;
|
||||
line-height: @static-line-height;
|
||||
&.floating-label { // as placeholder (full size)
|
||||
}
|
||||
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
&.label-placeholder {
|
||||
label.control-label {
|
||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
}
|
||||
|
||||
//border: 1px solid;
|
||||
}
|
||||
|
||||
// sizing of focused/open/labels
|
||||
&.is-focused,
|
||||
&:not(.is-empty) {
|
||||
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;
|
||||
// static or focused floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: @label-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
border: solid 1px red;
|
||||
//border: solid 1px red;
|
||||
position: relative;
|
||||
|
||||
// ----
|
||||
|
|
@ -134,34 +140,45 @@
|
|||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
|
||||
label.control-label { // static label
|
||||
|
||||
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
|
||||
color: @input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
|
||||
&.floating-label {
|
||||
&.label-static,
|
||||
&.label-placeholder,
|
||||
&.label-floating {
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: @input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
// hide label-placeholders when the field is not empty
|
||||
&.label-placeholder:not(.is-empty){
|
||||
label.control-label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
|
||||
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
|
||||
.variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color); // default label color variations
|
||||
|
||||
// default floating size/location
|
||||
.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);
|
||||
.form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
|
||||
|
||||
// sm floating size/location
|
||||
&.form-group-sm {
|
||||
.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);
|
||||
.form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.form-group-lg {
|
||||
.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);
|
||||
.form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
|
||||
}
|
||||
|
||||
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
border: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
&.floating-label-fix input {
|
||||
&.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
> div, > .item {
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
// --------------------
|
||||
// inputs
|
||||
@input-placeholder-color: #BDBDBD;
|
||||
@floating-label-size-ratio: 75 / 100;
|
||||
@label-floating-size-ratio: 75 / 100;
|
||||
@help-block-size-ratio: 75 / 100;
|
||||
@input-underline-color: #D2D2D2;
|
||||
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
|
||||
|
||||
// size when static or floating with focus i.e. 16px
|
||||
//@md-input-label-font-size-base: ceil((@floating-label-size-ratio * @md-input-font-size-base));
|
||||
//@md-input-label-font-size-small:ceil(( @floating-label-size-ratio * @md-input-font-size-small));
|
||||
//@md-input-label-font-size-large: ceil((@floating-label-size-ratio * @md-input-font-size-large));
|
||||
//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
|
||||
//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
|
||||
//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@md-input-line-height-base: 1.428571429; // 20/14
|
||||
|
|
@ -105,17 +105,20 @@
|
|||
@md-input-line-height-small: 1.5;
|
||||
|
||||
//## 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; // was 6.
|
||||
@md-input-padding-base-vertical: 8px - 1px; // was 6.
|
||||
@md-input-padding-base-horizontal: 0px; // was 12.
|
||||
@md-label-as-placeholder-shim-base: 0px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-base: 16px;
|
||||
|
||||
@md-input-padding-large-vertical: 10px; // 10
|
||||
@md-input-padding-large-vertical: 10px - 1px; // 10
|
||||
@md-input-padding-large-horizontal: 0px; // 16
|
||||
@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-large: 16px;
|
||||
|
||||
@md-input-padding-small-vertical: 4px; // 5
|
||||
@md-input-padding-small-vertical: 4px - 1px; // 5
|
||||
@md-input-padding-small-horizontal: 0px; // 10
|
||||
@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-small: 12px;
|
||||
|
||||
@md-input-padding-xs-vertical: 2px; // 1
|
||||
@md-input-padding-xs-horizontal: 0px; // 5
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
if ($input.hasClass("floating-label")) {
|
||||
var placeholder = $input.attr("placeholder");
|
||||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
|
|
@ -112,23 +112,24 @@
|
|||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
|
||||
}
|
||||
else {
|
||||
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
|
||||
// we need the label to be *after* the input for it to work properly. (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();
|
||||
$labelParent.append($label);
|
||||
//$input.after($label);
|
||||
}
|
||||
$formGroup.addClass('label-floating');
|
||||
$input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
|
||||
}
|
||||
//else {
|
||||
// // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
|
||||
// // we need the label to be *after* the input for it to work properly. (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.control-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();
|
||||
// $labelParent.append($label);
|
||||
// //$input.after($label);
|
||||
// }
|
||||
//}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user