Split Searchbox layout styles for legacy and modern

No changes made to the CSS rules.
* 'SearchBox.less' is the common part that won't change in modern.
* layout styles copied to both 'layout.less'

Bug: T249363
Change-Id: I340b9e7e91960713c0ebb4d3d26e2ae2d5628f37
This commit is contained in:
AronDemian 2020-07-08 14:25:34 +02:00 committed by jdlrobson
parent 56dbfd9a46
commit ba8ec2f842
3 changed files with 54 additions and 15 deletions

View File

@ -4,16 +4,8 @@
/* Search */
#p-search {
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
h3 {
.mixin-screen-reader-text;
}
form {
margin: 0.5em 0 0;
.mixin-screen-reader-text();
}
}
@ -21,12 +13,6 @@
// Provide extra element for gadgets due to `form` already carrying an `id`.
#simpleSearch {
position: relative;
min-width: 5em;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 20em;
height: 100%;
// Styles for both the search input and the button.

View File

@ -74,6 +74,32 @@ body {
z-index: @z-index-header;
}
/* Searchbox */
#p-search {
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
// FIXME: This selector requires knowledge of the internals of the search component
// and should not be used here.
form {
margin: 0.5em 0 0;
}
}
// Defined as `div`.
// Provide extra element for gadgets due to `form` already carrying an `id`.
// FIXME: This selector requires knowledge of the internals of the search component
// and should not be used here.
#simpleSearch {
min-width: 5em;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 20em;
}
/* Main column */
.mw-body,
#mw-data-after-content,

View File

@ -108,6 +108,33 @@ body {
margin-top: 2.5em;
}
/* Search */
#p-search {
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
// FIXME: This selector requires knowledge of the internals of the search component
// and should not be used here.
form {
margin: 0.5em 0 0;
}
}
// Defined as `div`.
// Provide extra element for gadgets due to `form` already carrying an `id`.
// FIXME: This selector requires knowledge of the internals of the search component
// and should not be used here.
#simpleSearch {
min-width: 5em;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 20em;
}
/* Sidebar */
#mw-panel {
position: absolute;
top: 0;