mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-17 20:52:14 +00:00
125fa03395
Replaces vector search icon with an update version that is copied from the OOUI icon set and used in WVUI search. This update will help us unify the visual appearance of the existing search input with the one in WVUI. Bug: T264355 Change-Id: I34792ee80e711b10b441668cc4ae18cc0cc9daa6
103 lines
2.5 KiB
Plaintext
103 lines
2.5 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.ui/variables.less';
|
|
@import '../../variables.less';
|
|
|
|
/* Search */
|
|
#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%;
|
|
|
|
// Styles for both the search input and the button.
|
|
input {
|
|
margin: 0;
|
|
// Match WVUI.
|
|
font-family: inherit;
|
|
height: 2.28571429em; // 32px
|
|
}
|
|
}
|
|
|
|
// The search input.
|
|
#searchInput {
|
|
background-color: rgba( 255, 255, 255, 0.5 );
|
|
color: @color-base--emphasized;
|
|
width: 100%;
|
|
.box-sizing( border-box );
|
|
border: @border-base;
|
|
border-radius: @border-radius-base;
|
|
// `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' );
|
|
|
|
// 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: @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 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// 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: @z-index-search-button;
|
|
}
|
|
|
|
#searchButton {
|
|
background: no-repeat center/12px url( images/search.svg );
|
|
opacity: 0.67;
|
|
}
|