@material/line-ripple
Version:
The Material Components for the web line-ripple component
45 lines (42 loc) • 1.29 kB
CSS
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
*/
.mdc-line-ripple::before, .mdc-line-ripple::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-style: solid;
content: "";
}
.mdc-line-ripple::before {
border-bottom-width: 1px;
}
.mdc-line-ripple::before {
z-index: 1;
}
.mdc-line-ripple::after {
-webkit-transform: scaleX(0);
transform: scaleX(0);
border-bottom-width: 2px;
opacity: 0;
z-index: 2;
}
.mdc-line-ripple::after {
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mdc-line-ripple--active::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
.mdc-line-ripple--deactivating::after {
opacity: 0;
}
/*# sourceMappingURL=mdc.line-ripple.css.map*/