golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Merge "Sync Vector styling with latest changes in WVUI"

This commit is contained in:
jenkins-bot 2021-01-12 00:31:45 +00:00 committed by Gerrit Code Review
parent 5d279c94d2 37f6ff02df
commit b1d7f8f6dc
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/skins.vector.styles/VueEnhancedSearchBox.less
View File

@ -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

16
resources/skins.vector.styles/layout-default.less
View File

@ -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;
}
}