benivo-ui-library/tabGroup.less

Benivo UI library

.tab-list {
    padding-left: 0;

    &:not(.management-platform-tab-list) {
        border-bottom: 1px solid var(--border-200);

        .tab-list {
            &-item {
                width: auto;
                max-width: 100%;
                flex-basis: auto;
                flex-grow: 1;
                text-align: center;
                display: inline-block;
                list-style: none;
                margin-bottom: -1px;
                padding: 0.5rem 0.75rem;
                cursor: pointer;

                @media @sm {
                    flex-grow: 0;
                }
            }

            &-active {
                background-color: var(--white);
                border: solid var(--border-200);
                border-width: 1px 1px 0 1px;
            }
        }
    }

    // management platform tab styles
    &.management-platform-tab-list {
        border-bottom: solid 1px var(--border-200);

        .tab-list {
            &-item {
                list-style: none;
                margin-bottom: -1px;
                padding-bottom: 1rem;
                text-align: center;
                flex-basis: 33.3333%;
                flex-grow: 0;
                font-size: @small-font-size;
                color: var(--text-600);
                cursor: pointer;
                position: relative;

                @media @sm {
                    flex-basis: 150px;
                }
            }

            &-active {
                border-bottom: solid 4px var(--primary);
                font-weight: @font-weight-medium;
                color: var(--text-600);
            }
        }
    }

    &.overflow-menu {
        padding-left: 4rem;
        padding-right: 2rem;
        box-sizing: content-box;
        margin-left: 0;
        margin-right: 0;
        display: block;
        white-space: nowrap;
        height: 53px;
        max-height: 53px;

        .tab-list-item {
            display: inline-block;
            width: auto;

            &.hidden {
                display: none !important;
            }
        }
    }

    .tab-group-items-cont {
        position: absolute;
        left: 0px;
        top: calc(100% - 2px);
        padding-top: 6px;
        z-index: @zindex-dropdown;

        .tab-group-items {
            padding: 16px 0;
            background-color: var(--white);
            border-radius: 12px;
            width: 250px;
            box-shadow: 0 0 16px var(--border-100);

            &>div {
                text-align: left;
                font-size: 14px;
                font-weight: 400;
                padding: 9px 28px;

                &:hover {
                    background-color: var(--bg-50);
                }

                &.active {
                    font-weight: 600;
                    color: var(--black);
                }
            }
        }
    }

    .menu-cont {
        position: relative;
        flex-basis: auto !important;
        width: auto !important;

        .tabgroup-dots-icon {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 5px;

            div {
                background-color: var(--bg-700);
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin: 0 1px;
            }
        }

        .menu-list,
        .menu-list .sub-menu {
            background-color: var(--white);
            padding: 12px 0px;
            border-radius: 12px;
            box-shadow: @box-shadow;
            text-align: left;
        }

        .menu-list {
            position: absolute;
            right: 0;
            top: 100%;

            .item {
                min-width: 255px;
                position: relative;

                .label {
                    padding: 10px 28px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &.active {
                        font-weight: bold;
                        color: var(--black);
                        background-color: var(--bg-50);
                    }

                    &:hover {
                        background-color: var(--bg-100);
                    }
                }

                .sub-menu {
                    position: absolute;
                    left: 100%;
                    top: 0;
                }
            }
        }
    }
}

.tab-group-overflow-menu {
    z-index: @zindex-fixed  !important;
    padding: 0;
    box-shadow: none;

    font-size: 14px;

    >ul,
    .p-submenu-list {
        background-color: var(--white);
        padding: 14px 0px;
        border-radius: 12px;
        box-shadow: @box-shadow;
        text-align: left;
        font-weight: 400;
    }

    .p-menuitem-link {
        padding: 10px 14px 10px 28px;

        &:focus {
            box-shadow: none;
        }
    }

    .p-menuitem {
        &.active {
            background-color: var(--bg-50);
            color: var(--black);
            font-weight: 600;
        }

        &.p-menuitem-active {
            >.p-menuitem-link {
                background-color: inherit;

                .p-menuitem-text {
                    color: inherit;
                }
            }
        }

        &:hover {
            background-color: var(--bg-50);
        }
    }
}

@media @md-max {
    .p-tieredmenu {
        .p-menuitem-active {
            >.p-submenu-list {
                left: -100%;
            }
        }
    }
}