nav links inconsistencies
Created by: bassjobsen
https://github.com/twbs/bootstrap/issues/18623 tells me that $nav-link-hover-bg
is an unused variable. When looking to the nav links (in scss/_nav.scss) i found that:
- i can not style the link's color and :hover color using variables
- but i can style the disabled state color by
$nav-disabled-link-color
and$nav-disabled-link-hover-color
The nav links (.nav-link
) inherit their color and :hover color from the a
selector set in scss/reboot.scss
.
Some suggestions to solve these inconsistencies
-
set the disabled state for the
a
selectors inscss/reboot.scss
and remove it from the nav code -
create (and) use variables for all (normal, hover, active and disabled states), like: $nav-link-color: $link-color !default; $nav-link-bg: transparent !default;
$nav-link-hover-color: $link-hover-color !default; $nav-link-hover-decoration: $link-hover-decoration; $nav-link-hover-bg: transparent !default;
$nav-active-link-color: $component-active-color !default; $nav-active-link-hover-color: $component-active-color !default; $nav-active-link-hover-bg: transparent !default;
$nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; $nav-disabled-link-hover-bg: transparent !default;
-
do both 1. and 2.
I'm not sure why for instance $nav-link-color
does not exists yet. Personally i think we should implement 3. because of it does not change anything for the default, but enables you to configure the nav (and other components) by setting some variables.