Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created October 27, 2016 01:02
Show Gist options
  • Save CodeMyUI/5a7b3da74f0e8245166505598b83d7f5 to your computer and use it in GitHub Desktop.
Save CodeMyUI/5a7b3da74f0e8245166505598b83d7f5 to your computer and use it in GitHub Desktop.
React DailyUI - 016 - Overlay / Popup
<div id="app"></div>

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.

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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment