aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 23:47:12 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 23:47:12 +0800
commitbf56a2c7c49ec2817adedea359b7750a8ced15d7 (patch)
tree1165b93d5afd1beb2bd9af3c521cd7614dfb5277 /packages/website
parent52b9f4ef3bb621bc6cd2d670f15b87ec2e18ccbf (diff)
downloaddexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar.gz
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar.bz2
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar.lz
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar.xz
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.tar.zst
dexon-sol-tools-bf56a2c7c49ec2817adedea359b7750a8ced15d7.zip
Header mobile styling
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/hamburger.tsx2
-rw-r--r--packages/website/ts/@next/components/header.tsx16
-rw-r--r--packages/website/ts/@next/components/logo.tsx2
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 {