From bd87e1b41b8756586cdc73b256beb3a716cc7c9b Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:38:42 +0200
Subject: [PATCH] Merge pull request #19578 from overleaf/rd-focus-input

[web] Override the Bootstrap 5 default invalid focus style on Form Control elements

GitOrigin-RevId: 8a352eac4d1fb2848b5449975700e194b074cdd2
---
 .../stylesheets/bootstrap-5/components/form.scss     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 72ffec6cbf..ca39955a5b 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -156,16 +156,16 @@
 
 .form-control,
 .form-select {
-  &:focus-visible {
+  &:focus,
+  &:invalid:focus,
+  &.is-invalid:focus,
+  &:focus-visible,
+  &:invalid:focus-visible,
+  &.is-invalid:focus-visible {
     color: $input-focus-color;
     background-color: $input-focus-bg;
     outline: 0;
     border-color: $input-focus-border-color;
     box-shadow: $input-focus-box-shadow;
   }
-
-  &.is-invalid:focus-visible {
-    border-color: $form-feedback-invalid-color;
-    box-shadow: 0 0 0 2px var(--red-30);
-  }
 }