53d9452795
To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
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 + @min-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;
|
|
}
|
|
}
|
|
}
|