Contents

/*

Badge & Pills

Lables are used to highlight a text; `badge` have small rounded corners and `pill` have full rounded corners.

Markup:
<span class="badge">Badge Label</span>
<span class="pill">Pill label</span>

Styleguide 10

*/

@if $labels {

    .badge,
    .pill {
        @extend %pill !optional;
        @extend %display-inline-block;
        padding: $pills-padding;
        vertical-align: baseline;
        white-space: nowrap;
    }

    .badge { @include border-radius($base-border-radius); }
    .pill { @include border-radius(500em); }

    .badge, .pill {
        &:empty { @extend %display-none; }
    }

    a {
        &.label:hover,
        &.label:focus,
        &.badge:hover,
        &.badge:focus {
            color: $white;
            @extend %text-decoration-none;
            @extend %cursor-pointer;
        }
    }

/*

Labels used in buttons.

Markup:
<button class="btn btn--default">Action <span class="badge">2</span></button>
<button class="btn btn--default btn--pill">Action <span class="pill">2</span></button>

Styleguide 10.1

*/

    .btn {
        .badge,
        .pill {
            margin: -(nth($pills-padding, 1)) -(nth($pills-padding, 2)) 0 0 ;
        }
    }

}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
rapido-css-0.2.3	stylesheets/components/_labels.scss