mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

update wave style (#15978)

Browse Source
This commit is contained in:
zombieJ 2019-04-09 19:32:58 +08:00 committed by GitHub
parent bef491ecc9
commit d1e58d058f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/wave.tsx
View File

@ -60,7 +60,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
}
extraNode.style.borderColor = waveColor;
styleForPesudo.innerHTML = `[ant-click-animating-without-extra-node="true"]:after { border-color: ${waveColor}; }`;
styleForPesudo.innerHTML = `html body { --antd-wave-shadow-color: ${waveColor}; }`;
if (!document.body.contains(styleForPesudo)) {
document.body.appendChild(styleForPesudo);
}

22
components/style/core/motion/other.less
View File

@ -9,16 +9,21 @@
position: relative;
}
html {
--antd-wave-shadow-color: @primary-color;
}
[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
border: 0 solid @primary-color;
border-radius: inherit;
box-shadow: 0 0 0 0 @primary-color;
box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
opacity: 0.2;
animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
animation-fill-mode: forwards;
@ -28,11 +33,8 @@
@keyframes waveEffect {
100% {
top: -@wave-animation-width;
right: -@wave-animation-width;
bottom: -@wave-animation-width;
left: -@wave-animation-width;
border-width: @wave-animation-width;
box-shadow: 0 0 0 @primary-color;
box-shadow: 0 0 0 @wave-animation-width var(--antd-wave-shadow-color);
}
}