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

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

62
packages/design-system/atoms/breakpoints/DebugTool.tsx
View file

@ -4,53 +4,53 @@ import { onDesktop, onTablet } from './Breakpoints';
import { useBreakpointContext } from './Context';
const DebuggerPosition = styled.div`
position: fixed;
top: 0;
left: 0;
font-family: monospace;
& > div {
display: flex;
}
position: fixed;
top: 0;
left: 0;
font-family: monospace;
& > div {
display: flex;
}
`;
const OnSmallScreen = styled.div`
display: block;
display: block;
`;
const OnTablet = styled.div`
display: none;
${onTablet(`display: block;`)}
display: none;
${onTablet(`display: block;`)}
`;
const OnDesktop = styled.div`
display: none;
${onDesktop`display: block;`}
display: none;
${onDesktop`display: block;`}
`;
const CSSBreakpointDebugger = () => (
<div>
<OnSmallScreen style={{ backgroundColor: 'red' }}>S</OnSmallScreen>
<OnTablet style={{ backgroundColor: 'green' }}>T</OnTablet>
<OnDesktop style={{ backgroundColor: 'blue' }}>D</OnDesktop>
</div>
<div>
<OnSmallScreen style={{ backgroundColor: 'red' }}>S</OnSmallScreen>
<OnTablet style={{ backgroundColor: 'green' }}>T</OnTablet>
<OnDesktop style={{ backgroundColor: 'blue' }}>D</OnDesktop>
</div>
);
const JSBreakpointDebugger = () => {
const {
screenSize: { onTablet, onDesktop, onSmallScreen },
} = useBreakpointContext();
const {
screenSize: { onTablet, onDesktop, onSmallScreen },
} = useBreakpointContext();
return (
<div>
{onSmallScreen && <div style={{ backgroundColor: 'red' }}>S</div>}
{onTablet && <div style={{ backgroundColor: 'green' }}>T</div>}
{onDesktop && <div style={{ backgroundColor: 'blue' }}>D</div>}
</div>
);
return (
<div>
{onSmallScreen && <div style={{ backgroundColor: 'red' }}>S</div>}
{onTablet && <div style={{ backgroundColor: 'green' }}>T</div>}
{onDesktop && <div style={{ backgroundColor: 'blue' }}>D</div>}
</div>
);
};
export const BreakpointDebugTool = () => (
<DebuggerPosition>
<JSBreakpointDebugger />
<CSSBreakpointDebugger />
</DebuggerPosition>
<DebuggerPosition>
<JSBreakpointDebugger />
<CSSBreakpointDebugger />
</DebuggerPosition>
);