vexip-ui/css/radio.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-radio-vars{--vxp-radio-color-checked-button:#fff;--vxp-radio-bg-color-button:transparent;--vxp-radio-bg-color-checked-button:var(--vxp-color-primary-base);--vxp-radio-bg-color-disabled-button:var(--vxp-fill-color-background);--vxp-radio-b-color:var(--vxp-border-color-base);--vxp-radio-b-color-hover:var(--vxp-color-primary-base);--vxp-radio-b-color-checked:var(--vxp-color-primary-base);--vxp-radio-b-color-disabled:var(--vxp-fill-color-disabled);--vxp-radio-signal-bg-color:transparent;--vxp-radio-signal-bg-color-checked:var(--vxp-color-primary-base);--vxp-radio-signal-bg-color-disabled:var(--vxp-fill-color-disabled);--vxp-radio-signal-b-color-hover:var(--vxp-radio-b-color-hover);--vxp-radio-label-color:inherit;--vxp-radio-label-color-hover-button:var(--vxp-radio-b-color-hover);--vxp-radio-label-color-checked:var(--vxp-color-primary-base);--vxp-radio-label-color-checked-button:#fff;--vxp-radio-label-color-disabled:var(--vxp-content-color-disabled);--vxp-radio-radius:var(--vxp-radius-base);--vxp-radio-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-radio-shadow-focus:var(--vxp-shadow-focus) var(--vxp-radio-s-color-focus);--vxp-radio-signal-size:18px;--vxp-radio-signal-inner-size:10px;--vxp-radio-button-height:32px;--vxp-radio-button-v-padding:0;--vxp-radio-button-h-padding:10px;--vxp-radio-series-span:10px}.vxp-radio{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;margin-inline-end:var(--vxp-radio-series-span);vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-radio,.vxp-radio *,.vxp-radio ::after,.vxp-radio ::before{box-sizing:border-box}.vxp-radio--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-radio,.vxp-radio--inherit{line-height:1}.vxp-radio:last-child{margin-inline-end:0}.vxp-radio--border{height:var(--vxp-radio-button-height);padding:var(--vxp-radio-button-v-padding) var(--vxp-radio-button-h-padding);border:var(--vxp-border-shape) var(--vxp-radio-b-color);border-radius:var(--vxp-radio-radius)}.vxp-radio--border:hover{border-color:var(--vxp-radio-b-color-hover)}.vxp-radio--checked.vxp-radio--border{border-color:var(--vxp-radio-b-color-checked)}.vxp-radio--disabled.vxp-radio--border,.vxp-radio--disabled.vxp-radio--border:hover{border-color:var(--vxp-radio-b-color-disabled)}.vxp-radio--button{background-color:var(--vxp-radio-bg-color-button);height:var(--vxp-radio-button-height);padding:var(--vxp-radio-button-v-padding) var(--vxp-radio-button-h-padding);border:var(--vxp-border-shape) var(--vxp-radio-b-color);border-radius:var(--vxp-radio-radius)}.vxp-radio--button:hover{border-color:var(--vxp-radio-b-color-hover)}.vxp-radio--button:focus-within{border-color:var(--vxp-radio-b-color-hover);box-shadow:var(--vxp-radio-shadow-focus)}.vxp-radio--checked.vxp-radio--button{background-color:var(--vxp-radio-bg-color-checked-button);border-color:var(--vxp-radio-b-color-checked)}.vxp-radio--disabled.vxp-radio--button,.vxp-radio--disabled.vxp-radio--button:hover{background-color:var(--vxp-radio-bg-color-disabled-button);border-color:var(--vxp-radio-b-color-disabled)}.vxp-radio--loading{cursor:auto}.vxp-radio__signal{position:relative;position:relative;display:inline-block;width:var(--vxp-radio-signal-size);height:var(--vxp-radio-signal-size);background-color:var(--vxp-radio-signal-bg-color);border:var(--vxp-border-shape) var(--vxp-radio-b-color);border-radius:50%;transition:var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-radio__signal::before{position:absolute;top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);clip-path:inset(0 0 50% 50%);pointer-events:none;content:"";border:var(--vxp-border-shape) var(--vxp-radio-b-color);border-radius:50%;transition:var(--vxp-transition-border),var(--vxp-transition-opacity);transform-origin:50% 50%;animation:vxp-border-round 2s infinite linear}.vxp-radio__signal::before{opacity:0}.vxp-radio__signal--active::before{opacity:100%}.vxp-radio__signal::after{position:absolute;top:50%;left:50%;width:var(--vxp-radio-signal-inner-size);height:var(--vxp-radio-signal-inner-size);content:"";background-color:var(--vxp-radio-signal-bg-color-checked);border-radius:50%;opacity:0;transition:var(--vxp-transition-background),var(--vxp-transition-opacity),var(--vxp-transition-transform);transform:translate(-50%,-50%) scale(0)}.vxp-radio:focus-within .vxp-radio__signal{box-shadow:var(--vxp-radio-shadow-focus)}.vxp-radio--button .vxp-radio__signal{display:none}.vxp-radio--small{--vxp-radio-signal-size:14px;--vxp-radio-signal-inner-size:7px;--vxp-radio-button-height:24px;--vxp-radio-button-h-padding:8px}.vxp-radio--large{--vxp-radio-signal-size:22px;--vxp-radio-signal-inner-size:13px;--vxp-radio-button-height:40px;--vxp-radio-button-h-padding:14px}.vxp-radio:hover .vxp-radio__signal,.vxp-radio:hover .vxp-radio__signal::before{border-color:var(--vxp-radio-signal-b-color-hover)}.vxp-radio--checked .vxp-radio__signal,.vxp-radio--checked .vxp-radio__signal::before{border-color:var(--vxp-radio-b-color-checked)}.vxp-radio--checked .vxp-radio__signal::after{opacity:100%;transform:translate(-50%,-50%) scale(1)}.vxp-radio__label{display:inline-flex;align-items:center;margin-inline-start:6px;color:var(--vxp-radio-label-color);white-space:nowrap;transition:var(--vxp-transition-color)}.vxp-radio--button .vxp-radio__label{margin-inline-start:0}.vxp-radio--button:focus-within .vxp-radio__label,.vxp-radio--button:hover .vxp-radio__label{color:var(--vxp-radio-label-color-hover-button)}.vxp-radio--checked .vxp-radio__label{color:var(--vxp-radio-label-color-checked)}.vxp-radio--checked.vxp-radio--button .vxp-radio__label{color:var(--vxp-radio-label-color-checked-button)}.vxp-radio__loading{display:flex;align-items:center;height:100%;margin-inline-end:4px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-radio--success{--vxp-radio-bg-color-checked-button:var(--vxp-color-success-base);--vxp-radio-b-color:var(--vxp-color-success-base);--vxp-radio-b-color-hover:var(--vxp-color-success-base);--vxp-radio-b-color-checked:var(--vxp-color-success-base);--vxp-radio-signal-bg-color-checked:var(--vxp-color-success-base);--vxp-radio-label-color-checked:var(--vxp-color-success-base);--vxp-radio-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-radio--error{--vxp-radio-bg-color-checked-button:var(--vxp-color-error-base);--vxp-radio-b-color:var(--vxp-color-error-base);--vxp-radio-b-color-hover:var(--vxp-color-error-base);--vxp-radio-b-color-checked:var(--vxp-color-error-base);--vxp-radio-signal-bg-color-checked:var(--vxp-color-error-base);--vxp-radio-label-color-checked:var(--vxp-color-error-base);--vxp-radio-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-radio--warning{--vxp-radio-bg-color-checked-button:var(--vxp-color-warning-base);--vxp-radio-b-color:var(--vxp-color-warning-base);--vxp-radio-b-color-hover:var(--vxp-color-warning-base);--vxp-radio-b-color-checked:var(--vxp-color-warning-base);--vxp-radio-signal-bg-color-checked:var(--vxp-color-warning-base);--vxp-radio-label-color-checked:var(--vxp-color-warning-base);--vxp-radio-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-radio--disabled{cursor:not-allowed}.vxp-radio--disabled,.vxp-radio--disabled:hover{border-color:var(--vxp-radio-b-color-disabled)}.vxp-radio--disabled .vxp-radio__label,.vxp-radio--disabled:focus-within .vxp-radio__label,.vxp-radio--disabled:hover .vxp-radio__label{color:var(--vxp-radio-label-color-disabled)}.vxp-radio--disabled .vxp-radio__signal,.vxp-radio--disabled .vxp-radio__signal::before,.vxp-radio--disabled:hover .vxp-radio__signal,.vxp-radio--disabled:hover .vxp-radio__signal::before{border-color:var(--vxp-radio-b-color-disabled)}.vxp-radio--disabled .vxp-radio__signal::after,.vxp-radio--disabled:hover .vxp-radio__signal::after{background-color:var(--vxp-radio-signal-bg-color-disabled)}.vxp-radio__input{width:0;height:0;margin:0;pointer-events:none;opacity:0}.vxp-radio-group{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;align-items:center;justify-content:flex-start}.vxp-radio-group,.vxp-radio-group *,.vxp-radio-group ::after,.vxp-radio-group ::before{box-sizing:border-box}.vxp-radio-group--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-radio-group--vertical{flex-direction:column;align-items:flex-start;justify-content:center}.vxp-radio-group--vertical .vxp-radio{margin-inline-end:0;margin-bottom:6px}.vxp-radio-group--vertical .vxp-radio:last-child{margin-bottom:0}.vxp-radio-group--button-group .vxp-radio{position:relative;z-index:0;height:var(--vxp-radio-button-height);padding:var(--vxp-radio-button-v-padding) var(--vxp-radio-button-h-padding);margin:0;border:var(--vxp-border-shape) var(--vxp-radio-b-color);border-inline-start-width:0;border-radius:0}.vxp-radio-group--button-group .vxp-radio::after{position:absolute;inset-inline-start:calc(var(--vxp-border-width) * -1);top:0;bottom:0;display:block;width:var(--vxp-border-width);content:"";background-color:transparent;transition:var(--vxp-transition-background)}.vxp-radio-group--button-group .vxp-radio:hover{border-color:var(--vxp-radio-b-color-checked);box-shadow:calc(var(--vxp-border-width) * -1) 0 0 0 var(--vxp-radio-b-color-checked)}html.rtl .vxp-radio-group--button-group .vxp-radio:hover,html[dir=rtl] .vxp-radio-group--button-group .vxp-radio:hover{box-shadow:var(--vxp-border-width) 0 0 0 var(--vxp-radio-b-color-checked)}.vxp-radio-group--button-group .vxp-radio:focus-within .vxp-radio__label,.vxp-radio-group--button-group .vxp-radio:hover .vxp-radio__label{color:var(--vxp-radio-label-color-hover-button)}.vxp-radio-group--button-group .vxp-radio:first-child{border-start-start-radius:var(--vxp-radius-base);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-radius-base);border-inline-start-width:var(--vxp-border-width);box-shadow:none}html.rtl .vxp-radio-group--button-group .vxp-radio:first-child,html[dir=rtl] .vxp-radio-group--button-group .vxp-radio:first-child{box-shadow:none}.vxp-radio-group--button-group .vxp-radio:first-child::after{content:none}.vxp-radio-group--button-group .vxp-radio:last-child{border-start-start-radius:0;border-start-end-radius:var(--vxp-radius-base);border-end-end-radius:var(--vxp-radius-base);border-end-start-radius:0}.vxp-radio-group--button-group .vxp-radio--checked{z-index:1;border-color:var(--vxp-radio-b-color-checked);box-shadow:calc(var(--vxp-border-width) * -1) 0 0 0 var(--vxp-radio-b-color-checked)}html.rtl .vxp-radio-group--button-group .vxp-radio--checked,html[dir=rtl] .vxp-radio-group--button-group .vxp-radio--checked{box-shadow:var(--vxp-border-width) 0 0 0 var(--vxp-radio-b-color-checked)}.vxp-radio-group--button-group .vxp-radio:focus-within{border-color:var(--vxp-radio-b-color-hover);box-shadow:calc(var(--vxp-border-width) * -1) 0 0 0 var(--vxp-radio-b-color-hover),var(--vxp-radio-shadow-focus)}html.rtl .vxp-radio-group--button-group .vxp-radio:focus-within,html[dir=rtl] .vxp-radio-group--button-group .vxp-radio:focus-within{box-shadow:var(--vxp-border-width) 0 0 0 var(--vxp-radio-b-color-hover),var(--vxp-radio-shadow-focus)}.vxp-radio-group--button-group .vxp-radio:focus-within::after{inset-inline-start:-3px;top:-3px;bottom:-3px;background-color:var(--vxp-radio-s-color-focus);opacity:50%}.vxp-radio-group--button-group .vxp-radio:focus-within:first-child{box-shadow:var(--vxp-radio-shadow-focus)}html.rtl .vxp-radio-group--button-group .vxp-radio:focus-within:first-child,html[dir=rtl] .vxp-radio-group--button-group .vxp-radio:focus-within:first-child{box-shadow:var(--vxp-radio-shadow-focus)}.vxp-radio-group--button-group .vxp-radio__signal{display:none}.vxp-radio-group--button-group .vxp-radio__label{margin-inline-start:0}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio{border-inline-start-width:var(--vxp-border-width);border-top-width:0}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio::after{inset:calc(var(--vxp-border-width) * -1) 0 auto;width:auto;height:var(--vxp-border-width)}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:hover{box-shadow:0 calc(var(--vxp-border-width) * -1) 0 0 var(--vxp-radio-b-color-checked)}html.rtl .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:hover,html[dir=rtl] .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:hover{box-shadow:0 var(--vxp-border-width) 0 0 var(--vxp-radio-b-color-checked)}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:first-child{border-start-start-radius:var(--vxp-radius-base);border-start-end-radius:var(--vxp-radius-base);border-end-end-radius:0;border-end-start-radius:0;border-top-width:var(--vxp-border-width);box-shadow:none}html.rtl .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:first-child,html[dir=rtl] .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:first-child{box-shadow:none}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:first-child::after{content:none}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:last-child{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:var(--vxp-radius-base);border-end-start-radius:var(--vxp-radius-base)}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio--checked{box-shadow:0 calc(var(--vxp-border-width) * -1) 0 0 var(--vxp-radio-b-color-checked)}html.rtl .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio--checked,html[dir=rtl] .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio--checked{box-shadow:0 var(--vxp-border-width) 0 0 var(--vxp-radio-b-color-checked)}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within{box-shadow:0 calc(var(--vxp-border-width) * -1) 0 0 var(--vxp-radio-b-color-hover),var(--vxp-radio-shadow-focus)}html.rtl .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within,html[dir=rtl] .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within{box-shadow:0 var(--vxp-border-width) 0 0 var(--vxp-radio-b-color-hover),var(--vxp-radio-shadow-focus)}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within::after{inset-inline:-3px;top:-3px;bottom:auto}.vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within:first-child{box-shadow:var(--vxp-radio-shadow-focus)}html.rtl .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within:first-child,html[dir=rtl] .vxp-radio-group--vertical.vxp-radio-group--button-group .vxp-radio:focus-within:first-child{box-shadow:var(--vxp-radio-shadow-focus)}.vxp-radio-group--small .vxp-radio{--vxp-radio-signal-size:14px;--vxp-radio-signal-inner-size:7px;--vxp-radio-button-height:24px;--vxp-radio-button-h-padding:8px}.vxp-radio-group--large .vxp-radio{--vxp-radio-signal-size:22px;--vxp-radio-signal-inner-size:13px;--vxp-radio-button-height:40px;--vxp-radio-button-h-padding:14px}.vxp-radio-group--button-group .vxp-radio--disabled,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio{background-color:var(--vxp-radio-bg-color-disabled-button);border-color:var(--vxp-radio-b-color)!important;box-shadow:none!important}.vxp-radio-group--button-group .vxp-radio--disabled .vxp-radio__label,.vxp-radio-group--button-group .vxp-radio--disabled:focus-within .vxp-radio__label,.vxp-radio-group--button-group .vxp-radio--disabled:hover .vxp-radio__label,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio .vxp-radio__label,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio:focus-within .vxp-radio__label,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio:hover .vxp-radio__label{color:var(--vxp-radio-label-color-disabled)}.vxp-radio-group--button-group .vxp-radio--disabled.vxp-radio--checked,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio--checked{background-color:var(--vxp-radio-bg-color-disabled-button)}.vxp-radio-group--button-group .vxp-radio--disabled.vxp-radio--checked .vxp-radio__label,.vxp-radio-group--button-group.vxp-radio-group--disabled .vxp-radio--checked .vxp-radio__label{color:var(--vxp-radio-label-color-disabled)}