Skip to content

Instantly share code, notes, and snippets.

@betaorbust
Last active August 29, 2015 14:07
Show Gist options
  • Save betaorbust/4cfad511577ab793035b to your computer and use it in GitHub Desktop.
Save betaorbust/4cfad511577ab793035b to your computer and use it in GitHub Desktop.
Three level bar icon using one HTML element.
// 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment