<link rel="stylesheet" href="https://i.icomoon.io/public/temp/e9468faa94/TestProject/style.css">
<div id="weather-widget" class='lightning'>
      <header>
        <span data-day="Thursday">Thursday</span>
        <span data-date="1-14">1-2</span>
      </header>
      <section id="current-temp">
        <h1 class='temp degree'>47</h1>
        <aside id="details">
          <i class="icon-cloudy"></i>
          <div class="hi-lo">
            <span class='lo degree'>: 45</span> 
            <span class='hi degree'>: 52</span>
          </div><!-- //.hi-lo -->
        </aside><!-- //.details -->
      </section><!-- //.current-temp -->
      <section id="forecast">
        <ul>
          <li data-lo='40' data-hi='50' data-icon='rainy' data-color='rain-a' data-date='Monday 12-30'>
            <span class="day">Mo</span>
            <span class="icon icon-rainy"></span>
            <span class="temp degree">42</span>
          </li>
          <li data-lo='45' data-hi='52' data-icon='lightning' data-color='lightning-a' data-date='Tuesday 12-31'>
            <span class="day">Tu</span>
            <span class="icon icon-lightning"></span>
            <span class="temp degree">47</span>
          </li>
          <li data-lo='55' data-hi='63' data-icon='cloudy2' data-color='cloudy-b' data-date='Wdnesday 1-1'>
            <span class="day">We</span>
            <span class="icon icon-cloudy2"></span>
            <span class="temp degree">58</span>
          </li>
          <li class='current' data-lo='59' data-hi='68' data-icon='cloudy' data-color='cloudy-c' data-date='Thursday 1-2'>
            <span class="day">Th</span>
            <span class="icon icon-cloudy"></span>
            <span class="temp degree">67</span>
          </li>
          <li data-lo='62' data-hi='74' data-icon='sun' data-color='sun-b' data-date='Friday 1-3'>
            <span class="day">Fr</span>
            <span class="icon icon-sun"></span>
            <span class="temp degree">71</span>
          </li>
          <li data-lo='64' data-hi='75' data-icon='sun' data-color='sun-c' data-date='Saturday 1-4'>
            <span class="day">Sa</span>
            <span class="icon icon-sun"></span>
            <span class="degree temp">74</span>
          </li>
          <li data-lo='62' data-hi='72' data-icon='cloudy' data-color='cloudy-c' data-date='Sunday 1-5'>
            <span class="day">Su</span>
            <span class="icon icon-cloudy"></span>
            <span class="degree temp">70</span>
          </li>
        </ul>
      </section><!-- //.forecast -->
    </div><!-- //.weather-widget -->

@import "compass/css3";

@import "compass/reset";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:100,400);

*{
  @include box-sizing(border-box);
}
html,body{
  height: 100%;
  color: #fff;
  font:{
    size:100%;
    family: 'Lato', sans-serif;
    weight:normal;
  }
}
body{
   @include transition(background-color .9s);
   background-color: #87C1CD;
   /* Colors */ 
  /* ---------------------------------------- */ 
  &.rain-a{
    background-color: #4E62AD;
  }
  &.lightning-a{
    background-color: #AFB845;
  }
  &.cloudy-b{
    background-color: #43429F;
  }
  &.cloudy-c{
    background-color: #87C1CD;
  }
  &.sun-b{
    background-color: #CD781B;
  }
  &.sun-c{
    background-color:  adjust-hue(#CD781B, 10%);
  }
  &.sun{
    background-color: #EB7E18;
  }
}

.degree:after{
  content: '\00b0';
}

header,
section#current-temp{
  @include box-shadow(0 1px 0 rgba(255,255,255,.5));  
}
section#current-temp h1,
aside#details{
  display: inline-block;
}

div#weather-widget{
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin: auto;
  width: 352px;
  height: 316px;
  border:1px solid rgba(255,255,255,.5);
}

header{
  text-align: center;
  padding: 15px 0;
}

section#current-temp{
  padding: 25px 15px;

  h1.temp{
    font:{
      weight: 300;
      size: 125px;
    }
    line-height: .65;
    letter-spacing: -.1em;
    padding-right: 10px;
    width: 185px;
  }

  aside#details{
    vertical-align: top;
    font-weight: normal;
    i{
      font-size: 70px;
      text-align: center;
      width: 100%;
      display: block;
      margin-bottom: 5px;
    }
    .hi-lo{
      text-align: center;
      width: 130px;
      span{
        display: inline-block;
        font-size: 14px;
        margin: 0 3px;
        &.hi:before{
          content: '\2191';
        }
        &.lo:before{
          content: '\2193';
        }
      }
    }
  }
}

section#forecast{
  ul{
    li{
      cursor: pointer;
      width: 50px;      
      display: block;
      float:left;
      margin-right: 0px;
      padding: 15px 0;
      font-weight: 100;
      font-size: 16px;
      @include box-shadow(1px 0 0 rgba(255,255,255,.5));
      @include transition(background-color .3s);
      span{
        display: block;
        text-align: center;
        margin-bottom: 15px;
        &.icon{
          font-weight: bold;
          font-size: 20px;
        }
      }
      &.current, &.current:hover{
        background-color: rgba(0,0,0,.2);
      }
      &:hover{
        background-color: rgba(255,255,255,.2); 
      }
      &:last-child{
        @include box-shadow(none);
        margin: 0;
      }
    }
  }
}

(function($){
  //write our scripts here
  var fadespeed = 500;
  $("#forecast li").on("click" , function(){
    
    //set main variable
    var $this = $(this),
      main = $this.parents("#weather-widget");
      mainDate = main.find("header"),
      mainTemp = main.find("h1.temp"),
      mainHi = mainTemp.next().find("span.hi"),
      mainLo = mainTemp.next().find("span.lo"),
      details = mainTemp.next(),
      
      //get values and store them
      temp = $this.find(".temp").text(),
      lo = $this.data("lo"),
      hi = $this.data("hi"),
      date = $this.data("date");
      icon = $this.data("icon"),
      color = $(this).data("color");

    //click functions
    $this.addClass("current").siblings().removeClass("current");
    
      //set the values
      mainTemp.text(temp);
      mainDate.text(date);
      details.stop().fadeTo(fadespeed , 0 , function(){
        $(this).stop().fadeTo(fadespeed ,1)
        details.find("i").removeClass().addClass("icon-" + icon);
        mainHi.text(hi);
        mainLo.text(lo);
      });
      $("body").removeClass().addClass(color);
    });
})(jQuery);