From a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 11 Dec 2018 13:33:38 +0100 Subject: Dropdown menu theming --- .../components/dropdowns/dropdown_developers.tsx | 40 ++++++++++++++++------ .../components/dropdowns/dropdown_products.tsx | 16 +++++++-- packages/website/ts/@next/components/header.tsx | 18 +++++++--- packages/website/ts/@next/components/siteWrap.tsx | 10 ++++++ packages/website/ts/@next/components/text.tsx | 6 ++-- .../website/ts/@next/constants/globalStyle.tsx | 2 +- 6 files changed, 73 insertions(+), 19 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index d87540511..8cd2798ce 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -1,11 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; - import {Link as RouterLink} from 'react-router-dom'; +import styled, {withTheme} from 'styled-components'; + import {Link} from 'ts/@next/components/button'; import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout'; import {Heading} from 'ts/@next/components/text'; +import {GlobalStyle} from 'ts/@next/constants/globalStyle'; + +interface Props { + theme: GlobalStyle; +} const introData = [ { @@ -56,11 +61,11 @@ const linksData = [ }, ]; -export const DropdownDevelopers = () => ( +export const DropdownDevelopers = withTheme((props: Props) => ( <>
- + Getting Started @@ -75,7 +80,7 @@ export const DropdownDevelopers = () => ( - + Popular Docs @@ -91,7 +96,7 @@ export const DropdownDevelopers = () => ( - + Useful Links @@ -107,21 +112,36 @@ export const DropdownDevelopers = () => ( - + View All Documentation -); +)); const DropdownWrap = styled.div` - padding: 15px 30px 75px 15px; + padding: 15px 30px 75px 30px; + + a { + color: inherit; + } `; const StyledWrap = styled(Wrap)` - border-top: 1px solid #dadada; padding-top: 20px; margin-top: 30px; + position: relative; + + &:before { + content: ''; + width: 100%; + height: 1px; + background-color: ${props => props.theme.dropdownColor}; + opacity: 0.15; + position: absolute; + top: 0; + left:0; + } `; const StyledLink = styled(Link)` diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx index 0271daf84..6eb321aa6 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; + import {Link} from 'react-router-dom'; import styled from 'styled-components'; import {Heading, Paragraph} from 'ts/@next/components/text'; @@ -26,12 +27,22 @@ export const DropdownProducts = () => ( {_.map(navData, (item, index) => (
  • - + {item.title} {item.description && - + {item.description} } @@ -45,5 +56,6 @@ const List = styled.ul` a { padding: 15px 30px; display: block; + color: inherit; } `; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 10e0ec09e..52207ddce 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -211,8 +211,10 @@ const LinkWrap = styled.div` const DropdownWrap = styled.div` width: ${props => props.width || 280}px; padding: 15px 0; - background-color: #ffffff; - color: #000000; + border: 1px solid transparent; + border-color: ${props => props.theme.dropdownBorderColor}; + background-color: ${props => props.theme.dropdownBg}; + color: ${props => props.theme.dropdownColor}; position: absolute; top: 100%; left: calc(50% - ${props => (props.width || 280) / 2}px); @@ -221,7 +223,7 @@ const DropdownWrap = styled.div` transform: translate3d(0, -10px, 0); transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; - &:after { + &:after, &:before { bottom: 100%; left: 50%; border: solid transparent; @@ -230,11 +232,19 @@ const DropdownWrap = styled.div` width: 0; position: absolute; pointer-events: none; + } + &:after { border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; + border-bottom-color: ${props => props.theme.dropdownBg}; border-width: 10px; margin-left: -10px; } + &:before { + border-color: rgba(255, 0, 0, 0); + border-bottom-color: ${props => props.theme.dropdownBorderColor}; + border-width: 11px; + margin-left: -11px; + } @media (max-width: ${BREAKPOINTS.mobile}) { display: none; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 9b9bdfae6..395df68a9 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -28,16 +28,26 @@ const GLOBAL_THEMES: ThemeInterface = { bgColor: '#000000', textColor: '#FFFFFF', linkColor: colors.brandLight, + dropdownBg: '#111A19', + dropdownButtonBg: '#003831', + dropdownColor: '#FFFFFF', }, light: { bgColor: '#FFFFFF', textColor: '#000000', linkColor: colors.brandDark, + dropdownBg: '#FBFBFB', + dropdownButtonBg: '#F3F6F4', + dropdownColor: '#003831', + dropdownBorderColor: '#E4E4E4', }, gray: { bgColor: '#e0e0e0', textColor: '#000000', linkColor: colors.brandDark, + dropdownBg: '#FFFFFF', + dropdownButtonBg: '#F3F6F4', + dropdownColor: '#003831', }, }; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index bf471db2e..9251389ab 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -11,6 +11,7 @@ interface HeadingProps extends BaseTextInterface { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; isCentered?: boolean; isNoMargin?: boolean; + isMuted?: boolean | number; marginBottom?: string; color?: string; } @@ -24,12 +25,13 @@ interface ParagraphProps extends BaseTextInterface { const StyledHeading = styled.h1` color: ${props => props.color || props.theme.textColor}; font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; - padding: ${props => props.padding && getCSSPadding(props.padding)}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; - margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; text-align: ${props => props.isCentered && 'center'}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; margin-left: ${props => props.isCentered && 'auto'}; margin-right: ${props => props.isCentered && 'auto'}; + margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; + opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; font-weight: 400; `; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 9ec1a5d35..29a8dc49f 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,7 +1,7 @@ import {createGlobalStyle, withTheme} from 'styled-components'; import {cssReset} from 'ts/@next/constants/cssReset'; -interface GlobalStyle { +export interface GlobalStyle { theme: { bgColor: string; textColor: string; -- cgit v1.2.3