codecombat/app/styles/mixins.sass

@import "app/styles/bootstrap/mixins"
@import "bower_components/modernizr-mixin/stylesheets/modernizr"

@mixin gradient-radial-custom-stops($innerColor: #555, $innerStop: 20%, $outerColor: #333, $outerStop: 70%)
  background-color: $outerColor
  @include gradient-vertical($innerColor, $outerColor)  // IE6-9 fallback on vertical gradient
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor $innerStop), to($outerColor $outerStop))
  background-image: -webkit-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: -moz-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: -o-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-repeat: no-repeat

@mixin gradient-banner-button($topBottomColor: #2C446A, $middleColor: #3A537F)
  background-color: mix($topBottomColor, $middleColor, 80%)
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($topBottomColor), color-stop(16%, $topBottomColor), color-stop(17%, $middleColor), color-stop(83%, $middleColor), color-stop(84%, $topBottomColor), to($topBottomColor))
  background-image: -webkit-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
  background-image: -moz-linear-gradient(top, $topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
  background-image: -o-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
  background-image: linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
  background-repeat: no-repeat

@mixin banner-button($backgroundColor: #3A537F, $textColor: #FFF)
  $topBottomColor: darken($backgroundColor, 9%)
  @include gradient-banner-button($topBottomColor, $backgroundColor)
  color: $textColor

  &:hover:not(.disabled):not([disabled]), &:focus:not(.disabled):not([disabled])
    @include gradient-banner-button(lighten($topBottomColor, 6%), lighten($backgroundColor, 6%))

  &.active, &:active
    background-image: none
    outline: 0
    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05))

  // Disabled state
  &.disabled, &[disabled]
    cursor: default
    background-image: none
    @include opacity(0.65)
    @include box-shadow(none)

// keyframes mixin from https://gist.github.com/ericam/1607696
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @-o-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

@mixin filter($filters)
  -webkit-filter: $filters
  -moz-filter: $filters
  -o-filter: $filters
  filter: $filters