mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #772 Inconsistent label highlighting on toggle type controls.

Browse Source 
Brought some of the code from v4 to give better highlighting.
This commit is contained in:
Kevin Ross 2015-12-09 11:24:09 -06:00
parent c27c3b9ebf
commit 141f4063c2
13 changed files with 87 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
less/_checkboxes.less
View File

@ -7,6 +7,7 @@
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: @mdb-checkbox-label-color; color: @mdb-checkbox-label-color;
.mdb-label-color-toggle-focus();
} }
// Hide native checkbox // Hide native checkbox

38
less/_core.less
View File

@ -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 "_form.less";
@import "_welljumbo.less";
@import "_buttons.less";
@import "_checkboxes.less";
@import "_togglebutton.less";
@import "_radios.less";
@import "_inputs.less";
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
// Lists
@import "_lists.less"; @import "_lists.less";
// Navbar
@import "_navbar.less"; @import "_navbar.less";
.dropdown-menu { .dropdown-menu {
@ -82,25 +67,14 @@ legend {
} }
} }
// Alerts
@import "_alerts.less"; @import "_alerts.less";
// Progress bar
@import "_progress.less"; @import "_progress.less";
// Typography
@import "_typography.less"; @import "_typography.less";
@import "_tabs.less"; @import "_tabs.less";
@import "_popups.less"; @import "_popups.less";
@import "_cards.less"; @import "_cards.less";
@import "_dialogs.less"; @import "_dialogs.less";
@import "_panels.less"; @import "_panels.less";
@import "_dividers.less"; @import "_dividers.less";
// Prevent highlight on mobile // Prevent highlight on mobile

13
less/_form.less
View File

