mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 19:44:07 +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 @@
//}
}
// BOTTOM BARS =================================
// Focus underline animation =================================
.mdb-form-control-decorator {
position: relative;
top: (-1 * $input-border-width); // move the top up enough to overlay the border from the input
display: block;
//width: 300px;
}
.mdb-form-control-decorator::before,
.mdb-form-control-decorator::after {
&::before,
&::after {
position: absolute;
//bottom: 1px;
width: 0;
height: $input-border-width;
content: "";
@include gradient-vertical($brand-primary, $mdb-input-underline-color);
transition: 0.3s ease all;
}
.mdb-form-control-decorator::before {
left: 50%;
}
.mdb-form-control-decorator::after {
right: 50%;
}
// active state
//input:focus ~ .mdb-form-control-decorator:before,
//input:focus ~ .mdb-form-control-decorator:after {
.form-control:focus,
.mdb-form-group.is-focused .form-control {
~ .mdb-form-control-decorator::before,
~ .mdb-form-control-decorator::after {
// 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%;
}
}
// BOTTOM BARS =================================
&::before {
left: 50%;
}
&::after {
right: 50%;
}
}
// Focus underline animation =================================
// -----
// Labels with mdb-form-group signalled state