React DailyUI - 016 - Overlay / Popup

index.html

<div id="app"></div>

react-dailyui-016-overlay-popup.markdown

React DailyUI - 016 - Overlay / Popup

Day 16 of 100, today is an Overlay / Popup! Love the colours in this one.

A Pen by Jack Oliver on CodePen.

License.

script.babel

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')
);

scripts

<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>

style.scss

// 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);
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />