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

feat: document menu available in sidebar (#986)

Browse Source 
* feat: document menu available in sidebar

* fix: more accessible blue

* feat: accessible blue
feat: clearer new doc button
closes #983

* lint
This commit is contained in:
Tom Moor
2019-07-13 10:15:38 -07:00
committed by GitHub
parent 28954a19af
commit a515631e21
18 changed files with 176 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/components/Button.js
View File

@ -13,11 +13,10 @@ const RealButton = styled.button`
color: ${props => props.theme.buttonText};
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
border-radius: 4px;
font-size: 12px;
font-size: 14px;
font-weight: 500;
height: ${props => (props.small ? 24 : 36)}px;
height: 32px;
text-decoration: none;
text-transform: uppercase;
flex-shrink: 0;
outline: none;
cursor: pointer;
@ -39,7 +38,7 @@ const RealButton = styled.button`
&:disabled {
cursor: default;
pointer-events: none;
color: ${props => props.theme.textTertiary};
color: ${props => props.theme.white50};
}
${props =>
@ -58,6 +57,10 @@ const RealButton = styled.button`
background: ${darken(0.05, props.theme.buttonNeutralBackground)};
border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
}
&:disabled {
color: ${props.theme.textTertiary};
}
`} ${props =>
props.danger &&
`
@ -80,15 +83,13 @@ const Label = styled.span`
const Inner = styled.span`
display: flex;
padding: 0 ${props => (props.small ? 8 : 12)}px;
padding-right: ${props => (props.disclosure ? 2 : props.small ? 8 : 12)}px;
line-height: ${props => (props.small ? 24 : 28)}px;
padding: 0 8px;
padding-right: ${props => (props.disclosure ? 2 : 8)}px;
line-height: ${props => (props.hasIcon ? 24 : 32)}px;
justify-content: center;
align-items: center;
${props =>
props.hasIcon &&
(props.small ? 'padding-left: 6px;' : 'padding-left: 8px;')};
${props => props.hasIcon && 'padding-left: 4px;'};
`;
export type Props = {
@ -97,7 +98,6 @@ export type Props = {
icon?: React.Node,
className?: string,
children?: React.Node,
small?: boolean,
disclosure?: boolean,
};
@ -107,15 +107,14 @@ export default function Button({
children,
value,
disclosure,
small,
...rest
}: Props) {
const hasText = children !== undefined || value !== undefined;
const hasIcon = icon !== undefined;
return (
<RealButton small={small} type={type} {...rest}>
<Inner hasIcon={hasIcon} small={small} disclosure={disclosure}>
<RealButton type={type} {...rest}>
<Inner hasIcon={hasIcon} disclosure={disclosure}>
{hasIcon && icon}
{hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
{disclosure && <ExpandedIcon />}