mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-18 05:01:25 +00:00
df3954eff8
Minor visual fix for IE9 for modern mode with search not in header.
i.e. with these settings:
$wgVectorIsSearchInHeader = false;
$wgVectorDefaultSkinVersion = 2;
Slight refactor of CSS. Removes block of styles that "reset" floats.
These were uneccessary because as flex-children, the floats were
ignored on those elements anyway.
Moves flex-wrap on .mw-header from layout-search-header.less
to layout-default.less since that's where display:flex is defined
and the rule is general enough that it should apply for different layouts.
Remove the @supports block with the `float:none;`. That is unnecessary
because flex-children are not affected by floats.
Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
56 lines
2 KiB
Plaintext
56 lines
2 KiB
Plaintext
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
|
// Assumes various variables defined there.
|
|
|
|
@min-width-search: unit( 350px / @font-size-browser, em );
|
|
@max-width-search: unit( 580px / @font-size-browser, em );
|
|
@margin-horizontal-search: unit( 40px / @font-size-browser, em );
|
|
|
|
// The logo is variable width but typically consists of:
|
|
// - a icon (50x50)
|
|
// - a wordmark (approx 120px)
|
|
@min-width-logo: unit( 180px / @font-size-browser, em );
|
|
|
|
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
|
|
|
|
@padding-horizontal-page-container: 30px;
|
|
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
|
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
|
|
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
|
|
|
// the width of the container if you exclude consideration for search
|
|
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @min-width-personal-tools + @padding-horizontal-page-container-ems;
|
|
|
|
@min-width-supported: @min-width-container-base + @min-width-search;
|
|
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search;
|
|
|
|
@height-personal-tools: 2em;
|
|
|
|
.skin-vector-search-header {
|
|
|
|
// Header components
|
|
#p-search {
|
|
flex-grow: 1;
|
|
// Support IE9: float will be disabled if display flex is supported
|
|
float: left;
|
|
// Override values to reflect new behaviour.
|
|
min-width: @min-width-search;
|
|
max-width: 100%;
|
|
margin: 0 0 0 @margin-horizontal-search;
|
|
|
|
#searchform {
|
|
margin-left: auto;
|
|
max-width: @max-width-search;
|
|
}
|
|
}
|
|
|
|
#p-personal {
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
flex-basis: @min-width-personal-tools;
|
|
margin-left: @margin-horizontal-search;
|
|
|
|
// Support IE9: This is reset in @support query below if Flexbox is available.
|
|
float: right;
|
|
}
|
|
}
|