IBX-7745: State for icon in search has wrong color

ibexa · Jun 26, 2024 · 7e451c4 · 7e451c4
1 parent c55d0f5
commit 7e451c4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss
@@ -8,7 +8,7 @@
             width: auto;
 
             .ibexa-icon {
-                fill: $ibexa-color-light;
+                fill: $ibexa-color-white;
             }
         }
 
@@ -20,30 +20,34 @@
             }
 
             &--search {
-                background: $ibexa-color-info-600;
                 width: calculateRem(40px);
                 height: calculateRem(40px);
                 transform: translateX(calculateRem(8px));
 
                 &:hover {
+                    background: $ibexa-color-info-600;
                     box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-info, 0.2);
 
                     .ibexa-icon {
                         fill: $ibexa-color-white;
                     }
                 }
+
+                &:focus {
+                    color: $ibexa-color-white;
+                    background: $ibexa-color-info-600;
+                    border-color: $ibexa-color-info-600;
+
+                    .ibexa-icon {
+                        fill: $ibexa-color-white;
+                    }
+                }
             }
         }
-    }
-
-    .ibexa-input--text:not(:focus):placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--search {
-        background-color: transparent;
 
         &:hover {
-            box-shadow: none;
-
-            .ibexa-icon {
-                fill: $ibexa-color-info;
+            .ibexa-input {
+                border-color: $ibexa-color-info-600;
             }
         }
     }
@@ -54,16 +58,30 @@
         color: $ibexa-color-white;
         border-color: $ibexa-color-info;
         background: rgba($ibexa-color-white, 0.1);
-
-        &.ibexa-input--text:not(:focus):placeholder-shown {
-            border-color: transparent;
-        }
+        border-color: transparent;
 
         &.ibexa-input--text {
             &:not(:disabled) {
-                &:focus,
-                &:hover {
+                &:focus {
                     border-color: $ibexa-color-info-600;
+                    background: rgba($ibexa-color-white, 0.1);
+                    box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2);
+
+                    & + .ibexa-input-text-wrapper__actions {
+                        .ibexa-input-text-wrapper__action-btn--search {
+                            background: $ibexa-color-info-600;
+                        }
+                    }
+                }
+
+                &:active {
+                    box-shadow: none;
+
+                    & + .ibexa-input-text-wrapper__actions {
+                        .ibexa-input-text-wrapper__action-btn--search {
+                            background: transparent;
+                        }
+                    }
                 }
             }
         }

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -33,7 +33,7 @@
                 tabindex="-1"
                 {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
             >
-                <svg class="ibexa-icon ibexa-icon--tiny">
+                <svg class="ibexa-icon ibexa-icon--small">
                     <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                 </svg>
             </button>