_mixins.scss

/* ==========================================================================
   MIXINS
   ========================================================================== */

%tab-focus {
  /* Default*/
  outline: thin dotted $warning-color;
  /* Webkit*/
  outline: 5px auto $warning-color;
  outline-offset: -2px;
}

/*
   em function
   ========================================================================== */

@function em($target, $context: $doc-font-size) {
  @return ($target / $context) * 1em;
}


/*
   Bourbon clearfix
   ========================================================================== */

/*
  * Provides an easy way to include a clearfix for containing floats.
  * link http://cssmojo.com/latest_new_clearfix_so_far/
  *
  * example scss - Usage
  *
  * .element {
  *   @include clearfix;
  * }
  *
  * example css - CSS Output
  *
  * .element::after {
  *   clear: both;
  *   content: "";
  *   display: table;
  * }
*/

@mixin clearfix {
  clear: both;

  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

/*
   Compass YIQ Color Contrast
   https://github.com/easy-designs/yiq-color-contrast
   ========================================================================== */

@function yiq-is-light(
  $color,
  $threshold: $yiq-contrasted-threshold
) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);

  $yiq: (($red*299)+($green*587)+($blue*114))/1000;

  @if $yiq-debug { @debug $yiq, $threshold; }

  @return if($yiq >= $threshold, true, false);
}

@function yiq-contrast-color(
  $color,
  $dark: $yiq-contrasted-dark-default,
  $light: $yiq-contrasted-light-default,
  $threshold: $yiq-contrasted-threshold
) {
  @return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default);
}

@mixin yiq-contrasted(
  $background-color,
  $dark: $yiq-contrasted-dark-default,
  $light: $yiq-contrasted-light-default,
  $threshold: $yiq-contrasted-threshold
) {
  background-color: $background-color;
  color: yiq-contrast-color($background-color, $dark, $light, $threshold);
}