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)