mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-18 21:15:50 +00:00
8a2ffe0722
The width comfortable should consider the max-width of the search not the min-width. This fixes the bug documented in T249363#6391041 Bug: T249363 Change-Id: I3e216a3705730092f88d1dcbb5193e411945a083
108 lines
2.6 KiB
Plaintext
108 lines
2.6 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 );
|
|
|
|
// The logo is variable width but typically consists of:
|
|
// - a icon (50x50)
|
|
// - a wordmark (approx 120px)
|
|
@min-width-logo: unit( 170px / @font-size-browser, em );
|
|
|
|
@min-width-personal-tools: @max-width-search;
|
|
|
|
@padding-horizontal-page-container: 30px;
|
|
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
|
|
|
@min-width-supported: @width-grid-column-one + @min-width-personal-tools + ( @padding-horizontal-page-container-ems * 2 );
|
|
@width-comfortable: @min-width-logo + @size-sidebar-button + @max-width-search + @min-width-personal-tools;
|
|
|
|
@height-personal-tools: 2em;
|
|
|
|
.skin-vector-search-header {
|
|
|
|
// Header components
|
|
#p-search {
|
|
// Override values to reflect new behaviour.
|
|
min-width: @min-width-search;
|
|
max-width: @max-width-search;
|
|
margin: 0 40px;
|
|
}
|
|
|
|
// Support IE9: float will be disabled if display flex is supported
|
|
#p-search,
|
|
#mw-sidebar-button {
|
|
float: left;
|
|
}
|
|
|
|
#p-personal {
|
|
text-align: right;
|
|
|
|
// Support IE9: This is reset in @support query below if Flexbox is available.
|
|
float: right;
|
|
}
|
|
|
|
// If we don't have the space adjust header.
|
|
// Increase height and margins to accommodate personal tools underneath.
|
|
@media ( max-width: @width-comfortable ) {
|
|
@height-header-adjusted: @height-header + @height-personal-tools;
|
|
|
|
#mw-panel {
|
|
top: @height-header-adjusted - @margin-top-header;
|
|
}
|
|
|
|
.mw-header-placeholder {
|
|
height: @height-header-adjusted + @height-tabs;
|
|
}
|
|
|
|
#left-navigation {
|
|
margin-top: @height-header-adjusted;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#right-navigation {
|
|
margin-top: -@height-tabs;
|
|
clear: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// when max-width is also enabled...
|
|
.skin-vector-search-header.skin-vector-max-width {
|
|
#left-navigation {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mw-article-toolbar-container {
|
|
margin-top: @height-header + @height-personal-tools;
|
|
}
|
|
|
|
@media ( min-width: @width-comfortable ) {
|
|
.mw-article-toolbar-container {
|
|
margin-top: @height-header;
|
|
}
|
|
}
|
|
}
|
|
|
|
// If flexbox supported reset the floats that are supporting IE9
|
|
// When IE9 is no longer supported this entire query can be dropped.
|
|
@supports ( display: flex ) {
|
|
.skin-vector-search-header {
|
|
.mw-header {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#p-personal,
|
|
#p-search {
|
|
flex-grow: 1;
|
|
// Disable the float: left rule for IE9 support
|
|
float: none;
|
|
}
|
|
|
|
#mw-sidebar-button {
|
|
// Disable the float: left rule for IE9 support
|
|
float: none;
|
|
}
|
|
}
|
|
}
|