IBX-4213: Missing hovers on icons (#639)

ibexa · Nov 18, 2022 · 35f80f5 · 35f80f5
1 parent bea9c79
commit 35f80f5
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 33 deletions.
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -19,6 +19,10 @@
 
     &:hover {
         border-color: transparent;
+
+        .ibexa-icon {
+            fill: $ibexa-color-primary;
+        }
     }
 
     &--primary.ibexa-btn {
@@ -31,6 +35,10 @@
         &:hover {
             color: $ibexa-color-white;
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow;
+
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
         }
 
         &:hover:focus {
@@ -95,6 +103,10 @@
 
         &:hover {
             border-color: $ibexa-color-dark;
+
+            .ibexa-icon {
+                fill: $ibexa-color-dark;
+            }
         }
 
         &:focus {
@@ -153,6 +165,10 @@
             background-color: $ibexa-color-dark;
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow-dark;
 
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
+
             &:focus {
                 box-shadow: $ibexa-btn-focus-box-shadow, $ibexa-btn-hover-box-shadow-dark;
             }
@@ -184,6 +200,10 @@
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow-info;
             background-color: $ibexa-color-info;
 
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
+
             &:focus {
                 color: $ibexa-color-white;
                 box-shadow: $ibexa-btn-focus-box-shadow-info, $ibexa-btn-hover-box-shadow-info;
@@ -204,13 +224,21 @@
             color: $ibexa-color-dark;
             fill: $ibexa-color-dark;
             border-color: $ibexa-color-dark;
+
+            .ibexa-icon {
+                fill: $ibexa-color-dark;
+            }
         }
 
         &.ibexa-btn--inverted-hover {
             &:hover {
                 color: $ibexa-color-white;
                 fill: $ibexa-color-white;
                 border-color: $ibexa-color-white;
+
+                .ibexa-icon {
+                    fill: $ibexa-color-white;
+                }
             }
         }
 

diff --git a/src/bundle/Resources/public/scss/_content-type-selector.scss b/src/bundle/Resources/public/scss/_content-type-selector.scss
@@ -5,20 +5,35 @@
 
     &__group-title {
         .accordion-button {
+            justify-content: space-between;
             font-size: $ibexa-text-font-size-medium;
             font-weight: 600;
             border-bottom: calculateRem(1px) solid transparent;
             transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
+            .ibexa-icon--toggle {
+                transition: var(--bs-accordion-btn-icon-transition);
+            }
+
             &:not(.collapsed) {
                 box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
                 border-bottom-color: $ibexa-color-light;
+
+                .ibexa-icon--toggle {
+                    transform: var(--bs-accordion-btn-icon-transform);
+                }
+            }
+
+            &:hover {
+                color: $ibexa-color-primary;
+
+                .ibexa-icon--toggle {
+                    fill: $ibexa-color-primary;
+                }
             }
 
             &::after {
-                width: calculateRem(12px);
-                height: calculateRem(12px);
-                background-size: unset;
+                display: none;
             }
         }
     }

diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -29,7 +29,7 @@
         margin-left: calculateRem(8px);
         border: none;
 
-        &:after {
+        &::after {
             content: '';
             width: 0;
             height: 0;
@@ -38,6 +38,12 @@
             border-right: calculateRem(4px) solid transparent;
             border-top: calculateRem(4px) solid $ibexa-color-white;
         }
+
+        &:hover {
+            &::after {
+                border-top: calculateRem(4px) solid $ibexa-color-info;
+            }
+        }
     }
 
     &__thumbnail-wrapper {
@@ -53,6 +59,12 @@
         height: calculateRem(24px);
         padding-bottom: calculateRem(4px);
         cursor: pointer;
+
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
     }
 
     &__notice-dot {

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -370,14 +370,6 @@
         width: calculateRem(24px);
         height: calculateRem(24px);
         padding: 0;
-        fill: $ibexa-color-dark;
-
-        &--clear {
-            .ibexa-icon {
-                width: calculateRem(8px);
-                height: calculateRem(8px);
-            }
-        }
     }
 
     &--type-number {

diff --git a/src/bundle/Resources/public/scss/_main-header.scss b/src/bundle/Resources/public/scss/_main-header.scss
@@ -46,32 +46,50 @@
         border-color: $ibexa-color-info;
         background: $ibexa-color-info-800;
 
-        &.ibexa-input--text:not(:disabled) {
-            &:focus,
-            &:hover {
-                border-color: $ibexa-color-info;
-                background: $ibexa-color-info-800;
+        &.ibexa-input--text:not(:focus):placeholder-shown {
+            border-color: transparent;
+        }
+
+        &.ibexa-input--text {
+            &:not(:disabled) {
+                &:focus,
+                &:hover {
+                    border-color: $ibexa-color-info;
+                    background: $ibexa-color-info-800;
+                }
             }
         }
 
         &.form-control:focus {
             color: $ibexa-color-light;
         }
 
-        &.ibexa-input--text:not(:focus):placeholder-shown {
-            border-color: transparent;
-        }
-
         &::placeholder {
             color: $ibexa-color-light;
         }
     }
 
-    .ibexa-input-text-wrapper__action-btn--search {
-        background: $ibexa-color-info-600;
-        width: calculateRem(58px);
-        height: calculateRem(48px);
-        transform: translateX(10px);
+    .ibexa-input-text-wrapper__action-btn {
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
+
+        &--search {
+            background: $ibexa-color-info-600;
+            width: calculateRem(58px);
+            height: calculateRem(48px);
+            transform: translateX(10px);
+
+            &:hover {
+                box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-info, 0.2);
+
+                .ibexa-icon {
+                    fill: $ibexa-color-white;
+                }
+            }
+        }
     }
 
     &__user-menu-column {
@@ -80,8 +98,16 @@
         align-items: center;
         justify-content: flex-end;
     }
-}
 
-.ibexa-input--text:not(:focus):placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--search {
-    background-color: transparent;
+    .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;
+            }
+        }
+    }
 }
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
@@ -19,18 +19,18 @@
         {% block actions %}
             <button 
                 type="button" 
-                class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear" 
+                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
                 tabindex="-1"
                 {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
             >
-                <svg class="ibexa-icon">
+                <svg class="ibexa-icon ibexa-icon--tiny">
                     <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                 </svg>
             </button>
             {% if is_password_input %}
                 <button
                     type="button"
-                    class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
+                    class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
                     tabindex="5"
                 >
                     <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
@@ -41,7 +41,7 @@
                     </svg>
                 </button>
             {% elseif has_search %}
-                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
+                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
                     <svg class="ibexa-icon ibexa-icon--small">
                         <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
                     </svg>

diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
@@ -93,6 +93,10 @@
                 <span class="ibexa-content-type-selector__group-title accordion-header">
                     <button type="button" class="accordion-button {% if not loop.first %} collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#{{ group_label }}">
                         {{ choice_translation_domain is same as(false) ? group_label : group_label|trans({}, choice_translation_domain) }}
+
+                        <svg class="ibexa-icon ibexa-icon--tiny-small ibexa-icon--toggle">
+                            <use xlink:href="{{ ibexa_icon_path('caret-down') }}"></use>
+                        </svg>
                     </button>
                 </span>
                 <div class="ibexa-content-type-selector__list-wrapper accordion-collapse collapse{% if loop.first %} show{% endif %}" id="{{ group_label }}">