cirrus-ui/src/components/tabs.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;
@use '../base/spacing.scss';

@if should-generate-classes($TABS) {
    /* TABS AND TAB CONTAINER */
    .tab-container {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        overflow-x: auto; /* Allow scrollbar to be visible if the width of the tabs exceeds container */
        user-select: none;
        white-space: nowrap;
        align-items: stretch;
        font-size: $font-size-m;

        /* Shift tabs to the left */
        &.tabs--left ul {
            justify-content: flex-start;
        }

        /* Shift tabs to the center */
        &.tabs--center ul {
            justify-content: center;
        }

        /* Shift tabs to the right */
        &.tabs--right ul {
            justify-content: flex-end;
        }

        /* Depth tab styles */
        &.tabs-depth ul {
            box-shadow: 0 2px 3px transparentize($color: fill('gray', '600'), $amount: 0.15);
            border-bottom: 0;

            li {
                a,
                .tab-item-content {
                    margin-bottom: -1px; // Margin was too high for these styles
                }
            }
        }

        /* Classic tab styles */
        &.tabs-classic ul {
            border-bottom-color: fill('gray', '300');
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
            transition: all 0.3s;

            li {
                &:not(.selected) a:hover,
                &:not(.selected) .tab-item-content:hover {
                    background-color: fill('gray', '100');
                    transition: all 0.3s;
                }

                &.selected a,
                &.selected .tab-item-content {
                    color: fill('primary');
                    border-color: fill('gray', '300');
                    border-bottom-color: transparent !important;
                }

                a,
                .tab-item-content {
                    border: 1px solid transparent;
                    border-bottom-color: fill('gray', '300');
                    border-radius: 3px 3px 0 0;
                    cursor: pointer;
                    transition: all 0.3s;
                    margin-bottom: -1px; // Margin was too high for these styles
                }
            }
        }

        /* Tabs that fill the width */
        &.tabs-fill {
            /* Override the -webkit-box display that sizes tab items based on text */
            ul {
                display: flex; /* Equal size tabs */
            }

            li {
                flex-grow: 1;
                flex-shrink: 0; /* Disable shrinking to original width */
                flex-basis: 0;
            }
        }

        /* Different tab sizes */
        @each $name, $size in $tab-font-sizes {
            &.tabs--#{$name} {
                font-size: #{$size};
            }
        }

        /* Tabs are embedded inside an unordered list */
        ul {
            display: flex;
            justify-content: flex-start; /* Move tab items to left side */
            margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
            border-bottom: 2px solid fill('gray', '200'); /* Bottom border of tabs */
            flex-grow: 1;
            list-style: none;
            padding-inline-start: 0;
        }

        li {
            display: block; /* Keep the tabs from extending too far */
            cursor: pointer;
            margin: 0;
            text-align: center;

            &:hover a,
            &:hover .tab-item-content {
                border-bottom-color: transparentize($color: fill('primary'), $amount: 0.6);
                transition: all 0.3s;
            }

            &.selected a,
            &.selected .tab-item-content {
                border-bottom-color: fill('primary');
                color: fill('primary');
                border-width: 2px;
                transition: all 0.3s;
            }

            a,
            .tab-item-content {
                display: flex;
                align-items: center;
                border: 0; // Reset first to remove extra borders form global border style
                border-bottom: 1px solid fill('gray', '200');
                justify-content: center;
                padding: 0.5rem 1rem;
                transition: all 0.3s;
                color: var(--cirrus-fg);
                border-bottom-width: 2px;
                margin-bottom: -2px; /* Get rid of any remaining border lines */
                background-color: var(--cirrus-bg);
            }
        }

        /* Font Awesome Integration */
        /* Left icon */
        .icon:first-child {
            margin-right: 0.75rem;
        }

        /* Right icon */
        .icon:last-child {
            margin-left: 0.75rem;
        }
    }
}