mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

standardized on form-group-sm/lg instead of it AND input-sm/lg. Any input-sm/lg is now converted to form-group-* equivalent. Much simpler css and less variants to maintain.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-10 14:45:08 -06:00
parent 593968cf2c
commit c104125ff5
3 changed files with 12 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -415,21 +415,6 @@
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p> <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div> </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>-->
<h2>Input - Legacy</h2> <h2>Input - Legacy</h2>
<!-- Exercise backwards compatibility without form-group --> <!-- 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 <code>data-hint</code> attribute on the input"> <input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">

18
less/_inputs.less
View File

@ -165,21 +165,6 @@ select.form-control {
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // 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;
// }
//}
// Do not nest label.floating-label inside .form-group - it messes with ~ selector
label.control-label.floating-label { label.control-label.floating-label {
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical; @label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
@ -202,9 +187,6 @@ label.control-label.floating-label {
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 !!! 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; 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-group { .input-group {

12
scripts/material.js
View File

@ -86,6 +86,18 @@
$input.removeAttr("data-hint"); $input.removeAttr("data-hint");
} }
// 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 floating label if using old shorthand <input class="floating-label" placeholder="foo"> // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
if ($input.hasClass("floating-label")) { if ($input.hasClass("floating-label")) {
var placeholder = $input.attr("placeholder"); var placeholder = $input.attr("placeholder");