From c53cd7f9d8de146a9b915f3cdde39e814babea4d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sat, 1 Mar 2014 16:07:08 -0600
Subject: [PATCH] Added slight darkening during drag

---
 js/views/toggleView.js | 2 ++
 scss/_toggle.scss      | 6 ++++++
 scss/_variables.scss   | 2 ++
 3 files changed, 10 insertions(+)

diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index 7893e61ad9..f68b2f0b69 100644
--- a/js/views/toggleView.js
+++ b/js/views/toggleView.js
@@ -93,8 +93,10 @@
     },
 
     hold: function(e) {
+      this.el.classList.add('dragging');
     },
     release: function(e) {
+      this.el.classList.remove('dragging');
     },
 
 
diff --git a/scss/_toggle.scss b/scss/_toggle.scss
index 6076f39de9..db6e7c4dd8 100644
--- a/scss/_toggle.scss
+++ b/scss/_toggle.scss
@@ -8,6 +8,12 @@
 .toggle {
   position: relative;
   display: inline-block;
+
+  &.dragging {
+    .handle {
+      background-color: $toggle-handle-dragging-bg-color !important;
+    }
+  }
 }
 
 /* hide the actual input checkbox */
diff --git a/scss/_variables.scss b/scss/_variables.scss
index fa1ffbfd07..6f97b75053 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -419,6 +419,7 @@ $toggle-border-radius:            20px !default;
 $toggle-handle-width:             $toggle-height - ($toggle-border-width * 2) !default;
 $toggle-handle-height:            $toggle-handle-width !default;
 $toggle-handle-radius:            50% !default;
+$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
 
 $toggle-off-bg-color:             #E5E5E5 !default;
 $toggle-off-border-color:         #E5E5E5 !default;
@@ -426,6 +427,7 @@ $toggle-off-border-color:         #E5E5E5 !default;
 $toggle-on-bg-color:              #4A87EE !default;
 $toggle-on-border-color:          $toggle-on-bg-color !default;
 
+
 $toggle-handle-off-bg-color:      $light !default;
 $toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;