link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet")


input(type="checkbox" name="check")#check
label(for="check")#tog
  i.fa.fa-bars
#menu
  span.button
    i.fa.fa-home
  span.button
    i.fa.fa-camera-retro
  span.button
    i.fa.fa-heart
  span.button
    i.fa.fa-bell

@import 'bourbon';

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

$hl: #E83F6F;

html,
body {
  height: 100%;
}

#check {
  display: none;
}

#tog {
  position: fixed;  
  width: 50px;
  height: 50px;
  top: 2px;
  left: 2px;
  font-size: 2em;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  z-index: 125;
  @include transition(all 0.25s ease);
}

.button {
  display: block;
  position: fixed;
  width: 40px;
  height: 40px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  @include transition(all 0.25s ease);
  
  &::after {
    padding: 0 5px;
    position: absolute;
    top: 10px;
    font: {
      family: 'Open Sans';
      weight: 300;
      size: 1em;
    }
    line-height: 20px;
    text-align: left;
  }
  
  &:hover::after {
    height: 20px;
    left: 40px;
    background-color: #333;
    color: $hl;
  }
}

#tog,
.button {
  background-color: $hl;
  color: #fff;
  
  &:hover {
    background-color: #333;
  }
  &:active {
    color: $hl;
  }
}

$cats: (
  0: 'home',
  1: 'photography',
  2: 'favourites',
  3: 'notifications'
);

$base: 52px;
$inc: 40px;
$timing: 0.1s;
$z-index: 100;
$z-step: 10;

#check:checked ~  #menu {
  @each $k, $v in $cats {
    $up: $k + 1;
    .button:nth-child(#{$up}) {
      top: $base + ($inc * $k);
      left: $base + ($inc * $k);
      z-index: $z-index - ($z-step * $k);
      @include transition(all ($timing * $up) ease);
      &:hover::after {
        content: $v;
      }
    }
  }
}