feat(ui-toolkit, cp-frontend): Add button states to bin

This commit is contained in:
JUDIT GRESKOVITS 2017-07-21 11:02:28 +01:00 committed by Sérgio Ramos
parent ae5eaba2c1
commit f5cf049fe0
3 changed files with 32 additions and 28 deletions

View File

@ -87,22 +87,13 @@ const StyledCreateLink = styled(StyledLink)`
display: flex; display: flex;
`; `;
const DeleteButtonContainer = styled.div`
position: absolute;
right: 0;
bottom: 0;
`;
const StyledIconButton = styled(IconButton)` const StyledIconButton = styled(IconButton)`
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
border: none; border: none;
&:hover { &:hover,
background-color: ${props => props.theme.white};
}
&:active, &:active,
&:active:hover, &:active:hover,
&:active:focus { &:active:focus {

View File

@ -24,6 +24,10 @@ const style = css`
min-width: 0; min-width: 0;
cursor: pointer; cursor: pointer;
> svg {
fill: ${props => props.theme.secondary};
}
&:focus { &:focus {
outline: 0; outline: 0;
background-color: ${props => props.theme.white}; background-color: ${props => props.theme.white};
@ -35,6 +39,11 @@ const style = css`
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
} }
&:focus,
&:hover > svg {
fill: ${props => props.theme.secondaryHover};
}
&:active, &:active,
&:active:hover, &:active:hover,
&:active:focus { &:active:focus {
@ -43,6 +52,12 @@ const style = css`
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
} }
&:active,
&:active:hover,
&:active:focus > svg {
fill: ${props => props.theme.secondaryActive};
}
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
@ -50,22 +65,26 @@ const style = css`
background-color: ${props => props.theme.disabled}; background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
&:focus { > svg {
background-color: ${props => props.theme.disabled}; fill: ${props => props.theme.grey};
border-color: ${props => props.theme.grey};
}
&:hover {
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.disabled};
} }
&:focus,
&:hover,
&:active, &:active,
&:active:hover, &:active:hover,
&:active:focus { &:active:focus {
background-color: ${props => props.theme.disabled}; background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.disabled}; border-color: ${props => props.theme.disabled};
} }
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus > svg {
fill: ${props => props.theme.grey};
}
} }
`; `;
@ -83,10 +102,6 @@ const StyledLink = styled(Link)`
${style} ${style}
`; `;
const StyledDiv = styled.div`
height: ${remcalc(16)};
`;
/** /**
* @example ./usage.md * @example ./usage.md
*/ */
@ -103,9 +118,7 @@ const IconButton = props => {
return ( return (
<View {...props}> <View {...props}>
<StyledDiv>
{children} {children}
</StyledDiv>
</View> </View>
); );
}; };

View File

@ -4,8 +4,8 @@
<title>icon: delete</title> <title>icon: delete</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="home" transform="translate(-467.000000, -421.000000)" fill="#646464"> <g id="home" transform="translate(-467.000000, -421.000000)">
<path d="M471,421 L471,422 L467,422 L467,424 L479,424 L479,422 L475.001,422 L475.001,421 L471,421 Z M468,438 L478,438 L478,425 L468,425 L468,438 Z" id="icon:-delete"></path> <path d="M471,421 L471,422 L467,422 L467,424 L479,424 L479,422 L475.001,422 L475.001,421 L471,421 Z M468,438 L478,438 L478,425 L468,425 L468,438 Z" id="icon:-delete"></path>
</g> </g>
</g> </g>

Before

Width:  |  Height:  |  Size: 737 B

After

Width:  |  Height:  |  Size: 711 B