drip-table
Version:
A tiny and powerful enterprise-class solution for building tables.
62 lines (52 loc) • 1.57 kB
text/less
/**
* This file is part of the drip-table project.
* @link : https://drip-table.jd.com/
* @author : Emil Zhai (root@derzh.com)
* @modifier : Emil Zhai (root@derzh.com)
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
*/
@prefixCls: jfe-drip-table-motion;
@keyframes loading-circle {
100% {
transform: rotate(360deg);
}
}
@click-animating-true: ~"[@{prefixCls}-click-animating='true']";
@click-animating-with-extra-node-true: ~"[@{prefixCls}-click-animating-without-extra-node='true']";
@{click-animating-true},
@{click-animating-with-extra-node-true} {
position: relative;
}
html {
--drip-wave-shadow-color: @drip-table-primary-color;
--scroll-bar: 0;
}
@click-animating-with-extra-node-true-after: ~"@{click-animating-with-extra-node-true}::after";
@{click-animating-with-extra-node-true-after},
.@{prefixCls}-click-animating-node {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
border-radius: inherit;
box-shadow: 0 0 0 0 @drip-table-primary-color;
box-shadow: 0 0 0 0 var(--drip-wave-shadow-color);
opacity: .2;
animation: jfe-drip-table-motion-fade-effect 2s @ease-out-circ, jfe-drip-table-motion-wave-effect .4s @ease-out-circ;
animation-fill-mode: forwards;
content: "";
pointer-events: none;
}
@keyframes jfe-drip-table-motion-wave-effect {
100% {
box-shadow: 0 0 0 @drip-table-primary-color;
box-shadow: 0 0 0 @wave-animation-width var(--drip-wave-shadow-color);
}
}
@keyframes jfe-drip-table-motion-fade-effect {
100% {
opacity: 0;
}
}