@ -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 { .form-horizontal {
// Consistent vertical alignment of radios and checkboxes // Consistent vertical alignment of radios and checkboxes

1
less/_radios.less
View File

@ -19,6 +19,7 @@
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: @mdb-radio-label-color; color: @mdb-radio-label-color;
.mdb-label-color-toggle-focus();
span { span {
display: block; display: block;

1
less/_togglebutton.less
View File

@ -6,6 +6,7 @@
label { label {
cursor: pointer; cursor: pointer;
color: @mdb-toggle-label-color; color: @mdb-toggle-label-color;
.mdb-label-color-toggle-focus();
// Hide original checkbox // Hide original checkbox
input[type=checkbox] { input[type=checkbox] {

17
less/_variables.less
View File

@ -9,6 +9,10 @@
@icon-color: rgba(0,0,0,0.5); @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 bs variables for less, last declared wins.
@import "_import-bs-less.less"; @import "_import-bs-less.less";
@ -53,6 +57,8 @@
//--- //---
// -------------------- // --------------------
// inputs // inputs
@mdb-input-placeholder-color: #BDBDBD; @mdb-input-placeholder-color: #BDBDBD;
@ -119,8 +125,9 @@
@mdb-checkbox-animation-ripple: 500ms; @mdb-checkbox-animation-ripple: 500ms;
@mdb-checkbox-animation-check: 0.3s; @mdb-checkbox-animation-check: 0.3s;
@mdb-checkbox-checked-color: @brand-primary; @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 // Popovers and Popups
@mdb-popover-background: rgba(101, 101, 101, 0.9); @mdb-popover-background: rgba(101, 101, 101, 0.9);
@ -130,11 +137,11 @@
@mdb-dropdown-font-size: 16px; @mdb-dropdown-font-size: 16px;
// Toggle // Toggle
@mdb-toggle-label-color: @mdb-checkbox-label-color; @mdb-toggle-label-color: @mdb-label-color;
// Radio: // Radio:
@mdb-radio-label-color: @mdb-checkbox-label-color; @mdb-radio-label-color: @mdb-label-color;
@mdb-radio-color-off: @mdb-checkbox-border-color; @mdb-radio-color-off: @mdb-label-color-toggle-focus;
@mdb-radio-color-on: @brand-primary; @mdb-radio-color-on: @brand-primary;
// Buttons: // Buttons:

1
sass/_checkboxes.scss
View File

@ -9,6 +9,7 @@
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: $mdb-checkbox-label-color; color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus();
} }
// Hide native checkbox // Hide native checkbox

38
sass/_core.scss
View File

@ -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 '_form';
@import '_welljumbo';
@import '_buttons';
@import '_checkboxes';
@import '_togglebutton';
@import '_radios';
@import '_inputs';
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
// Lists
@import '_lists'; @import '_lists';
// Navbar
@import '_navbar'; @import '_navbar';
.dropdown-menu { .dropdown-menu {
@ -84,25 +69,14 @@ legend {
} }
} }
// Alerts
@import '_alerts'; @import '_alerts';
// Progress bar
@import '_progress'; @import '_progress';
// Typography
@import '_typography'; @import '_typography';
@import '_tabs'; @import '_tabs';
@import '_popups'; @import '_popups';
@import '_cards'; @import '_cards';
@import '_dialogs'; @import '_dialogs';
@import '_panels'; @import '_panels';
@import '_dividers'; @import '_dividers';
// Prevent highlight on mobile // Prevent highlight on mobile

13
sass/_form.scss
View File

@ -1,5 +1,18 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // 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 { .form-horizontal {
// Consistent vertical alignment of radios and checkboxes // Consistent vertical alignment of radios and checkboxes

1
sass/_radios.scss
View File

@ -21,6 +21,7 @@
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: $mdb-radio-label-color; color: $mdb-radio-label-color;
@include mdb-label-color-toggle-focus();
span { span {
display: block; display: block;

1
sass/_togglebutton.scss
View File

@ -8,6 +8,7 @@
label { label {
cursor: pointer; cursor: pointer;
color: $mdb-toggle-label-color; color: $mdb-toggle-label-color;
@include mdb-label-color-toggle-focus();
// Hide original checkbox // Hide original checkbox
input[type=checkbox] { input[type=checkbox] {

17
sass/_variables.scss
View File

@ -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; $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 bs variables for less, last declared wins.
@import '_import-bs-less'; @import '_import-bs-less';
@ -55,6 +59,8 @@ $contrast-factor: 40% !default;
//--- //---
// -------------------- // --------------------
// inputs // inputs
$mdb-input-placeholder-color: #BDBDBD !default; $mdb-input-placeholder-color: #BDBDBD !default;
@ -121,8 +127,9 @@ $mdb-checkbox-size: 20px !default;
$mdb-checkbox-animation-ripple: 500ms !default; $mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default; $mdb-checkbox-animation-check: 0.3s !default;
$mdb-checkbox-checked-color: $brand-primary !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 // Popovers and Popups
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default; $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; $mdb-dropdown-font-size: 16px !default;
// Toggle // Toggle
$mdb-toggle-label-color: $mdb-checkbox-label-color !default; $mdb-toggle-label-color: $mdb-label-color !default;
// Radio: // Radio:
$mdb-radio-label-color: $mdb-checkbox-label-color !default; $mdb-radio-label-color: $mdb-label-color !default;
$mdb-radio-color-off: $mdb-checkbox-border-color !default; $mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
$mdb-radio-color-on: $brand-primary !default; $mdb-radio-color-on: $brand-primary !default;
// Buttons: // Buttons:

19
scripts/material.js
View File

@ -62,17 +62,32 @@
}, },
"togglebutton": function(selector) { "togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements) var $input = $((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc") .filter(":notmdproc")
.data("mdproc", true) .data("mdproc", true)
.after("<span class='toggle'></span>"); .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) { "radio": function(selector) {
// Add fake-radio to material radios // Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements) var $input = $((selector) ? selector : this.options.radioElements)
.filter(":notmdproc") .filter(":notmdproc")
.data("mdproc", true) .data("mdproc", true)
.after("<span class='circle'></span><span class='check'></span>"); .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) { "input": function(selector) {
$((selector) ? selector : this.options.inputElements) $((selector) ? selector : this.options.inputElements)