mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
fixed legacy floating labels
This commit is contained in:
Kevin Ross
parent
e6432367d9
commit
593968cf2c
|
|
@ -351,7 +351,7 @@ module.exports = function (grunt) {
|
|||
},
|
||||
watch: {
|
||||
html: {
|
||||
files: ["index.html", "bootstrap-elements.html"],
|
||||
files: ["index.html", "bootstrap-elements.html", "test.html"],
|
||||
tasks: ["htmllint", "bootlint"]
|
||||
},
|
||||
js: {
|
||||
|
|
|
|||
24
dist/js/material.js
vendored
24
dist/js/material.js
vendored
|
|
@ -76,7 +76,14 @@
|
|||
var $formGroup = $input.parent(".form-group");
|
||||
if($formGroup.length === 0){
|
||||
//console.debug("Generating form-group for input", $this);
|
||||
$formGroup = $input.wrap("<div class='form-group'></div>");
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.parent(".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.removeAttr("data-hint");
|
||||
}
|
||||
|
||||
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
|
|
@ -88,7 +95,7 @@
|
|||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
|
||||
$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 `~`,
|
||||
|
|
@ -101,11 +108,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 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>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
|
|
@ -145,6 +147,9 @@
|
|||
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
|
||||
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
|
||||
// the form-group on change.
|
||||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if(isValid){
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
|
|
@ -152,12 +157,11 @@
|
|||
$formGroup.addClass("has-error");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||
.on("focus", ".form-control, .form-group.fileinput", function() {
|
||||
$(this).parent().addClass("is-focused"); // add class to form-group
|
||||
})
|
||||
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
|
||||
.on("blur", ".form-control, .form-group.fileinput", function() {
|
||||
$(this).parent().removeClass("is-focused"); // remove class from form-group
|
||||
// .is(":invalid"))
|
||||
})
|
||||
.on("change", ".form-group.fileinput [type=file]", function() {
|
||||
var $this = $(this);
|
||||
|
|
|
|||
26
index.html
26
index.html
|
|
@ -415,20 +415,20 @@
|
|||
<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>
|
||||
<!--<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">
|
||||
<label for="i9" class="control-label floating-label">Floating label input-lg</label>
|
||||
<input type="email" class="form-control input-lg" id="i9">
|
||||
<span class="help-block hint">This is a hint</span>
|
||||
</div>
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label for="i9" class="control-label floating-label">Floating label input-lg</label>-->
|
||||
<!--<input type="email" class="form-control input-lg" id="i9">-->
|
||||
<!--<span class="help-block hint">This is a hint</span>-->
|
||||
<!--</div>-->
|
||||
|
||||
<h2>Input - Legacy</h2>
|
||||
<!-- Exercise backwards compatibility without form-group -->
|
||||
|
|
|
|||
|
|
@ -44,31 +44,15 @@
|
|||
font-weight: normal;
|
||||
});
|
||||
|
||||
//&::-moz-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&:-ms-input-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&::-webkit-input-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
&,
|
||||
fieldset[disabled] & {
|
||||
|
||||
fieldset[disabled] &,
|
||||
& {
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
//padding: 0;
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
|
@ -182,26 +166,28 @@ select.form-control {
|
|||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
|
||||
// this is for input-sm and input-lg directly on input. Recommended way is form-group-sm and form-group-lg instead.
|
||||
.input-size-floating-label(@name, @size) {
|
||||
.form-control.@{name} ~ & {
|
||||
font-size: @size;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &,
|
||||
.form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & {
|
||||
top: @floating-label-size-ratio * -@size;
|
||||
font-size: @floating-label-size-ratio * @size;
|
||||
}
|
||||
}
|
||||
//.input-size-floating-label(@name, @size) {
|
||||
// .form-control.@{name} ~ & {
|
||||
// font-size: @size;
|
||||
// top: 7px;
|
||||
// }
|
||||
//
|
||||
// .form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &,
|
||||
// .form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & {
|
||||
// top: @floating-label-size-ratio * -@size;
|
||||
// font-size: @floating-label-size-ratio * @size;
|
||||
// }
|
||||
//}
|
||||
|
||||
// Do not nest label.floating-label inside .form-group - it messes with ~ selector
|
||||
label.control-label.floating-label {
|
||||
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
|
||||
|
||||
font-size: @md-input-font-size-base; // Input sizes
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: -1 * @md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding
|
||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
transition: 0.3s ease all;
|
||||
|
||||
.form-group.is-focused & {
|
||||
|
|
@ -213,12 +199,12 @@ label.control-label.floating-label {
|
|||
// sizing
|
||||
.form-group.is-focused &,
|
||||
.form-group:not(.is-empty) & {
|
||||
top: -1 * (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
||||
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
||||
font-size: @md-input-label-font-size-base;
|
||||
}
|
||||
|
||||
.input-size-floating-label(input-sm, @md-input-font-size-small);
|
||||
.input-size-floating-label(input-lg, @md-input-font-size-large);
|
||||
//.input-size-floating-label(input-sm, @md-input-font-size-small);
|
||||
//.input-size-floating-label(input-lg, @md-input-font-size-large);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,14 @@
|
|||
var $formGroup = $input.parent(".form-group");
|
||||
if($formGroup.length === 0){
|
||||
//console.debug("Generating form-group for input", $this);
|
||||
$formGroup = $input.wrap("<div class='form-group'></div>");
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.parent(".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.removeAttr("data-hint");
|
||||
}
|
||||
|
||||
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
|
|
@ -88,7 +95,7 @@
|
|||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
|
||||
$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 `~`,
|
||||
|
|
@ -101,11 +108,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 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>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
|
|
|
|||
85
test.html
Normal file
85
test.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Material Design for Bootstrap</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<!-- Mobile support -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Twitter Bootstrap -->
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<link href="dist/css/roboto.css" rel="stylesheet">
|
||||
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
|
||||
<link href="dist/css/ripples.css" rel="stylesheet">
|
||||
|
||||
<!-- Dropdown.js -->
|
||||
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
|
||||
|
||||
<!-- Page style -->
|
||||
<link href="index.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2>Input - Legacy</h2>
|
||||
<!-- Exercise backwards compatibility without form-group -->
|
||||
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy data-hint attribute on the input">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Twitter Bootstrap -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<script src="dist/js/material.js"></script>
|
||||
<script src="dist/js/ripples.js"></script>
|
||||
<script>
|
||||
$.material.init();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Sliders -->
|
||||
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>-->
|
||||
<!--<script>-->
|
||||
<!--$(function () {-->
|
||||
<!--$.material.init();-->
|
||||
<!--$(".shor").noUiSlider({-->
|
||||
<!--start: 40,-->
|
||||
<!--connect: "lower",-->
|
||||
<!--range: {-->
|
||||
<!--min: 0,-->
|
||||
<!--max: 100-->
|
||||
<!--}-->
|
||||
<!--});-->
|
||||
|
||||
<!--$(".svert").noUiSlider({-->
|
||||
<!--orientation: "vertical",-->
|
||||
<!--start: 40,-->
|
||||
<!--connect: "lower",-->
|
||||
<!--range: {-->
|
||||
<!--min: 0,-->
|
||||
<!--max: 100-->
|
||||
<!--}-->
|
||||
<!--});-->
|
||||
<!--});-->
|
||||
<!--</script>-->
|
||||
|
||||
<!-- Dropdown.js -->
|
||||
<!--<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>-->
|
||||
<!--<script>-->
|
||||
<!--$("#dropdown-menu select").dropdown();-->
|
||||
<!--</script>-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user