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

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

.vector-sticky-header {
	width: 100%;
	height: @height-sticky-header;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: @z-index-header;
	transform: translateY( -100% );
	transition: @transition-sticky-header;
	display: flex;
	align-items: center;
	max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;
	margin: 0 auto;
	background: @background-color-base;
	background-color: #fffffff7;
	border-bottom: 1px solid @colorGray14;
	// FIXME: Should this adapt to different thresholds? Ask Alex!
	padding: 6px 8px 6px 10px;
	justify-content: space-between;
	box-sizing: border-box;

	// If the user has expressed their preference for reduced motion, then disable animation for the sticky header.
	@media ( prefers-reduced-motion: reduce ) {
		transition: none;
	}

	@media ( min-width: @width-breakpoint-desktop ) {
		padding: 6px 25px;
	}

	// T289714 Hide the sticky header at lower resolutions.
	@media ( max-width: @width-breakpoint-tablet ) {
		display: none;
	}

	// Hide any open menus/search results unless sticky header is visible
	&:not( .vector-sticky-header-visible ) > div {
		display: none;
	}

	&-visible {
		transform: translateY( 0% );
	}

	//
	// Layout
	//
	&-start,
	&-end,
	&-icons,
	&-context-bar {
		display: flex;
		align-items: center;
	}

	&-start {
		flex-grow: 1;
	}

	//
	// Components
	//
	&-context-bar {
		border-left: 1px solid #c8c8c8;
		margin: 0 15px;
		padding-left: 30px;
		white-space: nowrap;
	}

	&-context-bar-primary {
		position: relative;
		max-width: 500px;
		overflow: hidden;
		padding-right: 10px;
		font-family: @font-family-serif;
		// T296320 closest standardized option to 22px (24px)
		font-size: @font-size-heading-2;

		// T289814 Fade out page titles longer than 500px.
		/* Stylelint rule broken for vendor prefixes: https://github.com/stylelint/stylelint/issues/1939 */
		/* stylelint-disable function-linear-gradient-no-nonstandard-direction */
		&:after {
			content: '';
			position: absolute;
			left: 480px;
			width: 100%;
			height: 100%;
			background-color: transparent;
			background-image: -webkit-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
			background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
		}
	}

	.vector-search-box {
		// Hide the search box until the user toggles it.
		display: none;
	}

	&.vector-header-search-toggled {
		// .wvui-input__input left padding (36px) - the .wvui-icon svg width (20px)
		// - the icon left padding (12px [1]) = 4px
		// [1] see .wvui-typeahead-search--show-thumbnail .wvui-input__input:focus)
		@margin-start-search-box: 4px;

		.vector-sticky-header-search-toggle,
		.vector-sticky-header-context-bar {
			display: none;
		}

		.vector-search-box {
			display: block;
			flex-basis: unit( 500px / @font-size-browser / @font-size-base, em );
			margin-left: @margin-start-search-box;
		}

		// T296318 Decrease the start margin of the search box to account for the
		// icon's increased start position when the search component has thumbnails.
		.vector-search-box-show-thumbnail {
			margin-left: @margin-start-search-box - ( @size-search-expand / 2 );

			.wvui-input__start-icon {
				color: @colorGray2;
			}
		}

		// Allocate space for the extra width of the input when the search component
		// has thumbnails.
		//
		// FIXME: This can be removed when WVUI in core has been upgraded
		// to use the `.wvui-typeahead-search--full-width` class.
		.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--full-width ) {
			margin-left: @size-search-expand;
		}
	}
}

.client-nojs .vector-sticky-header {
	display: none;
}

@media ( min-width: @width-breakpoint-tablet ) {
	.client-js.vector-sticky-header-enabled {
		// T290518: When the sticky header is enabled (feature flag is on, js is
		// enabled, and viewport is at higher resolutions), add scroll padding to the
		// root element. This is needed so that the sticky header does not overlap the
		// top of an element when the URI has a hash fragment (e.g. when the user clicks
		// a jump link) and when the user tabs through elements in reverse order.
		//
		// Please note that this class must be independent of the
		// .vector-sticky-header-visible class to correctly handle situations where the
		// sticky header isn't visible yet but we still need scroll padding applied
		// (e.g. when the user navigates to a page with a hash fragment in the URI).
		scroll-padding-top: @height-sticky-header;

		// T289817 Override other sticky element offsets to ensure that other
		// sticky elements (i.e. table headers) appear below the sticky header.
		.mw-sticky-header-element,
		.charts-stickyhead th {
			/* stylelint-disable-next-line declaration-no-important */
			top: @height-sticky-header !important;
		}
	}
}