@opentiny/vue-theme/radio/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-radio{--tv-Radio-text-color:var(--tv-color-text, #191919);--tv-Radio-font-size:var(--tv-font-size-sm, 12px);--tv-Radio-bordered-border-radius:var(--tv-border-radius-md, 6px);--tv-Radio-bordered-border-color:var(--tv-color-border, #c2c2c2);--tv-Radio-input-disabled-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-Radio-bordered-checked-border-color:var(--tv-color-border-active-control, #1476ff);--tv-Radio-bordered-hover-border-color:var(--tv-color-border-hover, #191919);--tv-Radio-bordered-checked-hover-border-color:var(--tv-color-border-active-control, #1476ff);--tv-Radio-bordered-active-border-color:var(--tv-color-border-active-control, #1476ff);--tv-Radio-input-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Radio-input-checked-disabled-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Radio-input-checked-disabled-border-color:var(--tv-color-icon-checked-disabled, #dbdbdb);--tv-Radio-input-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Radio-inner-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Radio-inner-checked-bg-color:var(--tv-color-bg-active-control, #1476ff);--tv-Radio-inner-size:8px;--tv-Radio-inner-checked-disabled-bg-color:var(--tv-color-bg-active-control-1, #dbdbdb);--tv-Radio-inner-border-radius:var(--tv-border-radius-round, 999px);--tv-Radio-inner-width:16px;--tv-Radio-inner-height:16px;--tv-Radio-margin-right:24px;--tv-Radio-button-margin-bottom:var(--tv-space-xl, 16px);color:var(--tv-Radio-text-color);margin-right:var(--tv-Radio-margin-right);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer;-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-radio:last-child{margin-right:0}.tiny-radio.is-bordered{padding:0 8px;border-radius:var(--tv-Radio-bordered-border-radius);border:1px solid var(--tv-Radio-bordered-border-color);-webkit-box-sizing:border-box;box-sizing:border-box;height:32px}.tiny-radio.is-bordered+.tiny-radio.is-bordered{margin-left:8px}.tiny-radio.is-bordered.is-checked{border-color:var(--tv-Radio-bordered-checked-border-color)}.tiny-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:var(--tv-Radio-bordered-border-color)}.tiny-radio,.tiny-radio__input{white-space:nowrap;outline:0}.tiny-radio__input{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.tiny-radio__input.is-checked .tiny-radio__inner{border-color:var(--tv-Radio-bordered-checked-border-color)}.tiny-radio__input.is-checked .tiny-radio__inner:after{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);background-color:var(--tv-Radio-inner-checked-bg-color)}.tiny-radio__input.is-checked:not(.is-disabled) .tiny-radio__inner:hover{border-color:var(--tv-Radio-bordered-checked-hover-border-color)}.tiny-radio__input.is-disabled .tiny-radio__inner{border-color:var(--tv-Radio-input-disabled-border-color)}.tiny-radio__input.is-disabled .tiny-radio__inner,.tiny-radio__input.is-disabled .tiny-radio__inner:after{cursor:not-allowed;background-color:var(--tv-Radio-input-disabled-bg-color)}.tiny-radio__input.is-disabled .tiny-radio__inner+.tiny-radio__label{cursor:not-allowed}.tiny-radio__input.is-disabled.is-checked .tiny-radio__inner{background-color:var(--tv-Radio-input-checked-disabled-bg-color);border-color:var(--tv-Radio-input-checked-disabled-border-color)}.tiny-radio__input.is-disabled.is-checked .tiny-radio__inner:after{background-color:var(--tv-Radio-inner-checked-disabled-bg-color)}.tiny-radio__input.is-disabled+span.tiny-radio__label{color:var(--tv-Radio-input-disabled-text-color);cursor:not-allowed}.tiny-radio__inner{border:1px solid var(--tv-Radio-bordered-border-color);border-radius:100%;width:var(--tv-Radio-inner-width);height:var(--tv-Radio-inner-height);background-color:var(--tv-Radio-inner-bg-color);position:relative;display:inline-block;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0}.tiny-radio__inner:hover{border-color:var(--tv-Radio-bordered-hover-border-color)}.tiny-radio__inner:active{border-color:var(--tv-Radio-bordered-active-border-color)}.tiny-radio__inner:after{width:var(--tv-Radio-inner-size);height:var(--tv-Radio-inner-size);border-radius:var(--tv-Radio-inner-border-radius);background-color:var(--tv-Radio-inner-bg-color);content:'';position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .15s ease-in;transition:-webkit-transform .15s ease-in;transition:transform .15s ease-in;transition:transform .15s ease-in,-webkit-transform .15s ease-in}.tiny-radio__original{opacity:0;outline:0;position:absolute;z-index:-1;margin:0;width:0;height:0}.tiny-radio__label{font-size:var(--tv-Radio-font-size);padding-left:8px;vertical-align:middle}.tiny-radio.is-checked.is-display-only{visibility:visible;line-height:1}.tiny-radio.is-checked.is-display-only .tiny-radio__input{padding:0;display:none}.tiny-radio.is-checked.is-display-only .tiny-radio__label{padding-left:0}.tiny-radio.is-display-only{visibility:hidden}.tiny-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .tiny-radio__inner{-webkit-box-shadow:0 0 2px 2px var(--tv-Radio-bordered-hover-border-color);box-shadow:0 0 2px 2px var(--tv-Radio-bordered-hover-border-color)}