//-https://dribbble.com/shots/1768850-Slide-animation
.emoji
.container
  ul
    li.is_active(color='#bc2828' emoji='	🍎') Apple
    li(color='#d68a8a' emoji='🍑') Peach
    li(color='#dd7e28' emoji='🍊') Orange
    li(color='#e0c44f' emoji='🍌') Banana
    li(color='#92bf7b' emoji='🍐') Pear

.centerme(){
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
}
body{
  background-color: #ececec;
  transition: background-color .3s ease;
}
.emoji{
  position: absolute;
  margin-left: 20px;
  .centerme();
  font-size: 250px;
  opacity: .2;
}
.container{
  position: absolute;
  .centerme();
}
ul{
  list-style-type:none;
  .is_active{
    padding: 10px 15px;
    cursor: default;
    &:hover{
      opacity:1;
    }
  }
  li{
    color: #222;
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-radius: 100px;
    vertical-align: middle;
    min-width: 12px;
    min-height: 12px;
    padding: 0px;
    transition: all .3s ease;
    margin-right: 5px;
    box-shadow: 0 1px 2px 0px rgba(0,0,0,.2);
    cursor: hand;
    cursor: pointer;
    &:hover{
      opacity:0.6;
    }
  }
}

var tabNames = [];
//loop thru all li element and grab all data, push them into an array of objects
$('li').each(function(index){
  var _this = $(this);
  var elem = {};
  elem.name = _this.text();
  elem.color = _this.attr('color');
  elem.emoji = _this.attr('emoji');
  tabNames.push(elem);
  console.log(tabNames);
  //if this li is active, take those data and apply to body
  if (_this.hasClass('is_active')){
    $('body').css('background-color',elem.color);
    $('.emoji').text(elem.emoji);
  } else {_this.text('')};
});

//on click change text value, bg data, emoji
$('li').on('click', function(e) {
  var _this = $(this);
  var _idx = _this.index();
  _this.addClass('is_active');
  _this.text(tabNames[_idx].name);
  $('body').css('background-color',tabNames[_idx].color)
  $('.emoji').text(tabNames[_idx].emoji);
  _this.siblings().text('');
  _this.siblings().removeClass('is_active');
});