diff --git a/dist/ionic.css b/dist/ionic.css index 9defdc1292..dd66278e7d 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -1778,7 +1778,7 @@ input[type="checkbox"][readonly] { border-radius: 20px; background-color: white; cursor: pointer; - transition: 0.3s ease; } + transition: 0.4s ease; } /* the switch (dot) thats inside the toggle's slide area */ /* also the appearance when the switch is "off" */ @@ -1802,7 +1802,7 @@ input[type="checkbox"][readonly] { border-color: #4bd863; background-color: #ccc; box-shadow: inset 0 0 0 20px #4bd863; - transition: 0s ease; + transition: 0.2s ease; /* the switch when the toggle is "on" */ } .toggle :checked + .track .switch { background-color: white; diff --git a/ext/simple/init.js b/ext/simple/init.js index 6ffeea8353..376181c993 100644 --- a/ext/simple/init.js +++ b/ext/simple/init.js @@ -2,9 +2,9 @@ // add tap events to links function onLinkTap(e) { - window.location = this.href; - return false; + this.click(); } + function addTapToLinks() { for(var x = 0; x < document.links.length; x++) { if(!document.links[x]._hasTap) { @@ -13,7 +13,7 @@ } } } - + ionic.ResetTap = function() { addTapToLinks() }; diff --git a/ext/simple/toggle.js b/ext/simple/toggle.js new file mode 100644 index 0000000000..63042f1ade --- /dev/null +++ b/ext/simple/toggle.js @@ -0,0 +1,28 @@ +(function(window) { + + iconic = window.iconic || {}; + + // add tap events to links + function onToggleTap(e) { + if(e.currentTarget.control) { + e.currentTarget.control.checked = !e.currentTarget.control.checked; + e.stopPropagation(); + } + } + + ionic.ResetToggles = function() { + var + x, + toggles = document.getElementsByClassName("toggle"); + + for(x = 0; x < toggles.length; x++) { + if(!toggles[x].hasTap) { + ionic.on('tap', onToggleTap, toggles[x]); + toggles[x].hasTap = true; + } + } + }; + + ionic.ResetToggles(); + +})(this); diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss index 13f37ec956..a99c86d1c2 100644 --- a/scss/ionic/_toggle.scss +++ b/scss/ionic/_toggle.scss @@ -22,7 +22,7 @@ background-color: $toggle-off-bg-color; cursor: pointer; - transition: $toggle-transition-duration + .1s ease; + transition: $toggle-transition-duration + .2s ease; } /* the switch (dot) thats inside the toggle's slide area */ @@ -38,7 +38,7 @@ bottom: 0; right: $toggle-border-radius; - transition: .2s ease; + transition: $toggle-transition-duration ease; transition-property: left, right; transition-delay: 0s, .05s; } @@ -51,7 +51,7 @@ border-color: $toggle-on-border-color; background-color: #ccc; box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color; - transition: $toggle-transition-duration - .2s ease; + transition: $toggle-transition-duration ease; /* the switch when the toggle is "on" */ .switch { diff --git a/test/input-toggle.html b/test/input-toggle.html index 382c903a20..a4d9cbdd07 100644 --- a/test/input-toggle.html +++ b/test/input-toggle.html @@ -55,8 +55,14 @@ + + + + + + - +