A-Pen-by-usf.markdown

A Pen by usf

inspired by http://dribbble.com/shots/1219202-Drag-Drop-User-Interface

A Pen by usf on CodePen.

License.

index.html

<div class="widget">
  <header>
     <i class="icon-save icon-2x"></i>
     <i class="icon-file-alt icon-2x"></i>
     <i class="icon-move icon-2x"></i>
     <i class="icon-list  icon-2x right"></i>
  </header>
  <section class="content">
    <div class="drag-area">
      <h2>Drag & Drop</h2>
      <div class="bar"></div>
    </div>
  </section>
</div>

style.scss

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

$w: 500px;


* {
  @include box-sizing(border-box);
  @include transition(all 0.2s)
}

body {
  background: #CDD1B8;
  font: 14px 'Open Sans', sans-serif;
  color: #DBDEDA;
  line-height: 20px;
}

.widget {
  width: $w;
  margin: 50px auto;
  background: #343643;
  border: 10px solid #ffffff;
  @include box-shadow(10px 10px 5px 1px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1));
}

header {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  @include box-shadow(0 2px 10px 0 rgba(0,0,0,0.4));
  
  i {
    padding: 0 15px;
    border-right: 1px solid #2C2C38;
    @include box-shadow(1px 0 0 0 rgba(255,255,255,0.1));
    @include text-shadow(0 2px 2px rgba(0,0,0,0.6));
    cursor: pointer;
  }
  i.right {
    float: right;
  }
}

.content {
  padding: 30px;
  
  .drag-area {
      height: 200px;
      padding-top: 40px;
      border: 3px dashed #2C2C38;
      text-align: center;
    
      h2 {
        margin-bottom: 20px;
        font-size: 28px;
        line-height: 1.5em;
        font-weight: bold;
        @include text-shadow(0 2px 2px rgba(0,0,0,0.6));
      }
  }
}

    
    .bar {
      position: relative;
      display: inline-block;
      width: 250px;
      height: 30px;
      background: #40424f;
      border: 1px solid rgba(0,0,0,0.4);
      @include border-radius(30px);
      @include box-shadow(inset 0 1px 4px 0 rgba(0,0,0,0.4));
  
      &:after {
        content: '';
        position: absolute;
        top:0;
        left: 0;
        width: 30%;
        height: 28px;
        @include background-image(linear-gradient(top, #c1e082 0%,#a0c655 100%));
        @include border-radius(30px 0 0 30px);
      }
    }