Fix form switch glitch

[gregorw]

Description

The form switch or toggle component is in limbo state when $enable-rounded: false. The box is rectangular while the toggle is round. Just like this:

Motivation & Context

This change fixes the bug where a form switch is displayed as rectangle with a round toggle image.

Please see also https://gregorw.github.io/bootstrap-switch-bugfix/.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://gregorw.github.io/bootstrap-switch-bugfix/
• https://deploy-preview-38109--twbs-bootstrap.netlify.app/docs/5.3/forms/checks-radios/#switches

Related issues

[maciek-szn]

Or vice versa - rectangular switch with a square instead of a circle.

[mdo]

I think these are fine to square off, but yes, it'd be better if the embedded SVG was also updated when rounded corners are disabled.

[gregorw]

Alright @maciek-szn and @mdo, I have updated according to your suggestion. When $enable-rounded is switched off the form switch is now rectangular / square. Please see the demo: https://gregorw.github.io/bootstrap-switch-bugfix/

I was hesitating to introduce the first @if statement in _variables.scss. Alternatively, we could use a dedicated function. Would you rather prefer that? What do you think?

I just realized that in #38277 the same thing was fixed a few hours ago…

[gregorw]

@mdo Would you mind reviewing this?

[mdo]

Compared to #38277, this PR would require us to wait for v5.4.0 as there's a new Sass variable being added here. Will think on it more and decide soon!