Fix focus box-shadow for validation stated form-controls

[KODerFunk]

Description

Fix focus box-shadow for validation stated form-controls.

Motivation & Context

I use styles with custom build bootstrap with option $enable-shadows: true;. Found a few issues in .form-control styling with classes .is-invalid and .is-valid. In particular, the shadow override for such elements, when in focus, does not use standard wrap that I have used in this PR. Without it, for such elements, in the state of focus, only the outer shadow is exposed.

1. That is, the first problem is the loss of the inner shadow.
2. The second problem is the lack of animation, since the transition property only works if number of shadows between states matches.

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://deploy-preview-38719--twbs-bootstrap.netlify.app/

Related issues

Not found.

[mdo]

Losing the inner shadow is fine to me, because I think of the "inset" shadow as being lifted once focused. Hence the shadow around the outside. I'd be fine leaving that out still. I also wasn't aware of a loss of transition, haven't seen that. Do you have a demo or screen recording?

[KODerFunk]

Hey @mdo! Once again, I will clarify that the code I added is not fiction, it's just a copy-paste of how shadows change in other places. You can search for the comment text Avoid using mixin so we can pass custom focus shadow properly.
The most important thing is the loss of animation. transition does not work for transition from double to single shadow.
If a proof still needs to make a video, I will do it within the next 96 hours.

[julien-deramond]

Thanks for the PR @KODerFunk. I'm fine with the suggested changes. Before merging it, don't you think we should do the same thing for .form-select and .form-check-input in this same file too?

[KODerFunk]

@julien-deramond, sorry for pause and thank you for your understanding. I'll try to take a look at your suggestion and make changes accordingly this weekend.

[KODerFunk]

@julien-deramond, @mdo, hi! I recorded several movies. I strengthened inner shadow to make it easier to see problem.

1. This is how my very first fix works:

fixed-textfield-focus-shadows.mov

2. Based on a tip from @julien-deramond, I confirm that .form-select has a problem:

broken-select-focus-shadows.mov

3. Fixed shadows for .form-select in my latest commit:

fixed-select-focus-shadows.mov

4. .form-check-input and other elements without support for text inside the field do not have shadows when $enable-shadows: true and therefore are not affected by the problem described:

problemless-checkbox-focus-shadow.mov

[julien-deramond]

LGTM! Thanks @KODerFunk for the PR and the detailed explanations with the videos.