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

fix background-color hack being... too hacky.

Browse source
This commit is contained in:
41666 2019-03-21 11:39:39 -05:00
parent b2139c6a24
commit d8679dcc4e
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -80,7 +80,7 @@ export default styled.div`
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s; 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; border-left-width: 21px;
` : ` ` : `
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out; transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 0.3s ease-in-out;
`} `}
} }
@ -94,6 +94,10 @@ export default styled.div`
${(props.active) ? `background-color: var(--role-color-base);` : ''} ${(props.active) ? `background-color: var(--role-color-base);` : ''}
display: block; display: block;
} }
&:hover::after {
${(props.active) ? `background-color: var(--role-color-active);` : ''}
}
` `
})} })}
@ -102,7 +106,10 @@ export default styled.div`
color: hsla(0,0%,40%,0.7); color: hsla(0,0%,40%,0.7);
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
${(props: any) => (props.active) ? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);` : ``}; ${(props: any) => (props.active) ? `
box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
background-color: hsl(0,0%,40%);`
: ``};
&::after { &::after {
border-color: hsl(0,0%,40%); border-color: hsl(0,0%,40%);