Indicator

Use indicator element for showing some number, for example an amount of notifications to the user.

Examples

Storefront theme provides predefined stylings for two indicators those are: primary and secondary indicators.

Notifications

Products

HTML

<div class="indicator" data-value="32">Notifications</div>
<div class="indicator indicator_secondary" data-value="999+">Products</div>

Indicator tags

The .indicator classes were designed to be used with <div> elements. However, you can use them with any element. Eg. <span> or <h2>.

Usage with icons

Each indicator can be displayed with an icon or picture or any other element and represent a badge. We can have it on the top right of the icon:

HTML

<div class="indicator" data-value="8">
    <svg class="icon">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
</div>

On the top left:

HTML

<div class="indicator indicator_top-left" data-value="2">
    <svg class="icon">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
</div>

Bottom right:

HTML

<div class="indicator indicator_bottom-right" data-value="9">
    <svg class="icon">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
</div>

Or bottom left:

HTML

<div class="indicator_icon_container indicator_bottom-left" data-value="17">
    <svg class="icon">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
</div>

LESS

You can modify any link less variable in your User Less section to change indicator styles.

Indicators variables

Variables used to style indicators.

@indicatorColorPrimary: @neutralColors0;
@indicatorBgColorPrimary: @secondaryColor;
@indicatorBorderColorPrimary: @indicatorColorPrimary;

@indicatorColorSecondary: @neutralColors0;
@indicatorBgColorSecondary: @primaryColors500;
@indicatorBorderColorSecondary: @indicatorColorPrimary;

@indicatorFontSizeInPxXS: @fontSizeInPxXS;
@indicatorLineHeightInPxXS: @lineHeightInPxXS - 5;

@indicatorMinWidth: 21px;
@indicatorBorderWidth: 1px;
@indicatorBorderStyle: solid;
@indicatorBorderRadius: 17px;

@indicatorPaddingTop: 2;
@indicatorPaddingRight: 6;
@indicatorPaddingBottom: 2;
@indicatorPaddingLeft: 6;

@indicatorTransformTopRight: translate(80%, -50%);
@indicatorTransformTopLeft: translate(-80%, -50%);
@indicatorTransformBottomRight: translate(80%, 50%);
@indicatorTransformBottomLeft: translate(-80%, 50%);
@staticIndicatorSpacing: @globalSpacing * 0.25;

If you want to change indicators styles, you can just change the variables. To change default font-size just modify @indicatorFontSizeInPxXS variable.

@indicatorFontSizeInPxXS: 6px;

To change primary indicator look:

@indicatorColorPrimary: #ff0000;
@indicatorBgColorPrimary: #2d4e45;
@indicatorBorderColorPrimary: #00ff00;

Indicator mixins

Those mixins are used to create indicators.

.indicator-decorate-size (@fontSize, @paddingT, @paddingR, @paddingB, @paddingL, @lineHeight) {
    width: fit-content;
    .font-size(@fontSize);
    .line-height(@lineHeight);
    .padding-to-unit(@paddingT, @paddingR, @paddingB, @paddingL);
}

.indicator-decorate-appearance (@color, @bgColor, @borderColor) {
    color: @color;
    background-color: @bgColor;
    border: @indicatorBorderWidth @indicatorBorderStyle @borderColor;
}


.indicator-decorate-icon (@top, @right, @bottom, @left, @transform) {
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    transform: @transform;
}

If you want to create tertiary variant you can use a .indicator-decorate-appearance mixin (You have to provide those variables). Note that we use a pseudo element :before for styling the indicator.

.indicator {
    &_tertiary {
        &:before {
            .indicator-decorate-appearance(@indicatorColorTertiary, @indicatorBgColorTertiary, @indicatorBorderColorTertiary);
        }
    }
}

Indicators styles

Here are standard indicator styles.

.indicator {
    position: relative;
    display: inline-flex;

    &::before {
        content: attr(data-value);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: @indicatorBorderRadius;
        .indicator-decorate-size(
            @indicatorFontSizeInPxXS,
            @indicatorPaddingTop,
            @indicatorPaddingRight,
            @indicatorPaddingBottom,
            @indicatorPaddingLeft,
            @indicatorLineHeightInPxXS
        );
        min-width: @indicatorMinWidth;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        .indicator-decorate-appearance(@indicatorColorPrimary, @indicatorBgColorPrimary, @indicatorBorderColorPrimary);
        .indicator-decorate-icon(0, 0, unset, unset, @indicatorTransformTopRight);
        .weight-semibold();
    }

    &_top-left {
        &::before {
            .indicator-decorate-icon(0, unset, unset, 0, @indicatorTransformTopLeft);
        }
    }

    &_bottom-right {
        &::before {
            .indicator-decorate-icon(unset, 0, 0, unset, @indicatorTransformBottomRight);
        }
    }

    &_bottom-left {
        &::before {
            .indicator-decorate-icon(unset, unset, 0, 0, @indicatorTransformBottomLeft);
        }
    }

    &_secondary {
        &::before {
            .indicator-decorate-appearance(@indicatorColorSecondary, @indicatorBgColorSecondary, @indicatorBorderColorSecondary);
        }
    }

    &_static {
        margin-right: @staticIndicatorSpacing;

        &::before {
            position: static;
            transform: initial;
        }
    }
}