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

fes-design for PC

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

@checkbox-prefix-cls: ~'@{cls-prefix}-checkbox';
@checkbox-disabled-bg: var(--f-component-bg-color);

.@{checkbox-prefix-cls} {
    --f-checkbox-border-color: var(--f-border-color-base);
    --f-checkbox-bg-color: var(--f-white);
    position: relative;
    display: inline-flex;
    align-items: center;
    .default();
    .text();
    cursor: pointer;
    &.is-item {
        margin-right: @padding-lg;
    }
    &.is-item-vertical {
        display: flex;
        margin-right: 0;
    }
    &-inner {  
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        line-height: 1;
        vertical-align: middle;
        background-color: var(--f-checkbox-bg-color);
        border: var(--f-border-width-base) var(--f-border-style-base) transparent;
        border-color: var(--f-checkbox-border-color);
        border-radius: var(--f-border-radius-sm);
        transition: all @animation-duration-slow @ease-base-out;
    }
    &-content{
        display: inline-block;
        margin-left: @padding-xs;
    }
    &.is-hover{
        .@{checkbox-prefix-cls}-inner {
            --f-checkbox-border-color: var(--f-primary-color);
            transition: all @animation-duration-base @ease-base-in;
        }
    }
    &.is-checked{
        .@{checkbox-prefix-cls}-inner {
            --f-checkbox-bg-color: var(--f-primary-color);
            --f-checkbox-border-color: var(--f-primary-color);
            transition: all @animation-duration-base @ease-base-in;
            &::before {
                .checkbox-inner()
            }
        }
    }
    &.is-indeterminate {
        .@{checkbox-prefix-cls}-inner {
            --f-checkbox-bg-color: var(--f-primary-color);
            --f-checkbox-border-color: var(--f-primary-color);
            &::before {
                .checkbox-inner();
                width: 8px;
                height: 1px;
                background: var(--f-white);
                border: none;
                transform: translate(-50%, -50%) rotate(0);
            }
        }
    }
    &.is-disabled{
        color: var(--f-disabled-color-base);
        cursor: not-allowed;
        .@{checkbox-prefix-cls}-inner {
            --f-checkbox-bg-color: @checkbox-disabled-bg;
            --f-checkbox-border-color: var(--f-border-color-base);
        }
        &.is-checked{
            .@{checkbox-prefix-cls}-inner {
                --f-checkbox-bg-color: var(--f-border-color-base);
                --f-checkbox-border-color: var(--f-border-color-base);
                &::before {
                    .checkbox-inner()
                }
            }
        }
        &.is-indeterminate{
            .@{checkbox-prefix-cls}-inner {
                --f-checkbox-bg-color: var(--f-border-color-base);
                --f-checkbox-border-color: var(--f-border-color-base);
            }
        }
    }
}