From c1cf1a1fa1a620f1e1b3aa5abcd782188cb2893e Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Wed, 31 Jan 2024 14:34:00 +0100 Subject: [PATCH] XWIKI-21842: The search bar takes too much width when folded * Replaced the ScaleX transition with a width + padding one. Note: This is a heavier implementation because layout needs to be recalculated multiple times, but we actually want layout to move around depending on the state of the search toggle, so it's worth it. --- .../src/main/resources/flamingo/less/action-menus.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less index 64e76021e457..582fff14e366 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less @@ -121,8 +121,7 @@ border-radius: 0; border: 0; min-width: 0; - transform-origin: 100% 50%; - transition: transform 300ms ease-in-out; + transition: width 300ms ease-in-out, padding 300ms ease-in-out; width: 200px; // we need to set a width in pixels otherwise the transition is not applied nicely } @@ -144,7 +143,8 @@ } // The input has no width (it's hidden basically, but we need to set the width to 0 to have the nice transition) & + #headerglobalsearchinput { // we need to be that specific to be applied - transform: scaleX(0); + width: 0; + padding: 0; } } }