SU-SWS/decanter

View on GitHub
core/src/scss/utilities/mixins/link/_link-glyph.scss

Summary

Maintainability
Test Coverage

///
/// Display a glyph after a link.
///
/// @name link-glyph
///
/// @param {string} $glyph - Character to display after the link, e.g. '›', '\00BB'.
/// @param {boolean} $animate  - Whether or not to animate on hover.
///
/// @group mixin
@mixin link-glyph($glyph, $animate: true) {
  text-decoration: none;

  &::after {
    content: $glyph;
    display: inline-block;
    @include margin(null 0.3em -1px 0.4em);
    transition: transform 0.2s ease-in-out;
  }

  &:hover,
  &:focus {
    &::after {
      @if $animate {
        transform: translateX(0.2em);
      }
    }
  }
}