UNPKG

@atlaskit/toggle

Version:

A toggle is used to view or switch between enabled or disabled states.

71 lines (70 loc) 4.27 kB
._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} ._1ys4194a:has(:focus-visible){border-color:var(--ds-border-focused,#2684ff)} ._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} ._1bki1y1w[data-disabled]:not([data-checked]){background-color:var(--ds-background-disabled,#f4f5f7)} ._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} ._1div5w2r[data-checked]:before{background-color:var(--ds-icon-inverse,#fff)} ._1e0c1o8l{display:inline-block} ._1fkr1y44:before{inset-block-end:4px} ._1flt1y1w[data-disabled][data-checked], ._3xv21y1w[data-disabled][data-checked]:hover{background-color:var(--ds-background-disabled,#f4f5f7)} ._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)} ._1rus5w2r:before{background-color:var(--ds-icon-inverse,#fff)} ._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)} ._9471g4a2[data-checked]{background-color:var(--ds-background-success-bold,#00875a)} ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)} ._bfhk76s1{background-color:var(--ds-background-neutral-bold,#6b778c)} ._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} ._mqf815t7[data-disabled], ._3dj215t7[data-disabled][data-checked], ._1dl915t7[data-disabled][data-checked]:hover{color:var(--ds-icon-disabled,#a5adba)} ._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} ._syaz5w2r{color:var(--ds-icon-inverse,#fff)} ._ucab5w2r[data-checked]{color:var(--ds-icon-inverse,#fff)} ._vchh1ntv{box-sizing:content-box} ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)} ._y54d5w2r[data-disabled]:before{background-color:var(--ds-icon-inverse,#fff)} ._z5wt1y44:before{inset-inline-start:4px} ._1av610yn input[type=checkbox]:focus{outline-width:medium!important} ._1vgmagmp input[type=checkbox]:focus{outline-style:none!important} ._onsr1snc input[type=checkbox]:focus{outline-color:currentColor!important} ._178c1y1w[data-disabled]:not([data-checked]):hover{background-color:var(--ds-background-disabled,#f4f5f7)} ._19ja13gf[data-disabled]:hover, ._8muf13gf[data-disabled]:not([data-checked]):hover, ._1k1q13gf[data-disabled][data-checked]:hover{cursor:not-allowed} ._1plud4ly[data-checked]:hover{background-color:var(--ds-background-success-bold-hovered,#064)} ._1uo853wy:not([data-checked]):hover{background-color:var(--ds-background-neutral-bold-hovered,#505f79)} ._d0altlke:hover{cursor:pointer} ._irr353wy:hover{background-color:var(--ds-background-neutral-bold-hovered,#505f79)} @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}}