aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:18:36 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:18:36 +0800
commit3fb74be4ba4bbb085b4fa70e119cf507a0c503f9 (patch)
tree384a294f522563082a3b1861742a4e5d30805207
parent86acca5e1c37bf24bef393700fbf0909b58b9df3 (diff)
downloaddexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar.gz
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar.bz2
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar.lz
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar.xz
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.tar.zst
dexon-sol-tools-3fb74be4ba4bbb085b4fa70e119cf507a0c503f9.zip
WIP Header styling, hidden on mobile
-rw-r--r--packages/website/ts/@next/components/header.tsx34
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx3
2 files changed, 22 insertions, 15 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 165cba562..10e0ec09e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,7 +11,7 @@ import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_devel
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
import { Hamburger } from 'ts/@next/components/hamburger';
-import { Section, Wrap } from 'ts/@next/components/layout';
+import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
import { Paragraph } from 'ts/@next/components/text';
@@ -130,14 +130,14 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
}
const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
- @media (max-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
min-height: ${props => props.isOpen ? '385px' : '70px'};
- overflow: ${props => !props.isOpen && 'hidden'};
+ overflow: hidden;
position: relative;
transition: min-height 0.25s ease-in-out;
}
- @media (min-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
background-color: ${props => props.theme.bgColor};
}
`;
@@ -158,7 +158,7 @@ const StyledButtonWrap = styled.div`
align-items: center;
justify-content: space-between;
- @media (max-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
background-color: #022924;
display: flex;
flex-wrap: wrap;
@@ -178,7 +178,7 @@ const StyledButtonWrap = styled.div`
const MobileProductLinksWrap = styled(StyledButtonWrap)`
display: none;
- @media (max-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
display: block;
background-color: transparent;
flex-direction: column;
@@ -197,12 +197,14 @@ const LinkWrap = styled.div`
display: block;
}
- &:hover > div {
- display: block;
- visibility: visible;
- opacity: 1;
- transform: translate3d(0, 0, 0);
- transition: opacity 0.35s, transform 0.35s, visibility 0s;
+ @media (min-width: ${BREAKPOINTS.mobile}) {
+ &:hover > div {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition: opacity 0.35s, transform 0.35s, visibility 0s;
+ }
}
`;
@@ -233,10 +235,14 @@ const DropdownWrap = styled.div`
border-width: 10px;
margin-left: -10px;
}
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ display: none;
+ }
`;
const Nav = styled.div`
- @media (max-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
background-color: ${colors.brandDark};
position: absolute;
top: 0;
@@ -249,7 +255,7 @@ const Nav = styled.div`
const TradeButton = styled(Button)`
padding: 14px 22px;
- @media (max-width: 768px) {
+ @media (max-width: ${BREAKPOINTS.mobile}) {
display: none;
}
`;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 9b38a6c1b..9ec1a5d35 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -106,8 +106,9 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
line-height: 1.444444444em; // 26px
}
- :root a {
+ a, button {
text-decoration: none;
+ font-family: inherit;
}
svg + p,