' +
+ '
' +
'' +
diff --git a/scss/_toggle.scss b/scss/_toggle.scss
index 5f63491927..d15d383149 100644
--- a/scss/_toggle.scss
+++ b/scss/_toggle.scss
@@ -4,13 +4,17 @@
* --------------------------------------------------
*/
-/* the overall container of the toggle */
+.item-toggle {
+ pointer-events: none;
+}
+
.toggle {
// set the color defaults
@include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
position: relative;
display: inline-block;
+ pointer-events: auto;
margin: -$toggle-hit-area-expansion;
padding: $toggle-hit-area-expansion;
@@ -49,8 +53,8 @@
}
}
-/* hide the actual input checkbox */
.toggle input {
+ // hide the actual input checkbox
display: none;
}
@@ -69,6 +73,7 @@
background-color: $toggle-off-bg-color;
content: ' ';
cursor: pointer;
+ pointer-events: none;
}
/* the handle (circle) thats inside the toggle's track area */
@@ -76,16 +81,16 @@
.toggle .handle {
@include transition($toggle-transition-duration ease-in-out);
position: absolute;
- top: $toggle-border-width + $toggle-hit-area-expansion;
- left: $toggle-border-width + $toggle-hit-area-expansion;
display: block;
width: $toggle-handle-width;
height: $toggle-handle-height;
border-radius: $toggle-handle-radius;
background-color: $toggle-handle-off-bg-color;
+ top: $toggle-border-width + $toggle-hit-area-expansion;
+ left: $toggle-border-width + $toggle-hit-area-expansion;
- /* used to create a larger (but hidden) hit area to slide the handle */
&:before {
+ // used to create a larger (but hidden) hit area to slide the handle
position: absolute;
top: -4px;
left: ( ($toggle-handle-width / 2) * -1) - 8;
@@ -94,14 +99,14 @@
}
}
- /* the handle when the toggle is "on" */
.toggle input:checked + .track .handle {
+ // the handle when the toggle is "on"
@include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
background-color: $toggle-handle-on-bg-color;
}
-/* make sure list item content have enough padding on right to fit the toggle */
.item-toggle {
+ // make sure list item content have enough padding on right to fit the toggle
padding-right: ($item-padding * 3) + $toggle-width;
&.active {
@@ -109,8 +114,8 @@
}
}
-/* position the toggle to the right within a list item */
.item-toggle .toggle {
+ // position the toggle to the right within a list item
position: absolute;
top: $item-padding / 2;
right: $item-padding;
diff --git a/test/html/tapInputs.html b/test/html/tapInputs.html
index 5b27fc4d03..2a2ecd4be5 100755
--- a/test/html/tapInputs.html
+++ b/test/html/tapInputs.html
@@ -69,6 +69,16 @@
,
+