mediawiki-skins-Vector/resources/skins.vector.styles.legacy/components/MenuDropdown.less

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

// Extends the common MenuDropdown, but allows it to be opened via hover.

.vector-menu-dropdown:not( .vector-user-menu ) {
	&:hover .vector-menu-content {
		opacity: 1;
		visibility: visible;
	}
}

.vector-menu-checkbox {
	&:checked + .vector-menu-heading:after {
		transform: scaleY( -1 );
	}
}

.vector-menu-dropdown {
	line-height: 1.125em;

	li {
		span:not( .mw-ui-icon ) {
			font-size: @font-size-tabs;
		}

		a {
			// Historic value.
			padding: unit( ( 8.125px / @font-size-browser ), em );
		}
	}

	.vector-menu-heading {
		background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
		background-repeat: no-repeat;
		// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
		background-size: @border-width-base 100%;
		background-position: right bottom;
		height: 100%;
	}

	.vector-menu-content {
		border-top-width: 0;
	}
}

.vector-menu-dropdown-noicon .vector-menu-heading {
	font-size: @font-size-tabs;
}

#mw-head .vector-menu-dropdown .vector-menu-heading {
	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
	background-position: right bottom;
	float: left;
	height: unit( 40 / @font-size-tabs / @font-size-browser, em );
	margin: 0 -@border-width-base 0 0;
	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
	// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
	// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
	// `padding-left` in `.vector-menu-dropdown .vector-menu-heading a`
	padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
}