wriver4
11/23/2012 - 4:17 PM
A CodePen by Eric Rasch. Sizable CSS-only Icons Using LESS - Working on a project where we're using a font for icons, but wanted the flexibi
A CodePen by Eric Rasch. Sizable CSS-only Icons Using LESS - Working on a project where we're using a font for icons, but wanted the flexibility to specify the size of the icons and everything else changes based on that single variable. Enter LESS.
<h1>Sizable CSS-Only Icons using LESS</h1>
<section>
<h2>Example 1 <small>unstyled</small></h2>
<p class="status declined"><span class="ss-icon">␡</span> Not accepted</p>
<p class="status success"><span class="ss-icon">✓</span> Confirmed</p>
<p class="status processing"><span class="ss-icon">...</span> Processing</p>
</section>
<section id="example-2">
<h2>Example 2 <small>demo size 22px</small></h2>
<p class="status declined"><span class="ss-icon">␡</span> Not accepted</p>
<p class="status success"><span class="ss-icon">✓</span> Confirmed</p>
<p class="status processing"><span class="ss-icon">...</span> Processing</p>
</section>
<section id="example-3">
<h2>Example 3 <small>demo size 53px</small></h2>
<p class="status declined"><span class="ss-icon">␡</span> Not accepted</p>
<p class="status success"><span class="ss-icon">✓</span> Confirmed</p>
<p class="status processing"><span class="ss-icon">...</span> Processing</p>
</section>
<section id="example-4">
<h2>Example 4 <small>demo size 100px</small></h2>
<p class="status declined"><span class="ss-icon">␡</span> Not accepted</p>
<p class="status success"><span class="ss-icon">✓</span> Confirmed</p>
<p class="status processing"><span class="ss-icon">...</span> Processing</p>
</section>
<section id="example-5">
<h2>Example 5 <small>demo size 2em</small></h2>
<p class="status declined"><span class="ss-icon">␡</span> Not accepted</p>
<p class="status success"><span class="ss-icon">✓</span> Confirmed</p>
<p class="status processing"><span class="ss-icon">...</span> Processing</p>
</section>
#example-2 {
p {
&.status {
.badge-icons(20px); /* Just specify a unit-based value here (percent-based doesn't work). It will call up the LESS mixin and do the rest. */
}
}
}
#example-3 {
p {
&.status {
.badge-icons(53px);
}
}
}
#example-4 {
p {
&.status {
.badge-icons(100px);
}
}
}
#example-5 {
.status { /* It can also be written like this. */
.badge-icons(2em);
}
}
/* Nice little LESS mixin to create the icons based on the unit-value you set above. */
/* I wanted roughly 12px for example #2, so I used 20÷12=1.666 (target ÷ context = result; as seen in responsive designs). I used that same formula to calculate the rest of the equations when dealing with the @height variable */
.badge-icons(@height: 24px) {
font-size: @height / 1.666666667;
font-weight: 700;
margin-bottom: @height / 2;
position: relative;
text-align: center;
text-transform: uppercase;
&:before {
content: "";
border-top: 1px solid fade(@black, 10%);
display: block;
margin-top: @height / 1.538461538;
position: absolute;
.size(100%, 100%);
}
span {
border: @height / 8 solid @white;
.border-radius(50%);
.box-shadow(0px 1px 1px fade(@black, 15%);
.center-block;
color: @white;
font-size: (@height / 1.818181818); /* roughly 11px on example #2 */
line-height: @height / .869565217;
margin-bottom: @height / 1.5;
position: relative;
.square(@height);
}
&.processing {
color: @color-progress;
span {
background: @color-progress;
line-height: @height / 1.3; /* Pulled the line-height up a bit on this to 'faux-center' the fake elipse. */
}
}
&.success {
color: @color-success;
span {
background: @color-success;
}
}
&.declined {
color: @color-declined;
span {
background: @color-declined;
}
}
}
/* The main text font size and icon margin looks awful if you don't adjust it to different defined @heights, so the LESS guards work well here. Set as many as you need to perfect your design. */
.badge-icons(@height) when (@height > 24px) {
font-size: @height / 3.5;
span {
margin-bottom: @height / 4;
}
}
.badge-icons(@height) when (@height > 75px) {
font-size: @height / 5;
span {
margin-bottom: @height / 7;
}
}
/* STOP HERE. The rest of this CSS is for style purposes only and is not needed for the demo to function.
(but be sure to substitue out the LESS variables/mixins I used above)
---------------------------------------------------------------------------------------------------- */
/* =VARIABLES (LESS @variables do not get compiled into the final CSS file)
---------------------------------------------------------------------------------------------------- */
@base-background: #fffaef; /*cream*/
@base-text: #4f4351; /*purple/grey*/
@white: #fff;
@black: #000;
@color-subtitles: #9a8864; /*mud*/
@color-highlight: #e9e59b; /*lime*/
@color-dark: #080c3c; /*midnight*/
@color-button: #f2f2f0; /*grey*/
@color-button-text: darken(@color-button, 50%); /*grey*/
@color-button-border: darken(@color-button, 10%); /*grey*/
@color-button-on: #ffa640; /*orange*/
@color-success: #2ebe47; /*green*/
@color-progress: #199ed8; /*blue*/
@color-warning: #ff9e10; /*orange*/
@color-alert-text: @base-text;
@color-error: #c80000; /*red*/
@color-declined: #939598; /*grey: fade(@base-text, 50%)*/
/* =MIXINS (mostly from Twitter Bootstrap's mixins.less)
---------------------------------------------------------------------------------------------------- */
// Border Radius
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
// Sizing shortcuts
// -------------------------
.size(@height, @width) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size, @size);
}
// Center-align a block level element
// ----------------------------------
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
/* =BASE STYLES
---------------------------------------------------------------------------------------------------- */
body {
background: @base-background;
color: @base-text;
font-family: Arial, Helvetica, sans-serif;
margin: 5em 2em;
}
h1, h2 {
color: @base-text;
letter-spacing: -.05em;
text-align: center;
text-shadow: 0 1px 2px fade(lighten(@base-background, 50%), 50%);
}
h1 {
background: fade(@base-text, 10%);
border-bottom: 1px solid fade(@base-background, 90%);
outline: 1px solid fade(@base-text, 20%);
margin: 0 auto;
padding: .5em;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
h3, h4, h5 { color: @base-text; }
small, hr {
display: block;
margin: 1em 0;
.opacity(50);
}
section {
background: fade(@color-highlight, 20%);
border: 1px solid fade(@color-highlight, 50%);
.border-radius(4px);
.box-shadow(0 1px 2px fade(@color-subtitles, 50%));
display: block;
float: left;
margin: 1em;
min-height: 300px;
overflow: auto;
padding: 1em;
position: relative;
width: 20%;
h2 {
line-height: 1;
margin: 0 0 1em 0;
min-height: 2.5em;
padding: 0;
small {
font-size: 70%;
line-height: 1;
margin: 0;
padding: 0;
}
}
}