roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-17 10:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix a load of linting issues

Browse source
This commit is contained in:
41666 2019-04-03 02:10:43 -05:00
parent 928c9cf07c
commit 057e9f96b4
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
31 changed files with 375 additions and 411 deletions
Download patch file Download diff file Expand all files Collapse all files

79
packages/roleypoly-ui/components/role/role.styled.js
View file

@ -4,10 +4,8 @@ import MediaQuery from '../../kit/media'
export default styled.div`
border: solid 1px var(--role-color-outline);
border-radius: 1.2em;
box-sizing: border-box;
cursor: pointer;
position: relative;
display: flex;
overflow: hidden;
@ -15,24 +13,18 @@ export default styled.div`
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: column;
font-size: 1.2em;
line-height: 20px;
margin: 0.3em;
padding: 4px 0.5em;
min-height: 32px;
max-width: 90vw;
transition: box-shadow 0.3s ease-in-out;
text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
transform: rotateZ(0);
${(props: any) => (props.active) ? `
box-shadow: inset 0 0 0 3em var(--role-color-outline-alt);
` : `
@ -42,39 +34,44 @@ export default styled.div`
/* padding-top: 4px; */
}
&[disabled] {
border-color: hsl(0, 0%, 40%);
color: hsla(0, 0%, 40%, 0.7);
cursor: default;
box-shadow: none;
${(props: any) => (props.active)
? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
background-color: hsl(0,0%,40%);`
: ``}
&::after {
border-color: hsl(0, 0%, 40%);
}
&:hover::after {
border-color: hsl(0, 0%, 40%);
transform: none;
box-shadow: none;
}
}
&[disabled]:hover {
overflow: visible;
}
&:hover::after {
transform: translateY(-1px) rotateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0.75);
border-color: var(--role-color-active);
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
}
&:active::after {
transform: none;
}
&::after {
content: '';
display: none;
box-sizing: border-box;
position: absolute;
left: 4px;
bottom: 2px;
top: 4px;
width: 22px;
height: 22px;
border: 1px solid var(--role-color-base);
border-radius: 100%;
clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
transform: rotateZ(0);
${(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;
@ -84,6 +81,17 @@ export default styled.div`
`}
}
&:hover::after {
transform: translateY(-1px) rotateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
border-color: var(--role-color-active);
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
}
&:active::after {
transform: none;
}
${(props: any) => MediaQuery({
md: `
font-size: 1em;
@ -100,25 +108,4 @@ export default styled.div`
}
`
})}
&[disabled] {
border-color: hsl(0,0%,40%);
color: hsla(0,0%,40%,0.7);
cursor: default;
box-shadow: none;
${(props: any) => (props.active) ? `
box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
background-color: hsl(0,0%,40%);`
: ``};
&::after {
border-color: hsl(0,0%,40%);
}
&:hover::after {
border-color: hsl(0,0%,40%);
transform: none;
box-shadow: none;
}
}
`