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

sync

Browse source
This commit is contained in:
41666 2021-06-05 16:14:05 -05:00
parent 471ed9cf93
commit be16da1686
9 changed files with 57 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/design-system/atoms/toggle/Toggle.styled.tsx
View file

@ -19,7 +19,7 @@ export const ToggleState = styled.div`
export const ToggleSwitch = styled.div<{ state: boolean }>`
display: inline-block;
background-color: ${(props) => (props.state ? palette.green200 : palette.taupe100)};
background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
height: 1.3em;
width: 2.6em;
border-radius: 1.3em;
@ -28,6 +28,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
top: 0.23em;
transition: background-color ${transitions.in2in}s ease-in-out;
cursor: pointer;
margin-right: 0.5em;
${ToggleState} {
${(props) =>

2
packages/design-system/atoms/toggle/Toggle.tsx
View file

@ -12,9 +12,9 @@ export const Toggle = (props: ToggleProps) => (
props.onChange?.(!props.state);
}}
>
{props.children}{' '}
<ToggleSwitch state={props.state}>
<ToggleState />
</ToggleSwitch>
{props.children}
</div>
);