UNPKG

@react-beauty/ui-radio

Version:

ui-radio

2 lines (1 loc) 3.79 kB
.react-beauty-el-radio-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--components-radio-gap);position:relative;width:100%}.react-beauty-el-radio-label{font-size:var(--components-radio-font-size-label);line-height:var(--components-radio-line-height-label);font-weight:var(--components-radio-font-weight-label);color:var(--components-radio-colors-label);cursor:pointer;margin-left:8px}.react-beauty-el-radio-label[data-disabled=true]{opacity:.32;cursor:not-allowed}.react-beauty-el-radio-circle{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--components-radio-size);height:var(--components-radio-size);border-radius:50%;border:1px solid var(--colors-main-beerus);-webkit-transition:border-color var(--components-radio-transition-duration) var(--components-radio-transition-timing);transition:border-color var(--components-radio-transition-duration) var(--components-radio-transition-timing);background-color:var(--components-radio-colors-background-unchecked)}.react-beauty-el-radio-circle:after{content:"";position:absolute;width:calc(var(--components-radio-size) / 2);height:calc(var(--components-radio-size) / 2);border-radius:50%;background-color:var(--components-radio-colors-dot);-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform var(--components-radio-transition-duration) var(--components-radio-transition-timing);transition:transform var(--components-radio-transition-duration) var(--components-radio-transition-timing)}[data-checked=true] .react-beauty-el-radio-circle{border-color:var(--components-radio-colors-border-checked)}[data-checked=true] .react-beauty-el-radio-circle:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.react-beauty-el-radio-circle[data-disabled=true]{opacity:.32;cursor:not-allowed;border-color:var(--components-radio-colors-border-disabled)}.react-beauty-el-radio-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:pointer}.react-beauty-el-radio-input:focus-visible+.react-beauty-el-radio-circle{outline:2px solid var(--components-radio-colors-focus-ring);outline-offset:2px}.react-beauty-el-radio-input:disabled{cursor:not-allowed}.react-beauty-el-radio-helper-text{font-size:var(--components-radio-font-size-helper);line-height:var(--components-radio-line-height-helper);color:var(--components-radio-colors-helper-text-normal);padding:var(--space-none) var(--space-3);-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:calc(var(--components-radio-gap) / 2)}.react-beauty-el-radio-helper-text[data-error=true]{color:var(--components-radio-colors-helper-text-error)}.react-beauty-el-radio-helper-text[data-disabled=true]{opacity:.32}.react-beauty-el-radio-wrapper{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-radio-wrapper[data-disabled=true]{cursor:not-allowed}.react-beauty-el-radio-group-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--components-radio-group-gap)}