From 141f4063c26a93ea248f31e9e2f905cd0ee07134 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Wed, 9 Dec 2015 11:24:09 -0600
Subject: [PATCH] Resolves #772 Inconsistent label highlighting on toggle type
 controls.

Brought some of the code from v4 to give better highlighting.
---
 less/_checkboxes.less   |  1 +
 less/_core.less         | 38 ++++++--------------------------------
 less/_form.less         | 13 +++++++++++++
 less/_radios.less       |  1 +
 less/_togglebutton.less |  1 +
 less/_variables.less    | 17 ++++++++++++-----
 sass/_checkboxes.scss   |  1 +
 sass/_core.scss         | 38 ++++++--------------------------------
 sass/_form.scss         | 13 +++++++++++++
 sass/_radios.scss       |  1 +
 sass/_togglebutton.scss |  1 +
 sass/_variables.scss    | 17 ++++++++++++-----
 scripts/material.js     | 23 +++++++++++++++++++----
 13 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/less/_checkboxes.less b/less/_checkboxes.less
index 07d2e56f..4d712a31 100644
--- a/less/_checkboxes.less
+++ b/less/_checkboxes.less
@@ -7,6 +7,7 @@
     cursor: pointer;
     padding-left: 0; // Reset for Bootstrap rule
     color: @mdb-checkbox-label-color;
+    .mdb-label-color-toggle-focus();
   }
 
   // Hide native checkbox
diff --git a/less/_core.less b/less/_core.less
index c6838baa..d4bf8882 100644
--- a/less/_core.less
+++ b/less/_core.less
@@ -36,34 +36,19 @@ a, a:hover, a:focus {
   }
 }
 
-// Well and Jumbotrons
-@import "_welljumbo.less";
-
-// Buttons
-@import "_buttons.less";
-
-// Checkboxes
-@import "_checkboxes.less";
-
-// Toggle buttons
-@import "_togglebutton.less";
-
-// Radios
-@import "_radios.less";
-
-// Text inputs
-@import "_inputs.less";
-
 @import "_form.less";
+@import "_welljumbo.less";
+@import "_buttons.less";
+@import "_checkboxes.less";
+@import "_togglebutton.less";
+@import "_radios.less";
+@import "_inputs.less";
 
 legend {
   border-bottom: 0;
 }
 
-// Lists
 @import "_lists.less";
-
-// Navbar
 @import "_navbar.less";
 
 .dropdown-menu {
@@ -82,25 +67,14 @@ legend {
   }
 }
 
-// Alerts
 @import "_alerts.less";
-
-// Progress bar
 @import "_progress.less";
-
-// Typography
 @import "_typography.less";
-
 @import "_tabs.less";
-
 @import "_popups.less";
-
 @import "_cards.less";
-
 @import "_dialogs.less";
-
 @import "_panels.less";
-
 @import "_dividers.less";
 
 // Prevent highlight on mobile
