lu2/theme/edge/css/common/ui/Radio.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Radio.css
 * @author zhangxinxu
 * @create 15-06-17
 * @edit   17-06-14 focusable
 * @editor shanyerong
 * @edit   2020-04-30    description here
**/
/* radio基础变量 */
:root {
    --ui-radio-width: 20px;
    --ui-radio-height: 20px;
}

[is="ui-radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    width: var(--ui-radio-width, 20px);
    height: var(--ui-radio-height, 20px);
    cursor: pointer;
    display: inline-flex;
    outline: none;
    border: solid 1px var(--ui-border, #d0d0d5);
    background-color: var(--ui-white, #ffffff);
    border-radius: 100%;
    box-sizing: border-box;
    vertical-align: -0.5ex;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: border-color var(--ui-animate-time, .2s);
}
[is="ui-radio"]::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--ui-blue, #2a80eb);
    transform: scale(0);
    opacity: 0;
    border-radius: 100%;
}

[is="ui-radio"]:not(:disabled):hover {
    border-color: var(--ui-dark-border, #ababaf);
}
[is="ui-radio"]:focus {
    border-color: var(--ui-blue, #2a80eb);
}
[is="ui-radio"]:checked::after {
    transform: scale(.5);
    opacity: 1;
}
[is="ui-radio"]:disabled {
    border-color: var(--ui-dark-border, #ababaf);
    opacity: var(--ui-opacity, .4);
    cursor: default;
}
[is="ui-radio"][is-error] {
    border-color: var(--ui-red, #eb4646) !important;
}

@media (prefers-reduced-motion: reduce) {
    [is="ui-radio"] {
        transition: none;
    }
}