static/scss/globals.scss
@import "lib";

$darkGrey: #494a4c;
$MED_TURK: #96bcb1;
$blue: #7b8fa8;
$lightBlue: #e6fff7;

$dark: #697e77;
$standard: #96bcb1;
$light: #c4e6dd;

$BASE-INDEX: 1;
$MOBILE-WIDTH: 414px;

@mixin font-light($size: 24px) {
  font: 300 $size/1 'Roboto', sans-serif;
}

@mixin sub-heading() {
  font: 36px/1 'Roboto Condensed', sans-serif;
  color: #fff;
  margin-bottom: 40px;
}

@mixin body-copy() {
  font: 24px/1.2 'Roboto', sans-serif;
  margin-bottom: 10px;
}

@mixin image-text($background, $width, $height, $display: block) {
  overflow: hidden;
  width: $width;
  height: 0;
  padding-top: $height;
  display: $display;
  background: $background no-repeat;
}

@mixin center-block() {
  margin: 0 auto;
}

@mixin border-box() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * Taken from: https://gist.github.com/thbar/1319313
 */
@mixin gradient($from, $to) {

  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient($from, $to);

  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));

  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient($from, $to);

  /* Opera 11.10+ */
  background-image: -o-linear-gradient($from, $to);

  /* IE */
  background-image: -ms-linear-gradient(top, $from 0%, $to 100%);
  filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr="$from", endColorstr="$to")';

}

@mixin small-button() {
  @include button;
  @include button--small;
}

@mixin logo($type: light) {
  @if $type == dark {
    @include image-text($background: url(/static/images/logo_dark.png), $width: 311px, $height: 117px);
  } @else {
    @include image-text($background: url(/static/images/logo_light.png), $width: 311px, $height: 117px);
  }
}