diff --git a/less/_form.less b/less/_form.less
index bf5e9fdc..1aa7fe8c 100644
--- a/less/_form.less
+++ b/less/_form.less
@@ -1,3 +1,16 @@
+.mdb-label-color-toggle-focus() {
+  // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+  .form-group.is-focused & {
+    color: @mdb-label-color;
+
+    // on focus just darken the specific labels, do not turn them to the brand-primary
+    &:hover,
+    &:focus {
+      color: @mdb-label-color-toggle-focus;
+    }
+  }
+}
+
 .form-horizontal {
 
   // Consistent vertical alignment of radios and checkboxes
diff --git a/less/_radios.less b/less/_radios.less
index 83566c4f..4a9d5d07 100644
--- a/less/_radios.less
+++ b/less/_radios.less
@@ -19,6 +19,7 @@
     padding-left: 45px;
     position: relative;
     color: @mdb-radio-label-color;
+    .mdb-label-color-toggle-focus();
 
     span {
       display: block;
diff --git a/less/_togglebutton.less b/less/_togglebutton.less
index c9f3ccc2..4eeb7f6d 100644
--- a/less/_togglebutton.less
+++ b/less/_togglebutton.less
@@ -6,6 +6,7 @@
   label {
     cursor: pointer;
     color: @mdb-toggle-label-color;
+    .mdb-label-color-toggle-focus();
 
     // Hide original checkbox
     input[type=checkbox] {
diff --git a/less/_variables.less b/less/_variables.less
index 1798c832..245807b7 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -9,6 +9,10 @@
 @icon-color: rgba(0,0,0,0.5);
 
 
+@mdb-label-color: ~"rgba(@{rgb-black}, 0.26)";
+@mdb-label-color-toggle-focus: ~"rgba(@{rgb-black}, .54)";
+
+
 // import bs variables for less, last declared wins.
 @import "_import-bs-less.less";
 
@@ -53,6 +57,8 @@
 //---
 
 
+
+
 // --------------------
 // inputs
 @mdb-input-placeholder-color: #BDBDBD;
@@ -119,8 +125,9 @@
 @mdb-checkbox-animation-ripple: 500ms;
 @mdb-checkbox-animation-check: 0.3s;
 @mdb-checkbox-checked-color: @brand-primary;
-@mdb-checkbox-label-color: rgba(0, 0, 0, .54);
-@mdb-checkbox-border-color: @mdb-checkbox-label-color;
+
+@mdb-checkbox-label-color: @mdb-label-color;
+@mdb-checkbox-border-color: @mdb-label-color-toggle-focus;
 
 // Popovers and Popups
 @mdb-popover-background: rgba(101, 101, 101, 0.9);
@@ -130,11 +137,11 @@
 @mdb-dropdown-font-size: 16px;
 
 // Toggle
-@mdb-toggle-label-color: @mdb-checkbox-label-color;
+@mdb-toggle-label-color: @mdb-label-color;
 
 // Radio:
-@mdb-radio-label-color: @mdb-checkbox-label-color;
-@mdb-radio-color-off: @mdb-checkbox-border-color;
+@mdb-radio-label-color: @mdb-label-color;
+@mdb-radio-color-off: @mdb-label-color-toggle-focus;
 @mdb-radio-color-on: @brand-primary;
 
 // Buttons:
diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss
index e3cc1f1a..c7f11bb2 100644
--- a/sass/_checkboxes.scss
+++ b/sass/_checkboxes.scss
@@ -9,6 +9,7 @@
     cursor: pointer;
     padding-left: 0; // Reset for Bootstrap rule
     color: $mdb-checkbox-label-color;
+    @include mdb-label-color-toggle-focus();
   }
 
   // Hide native checkbox
diff --git a/sass/_core.scss b/sass/_core.scss
index 0b2db4d4..67f13b15 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -38,34 +38,19 @@ a, a:hover, a:focus {
   }
 }
 
-// Well and Jumbotrons
-@import '_welljumbo';
-
-// Buttons
-@import '_buttons';
-
-// Checkboxes
-@import '_checkboxes';
-
-// Toggle buttons
-@import '_togglebutton';
-
-// Radios
-@import '_radios';
-
-// Text inputs
-@import '_inputs';
-
 @import '_form';
+@import '_welljumbo';
+@import '_buttons';
+@import '_checkboxes';
+@import '_togglebutton';
+@import '_radios';
+@import '_inputs';
 
 legend {
   border-bottom: 0;
 }
 
-// Lists
 @import '_lists';
-
-// Navbar
 @import '_navbar';
 
 .dropdown-menu {
@@ -84,25 +69,14 @@ legend {
   }
 }
 
-// Alerts
 @import '_alerts';
-
-// Progress bar
 @import '_progress';
-
-// Typography
 @import '_typography';
-
 @import '_tabs';
-
 @import '_popups';
-
 @import '_cards';
-
 @import '_dialogs';
-
 @import '_panels';
-
 @import '_dividers';
 
 // Prevent highlight on mobile
diff --git a/sass/_form.scss b/sass/_form.scss
index 08604e70..ce1d1ecb 100644
--- a/sass/_form.scss
+++ b/sass/_form.scss
@@ -1,5 +1,18 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
+@mixin mdb-label-color-toggle-focus(){
+  // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+  .form-group.is-focused & {
+    color: $mdb-label-color;
+
+    // on focus just darken the specific labels, do not turn them to the brand-primary
+    &:hover,
+    &:focus {
+      color: $mdb-label-color-toggle-focus;
+    }
+  }
+}
+
 .form-horizontal {
 
   // Consistent vertical alignment of radios and checkboxes
diff --git a/sass/_radios.scss b/sass/_radios.scss
index ad4f6dd5..ebc2111c 100644
--- a/sass/_radios.scss
+++ b/sass/_radios.scss
@@ -21,6 +21,7 @@
     padding-left: 45px;
     position: relative;
     color: $mdb-radio-label-color;
+    @include mdb-label-color-toggle-focus();
 
     span {
       display: block;
diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss
index 31d3e359..862ecdb4 100644
--- a/sass/_togglebutton.scss
+++ b/sass/_togglebutton.scss
@@ -8,6 +8,7 @@
   label {
     cursor: pointer;
     color: $mdb-toggle-label-color;
+    @include mdb-label-color-toggle-focus();
 
     // Hide original checkbox
     input[type=checkbox] {
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 8fcc5642..c93210d0 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -11,6 +11,10 @@ $mdb-text-color-primary-hex: $black !default; // for contrast function in invers
 $icon-color: rgba(0,0,0,0.5) !default;
 
 
+$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
+$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
+
+
 // import bs variables for less, last declared wins.
 @import '_import-bs-less';
 
@@ -55,6 +59,8 @@ $contrast-factor: 40% !default;
 //---
 
 
+
+
 // --------------------
 // inputs
 $mdb-input-placeholder-color: #BDBDBD !default;
@@ -121,8 +127,9 @@ $mdb-checkbox-size: 20px !default;
 $mdb-checkbox-animation-ripple: 500ms !default;
 $mdb-checkbox-animation-check: 0.3s !default;
 $mdb-checkbox-checked-color: $brand-primary !default;
-$mdb-checkbox-label-color: rgba(0, 0, 0, .54) !default;
-$mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
+
+$mdb-checkbox-label-color: $mdb-label-color !default;
+$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
 
 // Popovers and Popups
 $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
@@ -132,11 +139,11 @@ $mdb-popover-color: #ececec !default;
 $mdb-dropdown-font-size: 16px !default;
 
 // Toggle
-$mdb-toggle-label-color: $mdb-checkbox-label-color !default;
+$mdb-toggle-label-color: $mdb-label-color !default;
 
 // Radio:
-$mdb-radio-label-color: $mdb-checkbox-label-color !default;
-$mdb-radio-color-off: $mdb-checkbox-border-color !default;
+$mdb-radio-label-color: $mdb-label-color !default;
+$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
 $mdb-radio-color-on: $brand-primary !default;
 
 // Buttons:
diff --git a/scripts/material.js b/scripts/material.js
index 875bb959..6dd2682c 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -18,11 +18,11 @@
     }
     return false;
   }
-  
+
   function _addFormGroupFocus(element){
     $(element).closest(".form-group").addClass("is-focused");
   }
-  
+
   function _removeFormGroupFocus(element){
     $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
   }
@@ -62,17 +62,32 @@
     },
     "togglebutton": function(selector) {
       // Add fake-checkbox to material checkboxes
-      $((selector) ? selector : this.options.togglebuttonElements)
+      var $input = $((selector) ? selector : this.options.togglebuttonElements)
       .filter(":notmdproc")
       .data("mdproc", true)
       .after("<span class='toggle'></span>");
+
+      var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+      $formGroup.find('label').hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
     },
     "radio": function(selector) {
       // Add fake-radio to material radios
-      $((selector) ? selector : this.options.radioElements)
+      var $input = $((selector) ? selector : this.options.radioElements)
       .filter(":notmdproc")
       .data("mdproc", true)
       .after("<span class='circle'></span><span class='check'></span>");
+
+
+      var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+      $formGroup.find('label').hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
     },
     "input": function(selector) {
       $((selector) ? selector : this.options.inputElements)