roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 20:19:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve role style consistency across browsers

Browse source
This commit is contained in:
41666 2019-03-21 07:58:09 -05:00
parent 8dd759d78c
commit dd07e6bac4
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
ui/components/role/role.styled.js
View file

@ -17,7 +17,7 @@ export default styled.div`
flex-direction: column; flex-direction: column;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.3; line-height: 20px;
margin: 0.3em; margin: 0.3em;
padding: 4px 0.5em; padding: 4px 0.5em;
@ -33,10 +33,13 @@ export default styled.div`
white-space: nowrap; white-space: nowrap;
transform: rotateZ(0); transform: rotateZ(0);
${(props: any) => (props.active) ? `box-shadow: inset 0 0 0 3em ${props.colors.outlineAlt};` : ''} ${(props: any) => (props.active) ? `
box-shadow: inset 0 0 0 3em ${props.colors.outlineAlt};
` : `
`}
.wf-active & { .wf-active & {
padding-top: 2px; /* padding-top: 4px; */
} }
&[disabled]:hover { &[disabled]:hover {
@ -46,7 +49,8 @@ export default styled.div`
&:hover::after { &:hover::after {
transform: translateY(-1px) rotateZ(0); transform: translateY(-1px) rotateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0.75); box-shadow: 0 0 1px rgba(0,0,0,0.75);
border-color: ${(props: any) => props.colors.active} border-color: ${(props: any) => props.colors.active};
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
} }
&:active::after { &:active::after {
@ -69,12 +73,15 @@ export default styled.div`
border: 1px solid ${(props: any) => props.colors.base}; border: 1px solid ${(props: any) => props.colors.base};
border-radius: 100%; border-radius: 100%;
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out; clip-path: border-box circle(50.2% at 50% 50%); /* firefox fix */
clip-path: border-box circle(50% at 50% 50%); /* firefox fix */
transform: rotateZ(0); transform: rotateZ(0);
${(props: any) => (props.active) ? 'border-left-width: 21px;' : ''} ${(props: any) => (props.active) ? `
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s;
border-left-width: 21px;
` : `
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out;
`}
} }
${(props: any) => MediaQuery({ ${(props: any) => MediaQuery({
@ -82,8 +89,9 @@ export default styled.div`
font-size: 1em; font-size: 1em;
text-shadow: none; text-shadow: none;
padding-left: 32px; padding-left: 32px;
${(props.active) ? 'box-shadow: none;' : ''} ${(props.active) ? `box-shadow: none;` : ''}
&::after { &::after {
${(props.active) ? `background-color: ${props.colors.base};` : ''}
display: block; display: block;
} }
` `