devextreme/less/sources/widgets/material/checkBox.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/checkBox.material.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.material.less";

.dx-size-default() {
    @MATERIAL_CHECKBOX_RIPPLE_SIZE: 40px;
    @MATERIAL_CHECKBOX_ARROW_ICON_SIZE: 16px;
    @MATERIAL_CHECKBOX_INTERMIDIATE_ICON_SIZE: 20px;
    @MATERIAL_CHECKBOX_BORDER_RADIUS: @checkbox-icon-border-radius;
}

.dx-size-compact() {
    @MATERIAL_CHECKBOX_RIPPLE_SIZE: 30px;
    @MATERIAL_CHECKBOX_ARROW_ICON_SIZE: 14px;
    @MATERIAL_CHECKBOX_INTERMIDIATE_ICON_SIZE: 18px;
    @MATERIAL_CHECKBOX_BORDER_RADIUS: 2px;
}

@MATERIAL_CHECKBOX_RIPPLE_TRANSITION: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

.dx-checkbox {
    line-height: 0;

    .dx-checkbox-container {
        overflow: visible;
    }

    &.dx-state-readonly,
    &.dx-state-disabled {
        border-color: fade(@checkbox-border-color, 26%);
    }

    &.dx-state-focused,
    &.dx-state-active {
        .dx-checkbox-icon:after {
            background-color: fade(@checkbox-border-color, 10%);
            transform: scale(1);
        }
    }

    &.dx-checkbox-checked,
    &.dx-checkbox-indeterminate {
        &.dx-state-focused,
        &.dx-state-active {
            .dx-checkbox-icon:after {
                background-color: fade(@checkbox-bg, 10%);
                transform: scale(1);
            }
        }

        &.dx-state-readonly,
        &.dx-state-disabled {
            .dx-checkbox-icon {
                background-color: fade(@checkbox-border-color, 26%);
            }
        }
    }
}

.dx-checkbox,
.dx-checkbox-indeterminate,
.dx-checkbox-checked {
    &.dx-state-readonly.dx-state-focused {
        .dx-checkbox-icon:after {
            background-color: fade(@checkbox-border-color, 10%);
            transform: scale(1);
        }
    }
}

.dx-checkbox-icon {
    width: @MATERIAL_CHECKBOX_SIZE;
    height: @MATERIAL_CHECKBOX_SIZE;
    border: 2px solid @checkbox-border-color;
    border-radius: @MATERIAL_CHECKBOX_BORDER_RADIUS;

    &:after {
        content: "";
        width: @MATERIAL_CHECKBOX_RIPPLE_SIZE;
        height: @MATERIAL_CHECKBOX_RIPPLE_SIZE;
        top: 50%;
        left: 50%;
        margin-top: -@MATERIAL_CHECKBOX_RIPPLE_SIZE / 2;
        margin-left: -@MATERIAL_CHECKBOX_RIPPLE_SIZE / 2;
        border-radius: 50%;
        display: block;
        position: absolute;
        z-index: 1;
        transform: scale(0.5);
        transition: @MATERIAL_CHECKBOX_RIPPLE_TRANSITION;
    }

    &:before {
        z-index: 2;
    }

    .dx-checkbox-checked & {
        color: @checkbox-checked-color;
        background-color: @checkbox-bg;
        border: none;

        .dx-icon(check);
        .dx-icon-font-centered-sizing(@MATERIAL_CHECKBOX_ARROW_ICON_SIZE);
    }

    .dx-checkbox-indeterminate & {
        background-color: @checkbox-indeterminate-bg;
        color: @checkbox-checked-color;
        border: none;

        .dx-font-icon("\f074");
        .dx-icon-font-centered-sizing(@MATERIAL_CHECKBOX_INTERMIDIATE_ICON_SIZE);
    }
}

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

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

.dx-invalid {
    .dx-checkbox-icon {
        border: 2px solid @checkbox-invalid-focused-border-color;
    }

    &.dx-state-focused {
        .dx-checkbox-icon:after {
            background-color: fade(@checkbox-invalid-focused-border-color, 10%);
            transform: scale(1);
        }
    }
}