nav links inconsistencies

[bassjobsen]

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

1. i can not style the link's color and :hover color using variables
2. 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

1. set the disabled state for the a selectors in scss/reboot.scss and remove it from the nav code

2. 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;

3. 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.

[mdo]

The nav links, by default, inherit the global link color. Setting it to a new variable here doesn't make much sense to me and just adds new, unnecessary CSS. I understand the problem here, but I don't think either solution presented here is better than what we have today.

Looking at the navs Sass file though, there is some easy cleanup I can get in there. PR forthcoming!

[mdo]

PR: #18783.