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;