devextreme/less/sources/widgets/ios7/radioButton.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/radioButton.ios7.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@IOS7_RADIONBUTTON_ICON_SIZE: 32px;

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

    .dx-radiobutton-checked & {
        .dx-radiobutton-icon-dot {
            position: absolute;
            width: @IOS7_RADIONBUTTON_ICON_SIZE/2;
            height: @IOS7_RADIONBUTTON_ICON_SIZE/2;
            left: @IOS7_RADIONBUTTON_ICON_SIZE/4;
            top: @IOS7_RADIONBUTTON_ICON_SIZE/4;
            background: @IOS7_RADIOGROUP_BACKGROUND_COLOR;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            border-radius: 50%;
        }

        &:before {
            background: @IOS7_RADIOGROUP_CHECK_BACKGROUND_COLOR;
            box-shadow: none;
        }
    }

    &:before {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @IOS7_RADIOGROUP_BACKGROUND_COLOR;
        box-shadow: 0 0 2px rgba(170, 170, 170, 0.6) inset;
        border-radius: 50%;
    }

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

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

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

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


.dx-invalid {
    .dx-radiobutton-icon:before {
        border: 1px solid @IOS7_FADED_INVALID_COLOR;
    }

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