@dialpad/dialtone-css/lib/build/less/components/tabs.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: TABS
//
//  These are tab classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/tabs
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • ALTERNATE STYLES
//
//  ============================================================================
//  $   WRAPPERS
//  ----------------------------------------------------------------------------
.d-tablist {
    //  --  COMPONENT CSS VARS
    //  ------------------------------------------------------------------------
    --tab-color-background: var(--dt-action-color-background-base-default);
    --tab-color-text: var(--dt-action-color-foreground-muted-default);
    --tab-font-style: var(--dt-typography-button-md);
    --tab-border-radius: var(--dt-button-size-radius-md);
    --tab-padding-x: calc(var(--dt-space-450) - var(--dt-size-border-100));
    --tab-padding-y: calc(var(--dt-space-400) - var(--dt-size-border-100));

    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-space-300);
    align-items: baseline;

    &:focus {
        outline: 0;
    }

    // Add a bottom border unless no border is requested
    &:not(.d-tablist--no-border)::after {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--zi-base1);
        block-size: var(--dt-size-border-100);
        background-color: var(--dt-color-border-default);
        content: '';
    }
}

//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-tab {
    position: relative;
    display: inline-flex;
    gap: var(--dt-space-400);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--tab-padding-y) var(--tab-padding-x);
    color: var(--tab-color-text);
    font: var(--tab-font-style);
    background-color: var(--tab-color-background);
    border: var(--dt-size-border-100) solid transparent;
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
    cursor: pointer;
    transition-timing-function: var(--ttf-out-quint);
    transition-duration: var(--td100);
    transition-property: background-color, border, color, box-shadow;
    fill: currentColor;

    .d-tablist--no-border &:not(.d-tab--selected) {
        border-radius: var(--tab-border-radius);
    }

    &:first-of-type {
        margin-inline-start: 0;
    }

    &:last-of-type {
        margin-inline-end: 0;
    }

    &::after {
        position: absolute;
        block-size: var(--dt-size-border-200);
        background-color: var(--tab-color-background);
        content: '';
        inset-inline: var(--dt-size-100-negative) var(--dt-size-100-negative);
        inset-block-end: var(--dt-size-100-negative);

        .d-tablist--no-border & {
            background-color: transparent;
        }
    }

    &:focus-visible {
        outline: none;
        box-shadow: var(--dt-shadow-focus-inset);
    }

    &:disabled {
        --tab-color-text: var(--dt-action-color-foreground-disabled-default);

        cursor: not-allowed;
    }

    &:not(:disabled):hover {
        --tab-color-background: var(--dt-action-color-background-muted-hover);
        --tab-color-text: var(--dt-action-color-foreground-muted-hover);
    }

    &:not(:disabled):active {
        --tab-color-background: var(--dt-action-color-background-muted-active);
        --tab-color-text: var(--dt-action-color-foreground-muted-active);
    }

    //  Turn off animations if someone doesn't want them.
    @media (prefers-reduced-motion) {
        transition: none;
    }

    //  ============================================================================
    //  $   SIZES
    //  ----------------------------------------------------------------------------
    .d-tablist--sm & {
        --tab-padding-x: calc(var(--dt-space-400) - var(--dt-size-border-100));
        --tab-border-radius: var(--dt-button-size-radius-xs);
        --tab-font-style: var(--dt-typography-button-xs);

        .d-tablist--no-border &:not(.d-tab--selected) {
            border-radius: var(--tab-border-radius);
        }
    }
}

//  ============================================================================
//  $   SELECTED STYLE
//  ----------------------------------------------------------------------------
.d-tab--selected {
    --tab-color-text: var(--dt-action-color-foreground-base-default);

    z-index: var(--zi-selected);

    &:not(:disabled):hover {
        --tab-color-background: var(--dt-action-color-background-base-hover);
        --tab-color-text: var(--dt-action-color-foreground-base-hover);
    }

    &:not(:disabled):active {
        --tab-color-background: var(--dt-action-color-background-base-active);
        --tab-color-text: var(--dt-action-color-foreground-base-active);
    }

    &::after,
    &:hover::after {
        --tab-color-background: var(--dt-action-color-foreground-base-default);

        .d-tablist--no-border & {
            background-color: var(--tab-color-background);
        }
    }
}

//  ============================================================================
//  $   INVERTED STYLE
//  ----------------------------------------------------------------------------
.d-tablist--inverted {
    --tab-color-text: var(--dt-action-color-foreground-inverted-default);

    &::after {
        background-color: var(--dt-color-border-moderate-inverted);
    }

    &:not(.d-tablist--no-border)::after {
        background-color: var(--dt-color-foreground-primary-inverted);
    }

    .d-tab {
        --tab-color-text: var(--dt-action-color-foreground-inverted-default);

        &:not(:disabled):hover {
            --tab-color-text: var(--dt-action-color-foreground-inverted-hover);
            --tab-color-background: var(--dt-action-color-background-inverted-hover);
        }

        &:not(:disabled):active {
            --tab-color-text: var(--dt-action-color-foreground-inverted-active);
            --tab-color-background: var(--dt-action-color-background-inverted-active);
        }

        &:disabled {
            --tab-color-text: var(--dt-action-color-foreground-disabled-default);

            cursor: not-allowed;
        }
    }

    .d-tab--selected {
        --tab-color-text: var(--dt-action-color-foreground-inverted-default);

        &::after {
            --tab-color-background: currentColor;
        }
    }
}