Huesos
Style
Guide

Repositoire

GitHub

Preview

Link: Inverted

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).

Disable buttons by usign the global .disabled helper class.

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

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

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 style="padding: 15px; color: #fff; background-color: #000">
    You are looking at a
    <a href="#" class="link--inverted">link html tag, properly configured with link--inverted 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)
			)
		}
	}
}