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

Merge "search: Update styling for the search loading state"

This commit is contained in:
jenkins-bot 2021-05-10 20:55:31 +00:00 committed by Gerrit Code Review
parent b41e224ec6 964e214e87
commit 50430ea06a
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/skins.vector.styles/components/SearchBoxLoader.less
View File

@ -14,15 +14,25 @@
@import '../../common/variables.less'; @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 { #simpleSearch.search-form__loader:after {
// Set the i18n message. // Set the i18n message.
content: attr( data-loading-msg ); content: attr( data-loading-msg );
// //
// Position loader below the input. // Position loader below the input.
display: block; display: flex;
flex-direction: column;
justify-content: center;
position: absolute; position: absolute;
top: 100%; top: 100%;
width: 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. // Ensure the 100% width doesn't extend beyond the input.
box-sizing: border-box; box-sizing: border-box;
@ -31,10 +41,8 @@
border: @border-base; border: @border-base;
border-top-width: 0; // Hide the top border so it doesn't interfere with focus state. 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; 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; box-shadow: @box-shadow-base;
padding-left: @size-search-figure;
// //
// Hide text in case it extends beyond the input. // Hide text in case it extends beyond the input.
overflow: hidden; overflow: hidden;

16
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View File

@ -47,6 +47,9 @@
// Derived from @size-search-figure in WVUI // Derived from @size-search-figure in WVUI
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21 // 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 ); @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__suggestion,
.wvui-typeahead-search__suggestions__footer { .wvui-typeahead-search__suggestions__footer {
@ -94,9 +97,9 @@
#searchInput:focus { #searchInput:focus {
position: relative; position: relative;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation. // Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( 12px + @{size-search-figure} + 12px )'; padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
width: ~'calc( 100% + 24px )'; width: ~'calc( 100% + @{size-search-expand} )';
left: ~'calc( -1 * 24px )'; left: ~'calc( -1 * @{size-search-expand} )';
} }
// Reposition search icon for expanded input. // 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 // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
left: -11px; 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;
}
} }
} }