mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-18 12:40:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactored and simplified the markup for the focus underline animation

Browse Source
This commit is contained in:
Kevin Ross 2015-12-08 18:11:42 -06:00
parent f50a8866b1
commit 7d29f0b696
1 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
scss/_forms.scss
View File

@ -183,42 +183,34 @@
//} //}
} }
// Focus underline animation =================================
// BOTTOM BARS =================================
.mdb-form-control-decorator { .mdb-form-control-decorator {
position: relative; position: relative;
top: (-1 * $input-border-width); // move the top up enough to overlay the border from the input top: (-1 * $input-border-width); // move the top up enough to overlay the border from the input
display: block; display: block;
//width: 300px; &::before,
} &::after {
.mdb-form-control-decorator::before,
.mdb-form-control-decorator::after {
position: absolute; position: absolute;
//bottom: 1px;
width: 0; width: 0;
height: $input-border-width; height: $input-border-width;
content: ""; content: "";
@include gradient-vertical($brand-primary, $mdb-input-underline-color); @include gradient-vertical($brand-primary, $mdb-input-underline-color);
transition: 0.3s ease all; transition: 0.3s ease all;
}
.mdb-form-control-decorator::before {
left: 50%;
}
.mdb-form-control-decorator::after {
right: 50%;
}
// active state // focused state - it transitions the width of each (before and after) to 50% creating the center out effect
//input:focus ~ .mdb-form-control-decorator:before, .form-control:focus ~ &,
//input:focus ~ .mdb-form-control-decorator:after { .mdb-form-group.is-focused .form-control ~ & {
.form-control:focus,
.mdb-form-group.is-focused .form-control {
~ .mdb-form-control-decorator::before,
~ .mdb-form-control-decorator::after {
width: 50%; width: 50%;
} }
} }
// BOTTOM BARS ================================= &::before {
left: 50%;
}
&::after {
right: 50%;
}
}
// Focus underline animation =================================
// ----- // -----
// Labels with mdb-form-group signalled state // Labels with mdb-form-group signalled state