#842 new underline animation as bg image.

This commit is contained in:
Kevin Ross 2016-01-26 14:37:28 -06:00
parent 75c9bc6a54
commit 86f2a21154
7 changed files with 159 additions and 59 deletions

View File

@ -97,7 +97,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<td>
<code>.mdb-form-group</code>
</td>
<td class="text-nowrap">
<td>
Any group of form controls (e.g. combination of label/input).
</td>
<td>
@ -111,7 +111,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<td>
<code>.mdb-form-group-sm</code>
</td>
<td class="text-nowrap">
<td>
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the smaller variation.{% endmarkdown %}
</td>
<td>
@ -122,7 +122,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<td>
<code>.mdb-form-group-lg</code>
</td>
<td class="text-nowrap">
<td>
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the larger variation.{% endmarkdown %}
</td>
<td>
@ -133,7 +133,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<td>
<code>.mdb-help</code>
</td>
<td class="text-nowrap">
<td>
Any help text
</td>
<td>

View File

@ -7,5 +7,86 @@ group: material-design
## Example
{% example html id=drawer-1 %}
<div class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</div>
<h2>normal</h2>
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<h2>sm</h2>
<div class="mdb-form-group-sm form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="mdb-form-group-sm form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="mdb-form-group-sm form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<h2>lg</h2>
<div class="mdb-form-group-lg form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</div>
<div class="mdb-form-group-lg form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</div>
<div class="mdb-form-group-lg form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<div class="form-group">
<label for="exampleInputEmail4" class="mdb-label-floating">Email address disabled</label>
<input type="email" class="form-control" id="exampleInputEmail4" disabled>
</div>
<fieldset class="form-group" disabled>
<label for="exampleInputEmail5" class="mdb-label-floating">Email address fieldset disabled</label>
<input type="email" class="form-control" id="exampleInputEmail5">
</fieldset>
{% endexample %}

View File

@ -8,9 +8,6 @@ const BaseFormControl = (($) => {
* ------------------------------------------------------------------------
*/
const Default = {
decorator: {
template: `<span class='mdb-form-control-decorator'></span>`
},
requiredClasses: ['form-control']
}
@ -28,9 +25,6 @@ const BaseFormControl = (($) => {
if (this.isEmpty()) {
this.removeIsFilled()
}
// Add marker div the end of the form-group
this.$element.after(this.config.decorator.template)
}
}

View File

@ -23,48 +23,27 @@ form {
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control {
// The border bottom should be static in all states, the decorator will be animated over this.
&,
&:focus,
.mdb-form-group.is-focused & {
border: 0;
border-bottom: $input-btn-border-width solid $input-border-color;
}
background-repeat: $mdb-form-control-bg-repeat-y;
background-position: $mdb-form-control-bg-position;
background-size: $mdb-form-control-bg-size;
border: 0;
transition: background 0s ease-out;
// on disabled, kill the bg animation image and fall back to a simple dotted bottom border
@include mdb-disabled() {
background-image: none;
border-bottom: $input-btn-border-width dotted $input-border-color;
}
}
// Focus underline animation =================================
.mdb-form-control-decorator {
position: relative;
top: (-1 * $input-btn-border-width); // move the top up enough to overlay the border from the input
display: block;
&::before,
&::after {
position: absolute;
width: 0;
height: $input-btn-border-width + 1;
content: "";
transition: 0.3s ease all;
// focused state - it transitions the width of each (before and after) to 50% creating the center out effect
.form-control:focus ~ &,
.mdb-form-group.is-focused .form-control ~ & {
width: 50%;
}
}
&::before {
left: 50%;
}
&::after {
right: 50%;
// The border bottom should be static in all states, the decorator will be animated over this.
&:focus,
.mdb-form-group.is-focused & {
background-size: $mdb-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s;
}
}
// End: Focus underline animation =================================
// Help blocks (not in v4)
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?

View File

@ -155,11 +155,6 @@
// .mdb-form-group {
// margin: 0;
// padding: 0;
//
// .mdb-form-control-decorator:before,
// &.is-focused .mdb-form-control-decorator:after {
// background-color: inherit;
// }
// }
//
// .mdb-form-group .form-control,

View File

@ -64,6 +64,12 @@ $icon-color: rgba($black, 0.5) !default;
$mdb-mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-size-ratio: 75 / 100 !default;
//$mdb-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon.
$mdb-form-control-bg-repeat-y: no-repeat !default;
$mdb-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
$mdb-form-control-bg-size: 0 100%, 100% 100% !default;
$mdb-form-control-bg-size-active: 100% 100%, 100% 100% !default;
// expandable
$input-text-button-size: 32px !default;

View File

@ -72,7 +72,35 @@
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
.form-control {
border-color: $input-border-color;
// underline animation color on focus
$underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
// bg image is always there, we just need to reveal it
&,
.is-focused & {
background-image: $underline-background-image;
}
// allow underline focus image and validation images to coexist
&.form-control-success {
&,
.is-focused & {
background-image: $underline-background-image, url($form-icon-success);
}
}
&.form-control-warning {
&,
.is-focused & {
background-image: $underline-background-image, url($form-icon-warning);
}
}
&.form-control-danger {
&,
.is-focused & {
background-image: $underline-background-image, url($form-icon-danger);
}
}
}
.is-focused, // may or may not be a form-group or mdb-form-group
@ -101,15 +129,6 @@
border-color: $border-color;
}
// underline animation color on focus
.mdb-form-control-decorator {
&::before,
&::after {
//@include gradient-vertical($label-color-focus, $input-border-color); // seems to look better solid. other comments?
background-color: $label-color-focus;
}
}
.mdb-help {
color: $mdb-label-color-inner-focus;
}
@ -125,6 +144,8 @@
}
@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
$variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
$help-font-size: ($mdb-help-size-ratio * $font-size);
@ -216,4 +237,28 @@
margin-top: 0; // allow the input margin to set-off the top of the help-block
font-size: $help-font-size;
}
// validation icon placement
.form-control {
&.form-control-success,
&.form-control-warning,
&.form-control-danger {
$icon-bg-size: ($variant-input-height * .65) ($variant-input-height * .65);
//$icon-bg-size: ($variant-input-height) ($variant-input-height);
background-size: $mdb-form-control-bg-size, $icon-bg-size;
&,
&:focus,
.mdb-form-group.is-focused & {
padding-right: ($input-padding-x * 3);
background-repeat: $mdb-form-control-bg-repeat-y, no-repeat;
background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25);
}
&:focus,
.mdb-form-group.is-focused & {
background-size: $mdb-form-control-bg-size-active, $icon-bg-size;
}
}
}
}