<div class="devices">
  <a href="#" class="mobile"></a>
  <a href="#" class="tablet"></a>
  <a href="#" class="laptop"></a>
</div>
<div class="browser mobile">
  <div class="searchbar">
    <form>
      <input type="url" class="url" value="http://" />
      <button class="btn">Browse</button>
    </form>
  </div>
  <div class="iframe"></div>
</div>

@import "compass/css3";

/* #3a99a7 #465f70  */
* { box-sizing: border-box; }

::-webkit-scrollbar {
width: 16px;
height: 16px;
overflow: visible;
}

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: solid rgba(0, 0, 0, 0);
min-height: 28px;
padding: 100px 0 0;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(0,0,0,0.07);
}

::-webkit-scrollbar-button {
height: 0;
width: 0;
}

::-webkit-scrollbar-track-piece {
  background: #f5f5f5; 
}

::-webkit-scrollbar-track {
background: none;
}

::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0);
}

.browser, .browser * { transition: width .3s ease; }

html { width: 100%; height: 100%; overflow: hidden; padding-top: 20px; background-color: #fd863f; @include background-image(radial-gradient(0% 100%, ellipse cover, rgba(58,153,167,1) 0%,rgba(58,153,167,0.99) 1%,rgba(70,95,112,0) 100%),radial-gradient(100% 130%, ellipse cover, rgba(120,58,167,1) 0%,rgba(120,58,167,0) 100%), radial-gradient(0% 10%, ellipse cover, rgba(70,95,112,1) 0%,rgba(70,95,112,0) 100%)); }
body { position: relative;  }

.devices { 
  margin: 0 auto 20px;
  width: 600px;
  text-align: center;
  a { 
    margin: 0 20px;
  }
  .mobile { 
    width: 40px;
    height: 60px;
    border: 2px solid #f5f5f5;
    border-top-width: 5px;
    border-bottom-width: 8px;
    background: darken(#f5f5f5,27%);
    display: inline-block;
    border-radius: 3px;
    position:relative;
    &:hover {
      background: darken(#f5f5f5,40%);
    }
    &:before {
      content: '';
      display: block;
      background: #888;
      width: 17px; height: 1px;
      border-radius: 2px;
      position: absolute;
      top: -3px;
      left: 50%;
      margin-left: -8px;
    }
    &:after {
      content: '';
      display: block;
      background: #888;
      width: 3px; height: 3px;
      border-radius: 50%;
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -1px;  
    }
  }
  .tablet { 
    width: 100px;
    height: 133px;
    border: 2px solid #f5f5f5;
    border-top-width: 5px;
    border-bottom-width: 8px;
    background: darken(#f5f5f5,27%);
    display: inline-block;
    border-radius: 3px;
    position:relative;
    &:hover {
      background: darken(#f5f5f5,40%);
    }
    &:before {
      content: '';
      display: block;
      background: #888;
      width: 1px; height: 1px;
      border-radius: 2px;
      position: absolute;
      top: -3px;
      left: 50%;
    }
    &:after {
      content: '';
      display: block;
      background: #888;
      width: 3px; height: 3px;
      border-radius: 50%;
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -1px;  
    }
  }
  .laptop{
    width: 237px;
    height: 150px;
    border: 8px solid #f5f5f5;
    background: darken(#f5f5f5,27%);
    display: inline-block;
    border-radius: 3px 3px 0 0;
    position:relative;
    &:hover {
      background: darken(#f5f5f5,40%);
    }
    &:after{
      content:" ";
      background: darken(#f5f5f5,5%);
      display: block;
      width: 120%;
      position: absolute;
      bottom: -10px;
      margin-left: -10%;
      height: 10px;
      border-radius: 0 0 5px 5px;
    }
    
  }
}

.browser {
  position: relative;
  margin: 20px auto;
  width: 320px;
  min-height: 640px;
  background: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  &.mobile {  
    width: 335px;
    .btn {  
      width: 20%;
    }
    input[type="url"] {
      width: 78%;
    }
  }
  &.tablet {
    width: 790px; 
    .btn {  
      width: 14%;
    }
    input[type="url"] {
      width: 85%;
    }
  }
  &.laptop {
    width: 90%;
    .btn {  
      width: 9%;
    }
    input[type="url"] {
      width: 90%;
    }
  }
  .searchbar {
      border-radius: 5px 5px 0 0;
      background: #dddddd;
      height: 33px;
      width: 100%;
      padding: 5px;
      position: relative;
      .btn {
        position: absolute;
        top: 6px;
        right: 5px;
        border: none;
        display:block;
        text-align: center;
        background: rgba(58,153,167,1);
        color: #fff;
        text-decoration: none;
        font-size: 11px;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
        padding: 3px 8px;
        border-radius: 3px;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
        transition: background-color .3s ease;
        &:hover { 
          background: darken(rgba(58,153,167,1),3%);
        }
      }
      input[type="url"] {
        height: 20px;
        padding: 5px;
        border-radius: 3px;
        border: none;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
        outline:none;
        font-size: 9px;
        color: #aaa;
        &:focus { 
        }
      }
  }
    
}
iframe { width:99.9%; height: 607px; }

var url = $('.url'),
    btn = $('.btn'),
    device = $('.devices a');

btn.on('click',function(e){
  e.preventDefault();
  $('.iframe').html($('<iframe />').attr({"src":url.val()}));
});

device.on('click',function(e){
  e.preventDefault();
  var type = $(this).attr('class');
  console.log(type);
  $('.browser').attr('class','browser '+type);
});