@fesjs/fes-design/es/input/style/mixin.less

fes-design for PC

.disabled() {
    color: var(--f-text-color-disabled);
    background-color: var(--f-disabled-color-light);
    cursor: not-allowed;
    opacity: 1;

    &:hover {
        border-color: var(--f-border-color-base);
    }
}

.border-left-pure() {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.border-right-pure() {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.group-append() {
    .hidden-append-border();
    button.@{cls-prefix}-btn,
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select:hover .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader:hover .@{cls-prefix}-select-trigger {
        .border-left-pure();
    }
}


.group-prepend() {
    .hidden-prepend-border();
    button.@{cls-prefix}-btn,
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select:hover .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader:hover .@{cls-prefix}-select-trigger  {
        .border-right-pure();
    }
}

.hover-light-border() {
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger {
        border: 1px solid var(--f-primary-color);
    }
}

.hidden-prepend-border {
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger {
        border-right: 1px solid transparent;
    }
}

.hidden-append-border {
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger {
        border-left: 1px solid transparent;
    }
}

.focus-light-border() {
    div.@{cls-prefix}-select .@{cls-prefix}-select-trigger.is-active,
    div.@{cls-prefix}-cascader .@{cls-prefix}-select-trigger.is-active,
    div.@{cls-prefix}-select-cascader .@{cls-prefix}-select-trigger.is-active {
        border: 1px solid var(--f-primary-color);
    }
}

.group() {
    position: relative;
    z-index: 0;
    display: table-cell;
    box-sizing: border-box;
    width: 1px;
    padding: 0 8px;
    color: var(--f-text-color-secondary);
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--f-component-bg-color);
    border: var(--f-border-base);
    border-radius: var(--f-border-radius-base);
    .focus-light-border();

    &:hover {
        .hover-light-border();
    }
    &:focus {
        outline: none;
    }

    .@{cls-prefix}-btn {
        margin: -1px -10px;
    }

    .@{cls-prefix}-select, .@{cls-prefix}-select-cascader {
        width: auto;
        min-width: 62px;
        margin: -1px -9px;
    }
    .@{cls-prefix}-btn,
    .@{cls-prefix}-input {
        font-size: inherit;
    }
}

.textarea-scrollbar(@scrollbar-width; @scrollbar-bg; @scrollbar-active-bg) {
    /* 滚动条整体部分 */
    &::-webkit-scrollbar {
        width: @scrollbar-width;
    }
    /* 滚动条的轨道 */
    &::-webkit-scrollbar-track {
        background-color: var(--f-white);
        border: var(--f-border-width-base) var(--f-border-style-base) transparent;
        border-radius: var(--f-border-radius-base);
    }
    /* 滚动条里面的小方块，能向上向下移动 */
    &::-webkit-scrollbar-thumb {
        background-color: @scrollbar-bg;
        border: var(--f-border-width-base) var(--f-border-style-base) transparent;
        border-radius: var(--f-border-radius-base);
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: @scrollbar-active-bg;
    }
    &::-webkit-scrollbar-thumb:active {
        background-color: @scrollbar-active-bg;
    }
    /* 边角，即两个滚动条的交汇处 */
    &::-webkit-scrollbar-corner {
        border-radius: var(--f-border-radius-base);
    }
}