devextreme/less/sources/widgets/generic/checkBox.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/checkBox.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./validation.generic.less";

.dx-size-default() {
    @GENERIC_CHECKBOX_ARROW_ICON_SIZE: 16px;

    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE: 14px;
    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN: 4px;
}

.dx-size-compact() {
    @GENERIC_CHECKBOX_ARROW_ICON_SIZE: 10px;

    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE: 8px;
    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN: 3px;
}

@GENERIC_CHECKBOX_DISABLE_OPACITY: 0.4;

.dx-checkbox {
    line-height: 0;

    &.dx-state-readonly {
        .dx-checkbox-icon {
            border-color: @checkbox-readonly-border-color;
            background-color: @checkbox-readonly-bg;
        }
    }

    &.dx-state-hover {
        .dx-checkbox-icon {
            border: 1px solid @checkbox-hover-border-color;
        }
    }

    &.dx-state-focused {
        .dx-checkbox-icon {
            border: 1px solid @checkbox-focused-borderd-color;
        }
    }

    &.dx-state-active {
        .dx-checkbox-icon {
            background-color: @checkbox-active-icon-bg;
        }
    }
}

.dx-checkbox-icon {
    width: @GENERIC_CHECKBOX_SIZE;
    height: @GENERIC_CHECKBOX_SIZE;
    border-radius: @checkbox-icon-border-radius;
    border: 1px solid @checkbox-border-color;
    background-color: @checkbox-bg;

    .dx-checkbox-checked & {
        .dx-icon(check);

        color: @checkbox-checked-color;
        .dx-icon-font-centered-sizing(@GENERIC_CHECKBOX_ARROW_ICON_SIZE);
    }

    .dx-checkbox-indeterminate & {
        .dx-icon(square);

        color: @checkbox-indeterminate-bg;
        .dx-icon-font-centered-sizing(@GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE);
    }
}

.dx-checkbox-text {
    margin-left: -@GENERIC_CHECKBOX_SIZE;
    padding-left: @GENERIC_CHECKBOX_SIZE + 5px;

    .dx-rtl&,
    .dx-rtl & {
        margin-right: -@GENERIC_CHECKBOX_SIZE;
        padding-right: @GENERIC_CHECKBOX_SIZE + 5px;
    }
}

.dx-state-disabled {
    &.dx-checkbox,
    .dx-checkbox {
        opacity: 1;

        .dx-checkbox-icon {
            opacity: @GENERIC_CHECKBOX_DISABLE_OPACITY;
        }
    }

    .dx-checkbox-text {
        opacity: @GENERIC_CHECKBOX_DISABLE_OPACITY;
    }
}

.dx-invalid {
    .dx-checkbox-container {
        .dx-checkbox-icon {
            border: 1px solid @checkbox-invalid-faded-border-color;
        }
    }

    &.dx-state-focused {
        .dx-checkbox-container {
            .dx-checkbox-icon {
                border-color: @checkbox-invalid-focused-border-color;
            }
        }
    }
}