Label

Usage #

By default, the label module has the label class and several color modifiers to show different states or types.

<span class="label">...</span>
<span class="label label-info">...</span>
<span class="label label-positive">...</span>
<span class="label label-important">...</span>
<span class="label label-dark">...</span>
<span class="label label-light">...</span>

Close

Label can have a close icon. To do this, the close module can be placed inside it. The close icon inherits the color of the label text automatically.

Note: Superkube is a javascript-agnostic framework, so it does not provide a way to hide or show something by clicking.

<span class="label">
    Label
    <span class="close"></span>
</span>

Scales #

By default, labels come in several sizes.

• caps
• default
• large

<span class="label label-info">Default</span>
<span class="label label-info label-large">Large</span>
<span class="label label-info label-caps">Caps</span>

You can add your own size or change an existing one by extending the type scale in $scales. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        label: (
            large: 18px, // change existing size
            giga: 28px // add new size
        )
    )
));

In this case, Superkube will automatically generate the label-giga modifier and change the label-large with new value of text size.

<span class="label label-info label-large">Large</span>
<span class="label label-info label-giga">Giga</span>

Colors #

For the label module, you can add a color to existing colors, override existing colors, add a new color group. See also how to work with colors for modules.

Add color

To add a new color for a module, first make sure that it is in the color palette. If not, add a new color to $palette.

// =Palette
$palette: map-extend($palette, (
    yellow: (
        base: #FFBB00
    )
));

Now extend the colors of the module with a new modifier and add the color from the palette.

// =Colors
$colors: map-extend($colors, (
    label: (
        default: (
            accent: (
                background-color: palette(yellow, base),
                color: palette(black)
            )
        )
    )
));

That's all. Now Superkube will automatically generate a new label-accent color modifier.

<span class="label label-accent">Default</span>
<span class="label label-accent label-large">Large</span>
<span class="label label-accent label-caps">CAPS</span>

Override existing colors

Any default color in a module can be overridden. Also see that we added the label border color to show how easy it is to override any module colors.

// =Colors
$colors: map-extend($colors, (
    label: (
        default: (
            info: (
                background-color: palette(yellow, lighter),
                color: palette(yellow, darker),
                border-color: rgba(palette(yellow, base), .8)
            )
        )
    )
));

Note: You must first add a color to the palette if it's not already there, and only then use the colors from the palette in $colors. Here's more on how to work with colors in Superkube.

Now the label with the label-info modifier looks different than the default one. It has a yellow background and border.

<span class="label label-info">Info</span>
<span class="label label-info label-large">Info</span>
<span class="label label-info label-caps">Info</span>

Add color group

You can add a complete group of colors to a module, not just one modifying color. This can be useful if you use different variants of labels in your design for various cases.

To add a new color group, extend $colors by specifying the name of the modifier group and the modifiers themselves. Let's say we want to make labels without a background and with a colored border.

// =Colors
$colors: map-extend($colors, (
    label: (
        outline: (
            base: (
                background-color: transparent,
                color: palette(neutral, darker),
                border-color: palette(black-o, 20)
            ),
            info: (
                background-color: transparent,
                color: palette(active, dark),
                border-color: palette(active, light)
            ),
            positive: (
                background-color: transparent,
                color: palette(positive, dark),
                border-color: palette(positive, light)
            ),
            important: (
                background-color: transparent,
                color: palette(negative, dark),
                border-color: palette(negative, light)
            ),
            dark: (
                background-color: transparent,
                color: palette(black),
                border-color: palette(black-o, 80)
            ),
            light: (
                background-color: transparent,
                color: palette(white),
                border-color: palette(white-o, 80)
            )
        )
    )
));

Now Superkube will automatically generate a new group of labels with label-outline modifier.

<span class="label label-outline">Default</span>
<span class="label label-outline label-info">Info</span>
<span class="label label-outline label-positive">Positive</span>
<span class="label label-outline label-important">Important</span>
<span class="label label-outline label-dark">Dark</span>
<span class="label label-outline label-light">Light</span>

You can use both labels in your HTML, even at the same time.

<span class="label label-info">Info</span>
<span class="label label-outline label-info">Info</span>

Variants #

In Superkube you can easily create module modifiers, which will be automatically generated from the variables. See also how to work with variants for modules.

Add new variant

To add a new variant of a module, extend $variants and specify variants with those CSS properties that should be different from the default.

// =Variants
$variants: map-extend($variants, (
    label: (
        rounded: (
            padding: 4px 12px,
            border-radius: 99px
        )
    )
));

In this case Superkube will automatically generate the label-rounded class, with the properties specified in the variables. Now you have a modifier, with which you can quickly add or change the appearance of the module.

<span class="label label-rounded label-positive">Positive</span>
<span class="label label-rounded label-large label-positive">Positive</span>
<span class="label label-rounded label-caps label-positive">Positive</span>

Override existing variant

In addition to creating a new variant, you can override the existing default appearance for module. Extend $variants with the new default badge properties.

// =Variants
$variants: map-extend($variants, (
    label: (
        default: (
            font-family: $font-monospace,
            font-weight: bold,
            padding: 5px 12px
        )
    )
));

Variables #

The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values

// =Type
$scales: (
    type: (
        label: (
            caps: 11px,
            default: 12px,
            large: 14px
        )
    )
);

// =Colors
$colors: (
    label: (
        default: (
            base: (
                background-color: palette(neutral, lighter),
                color: palette(neutral, darker)
            ),
            info: (
                background-color: palette(active, lighter),
                color: palette(active, darker)
            ),
            positive: (
                background-color: palette(positive, lighter),
                color: palette(positive, darker)
            ),
            important: (
                background-color: palette(negative, lighter),
                color: palette(negative, darker)
            ),
            dark: (
                background-color: palette(black),
                color: palette(neutral, lightest)
            ),
            light: (
                background-color: palette(white),
                color: palette(neutral, darker)
            )
        )
    )
);

// =Variants
$variants: (
    label: (
        default: (
            font-weight: 600,
            border-radius: radius(base),
            padding: 4px 9px,
            border: 1px solid transparent
        ),
        caps: (
            padding: 5px 8px 4px 8px,
            text-transform: uppercase
        )
    )
);