elemental/less/mixins/pills.less

React UI Framework

// 
// Tags
// ==============================

.pill-variant(@color, @background) {
	background-color: @background;
	color: @color;

	// states
	&:hover,
	&:focus {
		background-color: darken(@background, 4%);
		outline: none;
	}
	&:active {
		background-color: darken(@background, 8%);
	}
}

.pill-inverted-variant(@color, @background) {
	background-color: @background;
	color: @color;

	// states
	&:hover,
	&:focus {
		background-color: lighten(@background, 5%);
		outline: none;
	}
	&:active {
		background-color: darken(@background, 5%);
	}
}