lg-view/src/styles/components/checkbox.less

lgView

@checkbox-prefix       :~"@{css-prefix}checkbox";
@checkbox-standin      : ~"@{checkbox-prefix}-standin";
@checkbox-standin-small: ~"@{checkbox-standin}-small";
@checkbox-standin-large: ~"@{checkbox-standin}-large";
@checkbox-standin-disabled: ~"@{checkbox-standin}-disabled";

.@{checkbox-prefix} {
    & {
        display   : flex;
        align-items: center;
    }

    &-input {
        display: none;
    }

    &-input:checked+.@{checkbox-standin}::before {
        .position-center();
        content                   : "";
        display                   : inline-block;
        background-clip           : content-box;
        transform                 : rotate(45deg);
        height                    : @checkbox-standin-before-height;
        width                     : @checkbox-standin-before-width;
        border-bottom             : @checkbox-standin-before-border;
        border-right              : @checkbox-standin-before-border;
        border-bottom-right-radius: @checkbox-standin-before-radius;
    }

    &-input:checked+.@{checkbox-standin-small}::before {
        height: @checkbox-standin-before-small-height;
        width : @checkbox-standin-before-small-width;
    }

    &-input:checked+.@{checkbox-standin-large}::before {
        height: @checkbox-standin-before-large-height;
        width : @checkbox-standin-before-large-width;
    }

    &-input:checked+.@{checkbox-standin-disabled}::before {
         border-color:@checkbox-standin-before-disabled-color;
    }

    &-standin {
        display         : inline-block;
        position        : relative;
        background-color: @white;
        border          : @border ;
        width           : @checkbox-standin-width;
        height          : @checkbox-standin-height;
        transition      : @checkbox-standin-transition ;
        border-radius   : @checkbox-standin-border-radius;


        

        &-small {
            width : @checkbox-standin-width-small;
            height: @checkbox-standin-height-small;
        }

        &-large {
            width : @checkbox-standin-width-large;
            height: @checkbox-standin-height-large;
        }
        &-disabled {
            background-color: @checkbox-standin-disabled-color;
        }
    }

    &-label {
        padding: @checkbox-label-padding;
    }



}