diff --git a/resources/skins.vector.styles/components/SearchBoxLoader.less b/resources/skins.vector.styles/components/SearchBoxLoader.less index dc951d814..620f1fd3a 100644 --- a/resources/skins.vector.styles/components/SearchBoxLoader.less +++ b/resources/skins.vector.styles/components/SearchBoxLoader.less @@ -14,15 +14,25 @@ @import '../../common/variables.less'; +// Derived from @size-search-figure in WVUI. +// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21 +@size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em ); +// Derived from @padding-vertical-typeahead-suggestion: 8px in WVUI. +// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#27 +@padding-vertical-typeahead-suggestion: 8px; + #simpleSearch.search-form__loader:after { // Set the i18n message. content: attr( data-loading-msg ); // // Position loader below the input. - display: block; + display: flex; + flex-direction: column; + justify-content: center; position: absolute; top: 100%; width: 100%; + height: ~'calc( @{padding-vertical-typeahead-suggestion} + @{size-search-figure} + @{padding-vertical-typeahead-suggestion} )'; // // Ensure the 100% width doesn't extend beyond the input. box-sizing: border-box; @@ -31,10 +41,8 @@ border: @border-base; border-top-width: 0; // Hide the top border so it doesn't interfere with focus state. border-radius: 0 0 @border-radius-base @border-radius-base; - color: @color-base--disabled; - font-size: @font-size-notification; - padding: 0.4em; box-shadow: @box-shadow-base; + padding-left: @size-search-figure; // // Hide text in case it extends beyond the input. overflow: hidden; diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 1e3e38237..349e4577a 100644 --- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -47,6 +47,9 @@ // Derived from @size-search-figure in WVUI // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21 @size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em ); + // Derived from @spacing-start-typeahead-search-figure + @spacing-end-typeahead-search-figure in WVUI + // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#645 + @size-search-expand: 24px; .wvui-typeahead-search__suggestion, .wvui-typeahead-search__suggestions__footer { @@ -94,9 +97,9 @@ #searchInput:focus { position: relative; // Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation. - padding-left: ~'calc( 12px + @{size-search-figure} + 12px )'; - width: ~'calc( 100% + 24px )'; - left: ~'calc( -1 * 24px )'; + padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )'; + width: ~'calc( 100% + @{size-search-expand} )'; + left: ~'calc( -1 * @{size-search-expand} )'; } // Reposition search icon for expanded input. @@ -106,5 +109,12 @@ // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655 left: -11px; } + + // Update search loader to match width and position of WVUI expanding input. + #simpleSearch.search-form__loader:after { + width: ~'calc( 100% + @{size-search-expand} )'; + left: ~'calc( -1 * @{size-search-expand} )'; + padding-left: @size-search-expand; + } } }