Fix $link-decoration and $link-hover-decoration conditionals

[jcandan]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

#30262 and 7fc4037 introduced a bug.

scss/_buttons.scss
  32,20:   text-decoration: if($link-decoration == none, null, none);
  45,22:     text-decoration: if($link-hover-decoration == underline, none, null);
scss/_card.scss
  94,22:     text-decoration: if($link-hover-decoration == underline, none, null);
scss/_dropdown.scss
  183,20:   text-decoration: if($link-decoration == none, null, none);
  192,22:     text-decoration: if($link-hover-decoration == underline, none, null);
scss/_list-group.scss
  80,20:   text-decoration: if($link-decoration == none, null, none);
scss/_nav.scss
  30,20:   text-decoration: if($link-decoration == none, null, none);
  38,22:     text-decoration: if($link-hover-decoration == underline, none, null);
scss/_navbar.scss
  71,20:   text-decoration: if($link-decoration == none, null, none);
  77,22:     text-decoration: if($link-hover-decoration == underline, none, null);
scss/_pagination.scss
  35,20:   text-decoration: if($link-decoration == none, null, none);
  43,22:     text-decoration: if($link-hover-decoration == underline, none, null);

It seems the above attempts to make the link decoration DRY by not including this text-decoration property when the value matches the a particular value.

For example, a .nav-link's text-decoration property would already be set to underline by default, so set it to none here, and a redundant text-decoration property will not be generated. However, this does not take into account other values: only underline and none are options. The $link-hover-decoration condition is even worse: when set to underline, it overrides it with none, otherwise its set to null and therefore not generated.

This could be fixed with adjusted condition logic:

text-decoration: if($link-decoration == none, null, $link-decoration);
@if ($link-hover-decoration != underline) { text-decoration: $link-hover-decoration;}

Reduced test cases

https://codepen.io/jcandan/pen/PoXOwzK

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.2