/* ==========================================================================
MIXINS ========================================================================== */
%tab-focus {
/* Default*/ outline: thin dotted $focus-color; /* Webkit*/ outline: 5px auto $focus-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);
}