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

[ui] add media query template literals, convert everything to the superior.

Browse source
This commit is contained in:
41666 2019-04-03 13:59:13 -05:00
parent c40c04e55e
commit f2bb6a7b18
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
10 changed files with 90 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import styled from 'styled-components'
import MediaQuery from '../../kit/media'
import { md } from '../../kit/media'
export default styled.div`
border: solid 1px var(--role-color-outline);
@ -92,20 +92,22 @@ export default styled.div`
transform: none;
}
${(props: any) => MediaQuery({
md: `
${md`
font-size: 1em;
text-shadow: none;
padding-left: 32px;
${(props.active) ? `box-shadow: none;` : ''}
&::after {
${(props.active) ? `background-color: var(--role-color-base);` : ''}
display: block;
}
`}
${(props: any) => props.active
? md`
box-shadow: none;
&:hover::after {
${(props.active) ? `background-color: var(--role-color-active);` : ''}
background-color: var(--role-color-active);
}
`
})}
&::after {
background-color: var(--role-color-base);
}`
: ''}
`