Links.

Applies to <a> tags as well as .link elements.

Sass Mixin

@mixin link()

Parameters

None.

<a href="#">A classless link,</a>
<a class="link" href="#">I am a link</a>
and
<a class="link -disabled" href="#">I am a disabled link.</a>
  • Content:
    @use "/resources/styles/config";
    
    a,
    .link {
        --link-color: var(--color, #{config.$link});
        --link-color-hover: var(--color-hover, #{config.$link-hover});
    
        color: var(--link-color);
        cursor: pointer;
        text-decoration: none;
        transition: color config.$fade-easing var(--duration-fast);
    
        &:hover,
        &:active {
            color: var(--link-color-hover);
        }
    
        &.-disabled,
        &[disabled] {
            --link-color: #{config.$disabled};
            cursor: default;
            pointer-events: none;
        }
    
        &__icon {
            height: 1em;
            vertical-align: text-top;
        }
    }
    
  • URL: /components/raw/link/_index.scss
  • Filesystem Path: resources/styles/atoms/link/_index.scss
  • Size: 597 Bytes