Compass Paper Stack Mixin

paper-stack.haml

.paper-stack
  %h2 Paper Stack

paper-stack.scss

// The Paper Stack Mixin
// =====================
// mixin has optional image url for paper background... 
// just pass image inside quotes like: 
// paper-stack(#fff, #ccc, "/path/to/image.png")

@mixin paper-stack($paper-color, $border-color, $paper-image-url: false) {
  @if $paper-image-url == false {
    background: $paper-color;
  } @else {
    background: $paper-color url($paper-image-url);
  }
  border: 1px solid $border-color;
  position: relative;
  &:before, &:after {
    content: '';
    position: absolute;
    background: darken($paper-color, 10%);
    border: 1px solid $border-color;
    height: 1px;
  }
  &:before {
    bottom: -3px;
    left: 1px;
    right: 1px;
    z-index: 2;
  }
  &:after {
    bottom: -5px;
    left: 3px;
    right: 3px;
    z-index: 1;
  }
}

// the paper stack implementation
// ===============================

.paper-stack {
  @include paper-stack(#fff, #999);
  @include border-radius(2px);
  @include box-shadow(0 6px 8px rgba(0,0,0,0.15), 0 6px 8px rgba(0,0,0,0.05));
  margin-bottom: 40px;
}