mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +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 9bc257ae8a
commit 4996435adb
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 class="form-group">
<label class="control-label">Input addons</label>
<label class="control-label" for="addon1">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button>
</span>
<input type="text" id="addon1" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button>
</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>
</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 {
.form-group {
.form-control {
@ -228,28 +236,42 @@ select.form-control {
}
margin-right: 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 {
border: 0;
background: transparent;
}
.input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
}
// Input files (kinda hack)
.form-group input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
//position: absolute;
//top: 0;
//right: 0;
//bottom: 0;
//left: 0;
//width: 100%;
//height: 100%;
//z-index: 100;
}
// Ugly override of Bootstrap border

19
scripts/material.js
View File

@ -72,12 +72,11 @@
.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
@ -115,6 +114,7 @@
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
var $label = $formGroup.find("label.floating-label");
if($label.length > 0){
console.debug("FIXME moving label"); // FIXME not sure we want to do this for input-groups
$label.detach();
$input.after($label);
}
@ -141,12 +141,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) {
@ -170,10 +170,10 @@
}
})
.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() {
$(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() {
var $this = $(this);
@ -182,7 +182,7 @@
value += file.name + ", ";
});
value = value.substring(0, value.length - 2);
var $formGroup = $this.parent(".form-group");
var $formGroup = $this.closest(".form-group");
if (value) {
$formGroup.removeClass("is-empty");
} else {
@ -215,7 +215,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() {

70
test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>Material Design for Bootstrap</title>
<title>TEST Material Design for Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -31,32 +31,58 @@
<div class="container-fluid">
<h2>Input - static labels
<small>form-group sizing</small>
</h2>
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group form-group-sm">
<label for="i1" class="control-label">Static label</label>
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
<!--<div class="form-group">-->
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
<p class="help-block hint">This is a hint</p>
</div>
<!--<div class="col-lg-10">-->
<!--<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>
<div class="form-group form-group-lg">
<label for="i3" class="control-label">Static label</label>
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
<div class="form-group">
<label class="control-label floating-label" for="addon2">Input addons with floating label</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<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>
<p class="help-block hint">This is a hint</p>
</div>
<!--<h2>File inputs</h2>-->
<!--<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>