mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 18:57:04 +00:00
60923c6ddb
The tablet breakpoint doesn't work. It is not possible to apply the min width of 350px for the search input given the other elements in the header, however the desktop breakpoint provides plenty of space. Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
115 lines
2.9 KiB
Plaintext
115 lines
2.9 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.ui/variables.less';
|
|
@import '../../common/variables.less';
|
|
|
|
// Search portlet.
|
|
#p-search h3 {
|
|
.mixin-screen-reader-text();
|
|
}
|
|
|
|
// Defined as `div`.
|
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
|
#simpleSearch {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
// The search input.
|
|
#searchInput {
|
|
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;
|
|
|
|
#simpleSearch:hover & {
|
|
border-color: @colorGray7;
|
|
}
|
|
|
|
&: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,
|
|
#mw-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 {
|
|
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;
|
|
}
|
|
}
|