Make .close hover focus styles less specific

[pat270]

This pull removes the &:not(:disabled):not(.disabled) selector on the .close component and styles :disabled/.disabled directly because the :not pseudo classes are too hard to overwrite (breaks for people that extended .close based on the old version).

Also added variables:

$close-opacity
$close-hover-color
$close-hover-opacity
$close-disabled-opacity

Fixes #27784

[mdo]

We moved to this approach awhile ago across most of the project to simplify our the amount of code to properly disable things. If we change it here, I fear we need to change it everywhere. Are there other places we need to revisit as well?

[pat270]

Changing it across the board is my preference, but might cause some unintended consequences for any Bootstrap themes in the wild.

&:not(:disabled):not(.disabled) is used in a handful of places buttons, close, navbar and pagination, generally for the cursor property. These existed in 4.0.0 and we were able to account for these. The changes to .close for:

  &:not(:disabled):not(.disabled) {
	    @include hover-focus {
	      opacity: .75;
	    }

came too late unfortunately. What if we kept:

  &:not(:disabled):not(.disabled) {
    // Opinionated: add "hand" cursor to non-disabled .close elements
    cursor: pointer;
  }

and moved the hover-focus opacity outside of that selector?

Changes applied

[mdo]

That solution could work perhaps, but then we're still adding extra selectors. Going to have to review this more in-depth.

[pat270]

@mdo if you prefer to change it everywhere, I can resend with changes everywhere.

[ysds]

I do not know why .close supports <a>. <button> is enough for accessibility.

In general you should only use an anchor for navigation using a proper URL.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Accessibility_concerns

If we drop support of <a>, its CSS will be more simple.

[patrickhlauke]

I do not know why .close supports <a>

Because sadly, many authors (either directly, or indirectly because their tooling does it) like to misuse <a> for button-style controls...

[ysds]

@patrickhlauke OK I understand.

@pat270 could you fix the conflict ?