acud/lib/search/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';

@input-search-multiple-prefix-cls: ~'@{acud-prefix}-input-search-multiple';
@input-search: ~'@{acud-prefix}-input-search';

::-webkit-search-cancel-button {
    display: none;
}
.@{input-search-multiple-prefix-cls} {
    .@{acud-prefix}-input {
        padding-left: 0;
    }
    .@{acud-prefix}-input-addon {
        .@{acud-prefix}-select:not(.@{acud-prefix}-select-customize-input) {
            width: @mutilple-search-select-width;
            height: @mutilple-search-select-height;
            .@{acud-prefix}-select-selector {
                color: ~'@{@{search-select-default-tp}-default-color}';
                background-color: ~'@{@{search-select-default-p}-default-background-color}';
                border: none;
                border-radius: 0;

                &:hover {
                    color: ~'@{@{search-select-default-tp}-hover-color}';
                    background-color: ~'@{@{search-select-default-p}-hover-background-color}';
                }

                &:active {
                    color: ~'@{@{search-select-default-tp}-click-color}';
                    background-color: ~'@{@{search-select-default-p}-click-background-color}';
                }
                .@{acud-prefix}-select-selection-item {
                    color: ~'@{@{search-select-default-tp}-click-color}';
                }
            }
            .@{acud-prefix}-select-arrow {
                color: ~'@{@{search-select-arrow-default-tp}-hover-color}';
            }
            &.@{acud-prefix}-select-disabled {
                .@{acud-prefix}-select-selector {
                    &,
                    &:hover,
                    &:active {
                        color: ~'@{@{search-select-default-tp}-disabled-color}';
                        background-color: ~'@{@{search-select-default-p}-disabled-background-color}';
                    }
                    .@{acud-prefix}-select-selection-item {
                        color: ~'@{@{search-select-default-tp}-disabled-color}';
                    }
                }
                .@{acud-prefix}-select-arrow {
                    color: ~'@{@{search-select-arrow-default-tp}-disabled-color}';
                }
            }
        }
    }
}

.@{input-search} {
    display: flex;
    &-icon.@{iconfont-css-prefix} {
        .basic-tp-config(@search-icon);
        cursor: pointer;
    }
    &-loading-icon.@{iconfont-css-prefix} {
        color: @B6;
    }

    &-enter-button {
        .@{acud-prefix}-input {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .@{acud-prefix}-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: none;
            .basic-config(@search-enter-button-tp, @search-enter-button-p);

            &:hover {
                box-shadow: none;
            }

            &[disabled] {
                border: none;
                box-shadow: none;

                &:hover {
                    border: none;
                    box-shadow: none;
                }
            }
            .@{iconfont-css-prefix} {
                height: @P * 4;
            }
        }
    }

    &-enter-button-disabled {
        border: solid 1px @G8;
        border-radius: @R3;
        .@{acud-prefix}-input {
            border: none;
        }
    }

    .@{acud-prefix}-input-suffix {
        font-size: 16px;
    }
}