coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Subtle styling adjustments to dropdown menus

Browse Source
This commit is contained in:
Tom Moor
2020-06-22 21:18:43 -07:00
parent 8db0260a1a
commit bf5f83e97d
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/DropdownMenu/DropdownMenu.js
View File

@ -5,6 +5,7 @@ import { observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { PortalWithState } from "react-portal"; import { PortalWithState } from "react-portal";
import { MoreIcon } from "outline-icons"; import { MoreIcon } from "outline-icons";
import { rgba } from "polished";
import styled from "styled-components"; import styled from "styled-components";
import Flex from "shared/components/Flex"; import Flex from "shared/components/Flex";
import { fadeAndScaleIn } from "shared/styles/animations"; import { fadeAndScaleIn } from "shared/styles/animations";
@ -252,11 +253,10 @@ const Position = styled.div`
const Menu = styled.div` const Menu = styled.div`
animation: ${fadeAndScaleIn} 200ms ease; animation: ${fadeAndScaleIn} 200ms ease;
transform-origin: ${props => (props.left !== undefined ? "25%" : "75%")} 0; transform-origin: ${props => (props.left !== undefined ? "25%" : "75%")} 0;
background: ${props => props.theme.menuBackground}; backdrop-filter: blur(10px);
${props => background: ${props => rgba(props.theme.menuBackground, 0.8)};
props.theme.menuBorder border: ${props =>
? `border: 1px solid ${props.theme.menuBorder}` props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
: ""};
border-radius: 2px; border-radius: 2px;
padding: 0.5em 0; padding: 0.5em 0;
min-width: 180px; min-width: 180px;

6
app/components/DropdownMenu/DropdownMenuItem.js
View File

@ -75,6 +75,12 @@ const MenuItem = styled.a`
fill: ${props.theme.white}; fill: ${props.theme.white};
} }
} }
&:focus {
color: ${props.theme.white};
background: ${props.theme.primary};
outline: none;
}
`}; `};
`; `;