Skip to content

Commit

Permalink
XWIKI-21842: The search bar takes too much width when folded
Browse files Browse the repository at this point in the history
* 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.
(cherry picked from commit c1cf1a1)
  • Loading branch information
Sereza7 authored and surli committed Feb 27, 2024
1 parent 2f18488 commit 9e75e4d
Showing 1 changed file with 3 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand All @@ -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;
}
}
}
Expand Down

0 comments on commit 9e75e4d

Please sign in to comment.