mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 16:15:28 +00:00
ce77018b7c
[Visual changes] This should result in 9 visual regression failures relating to increased height of search results and loading bar [More details about change] - Migrate search app from Vue 2 to Vue 3; update tests accordingly - Remove dependence on WVUI and use Codex instead, via the special `@wikimedia/codex-search` package - Update search app to use CdxTypeaheadSearch, which no longer takes in props related to the search client or fetch start/end instrumentation. Instead, directly use the restSearchClient and call fetch start/end events in the search app. - Handle hideDirection in the search app/API response formatting code, not within the TypeaheadSearch component - Handle showing/hiding the search button in the app - Move the WVUI URL generator into Vector - Update server-rendered search box styles to match design updates included with CdxTypeaheadSearch - Replace references to WVUI with references to Codex - Update values of various LESS variables to match Codex, and update searchBox styling to prevent jankiness when the searchBox is replaced with the Codex TypeaheadSearch component The VectorWvuiSearchOptions config variable has been maintained and will be updated to a code-agnostic name in a future patch. Bug: T300573 Bug: T302137 Bug: T303558 Bug: T309722 Bug: T310525 Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org> Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
114 lines
3.2 KiB
Plaintext
114 lines
3.2 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
@import '../../common/variables.less';
|
|
|
|
// Defined as `div`.
|
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
|
.vector-search-box-inner {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
// The search input.
|
|
// Note that these rules only apply to the non-Vue enabled search input field.
|
|
// When Vue.js has loaded this element will no longer be in the page and substituted with
|
|
// a Codex element.
|
|
.vector-search-box-input {
|
|
background-color: rgba( 255, 255, 255, 0.5 );
|
|
color: @color-base--emphasized;
|
|
width: 100%;
|
|
// Reduce height slightly from standard to match legacy Vector tabs.
|
|
height: unit( 28 / @font-size-browser / @font-size-search-input, em ); // Equals `2.15384615em`.
|
|
box-sizing: border-box;
|
|
border: @border-base;
|
|
border-radius: @border-radius-base;
|
|
// `padding-right` equals to `#searchbutton` width below.
|
|
padding: 5px @width-search-button 5px 0.4em;
|
|
box-shadow: @box-shadow-base;
|
|
// Match Codex.
|
|
font-family: inherit;
|
|
font-size: @font-size-search-input;
|
|
direction: ltr;
|
|
transition-property: border-color, box-shadow;
|
|
transition-duration: 250ms;
|
|
|
|
// Undo the proprietary styles, we provide our own.
|
|
// Support: Safari/iOS `none` needed, Chrome would accept `textfield` as well. See T247299.
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
-webkit-appearance: none;
|
|
// Support: Firefox.
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
-moz-appearance: textfield;
|
|
|
|
.vector-search-box-inner:hover & {
|
|
border-color: @colorGray7;
|
|
}
|
|
|
|
&:focus,
|
|
.vector-search-box-inner:hover &:focus {
|
|
outline: 0;
|
|
border-color: @border-color-base--focus;
|
|
box-shadow: @box-shadow-base--focus;
|
|
}
|
|
|
|
.mixin-placeholder( {
|
|
color: @colorGray7;
|
|
opacity: 1;
|
|
} );
|
|
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// The search buttons. Fallback and search button are displayed in the same position,
|
|
// and if both are present the fulltext search one obscures the 'Go' one.
|
|
.searchButton {
|
|
background-color: transparent;
|
|
position: absolute;
|
|
top: @border-width-base;
|
|
bottom: @border-width-base;
|
|
// `@border-width-base * 2` is in regards to harmonize position start and end.
|
|
right: @border-width-base;
|
|
min-width: @min-width-search-button;
|
|
width: @width-search-button;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
// Equal `font-size` to search input for `padding` calculation.
|
|
font-size: @font-size-search-input;
|
|
/* Opera 12 on RTL flips the text in a funny way without this. */
|
|
/* @noflip */
|
|
direction: ltr;
|
|
/* Hide button text and replace it with the image. */
|
|
text-indent: -99999px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
z-index: @z-index-search-button;
|
|
}
|
|
|
|
.searchButton[ name='go' ] {
|
|
background: no-repeat center/unit( 16 / @font-size-browser / @font-size-search-input, em ) url( images/search.svg );
|
|
opacity: 0.67;
|
|
}
|
|
|
|
.search-toggle {
|
|
// At lower resolutions the search input is hidden and a toggle is shown
|
|
display: block;
|
|
float: right;
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vector-search-box-collapses > div {
|
|
display: none;
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
display: block;
|
|
}
|
|
}
|