Current File : /home/jvzmxxx/wiki/resources/src/mediawiki.ui/components/anchors.less

@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";

// Helpers
.mixin-mw-ui-anchor-styles( @mainColor ) {
	color: @mainColor;

	&:hover {
		color: lighten( @mainColor, @colorLightenPercentage );
	}

	&:focus,
	&:active {
		color: darken( @mainColor, @colorDarkenPercentage );
		outline: 0;
	}

	// Quiet mode is gray at first
	&.mw-ui-quiet {
		.mixin-mw-ui-anchor-styles-quiet( @mainColor );
	}
}

/*
Anchors

The anchor base type can be applied to `a` elements when a basic context styling needs to be given to a link, without
having to assign it as a button type. `.mw-ui-anchor` only changes the text color, and should not be used in combination
with other base classes, such as `.mw-ui-button`.


Markup:
<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>

.mw-ui-quiet - Quiet until interaction.

Styleguide 6.2.
*/

// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
.mw-ui-anchor {
	&.mw-ui-progressive {
		.mixin-mw-ui-anchor-styles( @colorProgressive );
	}

	&.mw-ui-destructive {
		.mixin-mw-ui-anchor-styles( @colorDestructive );
	}

	//`.mw-ui-constructive` is deprecated; consolidated with `progressive`, see T110555
	&.mw-ui-constructive {
		.mixin-mw-ui-anchor-styles( @colorConstructive );
	}
}

/*
Quiet anchors

Use quiet anchors when they are less important and alongside other progressive/destructive/progressive
anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.

Markup:
<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
<a href="#" class="mw-ui-anchor mw-ui-constructive mw-ui-quiet">Constructive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>

Styleguide 6.2.1.
*/
.mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
	color: @colorTextLight;
	text-decoration: none;

	&:hover {
		color: @mainColor;
	}
	&:focus,
	&:active {
		color: darken( @mainColor, @colorDarkenPercentage );
	}
}