diff --git a/src/switch.css b/src/switch.css new file mode 100644 index 0000000..50c4f7b --- /dev/null +++ b/src/switch.css @@ -0,0 +1,36 @@ +input[type="checkbox"][role="switch"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + font-size: inherit; + width: 2.1em; + height: 1em; + box-sizing: content-box; + border: 1px solid; + /* border-radius: 1em; */ + vertical-align: text-bottom; + margin: auto; + color: inherit; +} + +input[type="checkbox"][role="switch"]::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + transform: translate(0, -50%); + box-sizing: border-box; + width: 0.86em; + height: 0.85em; + margin: 0 0.15em; + border: 1px solid; + /* border-radius: 50%; */ + background: var(--dark, #000); +} + +input[type="checkbox"][role="switch"]:checked::before { + left: 1em; + background: var(--primary, #000); + border: 1px solid var(--primary, #000); +} \ No newline at end of file