mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 08:35:42 +00:00
a1199a0917
Restricted to the feature flag (?vectorvisualenhancementnext=1) for now to allow us to not worry about caching. mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core for some time and using them means we don't have to manage hardcoded values for these. We'll need to think of .mixin-vector-flush-left-left and .mixin-vector-flush-right-margin-left separately - I wonder if these could be revised to use these 2 standard classes. Additional changes: - Drop unused mixin-vector-flush-right-margin-left mixin Bug: T321504 Bug: T317583 Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
110 lines
2.9 KiB
Plaintext
110 lines
2.9 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
|
@padding-vertical-header: 0.125em;
|
|
@margin-top-header: 0.5em;
|
|
@margin-bottom-header: 2em;
|
|
|
|
// Logo sizes per specification in T245190.
|
|
@height-logo-icon: 3.125em;
|
|
|
|
.mw-header {
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-height: @height-logo-icon;
|
|
padding: 8px 0;
|
|
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
|
.flex-display();
|
|
flex-wrap: nowrap;
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
|
|
// FIXME: Remove mixin when this block is removed.
|
|
.vector-feature-visual-enhancement-next-disabled & {
|
|
.mixin-vector-flush-left-margin-left();
|
|
.mixin-vector-flush-right-margin-right();
|
|
}
|
|
|
|
#mw-sidebar-button {
|
|
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
|
}
|
|
|
|
/* FIXME: Remove selectors after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
|
&-content,
|
|
&-aside,
|
|
.vector-header-start,
|
|
.vector-header-end {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
|
&-aside,
|
|
.vector-header-start {
|
|
float: left;
|
|
}
|
|
|
|
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
|
&-content,
|
|
.vector-header-end {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
// Ensure search box is aligned with content when search thumbnails or JS is off
|
|
.vector-search-box:not( .vector-search-box-auto-expand-width ),
|
|
html:not( .client-js ) & .vector-search-box {
|
|
padding-left: @size-search-expand;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.vector-search-box {
|
|
margin-right: @margin-end-search;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
/**
|
|
* Toggles the visibility of the search box at lower resolutions.
|
|
*/
|
|
&.vector-header-search-toggled {
|
|
#mw-sidebar-button,
|
|
.mw-logo,
|
|
.search-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.vector-search-box-collapses > div {
|
|
display: block;
|
|
}
|
|
|
|
.vector-search-box {
|
|
// T284242#7206507: Widen the suggestion results to the edge of the search
|
|
// button at small resolutions.
|
|
position: relative;
|
|
margin-left: @padding-horizontal-tabs;
|
|
margin-right: @margin-end-search;
|
|
|
|
// Override default max width at lower resolutions
|
|
> div {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
// Make the menu below the search input wider, to match the width of the input+button
|
|
// rather than just the width of the input
|
|
.cdx-search-input__input-wrapper {
|
|
position: static;
|
|
}
|
|
|
|
// Since the end button's corner is now right above the menu's corner, don't use a
|
|
// rounded corner here (T310525)
|
|
.cdx-typeahead-search--expanded .cdx-search-input__end-button {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|