diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 20:33:38 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 20:33:51 +0800 |
| commit | a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 (patch) | |
| tree | 7290cd83b61ba5edfca5beacae09d15a8e350dc8 /packages/website/ts/@next/components/header.tsx | |
| parent | e001988dbe0046acd6adf0d9b1f7311e9611edf9 (diff) | |
| download | dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.gz dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.bz2 dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.lz dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.xz dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.zst dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.zip | |
Dropdown menu theming
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 18 |
1 files changed, 14 insertions, 4 deletions
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; |