Sync Vector styling with latest changes in WVUI
* In Iecc3eebf0dce495400ba3d644dce39186f4fa395, a border was applied to `.wvui-typeahead-search` to make it appear like the input box contains the search submit button. Because of this change, we can't apply a max-width to #searchForm when WVUI loads as it will cause the border to extend farther than it should. Instead, we apply the max-width/other styles to `.wvui-typeahead-search` (WVUI search's root container) and `#p-search`'s direct child after WVUI loads. * In I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b, the start icon was moved 1 pixel to account for the input's border. These changes sync with the changes to WVUI. Depends-On: I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b Bug: T270202 Change-Id: I0ffd0a9225a5a9b935e09748d78ac45b17623790
This commit is contained in:
parent
8190097516
commit
37f6ff02df
|
@ -82,16 +82,19 @@
|
|||
#mw-searchButton {
|
||||
// Override the default right & left position of the icon.
|
||||
right: auto;
|
||||
left: 0;
|
||||
// Accounts for the 1px input border. Derived from
|
||||
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/input/Input.vue#163
|
||||
left: 1px;
|
||||
// Increase size to match WVUI.
|
||||
width: @size-search-figure;
|
||||
}
|
||||
|
||||
// Reposition search icon for expanded input.
|
||||
#searchInput:focus ~ #searchButton {
|
||||
#searchInput:focus ~ #searchButton,
|
||||
#searchInput:focus ~ #mw-searchButton {
|
||||
// Derived from
|
||||
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/components/typeahead-search/TypeaheadSearch.vue#610
|
||||
left: -12px;
|
||||
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
// Reset WVUI. Prevents the input border from animating
|
||||
|
|
|
@ -55,7 +55,15 @@ body {
|
|||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
#searchform {
|
||||
// #searchform is only a direct child of #p-search before wvui-loads. After
|
||||
// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
|
||||
// element where these styles should apply.
|
||||
> #searchform,
|
||||
.wvui-typeahead-search {
|
||||
// Border-box sizing is used for a smooth transition from legacy to Vue
|
||||
// search. The width of the container should stay the same before/after the
|
||||
// transition.
|
||||
.box-sizing( border-box );
|
||||
margin-left: 0;
|
||||
max-width: @max-width-search;
|
||||
}
|
||||
|
@ -266,7 +274,11 @@ body {
|
|||
// We use @width-comfortable to determine this threshold as we know it's not possible for
|
||||
// personal tools to be on the same line at this resolution.
|
||||
@media ( max-width: @width-comfortable ) {
|
||||
#p-search #searchform {
|
||||
// #searchform is only a direct child of #p-search before wvui-loads. After
|
||||
// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
|
||||
// element where these styles should apply.
|
||||
#p-search > #searchform,
|
||||
#p-search .wvui-typeahead-search {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue