93c4fbc4b9
* Add YIQ Color Contrast mixin * Remove text underline from `.btn` links * Move YIQ variables * Simplify button classes using YIQ color contrast mixin - DRY up button CSS using Sass list and YIQ color contrast mixin. - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them. * Add `.btn--primary` to buttons that just had `.btn` * Apply changes to `/docs` * Add `.btn--primary` class * Update CHANGELOG and history * Add sample form * Abstract colors away into Sass variables for easier themeing * Add "dark" skin * Replace hardcoded color with SCSS variable * Invert Font Awesome icons' colors in author sidebar and footer * Add Sass changes to `/docs` * Use primary button type instead of inverse * Add missing `!default` on `$muted-text-color` * Add `contrast` and `sunrise` skin colors * Add `dirt` skin color * Add `air` skin color option * Add `mint` skin color * Add `btn--primary` class to Submit Comment button * Set skin to `default` * Document skin color options * Add note about skin SCSS import Close #1208
92 lines
2 KiB
SCSS
92 lines
2 KiB
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);
|
|
} |