mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed input-groups and variations

Browse Source
This commit is contained in:
Kevin Ross 2015-11-11 11:53:16 -06:00
parent dffa3bcddc
commit 679c68a107
4 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
bootstrap-elements.html
View File

@ -2017,14 +2017,23 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">Input addons</label> <label class="control-label" for="addon1">Input addons</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text" class="form-control"> <input type="text" id="addon1" class="form-control">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button>
</span> </span>
</div>
</div>
<div class="form-group">
<label class="control-label floating-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">
<button class="btn btn-primary" type="button">Button</button>
</span>
</div> </div>
</div> </div>
</form> </form>

46
less/_inputs.less
View File

@ -221,6 +221,14 @@ select.form-control {
} }
} }
.input-group-button-variation(@vertical-padding) {
.input-group-btn {
.btn {
margin: 0 0 @vertical-padding 0;
}
}
}
.input-group { .input-group {
.form-group { .form-group {
.form-control { .form-control {
@ -228,28 +236,42 @@ select.form-control {
} }
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
// sm margin
&.form-group-sm {
.input-group-button-variation(@md-input-padding-small-vertical);
}
// lg margin
&.form-group-lg {
.input-group-button-variation(@md-input-padding-large-vertical);
}
} }
// default margin
.input-group-button-variation(@md-input-padding-base-vertical);
.input-group-btn {
padding: 0 12px; // match addon spacing
}
.input-group-addon { .input-group-addon {
border: 0; border: 0;
background: transparent; background: transparent;
} }
.input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
} }
// Input files (kinda hack) // Input files (kinda hack)
.form-group input[type=file] { .form-group input[type=file] {
opacity: 0; opacity: 0;
position: absolute; //position: absolute;
top: 0; //top: 0;
right: 0; //right: 0;
bottom: 0; //bottom: 0;
left: 0; //left: 0;
width: 100%; //width: 100%;
height: 100%; //height: 100%;
z-index: 100; //z-index: 100;
} }
// Ugly override of Bootstrap border // Ugly override of Bootstrap border

19
scripts/material.js
View File

@ -72,12 +72,11 @@
.each( function() { .each( function() {
var $input = $(this); var $input = $(this);
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper) // Requires form-group standard markup (will add it if necessary)
var $formGroup = $input.parent(".form-group"); var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
if($formGroup.length === 0){ if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this);
$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) $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 // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
@ -115,6 +114,7 @@
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector // See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
var $label = $formGroup.find("label.floating-label"); var $label = $formGroup.find("label.floating-label");
if($label.length > 0){ if($label.length > 0){
console.debug("FIXME moving label"); // FIXME not sure we want to do this for input-groups
$label.detach(); $label.detach();
$input.after($label); $input.after($label);
} }
@ -141,12 +141,12 @@
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); }) .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) { .on("keydown paste", ".form-control", function(e) {
if(_isChar(e)) { if(_isChar(e)) {
$(this).parent(".form-group").removeClass("is-empty"); $(this).closest(".form-group").removeClass("is-empty");
} }
}) })
.on("keyup change", ".form-control", function() { .on("keyup change", ".form-control", function() {
var $input = $(this); 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()); var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
if ($input.val() === "" && isValid) { if ($input.val() === "" && isValid) {
@ -170,10 +170,10 @@
} }
}) })
.on("focus", ".form-control, .form-group.fileinput", function() { .on("focus", ".form-control, .form-group.fileinput", function() {
$(this).parent().addClass("is-focused"); // add class to form-group $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
}) })
.on("blur", ".form-control, .form-group.fileinput", function() { .on("blur", ".form-control, .form-group.fileinput", function() {
$(this).parent().removeClass("is-focused"); // remove class from form-group $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
}) })
.on("change", ".form-group.fileinput [type=file]", function() { .on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this); var $this = $(this);
@ -182,7 +182,7 @@
value += file.name + ", "; value += file.name + ", ";
}); });
value = value.substring(0, value.length - 2); value = value.substring(0, value.length - 2);
var $formGroup = $this.parent(".form-group"); var $formGroup = $this.closest(".form-group");
if (value) { if (value) {
$formGroup.removeClass("is-empty"); $formGroup.removeClass("is-empty");
} else { } else {
@ -215,7 +215,6 @@
var focused; var focused;
$(document) $(document)
.on("focus", "input", function() { .on("focus", "input", function() {
console.log($(this).parent());
var $inputs = $(this).parents("form").find("input").not("[type=file]"); var $inputs = $(this).parents("form").find("input").not("[type=file]");
focused = setInterval(function() { focused = setInterval(function() {
$inputs.each(function() { $inputs.each(function() {

70
test.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Material Design for Bootstrap</title> <title>TEST Material Design for Bootstrap</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -31,32 +31,58 @@
<div class="container-fluid"> <div class="container-fluid">
<h2>Input - static labels <div class="well bs-component">
<small>form-group sizing</small> <form class="form-horizontal">
</h2> <fieldset>
<legend>Legend</legend>
<div class="form-group form-group-sm"> <!--<div class="form-group">-->
<label for="i1" class="control-label">Static label</label> <!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
<p class="help-block hint">This is a hint</p> <!--<div class="col-lg-10">-->
</div> <!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
<!--<input type="file" id="inputFile" multiple>-->
<!--</div>-->
<!--</div>-->
<div class="form-group">
<label for="i2" class="control-label">Static label</label>
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
<p class="help-block hint">This is a hint</p> <div class="form-group">
</div> <label class="control-label floating-label" for="addon2">Input addons with floating label</label>
<div class="input-group">
<div class="form-group form-group-lg"> <span class="input-group-addon">$</span>
<label for="i3" class="control-label">Static label</label> <input type="text" id="addon2" class="form-control">
<input type="email" class="form-control" id="i3" placeholder="Placeholder text"> <span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button>
</span>
</div>
</div>
<p class="help-block hint">This is a hint</p> <!--<h2>File inputs</h2>-->
</div>
<!--<div class="form-group">-->
<!--<label class="control-label floating-label" for="faddon1">Input group with file</label>-->
<!--<div class="input-group">-->
<!--<span class="input-group-addon"><i class="mdi-editor-attach-file"></i></span>-->
<!--<input type="text" class="form-control" id="faddon1">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label for="f1" class="control-label floating-label">Browse...(floating label)</label>-->
<!--<input type="file" id="f1" class="form-control">-->
<!--<p class="help-block">Example block-level help text here.</p>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label for="f2" class="form-control">Browse...(static label)</label>-->
<!--<input type="file" id="f2" class="form-control">-->
<!--<p class="help-block">Example block-level help text here.</p>-->
<!--</div>-->
</fieldset>
</form>
</div>
</div> </div>