cvat/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

// Copyright (C) 2020 Intel Corporation
//
// SPDX-License-Identifier: MIT

@import 'base.scss';

.cvat-objects-appearance-collapse.ant-collapse {
    width: 100%;
    bottom: 0px;
    position: absolute;
    border-radius: 0px;

    > .ant-collapse-item {
        border: none;
        > .ant-collapse-header {
            padding-top: 2.5px;
            padding-bottom: 2.5px;
            background: $header-color;
            border-radius: 0px;
            height: 25px;
        }
        > .ant-collapse-content {
            background: $background-color-2;
            border-bottom: none;
            height: 230px;
        }
    }
}

.cvat-object-sidebar-icon {
    fill: $objects-bar-icons-color;
    color: $objects-bar-icons-color;

    font-size: 15px;

    &:hover {
        transform: scale(1.1);
    }
}

.cvat-objects-sidebar-tabs.ant-tabs.ant-tabs-card {
    background: $header-color;
    box-sizing: border-box;
    border: none;

    .ant-tabs-card-bar {
        border: none;
        margin-bottom: 0px;
        padding-top: 25px;

        .ant-tabs-tab {
            background: $transparent-color;
            border: none;

            &:nth-child(1) {
                margin-left: 5px;
            }
        }

        .ant-tabs-tab.ant-tabs-tab-active {
            background: $objects-bar-tabs-color;
        }
    }
}

.cvat-objects-sidebar-states-header {
    background: $objects-bar-tabs-color;
    padding: 5px;

    > div:nth-child(1) > div:nth-child(1) {
        height: 32px;
    }

    > div:nth-child(2) {
        margin-top: 5px;

        > div {
            text-align: center;
            margin: 0px 2px;

            > i {
                @extend .cvat-object-sidebar-icon;
            }

            &:nth-child(4) {
                text-align: right;

                > .ant-select {
                    margin-left: 5px;
                    width: 60%;
                }
            }
        }
    }
}

.cvat-objects-sidebar-states-header {
    height: 80px;
}

.cvat-objects-sidebar-states-list {
    background-color: $background-color-2;
    height: calc(100% - 80px);
    overflow-y: auto;
}

.cvat-objects-sidebar-state-active-item {
    background: $active-object-item-background-color;
}

.cvat-objects-sidebar-state-item-color {
    width: 7px;
    opacity: 1;

    &:hover {
        opacity: 0.7;
    }
}

.cvat-objects-sidebar-state-item {
    width: 100%;
    padding: 5px 3px 3px 3px;
    border-bottom: 1px dashed;

    > div:nth-child(1) {
        > div:nth-child(1) {
            line-height: 12px;
        }

        > div:nth-child(3) > i {
            @extend .cvat-object-sidebar-icon;
            font-size: 25px;
        }

        > div:nth-child(2) > .ant-select {
            width: 100%;
        }
    }

    > div:nth-child(2)  {
        > div > div {
            margin-top: 5px;
        }

        i {
            @extend .cvat-object-sidebar-icon;
        }
    }
}

.cvat-objects-sidebar-state-item-collapse {
    border: 0px;
    background: inherit;

    > .ant-collapse-item {
        background: inherit;
        border: none;

        > .ant-collapse-header {
            background: inherit;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        > .ant-collapse-content {
            background: inherit;
        }
    }
}

.cvat-object-item-attribute-wrapper {
    margin-top: 5px;
}

.cvat-object-item-select-attribute {
    width: 100%;
}

.cvat-object-item-number-attribute {
    width: 100%;
}

.cvat-object-item-text-attribute {
    width: 100%;
}

.cvat-object-item-radio-attribute {
    border: 1px double $border-color-hover;
    border-radius: 7px 7px 7px 7px;

    > legend {
        text-align: center;
        width: unset;
        text-overflow: ellipsis;
        max-width: 80%;
        overflow: hidden;
        max-height: 1.2em;
        font-size: 1em;

        > span {
            padding: 0 10px;
        }
    }

    > .ant-radio-group {
        display: grid;
        padding: 5px
    }
}

.cvat-objects-sidebar-labels-list {
    background-color: $background-color-2;
    height: 100%;
    overflow-y: auto;
}

.cvat-objects-sidebar-label-active-item {
    background: $active-object-item-background-color;
}

.cvat-objects-sidebar-label-item {
    height: 2.5em;
    border-bottom: 1px solid $border-color-2;
    padding: 5px;

    i {
        @extend .cvat-object-sidebar-icon;
    }

    > div:nth-child(2) {
        text-overflow: ellipsis;
        overflow: hidden;
        max-height: 1.5em;
        font-size: 1em;
    }

    &:hover {
        @extend .cvat-objects-sidebar-label-active-item;
    }
}

.cvat-label-item-color-button {
    width: 30px;
    height: 20px;
    border-radius: 5px;
}

.cvat-objects-appearance-content {
    > div {
        width: 100%;

        > label {
            text-align: center;
            width: 33%;
        }
    }
}

.cvat-object-item-menu {
    > li {
        padding: 0px;

        > button {
            padding: 5px 32px;
            color: $text-color;
            width: 100%;
            height: 100%;
            text-align: left;
        }
    }
}