impress/app/assets/stylesheets/partials/_campaign-progress.sass

@import "clean/mixins"

// 2015 campaign blue
// $campaign-border-color: #006
// $campaign-background-color: #eef
// $campaign-text-color: #004
// $campaign-link-color: $campaign-text-color + #222

$campaign-border-color: hsl(310, 60%, 40%)
$campaign-background-color: hsl(310, 60%, 97%)
$campaign-text-color: hsl(310, 60%, 20%)
$campaign-link-color: $campaign-text-color + #222

=campaign-progress
  .campaign-progress-wrapper
    border-radius: 8px
    background: desaturate(lighten($campaign-border-color, 30%), 30%)
    background-image: linear-gradient(color-stops(desaturate(lighten($campaign-border-color, 50%), 30%), desaturate(lighten($campaign-border-color, 30%), 30%)))

    border: 4px solid $campaign-border-color
    clear: both
    margin-bottom: 1em
    margin-top: .5em
    position: relative

    .button
      +awesome-button
      +awesome-button-color(#004)
      font-size: 75%
      margin-left: 1em
      padding: .25em .75em

  .campaign-progress
    background: $campaign-border-color
    background-image: linear-gradient(color-stops($campaign-border-color + #222, $campaign-border-color))
    border-right: 1px solid $campaign-border-color

  .campaign-progress-wrapper, .campaign-progress
    height: 2.5em

  .campaign-progress-label
    text-shadow: 1px 1px 0 $campaign-border-color
    color: white
    font-size: 150%
    left: 0
    position: absolute
    top: 0
    text-align: center
    width: 100%

    a
      color: inherit
      display: block
      text-decoration: none

    .button
      position: relative
      top: -2px /* lame hack to align well with text; sigh */

  &.campaign-loaded
    .campaign-progress-wrapper
      visibility: visible