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

// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';

// TODO: `#p-lang-btn` Can be changed to `.mw-portlet-lang` when languages-in-header is the default.
#p-lang-btn {
	.box-sizing( border-box );
	height: @height-lang-button;

	.mw-ui-icon:before {
		// Put icon on correct standard normal state color.
		opacity: 0.87;
	}

	.vector-menu-heading {
		font-size: initial;
		// reset padding styles in MenuDropdown.less with right padding for arrow.
		padding-right: 30px;
		padding-left: 8px;
		// Prevent select of span text "X languages"
		user-select: none;
		// Remove opacity on language button (it applies to more menu because of label color).
		opacity: 1;
		// Hack: mw-ui-icon is not designed to be used with mw-ui-button
		// Must disable min-height of mw-ui-button
		min-height: 22px;
		// mw-ui-icon resets the button border.
		border: 1px solid transparent;
		// center vertically in heading.
		margin-top: 2px;

		span {
			// Special treatment for language button, based on Vector font-size
			font-size: @font-size-base;
		}

		&:after {
			top: 0;
		}
	}

	.vector-menu-content {
		top: auto;
		left: -@border-width-base;
		right: -@border-width-base;
		// align borders of open menu align with button
		.box-sizing( border-box );
		max-height: 65vh;
		overflow: scroll;
		border-top-width: 1px;

		// Adds to the show/hide technique in MenuDropdown.less with
		// display to prevent rendering and long scrolling on Main page
		display: none;

		li a {
			font-size: inherit;
		}
	}

	.vector-menu-checkbox:checked ~ .vector-menu-content {
		display: block;
	}

	.after-portlet {
		// ensure there is a visual separation between the language links and additional links.
		margin-top: 10px;
	}
}

// Disable border-radius when dropdown menu open
.client-nojs {
	#p-lang-btn:hover .vector-menu-heading,
	.vector-menu-checkbox:checked + .vector-menu-heading {
		border-radius: 0;
	}
}

// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.client-js #p-lang-btn {
	// The `.mw-interlanguage-selector` is toggled off through js if the
	// `ext.uls.interface` module is not being loaded.
	.mw-interlanguage-selector {
		// Remove the ULS language icon provided by ext.uls.compactlinks.less as we
		// are already providing no-js users an icon.
		background-image: none;
	}

	// When the ext.uls.interface module is loaded, we hide the fallback menu and
	// checkbox.
	&.vector-menu--hide-dropdown {
		.vector-menu-checkbox,
		.vector-menu-content {
			display: none;
		}
	}
}