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 { #mw-searchButton {
// Override the default right & left position of the icon. // Override the default right & left position of the icon.
right: auto; 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. // Increase size to match WVUI.
width: @size-search-figure; width: @size-search-figure;
} }
// Reposition search icon for expanded input. // Reposition search icon for expanded input.
#searchInput:focus ~ #searchButton { #searchInput:focus ~ #searchButton,
#searchInput:focus ~ #mw-searchButton {
// Derived from // Derived from
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/components/typeahead-search/TypeaheadSearch.vue#610 // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
left: -12px; left: -11px;
} }
// Reset WVUI. Prevents the input border from animating // 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%; max-width: 100%;
flex-grow: 1; 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; margin-left: 0;
max-width: @max-width-search; 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 // 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. // personal tools to be on the same line at this resolution.
@media ( max-width: @width-comfortable ) { @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; margin-left: auto;
} }
} }