text diff

forked from 1wheel's block: text diff

<!DOCTYPE html>
<meta charset="utf-8">

.q{
  stroke: black;
  stroke-dasharray: 10 10;
}

.point{
  stroke: black;
}

.commit{
  margin: 10px;
  width: 450px;
  border: 1px solid lightgrey;
  padding: 10px;
}

.commit span{
  color: darkgrey;
}

.commit span.added{
  color: green;
  font-weight: bold;
}

.commit span.removed{
  color: red;
  font-weight: bold; 
}

#edit-container{
  position: absolute;
  right: 5px;
  top: 0px;
  width: 450px;
}

#falling, #falling-v{
  margin-top: 200px;
  margin-bottom: 200px;
  height: 200px;
}
.falling{
  position: relative;
  display: inline-block;
}
#falling-v, #width-calc{
  font-family: sans-serif;
}

#falling-v{
  font-size: 0 !important;
}
#falling-v span, #width-calc span{
  font-size: 14px;
  float: left;
}
</style>

<div id='edit-container'>
    <h3>Make changes!</h3>
    <div id='editable' contentEditable="true"></div>
    <button id='commit'>Commit</div>
  </div>

<h3>Falling transition</h3>
  <div id='falling' class='commit'></div>

<h3>Falling not fixed</h3>
  <div id='falling-v' class='commit'></div>