Skip to content

Instantly share code, notes, and snippets.

@ummahusla
Forked from anonymous/A-Pen-by-usf.markdown
Created September 3, 2013 09:04
Show Gist options
  • Save ummahusla/6421417 to your computer and use it in GitHub Desktop.
Save ummahusla/6421417 to your computer and use it in GitHub Desktop.
<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>
@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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment