1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00

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;
`;
const DeleteButtonContainer = styled.div`
position: absolute;
right: 0;
bottom: 0;
`;
const StyledIconButton = styled(IconButton)`
position: absolute;
right: 0;
bottom: 0;
border: none;
&:hover {
background-color: ${props => props.theme.white};
}
&:hover,
&:active,
&:active:hover,
&:active:focus {

View File

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

View File

@ -4,9 +4,9 @@
<title>icon: delete</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="home" transform="translate(-467.000000, -421.000000)" fill="#646464">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<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>
</g>
</g>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 737 B

After

Width:  |  Height:  |  Size: 711 B