From f831dc3cc70337759786ebfe140d8ec3c28bf55e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 1 May 2014 13:25:31 -0500
Subject: [PATCH] feature(toggle): Customize toggle directive colors, closes
 #1250

---
 js/angular/directive/toggle.js | 12 ++++++++++++
 test/html/toggle.html          |  1 +
 2 files changed, 13 insertions(+)

diff --git a/js/angular/directive/toggle.js b/js/angular/directive/toggle.js
index 084f6866ed..9908789173 100644
--- a/js/angular/directive/toggle.js
+++ b/js/angular/directive/toggle.js
@@ -12,6 +12,15 @@
  *
  * The toggle behaves like any [AngularJS checkbox](http://docs.angularjs.org/api/ng/input/input[checkbox]) otherwise.
  *
+ * @param toggle-class {string=} Sets the CSS class on the inner `label.toggle` element created by the directive.
+ *
+ * @usage
+ * Below is an example of a toggle directive which is wired up to the `airplaneMode` model
+ * and has the `toggle-calm` CSS class assigned to the inner element.
+ *
+ * ```html
+ * <ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
+ * ```
  */
 IonicModule
 .directive('ionToggle', [
@@ -47,6 +56,9 @@ function($ionicGesture, $timeout) {
       if(attr.ngChecked) input.attr('ng-checked', 'ngChecked');
       if(attr.ngTrueValue) input.attr('ng-true-value', attr.ngTrueValue);
       if(attr.ngFalseValue) input.attr('ng-false-value', attr.ngFalseValue);
+      if(attr.toggleClass) {
+        element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
+      }
 
       return function($scope, $element, $attr) {
          var el, checkbox, track, handle;
diff --git a/test/html/toggle.html b/test/html/toggle.html
index 9a251d8983..7b1b7f78ed 100644
--- a/test/html/toggle.html
+++ b/test/html/toggle.html
@@ -20,6 +20,7 @@
           <ion-toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</ion-toggle>
           <ion-toggle ng-model="catModel" ng-disabled="isDisabled" ng-true-value="cats" ng-false-value="dogs">Cats or dogs? ({{catModel}})</ion-toggle>
           <ion-toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</ion-toggle>
+          <ion-toggle toggle-class="toggle-assertive" ng-checked="true">Set toggle class to toggle-assertive</ion-toggle>
         </div>
       </div>
     </ion-content>