Tab Indicator

Bottom Inside / Bottom Outside

The tab indicator is at the bottom of the container. By default it has some left and right padding.

Actual positioning and specific width of the tab indicator is accomplished using more specific selector.

<div class="wrapper-tab-example">
    <span class="tab-indicator tab-bottom-outside tab-slate">
        Indicator
    </span>
</div>

.wrapper-tab-example .tab-bottom-outside {
    left: -1px;
    position: absolute;
    bottom: -20px;
}

Top Inside / Top Outside

The tab indicator is at the top of the container. By default it has some left and right padding.

Actual positioning and specific width of the tab indicator is accomplished using more specific selector.

Colors

Currently only using Green and Slate backgrounds.