Actions + Title Shift

by piiantom

HTML

<div class="action main">
  <button class="btn" title="Terminer"><span>A</span></button>
  <button class="btn" title="Terminer"><span>B</span></button>
  <button class="btn" title="Terminer"><span>C</span></button>
</div>
<h2>Tâches <span>[<b>4</b>]</span></h2>
<button id="toggle-shift">Toggle Shift</button>

CSS

.action.main, .action.main+h2{
  display: inline-block;
  line-height: 47px;
  vertical-align: middle;
  margin-bottom: 20px;
  margin-top: -10px;
}

.action button{
  display: inline-block;
  width: 34px;
  height: 34px;
  cursor: pointer;
  vertical-align: middle;
  border: none;
  border-radius: 4px;
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
}
.action button:hover{
  color: #fff;
  background-color: #37405c;
}
.action.main+h2{
  font-size: 15px; 
  padding: 0 80px 0 10px;
  background-color: #fff;
  position: absolute;
  left: 0;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.action.main+h2 span, .action.main+h2 span b{
  font-weight: normal;
}

.action.main+h2.shift {
  opacity: 0.2;
  left: 120px;
}

#toggle-shift{
  display: block;
}

JavaScript

$('#toggle-shift').on ('click', function (event) {
	// Just get the h2 title element here to add or remove the shift class
  var h2 = $('.action.main').first().next();
  if (h2.hasClass('shift')) {
  	h2.removeClass('shift');
  } else {
  	h2.addClass('shift');
  }
});