Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: remove translate on hover for gradient button

Browse Source
This commit is contained in:
Jordan Knott 2021-10-24 10:18:06 -05:00
parent 2b3084ea52
commit 25df251cc5
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/shared/components/Button/index.tsx
View File

@ -6,11 +6,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: ${props => props.justifyTextContent}; justify-content: ${(props) => props.justifyTextContent};
transition: all 0.2s ease; transition: all 0.2s ease;
font-size: ${props => props.fontSize}; font-size: ${(props) => props.fontSize};
color: ${props => props.theme.colors.text.secondary}; color: ${(props) => props.theme.colors.text.secondary};
${props => ${(props) =>
props.hasIcon && props.hasIcon &&
css` css`
padding-left: 4px; padding-left: 4px;
@ -23,11 +23,11 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
border-radius: ${props => props.theme.borderRadius.alternate}; border-radius: ${(props) => props.theme.borderRadius.alternate};
display: flex; display: flex;
align-items: center; align-items: center;
${props => ${(props) =>
props.disabled && props.disabled &&
css` css`
opacity: 0.5; opacity: 0.5;
@ -37,8 +37,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
`; `;
const Filled = styled(Base)<{ hoverVariant: HoverVariant }>` const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
background: ${props => props.theme.colors[props.color]}; background: ${(props) => props.theme.colors[props.color]};
${props => ${(props) =>
props.hoverVariant === 'boxShadow' && props.hoverVariant === 'boxShadow' &&
css` css`
&:hover { &:hover {
@ -48,9 +48,9 @@ const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
`; `;
const Outline = styled(Base)<{ invert: boolean }>` const Outline = styled(Base)<{ invert: boolean }>`
border: 1px solid ${props => props.theme.colors[props.color]}; border: 1px solid ${(props) => props.theme.colors[props.color]};
background: transparent; background: transparent;
${props => ${(props) =>
props.invert props.invert
? css` ? css`
background: ${props.theme.colors[props.color]}); background: ${props.theme.colors[props.color]});
@ -74,7 +74,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
const Flat = styled(Base)` const Flat = styled(Base)`
background: transparent; background: transparent;
&:hover { &:hover {
background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)}; background: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
} }
`; `;
@ -87,7 +87,7 @@ const LineX = styled.span<{ color: string }>`
bottom: -2px; bottom: -2px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)}; background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
`; `;
const LineDown = styled(Base)` const LineDown = styled(Base)`
@ -96,7 +96,7 @@ const LineDown = styled(Base)`
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)}; border-color: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
&:hover ${LineX} { &:hover ${LineX} {
width: 100%; width: 100%;
@ -109,17 +109,14 @@ const LineDown = styled(Base)`
const Gradient = styled(Base)` const Gradient = styled(Base)`
background: linear-gradient( background: linear-gradient(
30deg, 30deg,
${props => mixin.rgba(props.theme.colors[props.color], 1)}, ${(props) => mixin.rgba(props.theme.colors[props.color], 1)},
${props => mixin.rgba(props.theme.colors[props.color], 0.5)} ${(props) => mixin.rgba(props.theme.colors[props.color], 0.5)}
); );
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
&:hover {
transform: translateY(-2px);
}
`; `;
const Relief = styled(Base)` const Relief = styled(Base)`
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)}; background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
-webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);