filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-26 18:44:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: allow 3d card to take arbitrary children

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2021-02-23 14:09:26 +00:00
parent 52cc5d813f
commit 489166cd79
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
2 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/system/components/Card3D.js
View File

@ -54,21 +54,6 @@ const STYLES_SHINE = css`
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%);
`;
const STYLES_RENDERED_LAYER = css`
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: cover;
transition: all 0.1s ease-out;
overflow: hidden;
border-radius: 8px;
`;
const Card3D = ({ children }) => {
const wrapper = React.useRef();
@ -149,25 +134,16 @@ const Card3D = ({ children }) => {
};
});
const cardChildren = Array.isArray(children)
? children.map((child) => React.cloneElement(child, { className: "rendered-layer" }))
: React.cloneElement(children, { className: "rendered-layer" });
return (
<div css={STYLES_WRAPPER} ref={wrapper} style={{ transform: `perspective(${width * 3}px)` }}>
<div css={STYLES_CONTAINER} className="container">
<div className="shadow" css={STYLES_SHADOW} />
<div className="layer" css={STYLES_LAYER}>
<div
className="rendered-layer"
css={STYLES_RENDERED_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa-bg.jpg')",
}}
></div>
<div
className="rendered-layer"
css={STYLES_RENDERED_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa.png')",
}}
></div>
{cardChildren}
</div>
<div className="shine" css={STYLES_SHINE} />
</div>

30
pages/_/system/card-3d.js
View File

@ -8,6 +8,21 @@ import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const STYLES_RENDERED_LAYER = css`
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: cover;
transition: all 0.1s ease-out;
overflow: hidden;
border-radius: 8px;
`;
export default class SystemPageCard3D extends React.Component {
render() {
return (
@ -65,7 +80,20 @@ export default class SystemPageCard3D extends React.Component {
<System.H2>Output</System.H2>
<hr />
<br />
<System.Card3D />
<System.Card3D>
<div
css={STYLES_RENDERED_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa-bg.jpg')",
}}
/>
<div
css={STYLES_RENDERED_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa.png')",
}}
/>
</System.Card3D>
</SystemPage>
);
}