link.scss

/*

Link
Default styling for links

*/
@mixin link($link-colour: $link-colour, $link-colour-hover: $link-colour-hover, $link-underline-weight: 1px, $link-colour-active: $link-colour-active) {
  @include transition(color 0.25s ease-out);
  color: $link-colour;
  background-repeat: repeat-x;
  text-shadow: -0.18em 0 0 $body-colour,0.18em 0 0 $body-colour,-.12em 0 0 $body-colour,0.12em 0 0 $body-colour,-.06em 0 0 $body-colour,0.06em 0 0 $body-colour,0 -1px 0 $body-colour,0 1px 0 $body-colour;
  background-position: 0 92%;
  background-color: $link-colour;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, $link-colour), color-stop(0%, $link-colour));
  background-image: -webkit-linear-gradient(-270deg, $link-colour 100%, $link-colour 0%);
  background-image: linear-gradient(0deg, $link-colour 100%, $link-colour 0%);
  background-color: transparent;
  background-size: 200% $link-underline-weight;

  &:hover {
    @include transition(color 0.25s ease-out);
    color: $link-colour-hover;
  }

  &:active {
    @include transition(color 0s linear);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, $link-colour-active), color-stop(0%, $link-colour-active));
    background-image: -webkit-linear-gradient(-270deg, $link-colour-active 100%, $link-colour-active 0%);
    background-image: linear-gradient(0deg, $link-colour-active 100%, $link-colour-active 0%);
    color: $link-colour-active;
  }
}