f2695a5bf3
Some LESS parsers will get confused with the lack of file extension. It's better to be explicit and in alignment with recent change in core I379334d7729e587a2a00. It was already weirdly mixed in this repo with some imports featuring extension and some not. Change-Id: If5065cf9e30289de9b4fd33315bd65b75959ecb7
115 lines
2.6 KiB
Plaintext
115 lines
2.6 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.ui/variables.less';
|
|
|
|
/* Search */
|
|
#p-search {
|
|
float: left;
|
|
margin-right: 0.5em;
|
|
margin-left: 0.5em;
|
|
|
|
h3 {
|
|
.mixin-screen-reader-text;
|
|
}
|
|
|
|
form {
|
|
margin: 0.5em 0 0;
|
|
}
|
|
}
|
|
|
|
#simpleSearch {
|
|
display: block;
|
|
width: 13.2em;
|
|
width: 20vw; /* responsive width */
|
|
min-width: 5em;
|
|
max-width: 20em;
|
|
height: 100%;
|
|
margin-top: 0;
|
|
position: relative;
|
|
|
|
// Styles for both the search input and the button.
|
|
input {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// The search input.
|
|
#searchInput {
|
|
// Support IE6-8: Fallback for browsers, which don't support `rgba()`.
|
|
background-color: @background-color-base;
|
|
background-color: rgba( 255, 255, 255, 0.5 );
|
|
color: @color-base--emphasized;
|
|
width: 100%;
|
|
.box-sizing( border-box );
|
|
border: @border-width-base @border-style-base @colorGray10;
|
|
border-radius: @borderRadius;
|
|
// `padding-right` equals to `#searchbutton` width below.
|
|
padding: 0.4em @width-search-button 0.4em 0.4em;
|
|
.box-shadow( @boxShadowWidget );
|
|
font-size: @font-size-search-input;
|
|
direction: ltr;
|
|
.transition( ~'border-color 250ms, box-shadow 250ms' );
|
|
// Support: Webkit browsers. Undo the proprietary styles applied to `type=search` fields,
|
|
// we provide our own.
|
|
-webkit-appearance: textfield;
|
|
|
|
#simpleSearch:hover & {
|
|
border-color: @colorGray7;
|
|
}
|
|
|
|
&:focus,
|
|
#simpleSearch:hover &:focus {
|
|
outline: 0;
|
|
border-color: @colorProgressive;
|
|
.box-shadow( @boxShadowProgressiveFocus );
|
|
}
|
|
|
|
.mixin-placeholder( {
|
|
color: @colorGray7;
|
|
opacity: 1;
|
|
} );
|
|
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
-webkit-appearance: textfield;
|
|
}
|
|
}
|
|
|
|
// The buttons. They 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: 24px;
|
|
width: @width-search-button;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
// Equal `font-size` to search input for `padding` calculationo.
|
|
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: 1;
|
|
}
|
|
|
|
#searchButton {
|
|
.background-image-svg( 'images/search.svg', 'images/search.png' );
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#mw-searchButton {
|
|
z-index: 1;
|
|
}
|