Boilerplate Mixins

_mixins.css.scss

// cross-browser font rendering

@mixin font-smoothing($value: on) {
    @if $value == on {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @else if $value == off {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

// remove mobile safari default tap highlight

@mixin tap-highlight() {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


// fill and set box sizing

@mixin fill($width: 100%) {
  @include box-sizing(border-box);
  width: $width;
}


// use with googles web font loader to add fade-in effects to elements after web fonts have finished loading

$font-load-transform        : 15px;
$font-load-fade-timing      : 400ms;
$font-load-transform-timing : 750ms;

@mixin font-loading($style: 'fade-in') {
  @include backface-visibility(hidden);
  @if $style == 'fade-in' {
    @include transition(opacity $font-load-fade-timing ease);
    .wf-loading & {opacity: 0;}
  }
  @else if $style == 'fade-up-in' {
    @include transition(opacity $font-load-fade-timing ease,
                        transform $font-load-transform-timing ease);
    .wf-loading & {
      opacity: 0;
      @include transform(translate3d(0, $font-load-transform, 0));
    }
  }
  @else if $style == 'fade-down-in' {
    @include transition(opacity $font-load-fade-timing ease,
                        transform $font-load-transform-timing ease);
    .wf-loading & {
      opacity: 0;
      @include transform(translate3d(0, -$font-load-transform, 0));
    }
  }
  @else if $style == 'fade-right-in' {
    @include transition(opacity $font-load-fade-timing ease,
                        transform $font-load-transform-timing ease);
    .wf-loading & {
      opacity: 0;
      @include transform(translate3d($font-load-transform, 0, 0));
    }
  }
  @else if $style == 'fade-left-in' {
    @include transition(opacity $font-load-fade-timing ease,
                        transform $font-load-transform-timing ease);
    .wf-loading & {
      opacity: 0;
      @include transform(translate3d(-$font-load-transform, 0, 0));
    }
    .wf-loading & {
      @include transition(none);
    }
  }
}