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;
padding-left: 0; // Reset for Bootstrap rule
color: @mdb-checkbox-label-color;
.mdb-label-color-toggle-focus();
}
// 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 "_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

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

1
less/_radios.less
View File

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

1
less/_togglebutton.less
View File

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

17
less/_variables.less
View File

@ -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:

1
sass/_checkboxes.scss
View File

@ -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
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 '_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

13
sass/_form.scss
View File

@ -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

1
sass/_radios.scss
View File

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

1
sass/_togglebutton.scss
View File

@ -8,6 +8,7 @@
label {
cursor: pointer;
color: $mdb-toggle-label-color;
@include mdb-label-color-toggle-focus();
// Hide original 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;
$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:

19
scripts/material.js
View File

@ -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)