mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-03-10 23:05:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

input and padding-y above the line appears to be working well

Browse Source
This commit is contained in:
Kevin Ross 2015-12-14 11:04:02 -06:00
parent f0b7422efc
commit ff0bac3adc
3 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/material-design/test.md
View File

@ -7,12 +7,17 @@ group: material-design
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-static">Input Label text</label> <label for="exampleInputEmail1" class="mdb-label-static">Input label static</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Input text</label> <label for="exampleInputEmail1" class="mdb-label-floating">Input label floating</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-placeholder">Input label placeholder</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>

13
scss/_forms.scss
View File

@ -97,8 +97,8 @@
// //
// 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
label[class^='mdb-label'], [class^='mdb-label'],
label[class*=' mdb-label'] { [class*=' mdb-label'] {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
transition: 0.3s ease all; transition: 0.3s ease all;
@ -107,10 +107,11 @@
&.mdb-label-floating { &.mdb-label-floating {
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
} }
// hide label-placeholders when the field is filled }
.is-filled &.mdb-label-placeholder {
display: none; // hide label-placeholders when the field is filled
} &.is-filled .mdb-label-placeholder {
display: none;
} }
// default floating size/location with an mdb-form-group // default floating size/location with an mdb-form-group

32
scss/mixins/_forms.scss
View File

@ -1,7 +1,7 @@
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { @mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
label[class^='mdb-label'], [class^='mdb-label'],
label[class*=' mdb-label'] { [class*=' mdb-label'] {
color: $label-color; color: $label-color;
} }
@ -17,11 +17,15 @@
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color); @include form-control-validation($label-color);
label[class^='mdb-label'], [class^='mdb-label'],
label[class*=' mdb-label'] { [class*=' mdb-label'] {
color: $label-color-focus; color: $label-color-focus;
} }
.mdb-label-placeholder {
color: $label-color; // keep the placeholder color
}
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match
.form-control { .form-control {
border-color: $border-color; border-color: $border-color;
@ -58,12 +62,12 @@
@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) { @mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) {
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
$label-as-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim); // -1 *
$label-top: $label-as-placeholder-top - ($font-size + $variant-padding-y);
$help-font-size: ($mdb-help-size-ratio * $font-size); $help-font-size: ($mdb-help-size-ratio * $font-size);
$label-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim); // -1 *
$label-static-top: $label-placeholder-top - $static-font-size - $variant-padding-y;
@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
//Label height: 72dp //Label height: 72dp
@ -103,17 +107,17 @@
} }
// smaller focused or static size // smaller focused or static size
//label[class^='mdb-label'], //[class^='mdb-label'],
//label[class*=' mdb-label'] { //[class*=' mdb-label'] {
// //font-size: $static-font-size; // //font-size: $static-font-size;
// //margin: 16px 0 0 0; // std and lg // //margin: 16px 0 0 0; // std and lg
//} //}
// floating/placeholder default // floating/placeholder default (no focus)
.mdb-label-floating, .mdb-label-floating,
.mdb-label-placeholder { .mdb-label-placeholder {
//@debug "top: #{$label-as-placeholder-top}"; //@debug "top: #{$label-as-placeholder-top}";
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
//font-size: $placeholder-font-size; //font-size: $placeholder-font-size;
} }
@ -123,13 +127,13 @@
&.is-filled, &.is-filled,
.is-filled { .is-filled {
.mdb-label-floating { .mdb-label-floating {
@include mdb-label-static($label-top, $static-font-size); @include mdb-label-static($label-static-top, $static-font-size);
} }
} }
// static // static
.mdb-label-static { .mdb-label-static {
@include mdb-label-static($label-top, $static-font-size); @include mdb-label-static($label-static-top, $static-font-size);
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
//input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary //input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary