%link{:href => 'https://fonts.googleapis.com/icon?family=Material+Icons',:rel => 'stylesheet'}

-@days=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

.container
  .calendar
    %h2 August 2015 
    %i.material-icons
      keyboard_arrow_right
    %i.material-icons
      keyboard_arrow_left
    %i.material-icons.add
      add
    %ul
      - @days.each do |days|
        %li.days #{days}
    %ul
      -(1..31).each do |i|
        %li{:class => "date-#{i}"} #{i}

$three-d: true; // Do we want a 3D effect?

body {
  background: #F2FDFF;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-top: 25px;
  perspective: 900px;
}

.calendar {
  background: #9AD4D6;
  width: 420px;
  height: auto;
  border-radius: 3px;
  box-shadow: 1px 1px 7px #CCC;
  transition: all ease .9s;
  @if $three-d == true {
    transform: rotateX(30deg);
  } else {
    transform: rotateX(-30deg);
  }
  &:hover {
    transform: rotateX(0);
  }
  h2 {
    color: #FEFEFE;
    font-weight: 300;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    padding-bottom: 30px;
  }
  ul {
    margin: 0;
    width: 100%;
    padding: 0;
  }
  li {
    list-style: none;
    float: left;
    color: #FEFEFE;
    border-radius: 100%;
    margin: 15px 15px;
    width: 18px;
    height: 18px;
    padding: 5px 5px 5px 5px;
    text-align: center;
    vertical-align: middle;
    transition: all ease .4s;
  }
  & li.days:hover {
    background: none !important;
    color: #FFF;
  }
  li:hover {
    background: #F2FDFF;
    color: #9AD4D6;
    cursor: pointer;
  }
}

.add {
  border-radius: 100%;
  background: #F2FDFF;
  color: #9AD4D6 !important;
  text-align: center;
  padding: 4px;
  margin: -37px 30px;
  float: right;
  transition: all ease .2s;
  &:hover {
    transform: scale(1.1);
  }
}

.material-icons {
  color: #FFF;
  cursor: pointer;
  &:nth-of-type(1) {
    float: right;
    margin: -75px 35px;
  }
  &:nth-of-type(2) {
    float: left;
    margin: -75px 35px;
  }
}