<html>
<head>
<meta name="description" content="React.js titty shaker">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Redux</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root"></div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.1/redux.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.0.1/redux-thunk.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
//colors
$color_raffia_approx: #e7ddb6;
$color_heathered_gray_approx: #b8b092;
$color_mandy_approx: #eb486b;
$color_night_shadz_approx: #ba3b56;
$color_river_bed_approx: #3e505e;
$color_mona_lisa_approx: #f5978e;
$color_claret_approx: #772436;
$color_akaroa_approx: #d8cca7;
$yellow: yellow;
$white: white;
//@extend-elements
//original selectors
//html, body
%extend_1 {
background: $color_river_bed_approx;
margin: 0;
padding: 0;
}
//original selectors
//.wrestler-body-skin, .wrestler-body-skin::before, .wrestler-body-skin::after
%extend_2 {
background-color: $color_raffia_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50%;
display: block;
height: 85px;
width: 85px;
}
//original selectors
//.wrestler-body-skin::before, .wrestler-body-skin::after
%extend_3 {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0 0 50% 50%;
content: '';
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(20px);
}
//original selectors
//.wrestler-body-nipples, .wrestler-body-nipples::after
%extend_4 {
background-color: $color_mona_lisa_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50%;
display: block;
height: 10px;
position: relative;
width: 10px;
}
//original selectors
//.wrestler-head, .wrestler-head::before
%extend_5 {
background-color: $color_raffia_approx;
display: block;
height: 30px;
margin: -106px 0 0 -17px;
position: absolute;
width: 34px;
z-index: 1;
}
//original selectors
//.wrestler-shoelace, .wrestler-shoelace::after
%extend_6 {
background-color: $yellow;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px;
height: 2px;
margin: 15px 0 0 1px;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(45deg);
width: 12px;
}
//original selectors
//.LinkedIn, .LinkedIn:visited
%extend_7 {
bottom: .25em;
color: $color_raffia_approx;
position: absolute;
right: .25em;
}
html {
@extend %extend_1;
}
body {
@extend %extend_1;
}
.wrestler {
left: 50%;
position: absolute;
top: 50%;
margin-top:150px;
}
.wrestler-body {
animation: 1.3s ease-in-out infinite alternate bodyStep;
background-color: $color_mandy_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50%;
height: 160px;
overflow: hidden;
margin: -80px 0 0 -80px;
position: absolute;
text-align: center;
width: 160px;
white-space: nowrap;
}
.wrestler-body-skin {
@extend %extend_2;
animation: 0.07s ease-in-out infinite alternate skinShake;
margin: -20px auto 0;
}
.wrestler-body-skin::before {
@extend %extend_2;
@extend %extend_3;
margin-left: -90px;
}
.wrestler-body-skin::after {
@extend %extend_2;
@extend %extend_3;
margin: -85px 0 0 90px;
}
.wrestler-body-nipples {
@extend %extend_4;
animation: 0.07s ease-in-out infinite alternate nipplesShake;
}
.wrestler-body-nipples::after {
@extend %extend_4;
content: '';
margin-left: 56px;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(0);
}
.wrestler-head {
@extend %extend_5;
animation: 1.3s ease-in-out infinite alternate bodyStep;
}
.wrestler-head::before {
@extend %extend_5;
background-color: $color_mandy_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50% 50% 0 0;
content: '';
height: 40px;
margin: -27px 0 0;
}
.wrestler-eye {
background-color: $color_claret_approx;
border: 2px solid $color_raffia_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0 8px 6px 70%;
display: block;
height: 8px;
margin: -11px 0 0 1px;
position: absolute;
width: 11px;
z-index: 1;
}
.wrestler-eye::after {
background-color: $color_raffia_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50%;
content: '';
display: block;
height: 5px;
margin: 1px 0 0 4px;
width: 5px;
}
.wrestler-eye_right {
margin-left: 18px;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: scaleX(-1);
}
.wrestler-arm {
animation: 1.3s ease-in-out infinite alternate bodyStep;
margin: -63px 0 0 -80px;
position: absolute;
}
.wrestler-arm_right {
animation: 1.3s ease-in-out infinite alternate bodyStepMirror;
margin-left: 80px;
}
.wrestler-arm::before {
animation: 0.07s ease-in-out infinite alternate armShake;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 30px 30px 0 0;
background-color: $color_akaroa_approx;
content: '';
height: 80px;
margin: -10px 0 0 -22px;
position: absolute;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(31deg);
//Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d)
transform-origin: bottom;
width: 50px;
}
.wrestler-arm_right::before {
animation-delay: 0.07s;
}
.wrestler-arm::after {
content: '';
background-color: $color_raffia_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 3px 0 30px 30px;
height: 85px;
margin: 54px 0 0 -55px;
position: absolute;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(49deg);
width: 50px;
}
.wrestler-leg {
animation: 1.3s ease-in infinite alternate legShift;
margin: 49px 0 0 -52px;
position: absolute;
}
.wrestler-leg-top {
animation: 1.3s ease-in infinite alternate legTop;
background-color: $color_raffia_approx;
height: 50px;
position: absolute;
width: 45px;
}
.wrestler-leg-bottom {
animation: 1.3s ease-in infinite alternate legBottom;
background-color: $color_mandy_approx;
height: 70px;
margin: 40px 0 0;
position: absolute;
width: 45px;
}
.wrestler-leg-bottom::before {
animation: 1.3s ease-in infinite alternate bootsBackground;
background-color: $color_mandy_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50% 0 0 0;
content: '';
height: 10px;
margin: 60px 0 0 -20px;
position: absolute;
width: 20px;
}
.wrestler-leg_right {
animation: 1.3s ease-in -1.3s infinite alternate legShiftScale;
margin-left: 52px;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: scaleX(-1);
.wrestler-leg-top {
animation-delay: 1.3s;
}
.wrestler-leg-bottom {
animation-delay: 1.3s;
}
.wrestler-leg-bottom::before {
animation-delay: 1.3s;
}
}
.wrestler-shoelace {
@extend %extend_6;
}
.wrestler-shoelace::after {
@extend %extend_6;
content: '';
margin: 0;
position: absolute;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(90deg);
}
.wrestler-heel {
bottom: 0;
height: 20px;
overflow: hidden;
position: absolute;
right: 0;
width: 20px;
}
.wrestler-heel::after {
background-color: $yellow;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 50%;
content: '';
height: 40px;
position: absolute;
width: 40px;
}
@keyframes legShift {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0);
}
50% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0);
}
75% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, -20px);
}
90% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(20px, 0);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(20px, 0);
}
}
@keyframes legShiftScale {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) scaleX(-1);
z-index: 0;
}
50% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) scaleX(-1);
z-index: 0;
}
75% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, -20px) scaleX(-1);
z-index: 0;
}
90% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(-20px, 0) scaleX(-1);
z-index: -1;
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(-20px, 0) scaleX(-1);
z-index: -1;
}
}
@keyframes legTop {
0% {
background-color: $color_raffia_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
50% {
background-color: $color_raffia_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
75% {
background-color: $color_raffia_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(30deg);
}
90% {
background-color: $color_heathered_gray_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
100% {
background-color: $color_heathered_gray_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
}
@keyframes legBottom {
0% {
background-color: $color_mandy_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) rotate(0deg);
}
50% {
background-color: $color_mandy_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) rotate(0deg);
}
75% {
background-color: $color_mandy_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0px, -15px) rotate(-20deg);
}
90% {
background-color: $color_night_shadz_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) rotate(0deg);
}
100% {
background-color: $color_night_shadz_approx;
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(0, 0) rotate(0deg);
}
}
@keyframes bootsBackground {
0% {
background-color: $color_mandy_approx;
}
75% {
background-color: $color_mandy_approx;
}
90% {
background-color: $color_night_shadz_approx;
}
100% {
background-color: $color_night_shadz_approx;
}
}
@keyframes bodyStep {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(-22px, 0, 0);
}
2% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(-22px, 0, 0);
}
25% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(-11px, -15px, 0);
}
50% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(0, 0, 0);
}
75% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(11px, -15px, 0);
}
98% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(22px, 0, 0);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(22px, 0, 0);
}
}
@keyframes bodyStepMirror {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(-22px, 0, 0) scaleX(-1);
}
25% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(-11px, -15px, 0) scaleX(-1);
}
50% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(0, 0, 0) scaleX(-1);
}
75% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(11px, -15px, 0) scaleX(-1);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate3d(22px, 0, 0) scaleX(-1);
}
}
@keyframes skinShake {
from {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateX(-3px);
}
to {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateX(3px);
}
}
@keyframes nipplesShake {
from {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(44px, -25px);
}
to {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translate(50px, -25px);
}
}
@keyframes armShake {
from {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(28deg);
}
to {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(32deg);
}
}
var { createStore, combineReducers, applyMiddleware } = Redux;
var Main = React.createClass({
render: function() {
return (
<div className='container'>
{this.props.children}
</div>
);
}
});
var Content = React.createClass({
render: function() {
return (
<div className='row'>
<div className='col-xs-12'>
<section className="wrestler">
<div className="wrestler-head">
<i className="wrestler-eye" />
<i className="wrestler-eye wrestler-eye_right" />
</div>
<div className="wrestler-arm" />
<div className="wrestler-arm wrestler-arm_right" />
<div className="wrestler-leg">
<div className="wrestler-leg-top" />
<div className="wrestler-leg-bottom">
<div className="wrestler-heel" />
<div className="wrestler-shoelace" />
<div className="wrestler-shoelace" />
</div>
</div>
<div className="wrestler-leg wrestler-leg_right">
<div className="wrestler-leg-top" />
<div className="wrestler-leg-bottom">
<div className="wrestler-heel" />
<div className="wrestler-shoelace" />
<div className="wrestler-shoelace" />
</div>
</div>
<div className="wrestler-body">
<div className="wrestler-body-skin" />
<div className="wrestler-body-nipples" />
</div>
</section>
</div>
</div>
);
}
});
var Panel = React.createClass({
render: function() {
return (
<div className='row'>
<div className='col-xs-12'>
<div className="panel panel-success">
<div className="panel-heading">
<h3 className="panel-title">{this.props.title}</h3>
</div>
<div className="panel-body">
{this.props.children}
</div>
<div className="panel-footer">{this.props.footer || ''}</div>
</div>
</div>
</div>
);
}
});
const toRender = (
<Main>
<Content/>
</Main>
)
ReactDOM.render( toRender, document.getElementById('root') );
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |