#main

$iconSize: 38px

body
  height: 100vh
  background: lighten(DodgerBlue, 28%)
  margin: 0
  display: flex
  justify-content: center
  align-items: center
  position: relative
  overflow: hidden
  color: #333
  font:
    family: 'Roboto', sans-serif

.place-order
  cursor: pointer
  width: 80px
  height: 80px
  background: coral
  outline: 0
  color: #333
  text-transform: uppercase
  transition: all .1s ease-in-out
  border: 0
    radius: 50px

  span
    color: lighten(coral, 20%)
    transform: scale(.9)
    transition: all .15s ease-in-out
    font:
      size: $iconSize
    &:hover
      transform: scale(1)
    
  &:hover
    background: darken(coral, 8%)
    color: #111
    span
      transform: scale(1)
      color: lighten(coral, 50%)
  
  &:active
    background: darken(coral, 30%)
 
  
.modal
  width: 60%
  height: 300px
  left: 0
  top: 80%
  opacity: 0
  margin-left: 20%
  position: absolute
  display: flex
  flex-direction: row
  align-items: center
  pointer-events: none
  transition: all .35s ease-in-out
  
  @media screen and (max-width: 500px)
    width: 90%
    margin-left: 5%
  
  &[data-status="true"]
    opacity: 1
    pointer-events: auto
    top: 50%
    margin-top: -150px
    
    .modal-left
      transform: translate(0,0)
      
    .modal-right
      transform: rotateY(0deg)
      opacity: 1
      
    .close, .price-tag
      transform: translate(0)
      opacity: 1
  
.modal-left
  left: 0
  width: 50%
  Height: 100%
  transform: translate(-50px, -20px) rotate(30deg)
  transform-origin: left top
  background:
    image: url('http://assets.inhabitots.com/wp-content/uploads/2015/06/Micuna-Ovo-high-chair-eco-friendly-high-chair.jpg')
    size: cover
  transition: transform .45s ease-in-out
    
.modal-right
  left: 0
  width: 50%
  Height: 100%
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  background: white
  position: relative
  opacity: 0
  transform: rotateY(-80deg)
    origin: left center
  transition: transform .45s ease-in-out .45s, opacity .45s ease-in-out .45s
  
  h2
    margin: 0
    
  p
    text-align: center
    color: #666
    padding: 0 20px
    font:
      size: 11px
      
  .close
    cursor: pointer
    position: absolute
    bottom: 10px
    right: 10px
    //width: 80px
    //height: 50px
    border: 0
    display: flex
    justify-content: center
    align-items: center
    background: transparent
    outline: none
    opacity: 0
    transform: translate(50px,50px)
    transition: all .45s ease-in-out .85s
    
    span
      color: coral
      transform: scale(.8)
      transition: all .15s ease-in-out
      font:
        size: 35px
    
    &:hover
      //background: darken(coral, 8%)
      span
        transform: scale(1)
    &:active
      background: darken(coral, 30%)

    
.price-tag
  position: absolute
  top: -10px
  left: -10px
  width: 80px
  height: 50px
  display: flex
  justify-content: center
  align-items: center
  background: lighten(coral, 0%)
  color: lighten(coral, 25%)
  opacity: 0
  font:
    size: 28px
  transform: translate(-50px,-50px)
  transition: all .45s ease-in-out .85s

const App = React.createClass({
  
  getInitialState : function() {
    return({
      modal: false
    });
  },
  
  modalToggle : function() {
    this.setState({modal: !this.state.modal})
  },
  
  render : function(){
    return(
      <div>
        <button className="place-order" onClick={this.modalToggle}>
          <span className="fa fa-shopping-cart"></span>
        </button>
        <Modal onClick={this.modalToggle} status={this.state.modal}/>
      </div>
    );
  }
});


const Modal = React.createClass({
  
  getDefaultProps : function(){
    return({
      title: "Ova Highchair",
      description: "From formula to fruits, your baby's got a lot of eating ahead. An Ova high chair is the right place for breakfast, lunch and dinner.",
      price: "€" + 89
    });
  },
  
  render : function() {
    return(
      <div className="modal" data-status={this.props.status}>
        <div className="modal-left">
          <span className="price-tag">{this.props.price}</span>
        </div>
        <div className="modal-right">
          <h2>{this.props.title}</h2>
          <p>{this.props.description}</p>
          <button onClick={this.props.onClick} className="close">
            <span className="fa fa-close"></span>
          </button>
        </div>
      </div>
    );
  }
});




ReactDOM.render(
<App />,
document.getElementById('main')
)