123456789101112131415161718192021222324252627282930 |
- import { genComponentStyleHook } from '../../theme/internal';
- const genWaveStyle = token => {
- const {
- componentCls,
- colorPrimary
- } = token;
- return {
- [componentCls]: {
- position: 'absolute',
- background: 'transparent',
- pointerEvents: 'none',
- boxSizing: 'border-box',
- color: `var(--wave-color, ${colorPrimary})`,
- boxShadow: `0 0 0 0 currentcolor`,
- opacity: 0.2,
- // =================== Motion ===================
- '&.wave-motion-appear': {
- transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
- '&-active': {
- boxShadow: `0 0 0 6px currentcolor`,
- opacity: 0
- },
- '&.wave-quick': {
- transition: [`box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`, `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`].join(',')
- }
- }
- }
- };
- };
- export default genComponentStyleHook('Wave', genWaveStyle);
|