app/assets/stylesheets/directives/uploads.css.scss
// uploads widget, there can only be one!

#uploads {
  display: none;
  @include background(linear-gradient(#FFF, #EEE));
  color: black;

  @include border-radius(2px);

  .top {
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  ul.uploads {
    li.replay {
      padding: 5px;
    }

    span.spinner {
      display: inline-block;
      @include spinner(8px);
      position: static;
      margin-right: 8px;
    }
    span.nospinner {
      visibility: hidden;
    }
  }
  
  ul.uploads-expanded {
    display: block;

    li.replay {
      display: block;
    }
  }
}

.dialog-uploads {
  // we still need !important to override the element style set by 
  // jquery-ui's dialog
  width: 500px !important;

  .ui-dialog-titlebar {
    display: none;
  }

  min-height: 50px;
  max-height: 600px;
}

// override to make the modal dialog obscure the background a lot.
.ui-widget-overlay {
  opacity: .8;
}

// this trick seems to have been around forever.. and nothing new in CSS3 :(

$upload-width: 100px;
$upload-height: 30px;
$upload-padding: 8px;

// TODO: I want the bar to continue to 100, stay there for a second and then
// fade out. Currently, as soon as it'll hit 100, it disappears.

.button-upload {
  position: relative;

  // HAX: it's aligning differently and it's not an upload bar anymore, so we
  // could just as well make it a normal button :(
  margin-top: -2px;

  // @include button(#222, #777, 1.2);
  @include button2(desaturate(#27bedb, 10%), #FFF);

  // standard padding from button2, taking over here for clarity
  padding: $upload-padding 14px;
  overflow: hidden;

  width: $upload-width;
  height: $upload-height - ($upload-padding * 2);
  line-height: $upload-height;
  vertical-align: middle;

  @include transition(0.5s);
  * {
    @include transition(0.2s);
  }

  .icon {
    margin-top: -3px;
  }

  span.caption {
    z-index: 2;
    width: 100%;
    height: $upload-height;
    line-height: $upload-height + 2;
    vertical-align: middle;

    position: absolute;
    top: 0px;
    left: 0px;

    text-align: center;

    span {
      display: none;
    }
  }

  .progress {
    display: none;

    z-index: 1;
    height: 100%;

    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    background-color: rgba(0,0,0,0.3);

    @include border-radius(2px);
    @include transition(1s);
  }
  
  input {
    z-index: 3;

    @include opacity(0);
    position: absolute;
    top: 0px;
    right: 0px;
    font-size:300px;
    border: solid transparent;
    border-width: 0px 0px 100px 200px;
    cursor: pointer;
    display: block;
  }
}

.button-upload.processing {
  
  span.caption {
    @include box-shadow(inset 0 0 14px rgba(0, 255, 0, 0.2));
 
    span {
      display: inline;
    }

    .spinner {
      display: block;
    }
  }
  
  .progress {
    display: block;
  }
}