@atlaskit/radio
Version:
A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
102 lines (101 loc) • 6.55 kB
CSS
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
._16r2ucr4:after{background:var(--radio-dot-color)}
._18s8ze3t{margin:var(--ds-space-0,0)}
._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._11511fmg{--radio-border-color:var(--ds-border-input,#7a869a)}
._1151k8x7{--radio-border-color:var(--ds-icon-danger,#ff5630)}
._1151zcs9{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._11jyk8x7:checked{--radio-border-color:var(--ds-icon-danger,#ff5630)}
._11jyzyvw:checked{--radio-border-color:var(--ds-background-selected-bold,#0052cc)}
._12ji1r31{outline-color:currentColor}
._12y31o36{outline-width:medium}
._13diglyw{-moz-appearance:none}
._17a1zcs9:disabled[data-invalid]{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._18postnw:after{position:absolute}
._19ybk8x7:checked[data-invalid]{--radio-border-color:var(--ds-icon-danger,#ff5630)}
._1bah1h6o{justify-content:center}
._1bsb1tcg{width:24px}
._1d7pk8x7[data-invalid]{--radio-border-color:var(--ds-icon-danger,#ff5630)}
._1e0c1txw{display:flex}
._1el21y1w:disabled[data-invalid]{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._1if1zcs9:disabled:checked{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._1o9zidpf{flex-shrink:0}
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
._1q6q1y1w{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._1q6qmag2{--radio-background-color:var(--ds-background-input,#fafbfc)}
._1qdg120g:after{height:.6pc}
._1qu2glyw{outline-style:none}
._1s6w15t7{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._1s6w1qbb{--radio-dot-color:var(--ds-icon-inverse,#fafbfc)}
._2kbk1y1w:disabled:checked{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._4cvr1h6o{align-items:center}
._4cvr1y6m{align-items:flex-start}
._4fps13gf:disabled:checked{cursor:not-allowed}
._4rya1y1w:disabled{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._4t3i1tcg{height:24px}
._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
._80om13gf{cursor:not-allowed}
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
._aetrb3bt:after{content:""}
._bfhk4t47{background-color:var(--radio-background-color)}
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
._f3ett94y:checked{--radio-dot-opacity:1px}
._g7st13gf[data-disabled]{cursor:not-allowed}
._iosizyvw:checked{--radio-background-color:var(--ds-background-selected-bold,#0052cc)}
._j5dh13gf:disabled{cursor:not-allowed}
._kqswh2mm{position:relative}
._lekrzcs9:disabled{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._mqf81tvo[data-disabled]{color:var(--ds-text-disabled,#97a0af)}
._pmm415t7:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._s7n4jp4b{vertical-align:top}
._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
._syazj3m3{color:var(--ds-text,#091e42)}
._t9ec1soj{transform:scale(.625)}
._tqbwidpf{--radio-dot-opacity:0}
._tqbwt94y{--radio-dot-opacity:1px}
._vchhusvi{box-sizing:border-box}
._wml015t7:disabled:checked{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._wstuglyw{-webkit-appearance:none}
._x48a15t7:disabled{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
._z0ai120g:after{width:.6pc}
._6tjkjdfc:checked:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#2684ff)}
._y2mvjdfc:focus{outline:var(--ds-border-width-focused,3px) solid var(--ds-border-focused,#2684ff)}
._1bg41l7b:focus{outline-offset:3px}
._1c6f15t7:disabled:checked:focus{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._1f8czcs9:disabled:focus{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._1gcs13gf:disabled:focus{cursor:not-allowed}
._1yk915t7:disabled:focus{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._92nazcs9:disabled:checked:focus{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._awqn1l7b:checked:focus{outline-offset:3px}
._n8t01y1w:disabled:checked:focus{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._nxi61y1w:disabled:focus{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._qep213gf:disabled:checked:focus{cursor:not-allowed}
._180n13gf:disabled:checked:hover{cursor:not-allowed}
._1iwzhh5a:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#0065ff)}
._1o5r1y1w:disabled:checked:hover{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._1p9j1fmg:hover{--radio-border-color:var(--ds-border-input,#7a869a)}
._1rvq10ko:hover{--radio-background-color:var(--ds-background-input-hovered,#ebecf0)}
._1x1a13gf:disabled:hover{cursor:not-allowed}
._awurzcs9:disabled:checked:hover{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._gdmb15t7:disabled:hover{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._neoe1y1w:disabled:hover{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._qftt15t7:disabled:checked:hover{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._s2ftzcs9:disabled:hover{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._x2tzhh5a:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#0065ff)}
._11v7zcs9:disabled:active{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._1dvd1fmg:checked:active{--radio-border-color:var(--ds-border-input,#7a869a)}
._1ib215t7:disabled:active{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
._5ry313gf:disabled:checked:active{cursor:not-allowed}
._60ak1dzn:checked:active{--radio-dot-color:var(--ds-icon-inverse,#0052cc)}
._6cyr1y1w:disabled:checked:active{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._bl0ezcs9:disabled:checked:active{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
._jckox2ru:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#deebff)}
._o1bd1y1w:disabled:active{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
._scgf13gf:disabled:active{cursor:not-allowed}
._sj8y1wq0:active{--radio-background-color:var(--ds-background-input-pressed,#ebecf0)}
._tusm15t7:disabled:checked:active{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}