@chief-editor/ui/css/components/Sidebar/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-sidebar {
    display: flex;
    align-items: stretch;
    height: 100%;
    font-size: 12px;

    &-tab {
        width: 46px;
        background: @color-neutral10;
        height: 100%;

        &-item {
            height: 46px;
            line-height: 46px;
            color: @color-text-grey2;
            text-align: center;
            cursor: pointer;
            font-size: 12px;

            &-active {
                background: @color-neutral9;
                color: @color-text-grey1;
            }

            &-image {

            }
        }
    }

    &-content {
        width: 240px;
        height: 100%;
        background: @color-neutral9;
        display: flex;
        flex-direction: column;

        &-title {
            padding: 14px 16px;
            border-bottom: 1px solid @border-color1;
            color: @color-text-grey1;
            position: relative;

            &-inner {

            }

            &-text {
            }

            &-extra {
                padding-top: 14px;
            }

            &-close {
                position: absolute;
                right: 16px;
                top: 17px;
            }

            &-image {
                border-bottom: none;
            }
        }

        &-main {
            overflow-x: hidden;
            overflow-y: auto;
            flex: 1;

            &-image {
                height: 100%;
                overflow-y: hidden;

                .image-panel-header {
                    padding: 0 16px 14px 16px;
                    border-bottom: 1px solid @border-color1;

                    .upload-btn {
                        border-radius: 2px;
                        overflow: hidden;
                    }
                }

                .image-panel {
                    display: flex;
                    height: 100%;
                    flex-direction: column;

                    &-content {
                        flex: auto;
                        height: calc(100% - 39px);
                        overflow-y: auto;
                        padding: 8px 16px;

                        &::-webkit-scrollbar {
                            width : 0;
                        }

                        & > .title {
                            padding-bottom: 8px;
                        }

                        & > .image-list-wrapper {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                        }
                    }
                }
            }

        }
    }
}