diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 284f96aba8..7e68fc5961 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -177,13 +177,14 @@
/**
* List refreser elements
*/
+ /* the checkmark within the box */
+ /* what the background looks like when its checked */
+ /* what the checkmark looks like when its checked */
/* the overall container of the toggle */
- /* hide the actual */
- /* the background of the toggle's track area */
- /* also the track appearance when the toggle is "off" */
/* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */
- /* When the toggle is "on" */
+ /* The track when the toggle is "on" */
+ /* the handle when the toggle is "on" */
@keyframes fadein {
from {
opacity: 0.7; }
@@ -2121,62 +2122,81 @@
position: relative;
display: inline-block;
padding: 7px 7px;
+ cursor: pointer; }
+ .ionic .checkbox input {
+ position: relative;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ background: transparent;
cursor: pointer;
- /* what the checkbox looks like when its not checked */
- /* the checkmark within the box */
- /* what it looks like when it is checked */ }
- .ionic .checkbox input {
- display: none; }
- .ionic .checkbox .handle {
- width: 28px;
- height: 28px;
+ -webkit-appearance: none; }
+ .ionic .checkbox input:before {
+ /* what the checkbox looks like when its not checked */
+ display: table;
+ width: 100%;
+ height: 100%;
border: 1px solid #049cdb;
border-radius: 50%;
background: white;
+ content: ' ';
transition: background-color 0.1s ease-in-out; }
- .ionic .checkbox .handle:after {
- position: absolute;
- top: 37%;
- left: 14px;
- width: 14px;
- height: 7px;
- border: 1px solid white;
- border-top: none;
- border-right: none;
- content: '';
- opacity: 0;
- transition: opacity 0.05s ease-in-out;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg); }
- .ionic .checkbox input:checked + .handle {
- background: #049cdb; }
- .ionic .checkbox input:checked + .handle:after {
- opacity: 1; }
+ .ionic .checkbox input:after {
+ position: absolute;
+ top: 37%;
+ left: 26%;
+ display: table;
+ width: 14px;
+ height: 7px;
+ border: 1px solid white;
+ border-top: none;
+ border-right: none;
+ content: ' ';
+ opacity: 0;
+ transition: opacity 0.05s ease-in-out;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ .ionic .checkbox input:checked:before {
+ border: 0;
+ background: #049cdb; }
+ .ionic .checkbox input:checked:after {
+ opacity: 1; }
.ionic .toggle {
+ position: relative;
display: inline-block; }
- .ionic .toggle input[type="checkbox"] {
- display: none; }
- .ionic .toggle .track {
- display: inline-block;
- box-sizing: border-box;
+ .ionic .toggle input {
+ /* set the actual checkbox input to have a width/height */
+ /* but hide its appearance, then use :after to style it */
width: 54px;
height: 32px;
- border: solid 2px #e5e5e5;
- border-radius: 20px;
- background-color: #e5e5e5;
- cursor: pointer;
- transition-timing-function: ease-in-out;
- transition-duration: 0.1s;
- transition-property: background-color, border; }
+ border: 0;
+ background: transparent;
+ -webkit-appearance: none;
+ /* the track appearance when the toggle is "off" */ }
+ .ionic .toggle input:after {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ border: solid 2px #e5e5e5;
+ border-radius: 20px;
+ background-color: #e5e5e5;
+ content: ' ';
+ cursor: pointer;
+ transition-timing-function: ease-in-out;
+ transition-duration: 0.1s;
+ transition-property: background-color, border; }
.ionic .toggle .handle {
position: absolute;
+ top: 6px;
+ left: 2px;
display: block;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: white;
transition: -webkit-transform 0.1s ease-in-out;
- /* used to create a larger hit area to slide the handle */ }
+ /* used to create a larger (but hidden) hit area to slide the handle */ }
.ionic .toggle .handle:before {
position: absolute;
top: -2px;
@@ -2184,14 +2204,12 @@
display: table;
padding: 17px 30px;
content: " "; }
- .ionic .toggle :checked + .track {
- /* the track when the toggle is "on" */
+ .ionic .toggle input:checked:after {
border-color: #5f85ef;
- background-color: #5f85ef;
- /* the handle when the toggle is "on" */ }
- .ionic .toggle :checked + .track .handle {
- background-color: white;
- -webkit-transform: translate3d(22px, 0, 0); }
+ background-color: #5f85ef; }
+ .ionic .toggle input:checked + .handle {
+ background-color: white;
+ -webkit-transform: translate3d(22px, 0, 0); }
.ionic .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
padding-right: 60px; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 1c22e770ad..601d4f8e15 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2591,72 +2591,94 @@ input[type="checkbox"][readonly] {
position: relative;
display: inline-block;
padding: 7px 7px;
+ cursor: pointer; }
+
+.checkbox input {
+ position: relative;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ background: transparent;
cursor: pointer;
- /* what the checkbox looks like when its not checked */
- /* the checkmark within the box */
- /* what it looks like when it is checked */ }
- .checkbox input {
- display: none; }
- .checkbox .handle {
- width: 28px;
- height: 28px;
+ -webkit-appearance: none; }
+ .checkbox input:before {
+ /* what the checkbox looks like when its not checked */
+ display: table;
+ width: 100%;
+ height: 100%;
border: 1px solid #049cdb;
border-radius: 50%;
background: white;
+ content: ' ';
transition: background-color 0.1s ease-in-out; }
- .checkbox .handle:after {
- position: absolute;
- top: 37%;
- left: 14px;
- width: 14px;
- height: 7px;
- border: 1px solid white;
- border-top: none;
- border-right: none;
- content: '';
- opacity: 0;
- transition: opacity 0.05s ease-in-out;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg); }
- .checkbox input:checked + .handle {
- background: #049cdb; }
- .checkbox input:checked + .handle:after {
- opacity: 1; }
+
+/* the checkmark within the box */
+.checkbox input:after {
+ position: absolute;
+ top: 37%;
+ left: 26%;
+ display: table;
+ width: 14px;
+ height: 7px;
+ border: 1px solid white;
+ border-top: none;
+ border-right: none;
+ content: ' ';
+ opacity: 0;
+ transition: opacity 0.05s ease-in-out;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+
+/* what the background looks like when its checked */
+.checkbox input:checked:before {
+ border: 0;
+ background: #049cdb; }
+
+/* what the checkmark looks like when its checked */
+.checkbox input:checked:after {
+ opacity: 1; }
/* the overall container of the toggle */
.toggle {
+ position: relative;
display: inline-block; }
-/* hide the actual */
-.toggle input[type="checkbox"] {
- display: none; }
-
-/* the background of the toggle's track area */
-/* also the track appearance when the toggle is "off" */
-.toggle .track {
- display: inline-block;
- box-sizing: border-box;
+.toggle input {
+ /* set the actual checkbox input to have a width/height */
+ /* but hide its appearance, then use :after to style it */
width: 54px;
height: 32px;
- border: solid 2px #e5e5e5;
- border-radius: 20px;
- background-color: #e5e5e5;
- cursor: pointer;
- transition-timing-function: ease-in-out;
- transition-duration: 0.1s;
- transition-property: background-color, border; }
+ border: 0;
+ background: transparent;
+ -webkit-appearance: none;
+ /* the track appearance when the toggle is "off" */ }
+ .toggle input:after {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ border: solid 2px #e5e5e5;
+ border-radius: 20px;
+ background-color: #e5e5e5;
+ content: ' ';
+ cursor: pointer;
+ transition-timing-function: ease-in-out;
+ transition-duration: 0.1s;
+ transition-property: background-color, border; }
/* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */
.toggle .handle {
position: absolute;
+ top: 6px;
+ left: 2px;
display: block;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: white;
transition: -webkit-transform 0.1s ease-in-out;
- /* used to create a larger hit area to slide the handle */ }
+ /* used to create a larger (but hidden) hit area to slide the handle */ }
.toggle .handle:before {
position: absolute;
top: -2px;
@@ -2665,15 +2687,15 @@ input[type="checkbox"][readonly] {
padding: 17px 30px;
content: " "; }
-/* When the toggle is "on" */
-.toggle :checked + .track {
- /* the track when the toggle is "on" */
+/* The track when the toggle is "on" */
+.toggle input:checked:after {
border-color: #5f85ef;
- background-color: #5f85ef;
- /* the handle when the toggle is "on" */ }
- .toggle :checked + .track .handle {
- background-color: white;
- -webkit-transform: translate3d(22px, 0, 0); }
+ background-color: #5f85ef; }
+
+/* the handle when the toggle is "on" */
+.toggle input:checked + .handle {
+ background-color: white;
+ -webkit-transform: translate3d(22px, 0, 0); }
.radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index f6004ca1b8..ce7930f7dd 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -692,28 +692,21 @@ angular.module('ionic.ui.toggle', [])
replace: true,
require: '?ngModel',
scope: true,
- template: '',
+ template: '',
link: function($scope, $element, $attr, ngModel) {
- var checkbox, track, handle;
+ var checkbox, handle;
if(!ngModel) { return; }
checkbox = $element.children().eq(0);
- track = $element.children().eq(1);
handle = track.children().eq(0);
- if(!checkbox.length || !track.length || !handle.length) { return; }
+ if(!checkbox.length || !handle.length) { return; }
$scope.toggle = new ionic.views.Toggle({
el: $element[0],
checkbox: checkbox[0],
- track: track[0],
handle: handle[0]
});
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index b4787e0658..baca49d451 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -2875,20 +2875,8 @@ ionic.views.TabBar.prototype = {
ionic.views.Toggle = function(opts) {
this.el = opts.el;
this.checkbox = opts.checkbox;
- this.track = opts.track;
this.handle = opts.handle;
this.openPercent = -1;
-
- /*
- // remember that this element, and all its children are apart of a component
- // and assign the component instance to each element so the lookups
- // only has to go through this process just once
- this.el.isComponent = true;
- this.track.component = this;
- this.track.isComponent = true;
- this.handle.component = this;
- this.handle.isComponent = true;
- */
};
ionic.views.Toggle.prototype = {
@@ -2898,8 +2886,8 @@ ionic.views.TabBar.prototype = {
},
drag: function(e) {
- var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
- var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+ var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
+ var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
if(e.pageX >= slidePageRight - 4) {
this.val(true);
@@ -2920,7 +2908,7 @@ ionic.views.TabBar.prototype = {
} else if(openPercent === 100) {
this.val(true);
} else {
- var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+ var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
openPixel = (openPixel < 1 ? 0 : openPixel);
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
}
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
index cf45a5f1b2..6a1f76e30f 100644
--- a/js/ext/angular/src/directive/ionicToggle.js
+++ b/js/ext/angular/src/directive/ionicToggle.js
@@ -8,28 +8,21 @@ angular.module('ionic.ui.toggle', [])
replace: true,
require: '?ngModel',
scope: true,
- template: '',
+ template: '',
link: function($scope, $element, $attr, ngModel) {
- var checkbox, track, handle;
+ var checkbox, handle;
if(!ngModel) { return; }
checkbox = $element.children().eq(0);
- track = $element.children().eq(1);
handle = track.children().eq(0);
- if(!checkbox.length || !track.length || !handle.length) { return; }
+ if(!checkbox.length || !handle.length) { return; }
$scope.toggle = new ionic.views.Toggle({
el: $element[0],
checkbox: checkbox[0],
- track: track[0],
handle: handle[0]
});
diff --git a/js/ext/simple/toggle.js b/js/ext/simple/toggle.js
index c5cfbc0895..c34b58ce2a 100644
--- a/js/ext/simple/toggle.js
+++ b/js/ext/simple/toggle.js
@@ -18,12 +18,11 @@
var opts = {
el: el,
checkbox: el.querySelector("input[type='checkbox']"),
- track: el.querySelector(".track"),
handle: el.querySelector(".handle")
};
// validate its a well formed toggle with the required pieces
- if(!opts.checkbox || !opts.track || !opts.handle) return;
+ if(!opts.checkbox || !opts.handle) return;
// initialize an instance of a Toggle
el.component = new ionic.views.Toggle(opts);
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index 95445ab892..f5d2a09543 100644
--- a/js/views/toggleView.js
+++ b/js/views/toggleView.js
@@ -4,20 +4,8 @@
ionic.views.Toggle = function(opts) {
this.el = opts.el;
this.checkbox = opts.checkbox;
- this.track = opts.track;
this.handle = opts.handle;
this.openPercent = -1;
-
- /*
- // remember that this element, and all its children are apart of a component
- // and assign the component instance to each element so the lookups
- // only has to go through this process just once
- this.el.isComponent = true;
- this.track.component = this;
- this.track.isComponent = true;
- this.handle.component = this;
- this.handle.isComponent = true;
- */
};
ionic.views.Toggle.prototype = {
@@ -27,8 +15,8 @@
},
drag: function(e) {
- var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
- var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+ var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
+ var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
if(e.pageX >= slidePageRight - 4) {
this.val(true);
@@ -49,7 +37,7 @@
} else if(openPercent === 100) {
this.val(true);
} else {
- var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+ var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
openPixel = (openPixel < 1 ? 0 : openPixel);
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
}
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index 7de4cffe32..b976622b4b 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -4,35 +4,43 @@
/* the overall container of the toggle */
.toggle {
+ position: relative;
display: inline-block;
}
-/* hide the actual */
-.toggle input[type="checkbox"] {
- display: none;
-}
-
-/* the background of the toggle's track area */
-/* also the track appearance when the toggle is "off" */
-.toggle .track {
- display: inline-block;
- box-sizing: border-box;
+.toggle input {
+ /* set the actual checkbox input to have a width/height */
+ /* but hide its appearance, then use :after to style it */
width: $toggle-width;
height: $toggle-height;
- border: solid $toggle-border-width $toggle-off-border-color;
- border-radius: $toggle-border-radius;
- background-color: $toggle-off-bg-color;
- cursor: pointer;
+ border: 0;
+ background: transparent;
+ -webkit-appearance: none;
- transition-timing-function: ease-in-out;
- transition-duration: $toggle-transition-duration;
- transition-property: background-color, border;
+ /* the track appearance when the toggle is "off" */
+ &:after {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ border: solid $toggle-border-width $toggle-off-border-color;
+ border-radius: $toggle-border-radius;
+ background-color: $toggle-off-bg-color;
+ content: ' ';
+ cursor: pointer;
+
+ transition-timing-function: ease-in-out;
+ transition-duration: $toggle-transition-duration;
+ transition-property: background-color, border;
+ }
}
/* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */
.toggle .handle {
position: absolute;
+ top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
+ left: $toggle-border-width;
display: block;
width: $toggle-handle-width;
height: $toggle-handle-height;
@@ -40,7 +48,7 @@
background-color: $toggle-handle-off-bg-color;
transition: -webkit-transform $toggle-transition-duration ease-in-out;
- /* used to create a larger hit area to slide the handle */
+ /* used to create a larger (but hidden) hit area to slide the handle */
&:before {
position: absolute;
top: -2px;
@@ -51,17 +59,14 @@
}
}
-
-/* When the toggle is "on" */
-.toggle :checked + .track {
-
- /* the track when the toggle is "on" */
+/* The track when the toggle is "on" */
+.toggle input:checked:after {
border-color: $toggle-on-border-color;
background-color: $toggle-on-bg-color;
+}
/* the handle when the toggle is "on" */
- .handle {
- background-color: $toggle-handle-on-bg-color;
- -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
- }
+.toggle input:checked + .handle {
+ background-color: $toggle-handle-on-bg-color;
+ -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
}
diff --git a/test/index.html b/test/index.html
index e8d6717ee9..51cee8390f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -29,7 +29,7 @@
Input: Range
Input: Select
Input: Checkbox
- Input: Toggle
+ Input: Toggle
Lists
Modals
Popovers
@@ -51,7 +51,5 @@
}
-
-