Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/gist.sass

Created August 21, 2014 05:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattborn/5e7cb5f0f8aac843dde3 to your computer and use it in GitHub Desktop.
Save mattborn/5e7cb5f0f8aac843dde3 to your computer and use it in GitHub Desktop.
Download ZIP
Inline confirmation UI
Raw
readme.md

Works great in Chrome + Safari, okay in Firefox, not tested in IE

Raw
gist.sass
@import "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css";
// Reset
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
body,
p { margin: 0; }
button {
background: 0;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
letter-spacing: inherit;
margin: 0;
overflow: visible;
padding: 0;
text-align: inherit;
-webkit-transition: .3s;
-moz-transition: .3s;
transition: .3s;
}
[hidden] { display: none; }
// Gist
html,
body { height: 100%; }
body {
background: darken(#fff, 2%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
text-align: center;
&::before {
width: 1px;
height: 100%;
content: '';
display: inline-block;
margin-right: -1px;
vertical-align: middle;
}
}
%text-button {
color: darken(#0de, 10%);
text-decoration: underline;
}
%icon-button {
&:hover .button-text { text-decoration: underline; }
}
.button {
&-icon {
font-size: 18px;
line-height: inherit;
margin-right: 5px;
}
&-text {}
}
.item {
height: 40px;
opacity: 1;
overflow: hidden;
padding: 10px 0;
position: relative;
-webkit-transition: .3s cubic-bezier(.2,1,.2,1);
-moz-transition: .3s cubic-bezier(.2,1,.2,1);
transition: .3s cubic-bezier(.2,1,.2,1);
&[hidden] {
height: 0;
display: block;
opacity: 0;
padding: 0;
}
&::after { clear: both; content: ''; display: table; }
&-pair {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
-webkit-transition: inherit;
-moz-transition: inherit;
transition: inherit;
&[hidden] {
display: block;
opacity: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
}
&-text {
float: left;
line-height: inherit;
}
&-button {
@extend %icon-button;
float: right;
opacity: .3;
&:hover {
color: #546;
opacity: 1;
}
}
}
.confirm {
width: 100%;
line-height: 20px;
opacity: 1;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
-webkit-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: inherit;
-moz-transition: inherit;
transition: inherit;
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s;
&[hidden] {
display: block;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
&-text { margin-right: 5px; }
&-button {
@extend %text-button;
opacity: .5;
padding: 0 5px;
&:hover { opacity: 1; }
}
}
.gist {
min-width: 320px;
background: #fff;
border-radius: 2px;
color: #aaa;
display: inline-block;
font: 100%/1 "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .02em;
padding: 20px 30px;
text-align: left;
vertical-align: middle;
&-reset {
height: 20px;
opacity: 1;
overflow: hidden;
text-align: center;
-webkit-transition: .3s cubic-bezier(.2,1,.2,1);
-moz-transition: .3s cubic-bezier(.2,1,.2,1);
transition: .3s cubic-bezier(.2,1,.2,1);
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
transition-delay: 1s;
&[hidden] {
height: 0;
display: block;
opacity: 0;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
}
&-button {
@extend %icon-button;
opacity: .3;
&:hover {
color: #546;
opacity: 1;
}
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inline confirmation UI</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
<script>
$.get('gist.sass').done(function (sass) {
var css = Sass.compile(sass);
$('<style>').html(css).appendTo('head');
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
var Gist = React.createClass({
getInitialState: function () {
return {
confirm: false,
remove: false
};
},
getConfirmState: function () {
return this.state.remove || !this.state.confirm;
},
render: function () {
return (
<div className="gist">
<div className="item" hidden={this.state.remove}>
<div className="item-pair" hidden={this.state.confirm}>
<p className="item-text">Item</p>
<button className="item-button" onClick={this.confirm}>
<i className="button-icon fa fa-trash-o" />
<span className="button-text">Remove</span>
</button>
</div>
<p className="confirm" hidden={this.getConfirmState()}>
<span className="confirm-text">Are you sure?</span>
<button className="confirm-button" onClick={this.yes}>
<span className="button-text">Yes</span>
</button>
<button className="confirm-button" onClick={this.no}>
<span className="button-text">No</span>
</button>
</p>
</div>
<div className="gist-reset" hidden={!this.state.remove}>
<button className="gist-button" onClick={this.reset}>
<i className="button-icon fa fa-refresh"></i>
<span className="button-text">Reset</span>
</button>
</div>
</div>
);
},
confirm: function () {
this.setState({confirm: true});
},
yes: function () {
this.setState({remove: true});
},
no: function () {
this.setState({confirm: false});
},
reset: function () {
this.setState({
confirm: false,
remove: false
});
}
});
React.renderComponent(<Gist />, document.body);
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment