diff options
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r-- | packages/website/ts/@next/components/hamburger.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 16 | ||||
-rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 2 |
3 files changed, 10 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 0eac4a53f..37aabcd10 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -27,7 +27,7 @@ const StyledHamburger = styled.button<Props>` outline: none; user-select: none; - @media (min-width: 768px) { + @media (min-width: 800px) { display: none; } diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 6e9616e21..7660c0d40 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -157,14 +157,14 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { export const Header = withTheme(HeaderBase); const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; overflow: hidden; position: relative; transition: min-height 0.25s ease-in-out; } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: ${props => props.theme.bgColor}; } `; @@ -184,7 +184,7 @@ const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; - @media (max-width: 768px) { + @media (max-width: 800px) { padding-top: 0; display: flex; padding-bottom: 0; @@ -196,7 +196,7 @@ const StyledButtonWrap = styled.div` align-items: center; justify-content: space-between; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: #022924; display: flex; flex-wrap: wrap; @@ -216,7 +216,7 @@ const StyledButtonWrap = styled.div` const MobileProductLinksWrap = styled(StyledButtonWrap)` display: none; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { display: block; background-color: transparent; flex-direction: column; @@ -235,7 +235,7 @@ const LinkWrap = styled.div` display: block; } - @media (min-width: ${BREAKPOINTS.mobile}) { + @media (min-width: 800px) { &:hover > div { display: block; visibility: visible; @@ -291,7 +291,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>` `; const Nav = styled.div` - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: ${colors.brandDark}; position: absolute; top: 0; @@ -304,7 +304,7 @@ const Nav = styled.div` const TradeButton = styled(Button)` padding: 14px 22px; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 928px) { display: none; } `; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index a2af8b982..20cab0828 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -16,7 +16,7 @@ const StyledLogo = styled.div` text-align: left; position: relative; - @media (max-width: 768px) { + @media (max-width: 800px) { z-index: 2; svg { |