mediawiki-skins-Vector/resources/skins.vector.styles/components/SearchBoxLoader.less

91 lines
2.8 KiB
Plaintext
Raw Normal View History

/**
* Loading indicator for search widget
*
* By adding a class on the parent search form
* <div id="simpleSearch" class="search-form__loader"></div>
* A pseudo element is added via ':after' that mimics the appearance
* of the search suggestion and contains the text
* "Loading search suggestions" (message key: vector-search-loader).
*
* After appearing for more than a second, a progress-bar animation appears
* above the loading indicator.
*
**/
@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: 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;
//
// Align loader style with input.
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;
box-shadow: @box-shadow-base;
padding-left: @size-search-figure;
//
// Hide text in case it extends beyond the input.
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
//
// Prevent Vector tabs from overlapping T254695#6461044
z-index: @z-index-search-loader;
//
// Add a progress-bar to the loading indicator,
// but only show it animating after 1 second of loading.
background: /*image*/ linear-gradient( 90deg, @colorProgressive 0%, @colorProgressive 100% )
/* position / size*/ -10% 0 ~'/' 0 2px
/* repeat */ no-repeat,/*second bg, just color*/#fff;
//
// Animates the progress-bar.
animation: /* name */ search-loader-progress-bar
/* duration */ 1200ms
/* timing function */ linear
/* delay */ 1000ms
/* iteration count */ infinite
/* fill direction */ alternate;
}
@keyframes search-loader-progress-bar {
0% {
background-size: 0 2px;
background-position: -10% 0;
}
30% {
background-size: 30% 2px;
background-position: -10% 0;
}
70% {
background-size: 30% 2px;
background-position: 110% 0;
}
100% {
background-size: 0 2px;
background-position: 110% 0;
}
}