devextreme/less/sources/widgets/material/radioButton.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/radioButton.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/
*/
.dx-size-default() {
    @MATERIAL_RADIOBUTTON_SIZE: 20px;
    @MATERIAL_RADIOBUTTON_DOT_SIZE: 10px;
    @MATERIAL_RADIOBUTTON_RIPPLE_SIZE: 40px;
}

.dx-size-compact() {
    @MATERIAL_RADIOBUTTON_SIZE: 16px;
    @MATERIAL_RADIOBUTTON_DOT_SIZE: 8px;
    @MATERIAL_RADIOBUTTON_RIPPLE_SIZE: 32px;
}

@MATERIAL_RADIOBUTTON_BORDER_WIDTH: 2px;
@MATERIAL_RADIOBUTTON_INNER_SIZE: @MATERIAL_RADIOBUTTON_SIZE - @MATERIAL_RADIOBUTTON_BORDER_WIDTH * 2;
@MATERIAL_RADIOBUTTON_RIPPLE_TRANSITION: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

.dx-radiobutton-icon {
    width: @MATERIAL_RADIOBUTTON_SIZE;
    height: @MATERIAL_RADIOBUTTON_SIZE;
    position: relative;

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

    &:before {
        display: block;
        width: @MATERIAL_RADIOBUTTON_INNER_SIZE;
        height: @MATERIAL_RADIOBUTTON_INNER_SIZE;
        border: @MATERIAL_RADIOBUTTON_BORDER_WIDTH solid @radiogroup-border-color;
        background-color: @radiogroup-bg;
        content: "";
        border-radius: @MATERIAL_RADIOBUTTON_SIZE / 2;
        box-sizing: content-box;
    }
}

.dx-radiobutton-icon-checked {
    &:before {
        border-color: @radiogroup-checked-bg;
    }

    .dx-radiobutton-icon-dot {
        display: block;
        margin-top: -@MATERIAL_RADIOBUTTON_SIZE / 2 - @MATERIAL_RADIOBUTTON_DOT_SIZE / 2;
        margin-left: @MATERIAL_RADIOBUTTON_SIZE / 2 - @MATERIAL_RADIOBUTTON_DOT_SIZE / 2;
        width: @MATERIAL_RADIOBUTTON_DOT_SIZE;
        height: @MATERIAL_RADIOBUTTON_DOT_SIZE;
        background: @radiogroup-checked-bg;
        content: "";
        border-radius: @MATERIAL_RADIOBUTTON_DOT_SIZE / 2;
    }
}

.dx-radiobutton {
    line-height: @MATERIAL_RADIOBUTTON_SIZE;

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

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

    &.dx-state-disabled {
        opacity: @base-disabled-opacity;
    }
}

.dx-state-readonly,
.dx-state-disabled {
    .dx-radiobutton-icon-dot {
        background-color: @radiogroup-border-color;
    }

    .dx-radiobutton-icon:before {
        border-color: @radiogroup-border-color;
    }
}

.dx-invalid {
    .dx-radiobutton-icon:before {
        border-color: @radiobutton-invalid-faded-border-color;
    }

    .dx-radiobutton-icon-dot {
        background-color: @radiobutton-invalid-faded-border-color;
    }

    .dx-state-active,
    .dx-state-focused {
        &.dx-radiobutton {
            .dx-radiobutton-icon:before {
                border-color: @radiobutton-invalid-focused-border-color;
            }

            .dx-radiobutton-icon-dot {
                background-color: @radiobutton-invalid-focused-border-color;
            }

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

.dx-state-disabled {
    .dx-radiobutton {
        &.dx-state-disabled {
            opacity: 1;
        }
    }
}

.dx-rtl .dx-radiobutton,
.dx-rtl.dx-radiobutton {
    &.dx-radiobutton-checked .dx-radiobutton-icon-dot {
        margin-right: @MATERIAL_RADIOBUTTON_SIZE / 2 - @MATERIAL_RADIOBUTTON_DOT_SIZE / 2;
        margin-left: 0;
    }
}