Merge branch 'add-filter-focus-style' into 'master'

Add filter focus for filtered search visual tokens

See merge request !9875

1 files changed, 14 insertions, 4 deletions

diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 7cb72fe516f..51805c5d734 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -173,16 +173,26 @@
     }
   }
 
+  &:hover {
+    @extend .form-control:hover;
+  }
+
+  &.focus,
+  &.focus:hover {
+    border-color: $dropdown-input-focus-border;
+    box-shadow: 0 0 4px $search-input-focus-shadow-color;
+  }
+
+  &.focus .fa-filter {
+    color: $common-gray-dark;
+  }
+
   .form-control {
     position: relative;
     min-width: 200px;
     padding: 5px 25px 6px 0;
     border-color: transparent;
 
-    &:focus ~ .fa-filter {
-      color: $common-gray-dark;
-    }
-
     &:focus,
     &:hover {
       outline: none;