On mobile the input suffers from the "300ms delay" issue as discussed in Slack.

source: https://codepen.io/oliviale/pen/xxboXzo

https://badge.fury.io/for/gh/adamculpepper/toggle-switchy

Hi Adam,

thank you for your library!

I had a hard time getting the alignment of the switch button correct with the example code.

Running the example on a clean homepage without any CSS framworks included, the buttons were displayed as in this image:

Strangely, the buttons are displayed correctly when just including bootstrap.css as seems to be the case for the examples I found on Google:

The reason I found just now, these framworks apply the global style "box-sizing: border-box;" which is not a browser default at least on Firefox and current Chrome versions.

I fixed this by adding the global style, but this is also fixed by adding it to the switch element CSS as with the following patch:

diff --git a/toggle-switchy.css b/toggle-switchy.css
index dd6ac4a..e6f7acb 100644
--- a/toggle-switchy.css
+++ b/toggle-switchy.css
@@ -34,7 +34,7 @@ CORE STYLES BELOW - NO TOUCHY
 .toggle-switchy > input[disabled] + .toggle {opacity:0.5;}
 .toggle-switchy > input[disabled] + .toggle:hover {cursor:not-allowed;}
 .toggle-switchy > input + .toggle {width:100%; height:100%; margin:0; cursor:pointer;}
-.toggle-switchy > input + .toggle > .switch {display:block; height:100%; position:absolute; right:0; z-index:3;}
+.toggle-switchy > input + .toggle > .switch {box-sizing:border-box; display:block; height:100%; position:absolute; right:0; z-index:3;}

HTH, best wishes.

Suggested by George Mauer (@togakangaroo).
Needs research to confirm this should be changed from an accessibility stance.

example:

source: https://codepen.io/vanderlanth/pen/BoNLvq

source: https://codepen.io/avstorm/pen/ZGjNwZ

Toggle smooth transitions are using calc, which doesn't have great support in Internet Explorer.

https://caniuse.com/#search=calc

Similar to the bootstrap npm package. Allows for installation and version management via the package manager.

adding vertical-align:top; to the <label class="toggle-switchy"> element should fix it.

I'd love to see some aesthetically consistent custom focus styles on these bad boys. Great work!

Suggested by George Mauer (@togakangaroo)

example: https://codepen.io/labithiotis/pen/byskq

Examples

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentcolor" class="css-1lr7thp e1w77hao0" style="transform: translateX(18px);"><path d="M19.934 7.656a.224.224 0 000-.316L18.66 6.065a.224.224 0 00-.316 0l-7.909 7.907a.224.224 0 01-.316 0L6.656 10.51a.224.224 0 00-.316 0l-1.274 1.274a.224.224 0 000 .316l5.053 5.054a.224.224 0 00.316 0l9.5-9.498z"></path></svg>

Toggle border issue

Toggle border issue (on disabled input)

Suggested by George Mauer (@togakangaroo)