@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.
61 lines • 3.5 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}._1151bk0g{--radio-border-color:var(--ds-border-disabled,#0515240f)}
._1151rsbi{--radio-border-color:var(--ds-border-input,#8c8f97)}
._1151s4qr{--radio-border-color:var(--ds-icon-danger,#c9372c)}
._11jyjmqp:checked{--radio-border-color:var(--ds-background-selected-bold,#1868db)}
._11jys4qr:checked{--radio-border-color:var(--ds-icon-danger,#c9372c)}
._12ji1r31{outline-color:currentColor}
._12y31o36{outline-width:medium}
._13diglyw{-moz-appearance:none}
._18postnw:after{position:absolute}
._1bah1h6o{justify-content:center}
._1bsb1tcg{width:24px}
._1e0c1txw{display:flex}
._1o9zidpf{flex-shrink:0}
._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
._1q6q187o{--radio-background-color:var(--ds-background-disabled,#0515240f)}
._1q6q1j9a{--radio-background-color:var(--ds-background-input,#fff)}
._1qdg120g:after{height:.6pc}
._1qu2glyw{outline-style:none}
._1s6w2sac{--radio-dot-color:var(--ds-icon-disabled,#080f214a)}
._1s6w5w2r{--radio-dot-color:var(--ds-icon-inverse,#fff)}
._4cvr1h6o{align-items:center}
._4cvr1y6m{align-items:flex-start}
._4t3i1tcg{height:24px}
._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}
._iosijmqp:checked{--radio-background-color:var(--ds-background-selected-bold,#1868db)}
._kqswh2mm{position:relative}
._s7n4jp4b{vertical-align:top}
._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
._syazi7uo{color:var(--ds-text,#292a2e)}
._t9ec1soj{transform:scale(.625)}
._tqbwidpf{--radio-dot-opacity:0}
._tqbwt94y{--radio-dot-opacity:1px}
._vchhusvi{box-sizing:border-box}
._wstuglyw{-webkit-appearance:none}
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
._z0ai120g:after{width:.6pc}
._6tjkdfik:checked:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
._y2mvdfik:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
._1bg41l7b:focus{outline-offset:3px}
._awqn1l7b:checked:focus{outline-offset:3px}
._1iwz1q28:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#1558bc)}
._1p9jrsbi:hover{--radio-border-color:var(--ds-border-input,#8c8f97)}
._1rvql4ek:hover{--radio-background-color:var(--ds-background-input-hovered,#f8f8f8)}
._x2tz1q28:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
._1dvdrsbi:checked:active{--radio-border-color:var(--ds-border-input,#8c8f97)}
._60ak5w2r:checked:active{--radio-dot-color:var(--ds-icon-inverse,#fff)}
._jcko12kk:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#123263)}
._sj8yr01l:active{--radio-background-color:var(--ds-background-input-pressed,#fff)}