mediawiki-skins-Vector/resources/skins.vector.styles/components/Header.less

@import '../../common/variables.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;
	// Vertical centering of header elements (IE>=11), requires flex.
	// Non-flex fallback for IE<=9: float rule on the child elements.
	.flex-display();
	flex-wrap: nowrap;
	// https://caniuse.com/#search=align-items
	align-items: center;

	.vector-layout-legacy & {
		margin: @margin-top-header 0 @margin-bottom-header 0;
		padding: 0;
	}

	#mw-sidebar-button {
		float: left; // Browser: IE9 support - button as flex-child fallback.
		margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
	}

	&-content,
	&-aside {
		display: flex;
		align-items: center;
	}

	&-aside {
		float: left;
	}

	&-content {
		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 {
			.vector-layout-legacy & {
				margin-right: @margin-end-search;
			}
		}
	}

	/**
	 * Toggles the visibility of the search box at lower resolutions.
	 */
	@media ( max-width: @max-width-tablet ) {
		&.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;
				}
			}

			.wvui-typeahead-search__wrapper {
				position: static;
			}
		}
	}
}