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

@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';

.mw-header {
	// Vertical centering of header elements (IE>=11), requires Flexbox.
	.flex-display();
	flex-wrap: nowrap;
	// https://caniuse.com/#search=align-items
	align-items: center;
	padding-top: 8px;
	padding-bottom: 8px;

	.vector-header-start,
	.vector-header-end {
		display: flex;
		align-items: center;
	}

	.vector-header-end {
		flex-grow: 1;
	}

	.search-toggle {
		// At lower resolutions the search input is hidden and a toggle is shown
		display: inline-flex;
		float: right;
		// Ensures the button has a font size of 16px
		font-size: unit( 16 / @font-size-browser, rem );

		@media ( min-width: @min-width-desktop ) {
			// Override .cdx-button styles
			display: none !important;  /* stylelint-disable-line declaration-no-important */
		}
	}

	.vector-typeahead-search-container {
		display: none;

		@media ( min-width: @min-width-desktop ) {
			display: block;
		}
	}

	@media ( max-width: @max-width-tablet ) {
		/**
	 	 * Toggles the visibility of the search box at lower resolutions.
		 */
		&.vector-header-search-toggled {
			.vector-header-start,
			.search-toggle {
				display: none;
			}

			.vector-typeahead-search-container {
				display: block;
				// Override default max width at lower resolutions
				max-width: none;
			}

			.vector-search-box {
				// T284242#7206507: Widen the suggestion results to the edge of the search
				// button at small resolutions.
				position: relative;
			}

			// 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;
			}
		}
	}
}