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("");
+
+ 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("");
+
+
+ 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)