Tabs

Tabs are used to switch between views.

Examples

Below examples use pure html markup and css classes. This is only for a presentation purposes. We highly recommend using a specialized web-component, that abstracts away whole complexity with writing markup from the base.

Primary with first tab selected

HTML

<div class="tabs">
    <div
        selected
        class="tabs__tab">
            VAT
    </div>

    <div class="tabs__tab">
        bez VAT
    </div>
</div>

LESS

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

Tabs variables

Variables used to style tabs.

@tabColor: @globalFontColorTertiary;
@tabFontSize: @fontSizeInPxXS;

@tabBackgroundColor: inherit;
@tabHoverColor: @primaryColor;

@tabPaddingVertical: 1;
@tabPaddingHorizontal: 15;
@tabBorderRadius: 4px;
@tabBorder: 1px solid @globalFontColorTertiary;

@tabSelectedBorder: 1px solid @primaryColor;
@tabSelectedColor: @neutralColors0;
@tabSelectedBackgroundColor: @primaryColor;

If you want to change tabs styles, you can just change the variables. To change default backgroundColor just modify @tabBackgroundColor variable.

@tabBackgroundColor: red;

Tabs standard styles

Here are standard tabs styles.

.tabs {
    display: flex;
    flex-wrap: wrap;
    border-radius: @tabBorderRadius;

    &__tab {
        .font-size(@tabFontSize);
        .line-height(@lineHeightInPxS);
        color: @tabColor;
        background-color: @tabBackgroundColor;

        .pixel-to-rem(padding-top, @tabPaddingVertical);
        .pixel-to-rem(padding-bottom, @tabPaddingVertical);
        .pixel-to-rem(padding-left, @tabPaddingHorizontal);
        .pixel-to-rem(padding-right, @tabPaddingHorizontal);

        cursor: pointer;

        border: @tabBorder;

        &[selected] {
            .weight-semibold();

            color: @tabSelectedColor;

            border: @tabSelectedBorder;
            border-radius: @tabBorderRadius;

            background-color: @tabSelectedBackgroundColor;

            &:hover {
                color: @tabSelectedColor;
            }
        }

        &:hover {
            color: @tabHoverColor;
            border-color: @tabHoverColor;
        }

        &:first-child {
            &:not(&:last-child) {
                border-radius: @tabBorderRadius 0 0 @tabBorderRadius;
                border-right: none;
            }
        }

        &:last-child {
            &:not(&:first-child) {
                border-radius: 0 @tabBorderRadius @tabBorderRadius 0;
                border-left: none;
            }
        }
    }
}