devextreme/less/sources/widgets/generic/radioButton.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/radioButton.generic.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @GENERIC_RADIOBUTTON_SIZE: 22px;
    @GENERIC_RADIOBUTTON_DOT_SIZE: 10px;
}

.dx-size-compact() {
    @GENERIC_RADIOBUTTON_SIZE: 16px;
    @GENERIC_RADIOBUTTON_DOT_SIZE: 8px;
}

@GENERIC_RADIOBUTTON_BORDER_WIDTH: 1px;
@GENERIC_RADIOBUTTON_INNER_SIZE: @GENERIC_RADIOBUTTON_SIZE - @GENERIC_RADIOBUTTON_BORDER_WIDTH * 2;

.dx-radiobutton-icon {
    width: @GENERIC_RADIOBUTTON_SIZE;
    height: @GENERIC_RADIOBUTTON_SIZE;
}

.dx-radiobutton-icon:before {
    display: block;
    width: @GENERIC_RADIOBUTTON_INNER_SIZE;
    height: @GENERIC_RADIOBUTTON_INNER_SIZE;
    border: @GENERIC_RADIOBUTTON_BORDER_WIDTH solid @radiogroup-border-color;
    background-color: @radiogroup-bg;
    content: "";
    border-radius: @GENERIC_RADIOBUTTON_SIZE / 2;
    box-sizing: content-box;
}

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

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

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

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

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

    &.dx-state-focused {
        &:not(.dx-state-active) {
            .dx-radiobutton-icon:before {
                border: @GENERIC_RADIOBUTTON_BORDER_WIDTH solid @radiobutton-focused-border-color;
            }
        }
    }

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

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

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

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

.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: @GENERIC_RADIOBUTTON_INNER_SIZE / 4 + @GENERIC_RADIOBUTTON_BORDER_WIDTH;
        margin-left: 0;
    }
}