mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-22 21:53:10 +02:00
Code Issues Releases Wiki Activity

Remove tachyons

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-27 12:31:18 +07:00
parent d3a4fdffee
commit 835c3af8ff
94 changed files with 3113 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/placeholders/Block.tsx
View File

@@ -10,13 +10,34 @@ interface BlockProps {
const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
return (
<div className={`flex flex-wrap w-100 justify-${justify}`}>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: justify,
width: '100%',
}}
>
{
Array(numberOfBlocks).fill(0).map((_, i) => {
const s = random(1, 5);
return (
<div key={i} className={`mr2 mb2 w-${s * 10}`}>
<div className="w-100 bg-black-30 br-pill" style={{ height: `${blockHeight}px` }} />
<div
key={i}
style={{
marginBottom: '8px',
marginRight: '8px',
width: `${s * 10}%`,
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: `${blockHeight}px`,
width: '100%',
}}
/>
</div>
);
})

79
client/placeholders/BrowserFrame.tsx
View File

@@ -12,41 +12,100 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const flip = () => setContentActive((isActive) => !isActive);
return (
<div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
<div className="br-100 mr1 w1 h1 bg-red" />
<div className="br-100 mr1 w1 h1 bg-gold" />
<div className="br-100 mr1 w1 h1 bg-red" />
<div className="ml-auto">
<button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.05)',
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
padding: '8px 16px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFB700',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div style={{ marginLeft: 'auto' }}>
<button
style={{
backgroundColor: '#00449E',
borderColor: 'transparent',
borderRadius: '4px',
color: '#FFF',
cursor: 'pointer',
padding: '4px 8px',
}}
onClick={flip}
>
{isContentActive ? 'Source' : 'Demo'}
</button>
</div>
</div>
<div
className="relative"
style={{
height: '512px',
position: 'relative',
transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d',
transition: 'transform 1s',
}}
>
<div
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 1 : 0,
overflow: 'scroll',
position: 'absolute',
top: 0,
width: '100%',
}}
>
{content}
</div>
<div
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 0 : 1,
position: 'absolute',
top: 0,
transform: 'rotateY(180deg)',
width: '100%',
}}
>
<SampleCode lang="html" code={source} />

7
client/placeholders/Line.tsx
View File

@@ -3,8 +3,11 @@ import React from 'react';
const Line: React.FC<{}> = () => {
return (
<div
className="w-100 bg-black-30"
style={{ height: '1px' }}
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
width: '100%',
}}
/>
);
};

9
client/placeholders/Square.tsx
View File

@@ -6,7 +6,14 @@ interface SquareProps {
const Square: React.FC<SquareProps> = ({ size = 8 }) => {
return (
<div className="w-100 h-100 bg-black-30 br2" />
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
width: '100%',
}}
/>
);
};

7
client/placeholders/VerticalLine.tsx
View File

@@ -3,8 +3,11 @@ import React from 'react';
const VerticalLine: React.FC<{}> = () => {
return (
<div
className="h-100 bg-black-30"
style={{ width: '1px' }}
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
width: '1px',
}}
/>
);
};