mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 16:15:28 +00:00
caed16e26f
Styling should not depend on IDs to allow us to have multiple searches in the page. Precursor for wiring up search in the sticky header. This also tweaks performance metrics to track separate metrics for the sticky header search Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
120 lines
3.4 KiB
Plaintext
120 lines
3.4 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.ui/variables.less';
|
|
@import '../../common/variables.less';
|
|
|
|
// Defined as `div`.
|
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
|
// FIXME: Remove #simpleSearch when cache has cleared
|
|
.vector-search-box-inner,
|
|
#simpleSearch {
|
|
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 subsituted with
|
|
// a WVUI element.
|
|
// FIXME: Remove searchInput selector when cache has cleared.
|
|
#searchInput,
|
|
.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 WVUI.
|
|
font-family: inherit;
|
|
font-size: @font-size-search-input;
|
|
direction: ltr;
|
|
.transition( ~'border-color 250ms, box-shadow 250ms' );
|
|
|
|
// Undo the proprietary styles, we provide our own.
|
|
// Support: Safari/iOS `none` needed, Chrome would accept `textfield` as well. See T247299.
|
|
-webkit-appearance: none;
|
|
// Support: Firefox.
|
|
-moz-appearance: textfield;
|
|
|
|
// FIXME: Remove #simpleSearch when cache has cleared
|
|
.vector-search-box-inner:hover &,
|
|
#simpleSearch:hover & {
|
|
border-color: @colorGray7;
|
|
}
|
|
|
|
// FIXME: #simpleSearch can be removed when cache has cleared.
|
|
&:focus,
|
|
.vector-search-box-inner:hover &:focus,
|
|
#simpleSearch: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: @width-breakpoint-desktop ) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vector-search-box-collapses > div {
|
|
display: none;
|
|
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
display: block;
|
|
}
|
|
}
|