// /** // * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved. // * Licensed under GNU General Public License version 2 or later; see LICENSE.txt // */ @if $trace-imports { @debug 'imported'; } // Wraps @content in a selector - call from within a mixin // ========================================================================== // @example @include wrap(a){ color: Blue; }; => a { color: Blue; } // @example @include wrap(false){ color: Blue; }; => color: Blue; // -------------------------------------------------------------------------- // @param $selector [String] the selector to be used: a, .class, #id, ::pseudo @mixin wrap($selector) { @if $selector { #{$selector} { @content; } } @else { @content; } } // Mixin anchor colors in a bulletproof way // ========================================================================== // @example @include wrap(a){ color: Blue; }; => a { color: Blue; } // @example @include wrap(false){ color: Blue; }; => color: Blue; // -------------------------------------------------------------------------- // @param $selector [String] the selector to be used or false for none // @param $color [String] the color for an unvisited link // @param $color-hover [String] the color for a hover link // @param $color-active [String] the color for an active link // @param $color-visited [String] the color for a visited link // @param $mixin-states [Boolean] add states for use with JavaScript @mixin anchor-color($selector, $color, $color-hover, $color-active, $color-visited, $mixin-states: true) { @include wrap($selector) { color: $color; // Check if they are a different color then the default, else skip it $color-hover: if($color-hover==$color, false, $color-hover); $color-active: if($color-active==$color, false, $color-active); $color-visited: if($color-visited==$color, false, $color-visited); @if $mixin-states { @if $color-hover { &:hover { @extend .is-#{$selector}-hover; } } @if $color-active { &:active { @extend .is-#{$selector}-active; } } @if $color-visited { &:visited { @extend .is-#{$selector}-visited; } } } @else { @if $color-hover { &:hover { color: $color-hover; } } @if $color-active { &:active { color: $color-active; } } @if $color-visited { &:visited { color: $color-visited; @if $color-hover { &:hover { color: $color-hover; } } @if $color-active { &:active { color: $color-active; } } } } } } @if $mixin-states { @if $color-hover { .is-#{$selector}-hover { color: $color-hover; } } @if $color-active { .is-#{$selector}-active { color: $color-hover; } } @if $color-visited { .is-#{$selector}-visited { color: $color-visited; @if $color-hover { &:hover { @extend .is-#{$selector}-hover; } } @if $color-active { &:active { @extend .is-#{$selector}-active; } } } } } }