mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
Merge branch 'form-group-label-style' into standardized-form-markup
This commit is contained in:
Kevin Ross
commit
c4700eb561
|
|
@ -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">
|
||||
|
|
|
|||
48634
dist/css/material-fullpalette.css
vendored
Normal file
48634
dist/css/material-fullpalette.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
dist/css/material-fullpalette.css.map
vendored
Normal file
1
dist/css/material-fullpalette.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
Normal file
2
dist/css/material-fullpalette.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/material-fullpalette.min.css.map
vendored
Normal file
1
dist/css/material-fullpalette.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
8734
dist/css/material.css
vendored
Normal file
8734
dist/css/material.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
dist/css/material.css.map
vendored
Normal file
1
dist/css/material.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
Normal file
2
dist/css/material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/material.min.css.map
vendored
Normal file
1
dist/css/material.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
62
dist/css/roboto.css
vendored
Normal file
62
dist/css/roboto.css
vendored
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
|
||||
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
|
||||
|
||||
Then, run this script to get the list.
|
||||
|
||||
|
||||
(function() {
|
||||
var colors = {}, main = {};
|
||||
$(".color-group").each(function() {
|
||||
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
|
||||
colors[color] = {};
|
||||
|
||||
$(this).find(".color").not(".main-color").each(function() {
|
||||
var shade = $(this).find(".shade").text().trim(),
|
||||
hex = $(this).find(".hex").text().trim();
|
||||
|
||||
colors[color][shade] = hex;
|
||||
});
|
||||
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
|
||||
|
||||
});
|
||||
var LESS = "";
|
||||
$.each(colors, function(name, shades) {
|
||||
LESS += "\n\n";
|
||||
$.each(shades, function(shade, hex) {
|
||||
LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
|
||||
});
|
||||
if (main[name]) {
|
||||
LESS += "@" + name + ": " + main[name] + ";\n";
|
||||
}
|
||||
});
|
||||
console.log(LESS);
|
||||
})();
|
||||
|
||||
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'RobotoDraft';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url('../fonts/RobotoDraftRegular.woff2') format('woff2'), url('../fonts/RobotoDraftRegular.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoDraft';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url('../fonts/RobotoDraftMedium.woff2') format('woff2'), url('../fonts/RobotoDraftMedium.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoDraft';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url('../fonts/RobotoDraftBold.woff2') format('woff2'), url('../fonts/RobotoDraftBold.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoDraft';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url('../fonts/RobotoDraftItalic.woff2') format('woff2'), url('../fonts/RobotoDraftItalic.woff') format('woff');
|
||||
}
|
||||
/*# sourceMappingURL=roboto.css.map */
|
||||
1
dist/css/roboto.css.map
vendored
Normal file
1
dist/css/roboto.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/css/roboto.min.css
vendored
Normal file
2
dist/css/roboto.min.css
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@font-face{font-family:RobotoDraft;src:local('RobotoDraft'),local('RobotoDraft-Regular'),local('Roboto-Regular'),url(../fonts/RobotoDraftRegular.woff2) format('woff2'),url(../fonts/RobotoDraftRegular.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:500;src:local('RobotoDraft Medium'),local('RobotoDraft-Medium'),local('Roboto-Medium'),url(../fonts/RobotoDraftMedium.woff2) format('woff2'),url(../fonts/RobotoDraftMedium.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:700;src:local('RobotoDraft Bold'),local('RobotoDraft-Bold'),local('Roboto-Bold'),url(../fonts/RobotoDraftBold.woff2) format('woff2'),url(../fonts/RobotoDraftBold.woff) format('woff')}@font-face{font-family:RobotoDraft;font-style:italic;src:local('RobotoDraft Italic'),local('RobotoDraft-Italic'),local('Roboto-Italic'),url(../fonts/RobotoDraftItalic.woff2) format('woff2'),url(../fonts/RobotoDraftItalic.woff) format('woff')}
|
||||
/*# sourceMappingURL=roboto.min.css.map */
|
||||
1
dist/css/roboto.min.css.map
vendored
Normal file
1
dist/css/roboto.min.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAGA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@import \"_colors.less\";\n@import \"_variables.less\";\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 400;\n //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n src: local('RobotoDraft'),\n local('RobotoDraft-Regular'),\n local('Roboto-Regular'),\n url('@{material-font-path}/RobotoDraftRegular.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftRegular.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 500;\n //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n src: local('RobotoDraft Medium'),\n local('RobotoDraft-Medium'),\n local('Roboto-Medium'),\n url('@{material-font-path}/RobotoDraftMedium.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftMedium.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 700;\n //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n src: local('RobotoDraft Bold'),\n local('RobotoDraft-Bold'),\n local('Roboto-Bold'),\n url('@{material-font-path}/RobotoDraftBold.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftBold.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: italic;\n font-weight: 400;\n //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n src: local('RobotoDraft Italic'),\n local('RobotoDraft-Italic'),\n local('Roboto-Italic'),\n url('@{material-font-path}/RobotoDraftItalic.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftItalic.woff') format('woff');\n}\n"]}
|
||||
299
dist/js/material.js
vendored
Normal file
299
dist/js/material.js
vendored
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
/* globals jQuery */
|
||||
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$.material = {
|
||||
"options": {
|
||||
// These options set what will be started by $.material.init()
|
||||
"input": true,
|
||||
"ripples": true,
|
||||
"checkbox": true,
|
||||
"togglebutton": true,
|
||||
"radio": true,
|
||||
"arrive": true,
|
||||
"autofill": false,
|
||||
|
||||
"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(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=checkbox-material><span class=check></span></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=toggle></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $input = $(this);
|
||||
|
||||
// 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){
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$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'>" + $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'> </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 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");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$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() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
|
||||
// Add at the end of the form-group
|
||||
$formGroup.append("<span class='material-input'></span>");
|
||||
|
||||
// Support for file input
|
||||
if ($formGroup.find("input[type=file]").length > 0) {
|
||||
$formGroup.addClass("is-fileinput");
|
||||
//var $nextInput = $formGroup.next().detach();
|
||||
//$input.after($nextInput);
|
||||
}
|
||||
});
|
||||
},
|
||||
"attachInputEventHandlers": function() {
|
||||
$(document)
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
||||
if ($input.val() === "" && isValid) {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
else {
|
||||
$formGroup.removeClass("is-empty");
|
||||
}
|
||||
|
||||
// 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");
|
||||
}
|
||||
else{
|
||||
$formGroup.addClass("has-error");
|
||||
}
|
||||
})
|
||||
.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.is-fileinput", function() {
|
||||
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
})
|
||||
// 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);
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function() {
|
||||
// This part of code will detect autofill when the page is loading (username and password inputs for example)
|
||||
var loading = setInterval(function() {
|
||||
$("input[type!=checkbox]").each(function() {
|
||||
var $this = $(this);
|
||||
if ($this.val() && $this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function() {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
},
|
||||
"attachAutofillEventHandlers": function() {
|
||||
// Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
|
||||
var focused;
|
||||
$(document)
|
||||
.on("focus", "input", function() {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
var $this = $(this);
|
||||
if ($this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", ".form-group input", function() {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function() {
|
||||
var $document = $(document);
|
||||
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
this.ripples();
|
||||
}
|
||||
if (this.options.input) {
|
||||
this.input();
|
||||
this.attachInputEventHandlers();
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
this.checkbox();
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
this.togglebutton();
|
||||
}
|
||||
if (this.options.radio) {
|
||||
this.radio();
|
||||
}
|
||||
if (this.options.autofill) {
|
||||
this.autofill();
|
||||
this.attachAutofillEventHandlers();
|
||||
}
|
||||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$document.arrive(this.options.withRipples, function() {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$document.arrive(this.options.inputElements, function() {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$document.arrive(this.options.checkboxElements, function() {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$document.arrive(this.options.radioElements, function() {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$document.arrive(this.options.togglebuttonElements, function() {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
2
dist/js/material.min.js
vendored
Normal file
2
dist/js/material.min.js
vendored
Normal file
|
|
@ -0,0 +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.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+"'"),c.addClass("label-floating"),b.after("<label "+g+"class='control-label'>"+e+"</label>")}(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
|
||||
1
dist/js/material.min.js.map
vendored
Normal file
1
dist/js/material.min.js.map
vendored
Normal file
|
|
@ -0,0 +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","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","val","append","find","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"}
|
||||
117
index.html
117
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">
|
||||
|
||||
<!-- legacy markup -->
|
||||
<textarea class="form-control floating-label" placeholder="legacy floating label as placeholder"></textarea>
|
||||
</div>
|
||||
|
||||
<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