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

UI Component for chief editor

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

.@{prefixCls}-dropdown-popover,
.@{prefixCls}-dropdown-submenu-popover {
    //max-height: 192px;
    // 影响箭头显示
    //overflow-y: auto;
    border-radius: @border-radius-base;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
    background-color: @color-neutral1;

    &.@{prefixCls}-popover {
        .@{prefixCls}-popover-inner {
            color: @color-text-grey1;
        }
    }
}

.@{prefixCls}-dropdown-submenu-popover {
    min-width: 100px;
}
.@{prefixCls}-dropdown-submenu-inner-wrapper {
    display: flex;
}

.@{prefixCls}-dropdown-submenu-header-open-icon {
    margin-left: auto;
}

.@{prefixCls}-dropdown-link {
    display: flex;
    align-items: center;
    color: @color-text-grey3;

    &.@{prefixCls}-link-disabled {
        .@{prefixCls}-dropdown-link-title {
            color: @color-text-grey4;
        }
    }

    .byted-icon-down {
        color: @color-text-grey3;
    }

    &-title {
        display: inline-block;
        margin-right: 4px;
        color: @color-text-grey1;
    }
}

// input 样式
.@{prefixCls}-dropdown-input {
    border: solid 1px @color-neutral5;
    border-radius: @border-radius-base;
    overflow: hidden;

    &:hover:not(&-disabled):not(&-readonly) {
        border-color: @color-neutral2;
        .transition();

        .@{prefixCls}-dropdown-input {
            &-button {
                background-color: @color-neutral2;
                .transition();
                cursor: pointer;
            }
        }
    }

    &-disabled {
        cursor: not-allowed;
        input {
            cursor: not-allowed !important;
        }

        .@{prefixCls}-dropdown-input {

            &-button,
            .@{prefixCls}-btn-disabled {
                color: @color-text-grey3;
            }
        }

    }

    .@{prefixCls}-input {
        &-inner__wrapper {
            &, &:hover {
                border: none;
                border-radius: unset;
            }

            input {
                cursor: default;
            }

        }

        &-append {
            border: none;
            background-color: unset;
        }
    }

    &-button {
        height: 22px;
        width: 22px;
        display: flex;
        color: @color-text-grey2;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
}



.@{prefixCls}-dropdown-button {
    .@{prefixCls}-btn {
        border-radius: @border-radius-base;
        overflow: hidden;

        &-disabled {
            color: @color-text-grey3 !important;
        }
    }
}