Three level bar icon using one HTML element.

three_level_bar_icon.less

// Three-Level Bar Icon
// ====================
// Makes a three-bar icon for showing difficulty, signal, etc. from a single HTML element.
//
//        #
//     #  #
//  #  #  #
//  
// Actual Image: ![Three-level bar icon](goo.gl/RnCPUQ)
//
// Examples:
// <span class="icon-level icon-level-1">Level 1</span><br>
// <span class="icon-level icon-level-3">Level 3</span>
// Note: While not strictly needed, the text content ("Level 1", etc.) are hidden
// when displayed on the page; you should still include them so that users/bots
// without CSS enabled will still get the context of your icon.
.icon-level{
	// VARIABLES
	// ---------
	// You should move these to a variables.less.
	@icon-level-width: 10px;           // How wide each bar is.
	@icon-level-tallest: 16px;         // How tall the third, bar is.
	@icon-level-shortest: 10px;        // How tall the first bar is.
	@icon-level-padding: 2px;          // How much room there is between bars.
	@icon-level-color-active: #307699; // The color for when a level is active.
	@icon-level-color-inactive: average(average(@icon-level-color-active, white), white);


	// Calculated
	// ----------
	@icon-total-width: @icon-level-width * 3 + @icon-level-padding * 2;

	// Styles
	// ------
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: @icon-level-tallest;
	width: @icon-total-width;
	overflow: hidden;
	text-indent: @icon-total-width;
	border-right: solid @icon-level-width @icon-level-color-inactive;
	&:before, &:after{
		display: block;
		width: @icon-level-width;
		position: absolute;
		bottom: 0;
		content:"";
		background-color: @icon-level-color-inactive;
	}
	&:before{
		height: round((@icon-level-tallest + @icon-level-shortest) / 2);
		right: @icon-level-padding;
	}
	&:after{
		height: @icon-level-shortest;
		right: @icon-level-width + 2 * @icon-level-padding;
	}
	&.icon-level-3{
		border-color: @icon-level-color-active;
	}
	&.icon-level-2, &.icon-level-3{
		&:before, &:after{
			background-color: @icon-level-color-active;
		}
	}
	&.icon-level-1{
		&:after{
			background-color: @icon-level-color-active;
		}
	}
}