kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-26 13:25:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(button): add document about light types

Browse Source 
fix(button): fix animation shadow too large
This commit is contained in:
unix
2020-05-15 20:18:14 +08:00
parent b7f37249e4
commit 31fb3bf326
4 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/button/button.drip.tsx
View File

@@ -54,10 +54,10 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
svg {
position: absolute;
animation: 400ms ease-in expand;
animation: 350ms ease-in expand;
animation-fill-mode: forwards;
width: 20px;
height: 20px;
width: 1rem;
height: 1rem;
}
@keyframes expand {
@@ -72,7 +72,7 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
opacity: 0.5;
}
100% {
transform: scale(25);
transform: scale(28);
opacity: 0;
}
}

2
components/button/styles.ts
View File

@@ -287,5 +287,5 @@ export const getButtonDripColor = (palette: ZeitUIThemesPalette, props: ButtonPr
const { type } = props
const isLightHover = type.endsWith('light')
const hoverColors = getButtonHoverColors(palette, props)
return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : palette.accents_2
return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65)
}