Day 16 of 100, today is an Overlay / Popup! Love the colours in this one.
A Pen by Jack Oliver on CodePen.
<div id="app"></div> |
Day 16 of 100, today is an Overlay / Popup! Love the colours in this one.
A Pen by Jack Oliver on CodePen.
var App = React.createClass({ | |
getInitialState: function() { | |
return({ | |
modal: false | |
}) | |
}, | |
checkoutClick: function() { | |
this.setState({modal: true}); | |
}, | |
okayClick: function() { | |
this.setState({modal: false}); | |
}, | |
render: function() { | |
return ( | |
<div className="App"> | |
<Button onClick={this.checkoutClick} /> | |
<Modal onClick={this.okayClick} status={this.state.modal} /> | |
</div> | |
); | |
} | |
}); | |
var Button = React.createClass({ | |
render: function() { | |
return ( | |
<div onClick={this.props.onClick} className="Button"> | |
<i className="fa fa-fw fa-cart-arrow-down"></i> | |
</div> | |
); | |
} | |
}); | |
var Modal = React.createClass({ | |
getDefaultProps: function() { | |
return ({ | |
title: 'Thanks!', | |
subtitle: 'Your order is being processed, hang tight and have an ice cream!', | |
cta: 'Gee, thanks!' | |
}); | |
}, | |
render: function() { | |
return ( | |
<div className="Modal" data-status={this.props.status}> | |
<h1>{this.props.title}</h1> | |
<h2>{this.props.subtitle}</h2> | |
<button onClick={this.props.onClick}>{this.props.cta}</button> | |
</div> | |
); | |
} | |
}); | |
// Render | |
ReactDOM.render( | |
<App />, | |
document.getElementById('app') | |
); |
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script> | |
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script> |
// Colors | |
$snow: #F0F7F4; | |
$white: #FFFFFF; | |
$blue: #99E1D9; | |
$pink: #EF3054; | |
$black: #19192B; | |
// Typography | |
@import 'https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700'; | |
body { | |
height: 100vh; | |
overflow: hidden; | |
} | |
.App { | |
background: $blue; /* Old browsers */ | |
background: -moz-linear-gradient(-45deg, rgba($blue,1) 50%, rgba($snow,1) 50%); /* FF3.6-15 */ | |
background: -webkit-linear-gradient(-45deg, rgba($blue,1) 50%,rgba($snow,1) 50%); /* Chrome10-25,Safari5.1-6 */ | |
background: linear-gradient(135deg, rgba($blue,1) 50%,rgba($snow,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
height: 100vh; | |
display: flex; | |
font-family: 'Titillium Web'; | |
align-items: center; | |
justify-content: center; | |
color: $black; | |
overflow: hidden; | |
width: 100vw; | |
} | |
.Modal { | |
$animation-speed: .63s; | |
height: 400px; | |
width: 300px; | |
background: $white; | |
box-shadow: 0 10px 20px -10px rgba($black, .25); | |
box-sizing: border-box; | |
padding: 30px; | |
display: flex; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-left: -150px; | |
margin-top: -200px; | |
flex-direction: column; | |
top: 150%; | |
transition: top $animation-speed ease-in-out, opacity $animation-speed ease-in-out, transform $animation-speed / 2 ease-in-out $animation-speed / 2; | |
opacity: 0; | |
transform: scale(2); | |
overflow: hidden; | |
&[data-status='true'] { | |
top: 50%; | |
opacity: 1; | |
transform: scale(1); | |
} | |
h1 { | |
font-size: 48px; | |
margin-bottom: .4em; | |
color: $pink; | |
} | |
h2 { | |
font-size: 22px; | |
line-height: 1.2; | |
opacity: .75; | |
} | |
button { | |
margin-top: auto; | |
background: $black; | |
color: $white; | |
border: 0; | |
outline: none; | |
height: 50px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
border-radius: 50px; | |
font-family: 'Titillium Web'; | |
font-size: 18px; | |
transform: scale(.99); | |
text-transform: uppercase; | |
transition: transform .125s ease; | |
&:hover { | |
transform: scale(1); | |
background: lighten($black, 20); | |
cursor: pointer; | |
} | |
&:active { | |
transform: scale(.97); | |
background: $pink; | |
} | |
} | |
} | |
.Button { | |
background: lighten($black, 20); | |
color: $white; | |
width: 100px; | |
height: 100px; | |
border-radius: 100px; | |
font-size: 48px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
transform: scale(.95); | |
.fa { | |
pointer-events: none; | |
} | |
&:hover { | |
background: lighten($black, 30); | |
transform: scale(1); | |
cursor: pointer; | |
} | |
&:active { | |
background: $pink; | |
transform: scale(.9); | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |