mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

Add shadow to cover and browser frame

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-17 20:54:54 +07:00
parent a43645eaf4
commit dfa1a02514
3 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/layouts/stepper-input/Cover.jsx
View File

@@ -8,7 +8,7 @@ const Cover = () => {
<div className="h-100 flex items-center justify-center pa2"> <div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1"> <div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w1">-</div> <div className="b--black-30 br flex items-center justify-center w1">-</div>
<div className="flex-grow-1 bg-white"></div> <div className="flex-grow-1"></div>
<div className="b--black-30 bl flex items-center justify-center w1">+</div> <div className="b--black-30 bl flex items-center justify-center w1">+</div>
</div> </div>
</div> </div>

2
client/placeholders/BrowserFrame.jsx
View File

@@ -5,7 +5,7 @@ const BrowserFrame = ({ content, source }) => {
const flip = () => setContentActive(isActive => !isActive); const flip = () => setContentActive(isActive => !isActive);
return ( return (
<div className="br2 ba b--black-20"> <div className="br2 ba b--black-20" style={{ boxShadow: '0 24px 48px -8px rgba(0, 0, 0, .5)' }}>
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05"> <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-red" />
<div className="br-100 mr1 w1 h1 bg-gold" /> <div className="br-100 mr1 w1 h1 bg-gold" />

1
client/placeholders/Frame.jsx
View File

@@ -5,6 +5,7 @@ const Frame = ({ children }) => {
<div <div
className="ba b--black-30 br2" className="ba b--black-30 br2"
style={{ style={{
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
height: '100px', height: '100px',
width: '100px', width: '100px',
}} }}