ken-form-design/packages/components/KComboBox/index.less

基于vue、ant-design-vue的表单设计器,可视化开发表单

/*
下拉组件样式
*/
.k-combobox {
    position: relative;
    width: 100%;
    line-height: 32px;
    display: inline-block;
    /*
ul样式
*/
    ul {
        margin-block-end: 0;
        padding-inline-start: 0;
        li {
            text-overflow: ellipsis;
            white-space: nowrap; //文本不换行
            overflow: hidden;
        }
    }

    .icon-unfold-transform {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    /**
下拉框
*/
    .select-dropdown {
        position: fixed;
        z-index: 9999;
        will-change: top, left;
        visibility: visible;
        max-height: 300px;
        padding: 5px 0;
        margin: 5px 0;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        overflow: auto;
        /*
    无下拉数据
    */
        .select-not-found {
            text-align: center;
            color: #999;
        }
        /*
    下拉列表
    */
        .select-dropdown-list {
            /*
        下拉项目
        */
            .select-item {
                height: 30px;
                line-height: 22px;
                display: flex;
                align-items: baseline;
                margin: 0;
                padding: 5px 12px;
                clear: both;
                color: rgba(0, 0, 0, 0.65);
                font-size: 14px;
                white-space: nowrap;
                list-style: none;
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                &:hover {
                    background-color: #e6f7ff;
                }
            }
        }
    }
    /*
组合输入框
*/
    .select-input {
        width: inherit;
        height: 32px;
        position: relative;
        text-align: left;
        box-sizing: border-box;
        outline: 0;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #d7dde4;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        display: inline-block;
        /**输入框 */
        > input {
            width: 100%;
            vertical-align: top;
            display: inline-block;
            height: 100%;
            line-height: 100%;
            padding: 0 18px 0 11px;
            font-size: 14px;
            outline: 0;
            border: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.65);
            background-color: transparent;
            position: relative;
            &:focus {
                border: #36a8cf;
                border-radius: 3px;
            }
        }

        /*
    下拉箭头
    */
        .select-arrow {
            position: absolute;
            right: 0;
            top: 0;
            height: 32px;
            line-height: 32px;
            padding: 0 5px;

            > i {
                font-size: 16px;
                color: #9ea7b4;
                transition: all 0.2s ease-in-out;
                display: block;
            }
        }
        // 鼠标样式
        .cursor {
            cursor: pointer;
        }
        &.disabled {
            background: #f5f5f5;
            color: rgba(0, 0, 0, 0.25);
            .cursor {
                cursor: not-allowed;
            }
        }

        &:hover {
            border-color: #36a8cf;
        }
    }

    .select-input-color {
        border-color: #36a8cf;
        box-shadow: 0 0 0 2px rgba(19, 144, 194, 0.2);
    }
}


::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #bfbfbf;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #bfbfbf;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #bfbfbf;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #bfbfbf;
}