Huesos
Style
Guide

Repositoire

GitHub

Preview

Tag

Used for tag-like elements. They can be keywords, but also small elements that need some visual highlighting.

They need to be set on inline or inline-block elements.

If the .tags is a link, it overrides the link decoration and switches to a background-color modification.

A small margin is applied in order to allow for lists of tags.

Modifiers will be generated following the states map on $colors.

You can choose the color strategy by setting $tag-strategy to split or contrast.

Example

<!-- Default -->
<div class="mb">
    <span class="tag ">This is a normal tag!</span>
    <a class="tag ">This is a normal tag!</a>
</div>


<!-- Success -->
<div class="mb">
    <span class="tag tag--success">This is a success tag!</span>
    <a class="tag tag--success">This is a success tag!</a>
</div>


<!-- Warning -->
<div class="mb">
    <span class="tag tag--warning">This is a warning tag!</span>
    <a class="tag tag--warning">This is a warning tag!</a>
</div>


<!-- Error -->
<div class="mb">
    <span class="tag tag--error">This is an error tag!</span>
    <a class="tag tag--error">This is an error tag!</a>
</div>

Assets

  • Filesystem Path: src/components/elements/tag/_tag.scss
  • Size: 1.9 KB 
  • .tag {
    display:inline-block;
    vertical-align: bottom;
    padding: $tag-padding;
    @include ritmo-font-size($tag-font-size);

    @if $tag-strategy == 'contrast' {
        @include background-contrast($tag-default-color);
    } @else if $tag-strategy == 'split' {
        @include background-split-color($tag-default-color); 
    }
    border-radius: $border-radius;
    margin-right: $gutter / 3;
    font-weight:normal;

    .right & {
        margin-right:0;
        margin-left: $gutter / 3;
    }
    .center & {
        margin-right: $gutter / 6;
        margin-left: $gutter / 6;
    }
}

a.tag {
    @include kill-link-decoration();
    cursor:pointer;
    // Keep the padding!
    padding: $tag-padding;

    &:hover,
    &:focus {
        // Keep the padding!
        padding: $tag-padding;

        @if $tag-strategy == 'contrast' {
            @include background-contrast(darken-color($tag-default-color));
        } @else if $tag-strategy == 'split' {
            @include background-split-color(lighten-color($tag-default-color)); 
        }
    }
}

@each $key, $value in map-get($colors, state) {
    .tag--#{$key} {
        @if $tag-strategy == 'contrast' {
            @include background-contrast($value); 
        } @else if $tag-strategy == 'split' {
            @include background-split-color($value); 
        } @else {
            @error "You must provide a valid $tag-strategy value";
        }
    }
}

@each $key, $value in map-get($colors, state) {
    a.tag--#{$key} {
        &:hover,
        &:focus {
            @if $tag-strategy == 'contrast' {
                @include background-contrast(darken-color($value)); 
            } @else if $tag-strategy == 'split' {
                @include background-split-color(lighten-color($value)); 
            } @else {
                @error "You must provide a valid $tag-strategy value";
            }
        }
    }
}