maycur-business/lib/MkSelect/style/MkSelect.less

maycur business react components of web

@import '../../style/variables.less';

.place-common(@color) {
    color: @color;
    font-size: 12px;
}

.placeholder(@color: @input-placeholder-color) {
    &::-moz-placeholder {
        .place-common(@color)
    }

    &:-ms-input-placeholder {
        .place-common(@color)
    }

    &::-webkit-input-placeholder {
        .place-common(@color)
    }
}

.@{prefix}-select {
    position: relative;

    &-field {
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-variant: tabular-nums;
        color: rgba(0, 0, 0, 0.65);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        display: inline-block;
        padding: 4px 0;
        width: 100%;
        height: 32px;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        background-color: #fff;
        background-image: none;
        border: 0;
        outline: 0;
        border-bottom: 1px solid #d9d9d9;
        border-radius: 0;
        -webkit-transition: all .3s;
        transition: all .3s;
        cursor: pointer;


        display: block;
        padding: 4px 0;
        height: auto;
        font-size: 14px;
        line-height: 18px;
        color: #333;

        &[disabled] {
            border-bottom: 1px dashed #d9d9d9;
            cursor: not-allowed;

            &+.@{prefix}-action {
                cursor: not-allowed;
            }

            &:focus,
            &:hover,
            &:active {
                border-color: #d9d9d9;

                &+.@{prefix}-action {
                    color: #d9d9d9 !important;
                }
            }
        }

        &.ant-input-origin {
            border: 1px solid #d9d9d9;
            padding: 4px 20px 4px 11px;
            height: 32px !important;
        }

        &.@{prefix}-select-focus {
            border-color: #40a9ff;
        }

        &.@{prefix}-select-extra {
            padding-left: 25px;
        }

        &:focus,
        &:hover,
        &:active {
            border-color: #40a9ff;

            &+.@{prefix}-action {
                color: #3296fa !important;
            }
        }
    }

    .@{prefix}-extra-icon {
        position: absolute;
        top: 10%;
        left: 0;
        z-index: 10;
        text-align: center;
        font-size: 18px;
        line-height: initial;
        cursor: pointer;

        &.@{prefix}-extra-disabled {
            cursor: not-allowed;
        }
    }

    .@{prefix}-action {
        position: absolute;
        z-index: 10;
        // .icon();
        cursor: pointer;
        display: inline-block;
        font-style: normal;
        vertical-align: -0.125em;
        text-align: center;
        text-transform: none;
        line-height: 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        top: 50%;
        right: 0;
        line-height: 1;
        margin-top: -6px;
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        color: rgba(0, 0, 0, 0.25);
        font-size: 12px;
        transform: rotate(0deg);
        transition: transform .3s, -webkit-transform .3s;

        &.@{prefix}-with-right {
            right: 12px;
        }

        &.@{prefix}-action-open {
            transform: rotate(180deg);
            color: #3296fa;
        }

        &.@{prefix}-action-close {
            transform: rotate(0deg);
            color: rgba(0, 0, 0, 0.25);
        }
    }
}

.@{prefix}-select-dropdown {
    font-variant: tabular-nums;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant: initial;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9999;
    max-height: 300px;
    overflow: auto;
    outline: none;
    font-size: 14px;

    .ant-input {
        .placeholder(#959595)
    }
}

.@{prefix}-opt-group {
    .@{prefix}-option {
        display: inline-block;
    }

    .@{prefix}-opt-content {
        padding-left: 15px;
    }

    .@{prefix}-opt-title {
        color: rgba(0, 0, 0, 0.65);
        font-size: 12px;
        font-weight: 600;

        &.@{prefix}-opt-txt {
            height: 32px;
            line-height: 32px;
            padding: 0 12px;
        }

        &.@{prefix}-opt-node {
            padding: 8px 12px;
        }
    }
}

.@{prefix}-option {
    position: relative;
    display: block;
    padding: 5px 12px;
    line-height: 22px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    &.@{prefix}-option-selected {
        background-color: #e6f7ff;
        font-weight: 400;
        color: #4298f7;
        cursor: pointer;
    }

    &:hover {
        background-color: #e6f7ff;
        color: #4298f7;
    }

    &.@{prefix}-option-disabled {
        color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;

        &:hover {
            background-color: transparent;
            color: rgba(0, 0, 0, 0.25) !important;
        }
    }
}