_common.sass

// Common, reusable blocks.

@import globals


.drip--mobile
  @media #{$media-ipad}
    display: none



// Site buttons

// Account for all-caps text appearing too high visually.
$button-text-offset: 1px

.button
  +font-header(12)
  +linear-gradient(lighten($black, 15%), $black, $fallback: $black)
  border: none
  border-radius: 2px
  color: $white
  display: block
  line-height: 40px - $button-text-offset
  margin-top: 10px
  min-width: 75px
  padding: 0 15px
  padding-top: $button-text-offset

  &:hover:not([disabled])
    +linear-gradient(lighten($black, 20%), $black)
  &:active:not([disabled])
    +linear-gradient($black, lighten($black, 10%))
  &[disabled]
    opacity: .6


// Simple black header bands

.header-band
  @extend .l-centered
  +font-header(12, 18)
  color: $grey-text
  padding: 10px 0 8px
  text-align: center
  @media #{$media-ipad}
    padding: 20px 0 18px

.header-band--two-lines
  padding: 25px 0 23px
  @media #{$media-ipad}
    padding: 30px 0 28px

.header-band.header-band--serif
  @extend %text--body
  background: $white
  color: $black
  font-size: 10px
  letter-spacing: 1px
  padding: 9px 0
  @media #{$media-ipad}
    font-size: 11px
    padding: 0
    text-align: right
    > span
      border: 1px solid $grey-rule
      border-width: 0 1px
      display: inline-block
      padding: 8px 30px 9px


// Animation helpers  //////////////////

.sprinkle-text
  color: $grey-rule
.sprinkle-text--active
  +transition(color 300ms ease-in)
  color: $orange