mediawiki-skins-MinervaNeue/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less

/**
 * Redefinition of the mw-ui-icon class from MediaWiki-core.
 *
 * This module attempts to maintain compatibility with the
 * core mw-ui-icon module, while adding more mobile-friendly
 * features like increased touch-area sizes and highlights.
 *
 * - mw-ui-icon = base class. 20px square with icon.
 * - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
 * - mw-ui-icon + mw-ui-icon-small = small icon with padding & pseudo-states.
 * - mw-ui-icon + mw-ui-icon-flush-left = negative right-margin.
 * - mw-ui-icon + mw-ui-icon-flush-right = negative left-margin.
 * - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
 *   Labels should be placed in a separate element beside the icon.
 *
 */

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

@icon-background-color--selected:  rgba( 0, 0, 0, 0.03 );

/**
 * Mixin for a pseudo-element with a background image.
 */
.mixin-background-square( @size ) {
	// Sizing properties
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	// In case display: block is overridden and display gets set to `flex`
	// because of inheritance T233521.
	min-width: @size;
	min-height: @size;

	// Background properties.
	background-repeat: no-repeat;
	// Using static value instead of `background-size: contain` because of T233521#5545513.
	background-size: @size @size;
	background-position: center;
}

/**
 * A standalone 20px square with screen-reader text. Contains a :before element
 * to house the icon as a background image. Total size is increased with padding via
 * `box-sizing: content-box`. This separates control over size of icon vs the size of
 * the touch-area.
 */
.mw-ui-icon {
	// reset font-size so the "em" value is relative to the more
	// predictable rem font size ...and no rems because we can't have nice things.
	font-size: initial;

	// sizing
	position: relative;
	display: inline-block;

	// this is important for increasing the size via padding. Overrides `.view-border-box *`.
	box-sizing: content-box !important;
	width: @icon-size-md;
	height: @icon-size-md;

	// Guarding against flex-box variability.
	min-width: @icon-size-md;
	min-height: @icon-size-md;
	flex-basis: @icon-size-md;

	// alignment
	vertical-align: middle;
	line-height: 0;

	// Overflow ellipsis.
	.text-overflow( @visible: false );

	// resetting styles for <button> elements
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	padding: 0;

	&:before {
		.mixin-background-square( @icon-size-md );
	}
}

/**
 * When aligning a series of similar icons (e.g. list items)
 * prefer using a `:first-child` or `:last-child` selector.
 * The flush-left/right classes are appropriate when that's unavailable.
 */
.mw-ui-icon-flush-top {
	margin-top: -@icon-padding-md;
}

.mw-ui-icon-flush-left {
	margin-left: -@icon-padding-md;
}

.mw-ui-icon-flush-right {
	margin-right: -@icon-padding-md;
}

.mw-ui-icon-element {
	border-radius: @border-radius-base;
	padding: @icon-padding-md;
	// Use semi-colon if multiple arguments are needed!
	// See https://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments
	.transition( background-color @transition-duration-base; );

	// Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
	color: transparent;

	&:focus, &:active, &:visited {
		color: transparent;
	}

	// Assume a mobile device - and avoid tap state remaining after click (T233046).
	&:active {
		background-color: @icon-background-color--selected;
	}
}

// When the user's device primary input is capable of hover, like a mouse,
// use hover (T233046). Only on active elements.
@media ( hover: hover ) {
	.mw-ui-icon-element:not( .disabled ):hover {
		background-color: @icon-background-color--selected;
	}
}

.mw-ui-icon-small {
	width: @icon-size-sm;
	height: @icon-size-sm;
	min-width: @icon-size-sm;
	min-height: @icon-size-sm;
	flex-basis: @icon-size-sm;
	line-height: @icon-size-sm;

	&:before {
		.mixin-background-square( @icon-size-sm );
	}
}

.mw-ui-icon-small.mw-ui-icon-element {
	padding: @icon-padding-sm;
}

.mw-ui-icon-small.mw-ui-icon-flush-left {
	margin-left: -@icon-padding-sm;
}

.mw-ui-icon-small.mw-ui-icon-flush-right {
	margin-right: -@icon-padding-sm;
}

.mw-ui-icon-small.mw-ui-icon-before:before {
	min-width: @icon-size-sm;
	min-height: @icon-size-sm;
	margin-right: @icon-padding-sm;
}

.mw-ui-icon-before {
	width: auto;
	max-width: 100%;

	&:before {
		// sizing
		display: inline-block;
		font-size: initial;
		width: auto;
		min-width: @icon-size-md;
		min-height: @icon-size-md;

		// alignment. Margin is added to separate accompanying text.
		margin-right: @margin-icon-md-labelled;
		vertical-align: middle;
	}

	span {
		vertical-align: middle;
	}
}

@media all and ( min-width: @width-breakpoint-desktop ) {
	.mw-ui-icon-with-label-desktop {
		color: @icon-color;
		width: auto;
		line-height: inherit;
		flex-basis: auto;

		&:hover, &:focus, &:active, &:visited {
			color: @icon-color;
			text-decoration: none;
		}

		&:before {
			width: auto;
			display: inline-block;
			// Don't use `@icon-padding-md` as we are adjacent to text.
			margin-right: @margin-icon-md-labelled;
			// Seems to be more visually centered than `middle`.
			vertical-align: text-bottom;
		}
	}
}