wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 09:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

search: Update styling for the search loading state

Browse source 
Bug: T273093
Change-Id: Ifd7f07411597be844cb7de79e416975261069506
This commit is contained in:
bwang 2021-05-05 13:27:50 -05:00
parent 932c8d541e
commit 964e214e87
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';
// 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;

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

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