switcher.css
2 lines
| 1 | .field-type-switcher{--thumb-size: 1rem;--track-size: calc(var(--thumb-size) * 2);--track-padding: 2px;--thumb-color-highlight: hsla(0, 0%, 0%, 0.25);--highlight-size: 0;--thumb-transition-duration: 0.4s;--thumb-position: 0%;--isLTR: 1}.field-type-switcher:dir(rtl){--isLTR: -1}.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]{padding:var(--c-track-padding, var(--track-padding));inline-size:var(--c-track-size, var(--track-size));block-size:var(--c-thumb-size, var(--thumb-size));border-radius:var(--c-track-size, var(--track-size));background:none;appearance:none;outline-offset:5px;transition:background-color .4s;position:relative;cursor:pointer;box-sizing:content-box;flex:unset;display:grid;align-items:center;grid:[track] 1fr/[track] 1fr}.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]:not(:checked){background:var(--c-track-bg-color, var(--track-bg-color, #ddd))}.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]:checked{background:var(--checked-track-bg-color, #4caf50);--thumb-position: calc((var(--c-track-size, var(--track-size) ) - 100%) * var(--isLTR))}.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]:not(:disabled):hover::before{--highlight-size: 0.5rem}.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]::before{content:"";position:absolute;grid-area:track;inline-size:var(--c-thumb-size, var(--thumb-size));block-size:var(--c-thumb-size, var(--thumb-size));border-radius:50%;background:var(--thumb-bg-color, #fff);transition:transform var(--thumb-transition-duration) ease,box-shadow .25s ease;box-shadow:0 0 0 var(--highlight-size) var(--thumb-color-highlight);transform:translateX(var(--thumb-position))}.block-editor-block-list__block.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]{padding:var(--track-padding) !important;border:unset;margin:unset}.block-editor-block-list__block.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]::before{margin:unset} |
| 2 |