Preview

Link: Disabled

Ready

Docs
HTML
Assets

Applies to <a> elements.

As in <button>, you can define a separate appearance for each link state (default and hover). We decided to decouple both states in order to give more room for custom styling and combinations, instead of enforcing a default hover state for every different style.

These are the available strategies:

false - No styling
underline - The old-style, text-decoration:underline
border - Border-bottom with custom width
border-inset - Pseudo-element that fakes a border bottom that grows from bottom to top
mark - Background-color (as in a <mark> element)

Use this values to define a $link-strategy-default and a $link-strategy-hover.

The old-style behavior we all know would be like this:

/* Underline that disappears on hover */
$button-strategy-default: 'underline';
$button-strategy-hover: false;

Setting both states to the same value and using the config to differentiate them is a safe strategy.

$button-strategy-default: 'border-inset';
$button-strategy-hover: 'border-inset';

Mixes can led to interesting results, but careful testing is adviced. It can break.

/* An underline that becomes a border */
$button-strategy-default: 'underline';
$button-strategy-hover: 'border';

Be careful when throwing mark on the mix!
The left and right padding usually applied to ‘mark’ makes it difficult to mix it with other styles (unless you set padding to 0, wich is not recommended).

Disabled links

Disable buttons by usign the global .disabled helper class.

This class is configured to detect context and apply the correct disabling properties.

Inverted links

Helper class .link--inverted will apply a color inversion on the link, similar to using invert-links() mixin.

Alternative links.

Alternative strategies can be created by populating the $link-alternative-strategies map with combinations of default and hover values.

We provide a commented example on _config.scss

$link-alternative-strategies: (
    mark : (
        default : 'mark', 
        hover : 'mark'
    ),
);

The generated classes will take the following format: .link--#{strategy}. For example, the mark strategy consisting of mark as default and hover becomes .link--mark.

Setting $link-alternative-strategies to a falsy value avoids the programatic generation of classes and avoids bloating your css.

Example




<p>
    You are looking at a
    <a href="#" class="disabled">link html tag, properly configured with disabled class</a>, inside a text that lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus libero reprehenderit tempora mollitia necessitatibus delectus facilis. Vel repellat quod earum quo aperiam itaque veritatis delectus esse. Consectetur excepturi quasi corrupti.
</p>

Assets

Filesystem Path: src/components/html/link/_link.scss
Size: 670 Bytes


                                a {
	@include set-link();
	&.link--inactive {
		@include kill-link();
	}
	// TODO: is this consistent enough?
	&.disabled {
		@include kill-link(get-color(state, muted));
	}
	&.link--inverted {
		@include set-link(
			$inverse-link-color,
			$inverse-link-visited, 
			$inverse-link-hover,
			$inverse-link-active,
			$inverse-link-strategy-default,
			$inverse-link-strategy-hover
		);
	}
}


// Link alternative styles
@if $link-alternative-strategies {
	@each $strategy, $states in $link-alternative-strategies {
		.link--#{$strategy} {
			@include set-link(
				$strategy-default: map-get($states, default),
				$strategy-hover: map-get($states, hover)
			)
		}
	}
}