mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 19:14:09 +03:00
#842 new underline animation as bg image.
This commit is contained in:
Kevin Ross
parent
75c9bc6a54
commit
86f2a21154
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user