diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 19:26:51 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 19:26:51 +0800 |
| commit | 96ebad7568a7e1642d4aa8eac73eea9035cf353a (patch) | |
| tree | c85c2279888c5a49ea3f6720f0be735a49293341 /packages/website/ts/@next | |
| parent | 3fb74be4ba4bbb085b4fa70e119cf507a0c503f9 (diff) | |
| download | dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.gz dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.bz2 dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.lz dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.xz dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.zst dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.zip | |
Fix layout, Adds button hovers
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 9 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 1 |
2 files changed, 8 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 06a9f8c7a..074371453 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -25,10 +25,10 @@ interface ButtonInterface { export const Button = styled.button<ButtonInterface>` appearance: none; - border: 1px solid transparent; + border: ${props => !props.isNoBorder && `1px solid transparent`}; display: ${props => props.isInline && 'inline-block'}; background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}; - border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; + border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; text-align: center; @@ -43,6 +43,11 @@ export const Button = styled.button<ButtonInterface>` path { fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; } + + &:hover { + background-color: ${props => !props.isTransparent && '#04BEA8'}; + border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; + } `; export const Link = (props: ButtonInterface) => { diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 42468a27f..0559d6e3d 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -110,6 +110,7 @@ export const Wrap = styled(WrapBase)` @media (min-width: ${BREAKPOINTS.mobile}) { display: flex; justify-content: space-between; + flex-wrap: wrap; flex-direction: ${props => props.isReversed && 'row-reverse'}; } `; |