@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
71 lines (70 loc) • 3.96 kB
CSS
._1yc0glyw input[type=checkbox]{border:none}
._2rkopxbi{border-radius:var(--ds-space-200,1pc)}
._2rkov47k{border-radius:var(--ds-space-250,20px)}
._pdykkete:before{transition:transform .2s ease}
._rfx31q5u:before{border-radius:var(--ds-border-radius-circle,50%)}
._v564kete{transition:transform .2s ease}
._189eyh40{border-width:2px}
._1dqonqa1{border-style:solid}
._1h6d1j28{border-color:transparent}
._1ys43zdg:has(:focus-visible){border-color:var(--_xjqa3d)}
._ju3dyh40:has(:focus-visible){border-width:2px}
._krlfnqa1:has(:focus-visible){border-style:solid}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
._1423idpf input[type=checkbox]{padding-top:0}
._19vpgktf >span>span{height:20px}
._1bki1ouc[data-disabled]:not([data-checked]){background-color:var(--_r5pknd)}
._1bsb1jfw{width:var(--ds-space-500,40px)}
._1bsbxy5q{width:var(--ds-space-400,2pc)}
._1bz2idpf input[type=checkbox]{padding-bottom:0}
._1cs8stnw:before{position:absolute}
._1divw5hi[data-checked]:before{background-color:var(--_1qgzj18)}
._1e0c1o8l{display:inline-block}
._1fkr1y44:before{inset-block-end:4px}
._1flt1ouc[data-disabled][data-checked], ._3xv21ouc[data-disabled][data-checked]:hover{background-color:var(--_r5pknd)}
._1hrtidpf input[type=checkbox]{padding-right:0}
._1i2uidpf input[type=checkbox]{margin-top:0}
._1i3tidpf input[type=checkbox]{margin-right:0}
._1il8kb7n[data-disabled]:before{z-index:1}
._1kt9b3bt:before{content:""}
._1mp41crf:before{width:9pt}
._1mp47vkz:before{width:1pc}
._1n82gktf >span>span{width:20px}
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
._1rusw5hi:before{background-color:var(--_1qgzj18)}
._1ulhidpf input[type=checkbox]{opacity:0}
._1y1m1ntv{background-clip:content-box}
._3tunidpf input[type=checkbox]{margin-left:0}
._4t3ipxbi{height:var(--ds-space-200,1pc)}
._4t3iv47k{height:var(--ds-space-250,20px)}
._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
._7dwzglyw:before{transform:none}
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
._94713286[data-checked]{background-color:var(--_16xemc6)}
._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
._bfhk1tkq{background-color:var(--_1lrlov9)}
._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
._kfgtpxbi:before{height:var(--ds-space-200,1pc)}
._kfgtutpp:before{height:var(--ds-space-150,9pt)}
._kqswh2mm{position:relative}
._mqf8snw8[data-disabled], ._3dj2snw8[data-disabled][data-checked], ._1dl9snw8[data-disabled][data-checked]:hover{color:var(--_1xmcmw9)}
._p9c41fbe[data-checked]:before{transform:translateX(var(--ds-space-200,1pc))}
._p9c4w12q[data-checked]:before{transform:translateX(var(--ds-space-250,20px))}
._rqfvidpf input[type=checkbox]{padding-left:0}
._se28idpf input[type=checkbox]{margin-bottom:0}
._syazw5hi{color:var(--_1qgzj18)}
._ucabw5hi[data-checked]{color:var(--_1qgzj18)}
._vchh1ntv{box-sizing:content-box}
._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
._y54dw5hi[data-disabled]:before{background-color:var(--_1qgzj18)}
._z5wt1y44:before{inset-inline-start:4px}
._1av610yn input[type=checkbox]:focus{outline-width:medium}
._1vgmagmp input[type=checkbox]:focus{outline-style:none}
._onsr1snc input[type=checkbox]:focus{outline-color:currentColor!important}
._178c1ouc[data-disabled]:not([data-checked]):hover{background-color:var(--_r5pknd)}
._19ja13gf[data-disabled]:hover, ._8muf13gf[data-disabled]:not([data-checked]):hover, ._1k1q13gf[data-disabled][data-checked]:hover{cursor:not-allowed}
._1plu15bl[data-checked]:hover{background-color:var(--_2cuxaa)}
._1uo81mlc:not([data-checked]):hover{background-color:var(--_ouwnnt)}
._d0altlke:hover{cursor:pointer}
._irr31mlc:hover{background-color:var(--_ouwnnt)}
@media screen and (forced-colors:active){._16rslghj:before{filter:grayscale(100%) invert(1)}._ogf41r31:focus-within{outline-color:currentColor}._1rtbnqa1:focus-within{outline-style:solid}._5gg9t94y:focus-within{outline-width:1px}}