mediawiki-skins-Vector/resources/skins.vector.styles/VueEnhancedSearchBox.less

@import 'SearchBox.less';

/**
 * Minimal styling for initial no-JS server-rendered
 * search form, which gets replaced by WVUI on focus.
 * Most values are hard-coded since they aim to
 * mimic WVUI-specific variables and disable the
 * ResourceLoader LESS transformation of `calc`.
 */

// TODO: Parent class can be removed when $wgVectorUseCoreSearch is no longer supported.
.skin-vector-search-vue {

	// Derived from @size-search-figure in WVUI
	// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21
	@size-search-figure: 2.57142857em;

	// Derived from @size-base in WVUI
	// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#7
	@size-base: 2.28571429em;

	#searchform {
		// compensates for the 14px base font size in Vector.
		// Affects both server-version and WVUI.
		font-size: 0.875em;
	}

	#searchInput {
		padding-left: @size-search-figure;
		height: @size-base;
		font-size: inherit;
		// Recreate WVUI expanding input.
		&:focus {
			position: relative;
			// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation
			padding-left: ~'calc(12px + 2.57142857em + 12px)';
			width: ~'calc( 100% + 24px )';
			left: ~'calc( -1 * 24px )';
		}
	}

	// Move & resize search icon to match WVUI.
	#searchButton {
		// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
		top: 0;
		// Override the default right & left position of the icon.
		right: auto;
		left: 0;
		// Increase size to match WVUI.
		width: @size-search-figure;
		min-height: @size-base;
		background-size: 20px auto;
		// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
		font-size: inherit;
	}

	// Reposition search icon for expanded input.
	#searchInput:focus ~ #searchButton {
		// Derived from
		// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/components/typeahead-search/TypeaheadSearch.vue#610
		left: -12px;
	}

	// WVUI override. Prevents the WVUI input border from animating
	// when it gets inserted into the DOM while being focused.
	.wvui-input__input:not( [ disabled ] ) {
		.transition(none);
	}
}