diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2019-01-02 22:13:14 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-02 22:13:14 +0800 |
commit | 1ddf1087dd327b2ef35165518ee91eb457b84174 (patch) | |
tree | 619d5b8afd97945eb7917cb71b74ed1c721a77d3 /packages/website/ts/components/hamburger.tsx | |
parent | dbbd0c5c9233965713a3ee30a1a0c5eb06448212 (diff) | |
parent | dc6d6024dc7e72d2634c6bbd88886af6cc0ef6fc (diff) | |
download | dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.gz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.bz2 dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.lz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.xz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.zst dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.zip |
Merge pull request #1470 from 0xProject/feature/website/0x-org-cleanup
[website] Remove @next dir, remove unused files.
Diffstat (limited to 'packages/website/ts/components/hamburger.tsx')
-rw-r--r-- | packages/website/ts/components/hamburger.tsx | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx new file mode 100644 index 000000000..435d206cd --- /dev/null +++ b/packages/website/ts/components/hamburger.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + isOpen: boolean; + onClick?: () => void; +} + +export const Hamburger: React.FunctionComponent<Props> = (props: Props) => { + return ( + <StyledHamburger isOpen={props.isOpen} onClick={props.onClick}> + <span /> + <span /> + <span /> + </StyledHamburger> + ); +}; + +const StyledHamburger = + styled.button < + Props > + ` + background: none; + border: 0; + width: 22px; + height: 16px; + position: relative; + z-index: 25; + padding: 0; + outline: none; + user-select: none; + + @media (min-width: 800px) { + display: none; + } + + span { + display: block; + background-color: ${props => props.theme.textColor}; + width: 100%; + height: 2px; + margin-bottom: 5px; + transform-origin: 4px 0px; + transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + opacity 0.55s ease; + + &:first-child { + //transform-origin: 0% 0%; + } + + &:last-child { + //transform-origin: 0% 100%; + } + + ${props => + props.isOpen && + ` + opacity: 1; + transform: rotate(45deg) translate(0, 1px); + + &:nth-child(2) { + opacity: 0; + transform: rotate(0deg) scale(0.2, 0.2); + } + + &:last-child { + transform: rotate(-45deg) translate(1px, -4px); + } + `} + } +`; |