hacks-guide-minimal-mistake.../_sass/minimal-mistakes/_mixins.scss

92 lines
2 KiB
SCSS
Raw Permalink Normal View History

2015-01-20 21:25:57 +01:00
/* ==========================================================================
2016-03-10 17:13:54 +01:00
MIXINS
2015-01-20 21:25:57 +01:00
========================================================================== */
2016-03-10 17:13:54 +01:00
%tab-focus {
/* Default*/
2018-11-26 02:19:24 +01:00
outline: thin dotted $focus-color;
/* Webkit*/
2018-11-26 02:19:24 +01:00
outline: 5px auto $focus-color;
2014-07-31 19:09:32 +02:00
outline-offset: -2px;
}
2015-04-17 12:43:36 +02:00
/*
2016-03-10 17:13:54 +01:00
em function
2015-01-20 21:25:57 +01:00
========================================================================== */
2016-03-10 17:13:54 +01:00
@function em($target, $context: $doc-font-size) {
@return ($target / $context) * 1em;
2014-07-31 19:09:32 +02:00
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2016-03-10 17:13:54 +01:00
Bourbon clearfix
2015-01-20 21:25:57 +01:00
========================================================================== */
2014-07-31 19:09:32 +02:00
/*
* 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;
* }
*/
2014-07-31 19:09:32 +02:00
2016-03-10 17:13:54 +01:00
@mixin clearfix {
2016-03-11 21:55:06 +01:00
clear: both;
2016-03-21 21:36:24 +01:00
2016-03-10 17:13:54 +01:00
&::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);
}