mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-30 23:47:42 +03:00
Resolves #772 Inconsistent label highlighting on toggle type controls.
Brought some of the code from v4 to give better highlighting.
This commit is contained in:
Kevin Ross
parent
c27c3b9ebf
commit
141f4063c2
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
padding-left: 45px;
|
||||
position: relative;
|
||||
color: @mdb-radio-label-color;
|
||||
.mdb-label-color-toggle-focus();
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
label {
|
||||
cursor: pointer;
|
||||
color: @mdb-toggle-label-color;
|
||||
.mdb-label-color-toggle-focus();
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
padding-left: 45px;
|
||||
position: relative;
|
||||
color: $mdb-radio-label-color;
|
||||
@include mdb-label-color-toggle-focus();
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
label {
|
||||
cursor: pointer;
|
||||
color: $mdb-toggle-label-color;
|
||||
@include mdb-label-color-toggle-focus();
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user