Adds boolean props for lock, hide, aspect lock

This commit is contained in:
Steve Ruiz 2021-05-29 11:12:28 +01:00
parent b369aef7fc
commit 3329c16e57
29 changed files with 601 additions and 366 deletions

View file

@ -1,32 +1,60 @@
import styled from "styles"
import styled from 'styles'
export const IconButton = styled("button", {
height: "32px",
width: "32px",
backgroundColor: "$panel",
borderRadius: "4px",
padding: "0",
margin: "0",
display: "flex",
alignItems: "center",
justifyContent: "center",
outline: "none",
border: "none",
pointerEvents: "all",
cursor: "pointer",
export const IconButton = styled('button', {
height: '32px',
width: '32px',
backgroundColor: '$panel',
borderRadius: '4px',
padding: '0',
margin: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
outline: 'none',
border: 'none',
pointerEvents: 'all',
cursor: 'pointer',
"&:hover:not(:disabled)": {
backgroundColor: "$hover",
'&:hover:not(:disabled)': {
backgroundColor: '$hover',
},
"&:disabled": {
opacity: "0.5",
'&:disabled': {
opacity: '0.5',
},
svg: {
height: "16px",
width: "16px",
strokeWidth: "2px",
stroke: "$text",
'& > svg': {
height: '16px',
width: '16px',
// strokeWidth: '2px',
// stroke: '$text',
},
variants: {
size: {
medium: {
height: 44,
width: 44,
'& svg': {
height: 16,
width: 16,
strokeWidth: 0,
},
},
large: {
height: 44,
width: 44,
'& svg': {
height: 24,
width: 24,
strokeWidth: 0,
},
},
},
isActive: {
true: {
color: '$selected',
},
},
},
})