<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Oswald|Montserrat|Droid+Sans:400,700|Audiowide" />
<div class="container">
  <div class="calculator">
  <div class="half-column columns calculator-panel">
    <h2>An Absolutetly Exciting Widget</h2>
    <form action="">
      <div class="form-group">
        <label class="magic-label" for="">Product Variation Type: </label>
        <select name="" id="">
          <option value="">Choose a variation</option>
          <option value="">Some option available</option>
          <option value="">Another option available</option>
        </select>
      </div>
      <div class="form-group">
        <label class="magic-label" for="">Size: </label>
        <select name="" id="">
          <option value="">Choose a size</option>
          <option value="">Some option available</option>
          <option value="">Another option available</option>
        </select>
      </div>
      <div class="form-group quantity">
        <input type="text" class="special-input" />
        <label for="" class="expanding-label">Quantity</label>
      </div>
      <div class="special-buy-bar">
      <input type="submit" value="buy now" class="submit-button"/>
       <div class="livePrice">$ 45.00</div>
      </div>
    </form>
   
  </div>
  <div class="half-column columns last poster--style">
    <img src="http://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" />
    <aside class="floater">
    <h4>The Kit Includes: </h4>
    <ul>
      <li>An exciting deep detail about the product I am currently selling.</li>
      <li>(Top webbing strap is 2-inches wide for weight bearing)</li>
      <li>Hooks for attachment spaced evenly</li>
      <li>Four 3ft Adjustable straps on each side</li>
      <li>Mounting Brackets</li>
      <li>All Necessary hardware included</li>
    </ul>
      <div class="wesc">WESC</div>
    </aside>
  </div>
</div>
</div>

@import "compass";

$btngreen: #00c853;
$btnblue: #4285F4;
$btngreenborder: #007c33;
$btnblueborder: #0d5bdd;
$red: #E2361F;
//names are going to have to change due to foundation
//still need ot style the inputs
body{ font-family: 'Droid Sans'; }
h1,h2,h3,h4,h5,h6{
  font-family: 'Oswald';
}
.container{ 
  max-width :1170px; margin: 0 auto;
}
.calculator{
  background: #ddd;
  overflow:auto;
  width: 100%;
  margin-top: 1em;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  .poster--style{
    position: relative;
    padding-bottom:50px;
    img{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      
    }
    .wesc{
        width: 42px;
        height: 42px;
        position: absolute;
        bottom: 0;
        right: 25px;
      font-family: 'Montserrat';
      font-style: italic;
      color: $btnblue;
      }
    .floater{
      
      h4{
        margin:0;
        margin-bottom: 5px; 
        color: $btnblueborder;
        font-size: 1.4em;
        background: rgba(245,245,245, .7);
        padding-left: 1em;
        padding-top:.3em;
        padding-bottom:.3em;
      }
      ul{
        padding: 0 1em 1em 1.2em;
        margin:0;
        li{
          margin-left: 1em;
          line-height: 1.6em;
          font-size: 1em;
          color: #555;
          list-style-type: square;
        }
      }
      position: absolute;
      bottom: 0;
      left:0;
      right:0;
      width: 100%;
      background: rgba(255,255,255,0.8);
      border-top: 2px solid $btnblue;
    }
  }
  .columns{
    float:left;
    position:relative;
    min-height: 305px;
    h2{
      margin: 0;
      padding: .4em .4em .4em 1em;
      background: $red;
      color:white;
      font-size: 2em;
    }
    form{
      select{
        width: 100%;
        border: none;
      }
    }
  } 
  .calculator-panel{
    background: #f8f8f8;
    padding-bottom:50px;
  }
  .half-column{
    width: 50%;
    height: 100%;
    overflow:hidden;
    top: 0;
    left:0;
  }
  .form-group label.magic-label{
    display:none;
  }
  .form-group, input{
    font-family:'Droid Sans', sans-serif;
    font-size: 20pt;
    line-height:2.6em;
    height:2.6em;
    margin:0;
    padding:0;
  }
  .form-group{
    &.quantity{
      margin-top: -10px;
      @include transition(all 200ms ease-in);

      &.form-group-float{
        margin-top: 0;
      } 
    }
  }
  .input:focus+label{
    color: $btnblue;
  }
  .form-group .input[value]+label{
    color: $red;
  }
  .form-group{
    position:relative;
    width: 90%;
    float: left;
    margin-left: 1em;
  }
  .form-group input{
    font-size: .9em;
    border:none;
    padding-top:.4em;
    padding-bottom:0;
    outline:none;
    position:absolute;
    top: 0;
    left: 0;
    display:block;
    background:transparent;
    z-index:2;
    border-bottom: 1px solid $btnblue;
    text-indent:.1em;
    width: 100%;
    margin-top:0;
    &:focus{ 
      box-shadow: none;
    }
  }
 
  .form-group label{
    display:block;
    position:absolute;
    top:12px;
    left:.1em;
    font-size:.9em;
    z-index:1;
    @include transform-origin(0,0.0em);
    @include transition(transform 160ms, color 200ms);
    @include transform(scale(1,1) rotateY(0));
    color:#999;
  }
  .form-group-float label{
    @include transform(scale(0.58,0.58) rotateY(0));
    color: $btnblue;
    top:    -9px
  }
    .form-group-float input{
      line-height:3.4em;
      padding-bottom:0;
    }
    
    select{
      height: inherit;
      background: #fff;
      color: #999;
      padding:  0;
      margin: 0;
      height: 1.8em;
      font-size: .9em;
      margin-top: .55em;
      margin-left: -5px;
    }
  }
  .special-buy-bar{
      background: lighten($btngreenborder, 10%);
      width: 100%;
      overflow:hidden;
      position:absolute;
      bottom:0;
      left: 0;
      input{
        font-family: 'Oswald';
        font-size: 1.3em;
        float:left;
        background: $btngreen;
        display:block;
        width: 80%;
        text-align:left;
        color:white;
        padding: .6em 0 0 0;
        text-transform: uppercase;
        border:none;
        transition: all .4s ease-in;
        &:hover{
          background: $btngreenborder;
        }
      }
    .submit-button{
      padding: 0em 0;
      text-align: center;
    }
    .livePrice{
      height: 100%;
      float:right;
      color:white;
      font-family: 'Open Sans';
      font-weight: 400;
      font-size: 1.5em;
      padding: .4em 1em;
      text-align: center;
      position:absolute;
      right: 0;
      border-left: 2px solid lighten($btngreenborder,20%);
      background: lighten($btngreenborder, 18%);
     }
    }

(function() {
 
  var input = document.querySelector('.special-input');
  var parentNode = input.parentElement;

  input.onfocus = function() {
    parentNode.setAttribute('class', 'form-group-float form-group quantity');
  };
    input.onblur = function() {
        if (input.value == "") {
          parentNode.setAttribute('class', 'form-group quantity');
        }
      };
      //check the value of the input and report back
      //if it is empty then make the label big again
      //if it is full stay small
  //parent.removeClass('form-group-float');
})();