@fesjs/fes-design/es/button/style/index.less

fes-design for PC

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

@btn-prefix-cls: ~'@{cls-prefix}-btn';

@btn-height-lg: @data-input-height-base + 8;
@btn-height-base: @data-input-height-base;
@btn-height-sm: @data-input-height-base - 8;

@btn-min-width-lg: 75px;
@btn-min-width-base: 60px;
@btn-min-width-sm: 40px;

@btn-padding-base: 0 16px;
@btn-padding-sm: 0 12px;

.@{btn-prefix-cls} {
    --f-btn-color: var(--f-text-color);
    --f-btn-bg-color: var(--f-white);
    --f-btn-border-color: var(--f-border-color-base);
    --f-btn-hover-color: var(--f-hover-color-base);
    --f-btn-hover-color-light: var(--f-hover-color-base-light);
    --f-btn-active-color: var(--f-active-color);
    --f-btn-disabled-color: var(--f-disabled-color-base);
    --f-btn-border-width: var(--f-border-width-base);
    --f-btn-border-style: var(--f-border-style-base);
    --f-btn-border-radius: var(--f-border-radius-base);
    --f-btn-border-radius-sm: var(--f-border-radius-sm);
    --f-btn-font-size: var(--f-font-size-base);
    --f-btn-height: @btn-height-base;
    --f-btn-padding: @btn-padding-base;
    --f-btn-min-width: @btn-min-width-base;

    .default();
    .text();

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--f-btn-min-width);

    height: var(--f-btn-height);
    padding: var(--f-btn-padding);
    color: var(--f-btn-color);
    font-weight: @font-weight-regular;
    font-size: var(--f-btn-font-size);
    white-space: nowrap;
    vertical-align: middle;
    background: var(--f-btn-bg-color);
    border: var(--f-btn-border-width) var(--f-btn-border-style) transparent;
    border-color: var(--f-btn-border-color);
    border-radius: var(--f-btn-border-radius);
    outline: none;
    cursor: pointer;
    transition: all @animation-duration-slow @ease-in-out;
    user-select: none;
    touch-action: manipulation;

    &[disabled] {
        text-shadow: none;
        box-shadow: none;
        cursor: not-allowed;
        > * {
            pointer-events: none;
        }
    }

    &-type-default {
        --f-btn-wave-shadow-color: var(--f-primary-color);
        .button-animate();
    }

    &-type-default {
        &:hover,
        &:focus {
            --f-btn-color: var(--f-primary-color);
            --f-btn-bg-color: var(--f-btn-hover-color-light);
            --f-btn-border-color: var(--f-primary-color);
        }
        &:active {
            --f-btn-color: var(--f-btn-active-color);
            --f-btn-bg-color: var(--f-btn-hover-color-light);
            --f-btn-border-color: var(--f-btn-active-color);
        }
        &[disabled] {
            --f-btn-color: var(--f-btn-disabled-color);
            --f-btn-bg-color: var(--f-disabled-color-light);
            --f-btn-border-color: var(--f-btn-disabled-color);
        }
        .button-processing();
    }

    &-type-primary {
        --f-btn-wave-shadow-color: var(--f-primary-color);
        --f-btn-color: var(--f-white);
        --f-btn-bg-color: var(--f-primary-color);
        --f-btn-border-color: var(--f-primary-color);
        &:hover,
        &:focus {
            --f-btn-bg-color: var(--f-btn-hover-color);
            --f-btn-border-color: var(--f-btn-hover-color);
        }
        &:active {
            --f-btn-bg-color: var(--f-btn-active-color);
            --f-btn-border-color: var(--f-btn-active-color);
        }
        &[disabled] {
            --f-btn-bg-color: var(--f-btn-disabled-color);
            --f-btn-border-color: transparent;
        }
        .button-processing();
        .button-animate();
    }
    &-type-text {
        --f-btn-color: var(--f-text-color);
        --f-btn-bg-color: transparent;
        --f-btn-border-color: transparent;

        &:hover,
        &:focus {
            --f-btn-color: var(--f-primary-color);
            --f-btn-bg-color: var(--f-hover-color-light);
        }
        &:active {
            --f-btn-color: var(--f-active-color);
            --f-btn-bg-color: var(--f-hover-color-light);
        }
        &[disabled] {
            --f-btn-color: var(--f-disabled-color-base);
            --f-btn-bg-color: transparent;
        }

        .button-processing();
    }
    &-type-link {
        --f-btn-color: var(--f-primary-color);
        --f-btn-bg-color: transparent;
        --f-btn-border-color: transparent;

        &:hover,
        &:focus {
            --f-btn-color: var(--f-hover-color-base);
        }
        &:active {
            --f-btn-color: var(--f-active-color);
        }
        &[disabled] {
            --f-btn-color: var(--f-disabled-color-base);
        }

        .button-processing();
    }

    &-type-info {
        --f-btn-color: var(--f-primary-color);
        --f-btn-bg-color: var(--f-white);
        --f-btn-border-color: var(--f-primary-color);
        --f-btn-wave-shadow-color: var(--f-primary-color);

        &:hover,
        &:focus {
            --f-btn-bg-color: var(--f-hover-color-light);
        }
        &:active {
            --f-btn-color: var(--f-active-color);
            --f-btn-bg-color: var(--f-hover-color-light);
            --f-btn-border-color: var(--f-active-color);
        }
        .button-animate();
    }
    &-type-success {
        --f-btn-color: var(--f-success-color);
        --f-btn-bg-color: var(--f-white);
        --f-btn-border-color: var(--f-success-color);
        --f-btn-wave-shadow-color: var(--f-success-color);

        &:hover,
        &:focus {
            --f-btn-bg-color: var(--f-hover-success-color);
        }
        &:active {
            --f-btn-color: var(--f-active-success-color);
            --f-btn-bg-color: var(--f-hover-success-color);
            --f-btn-border-color: var(--f-success-active-color);
        }
        .button-animate();
    }
    &-type-warning {
        --f-btn-color: var(--f-warning-color);
        --f-btn-bg-color: var(--f-white);
        --f-btn-border-color: var(--f-warning-color);
        --f-btn-wave-shadow-color: var(--f-warning-color);

        &:hover,
        &:focus {
            --f-btn-bg-color: var(--f-hover-warning-color);
        }
        &:active {
            --f-btn-color: var(--f-active-warning-color);
            --f-btn-bg-color: var(--f-hover-warning-color);
            --f-btn-border-color: var(--f-warning-active-color);
        }
        .button-animate();
    }
    &-type-danger {
        --f-btn-color: var(--f-danger-color);
        --f-btn-bg-color: var(--f-white);
        --f-btn-border-color: var(--f-danger-color);
        --f-btn-wave-shadow-color: var(--f-danger-color);

        &:hover,
        &:focus {
            --f-btn-bg-color: var(--f-hover-danger-color);
        }
        &:active {
            --f-btn-color: var(--f-active-danger-color);
            --f-btn-bg-color: var(--f-hover-danger-color);
            --f-btn-border-color: var(--f-danger-active-color);
        }
        .button-animate();
    }


    &-type-info,
    &-type-success,
    &-type-warning,
    &-type-danger {
        &[disabled] {
            --f-btn-color: var(--f-btn-disabled-color);
            --f-btn-bg-color: var(--f-disabled-color-light);
            --f-btn-border-color: var(--f-btn-disabled-color);
        }

        .button-processing();
    }

    &-long {
        width: 100%;
    }
    &-icon {
        display: inline-flex;
        align-items: center;
        margin-right: 4px;
        &.is-right {
            margin-right: 0;
            margin-left: 4px;
        }
    }

    &-large {
        --f-btn-min-width: @btn-min-width-lg;
        --f-btn-height: @btn-height-lg;
        --f-btn-font-size: calc(var(--f-font-size-base) + 2px);
    }
    &-small {
        --f-btn-min-width: @btn-min-width-sm;
        --f-btn-height: @btn-height-sm;
        --f-btn-padding: @btn-padding-sm;
        --f-btn-font-size: calc(var(--f-font-size-base) - 2px);
        --f-btn-border-radius: var(--f-btn-border-radius-sm);
    }
}