fancy-symbolset.scss

// This is a peek behind the curtain at @zaarly's epic-fantasy-heavy-metal-themed internal styleguide, better known as Hammer.
//
// Altering this a bit for my own purposes
//
// With this, you can add the .fancy class to a symbolset span inside of a heading tag to add a nice circular background. 
// Some adjustments to the positioning of a particular glyph may be necessary. 
// Each :before is set to postion: relative, so fine-tuning a .fancy glyph is simple, and won't affect the position of the circle.
//
// Example markup (in HAML):
// %h1
//   %span.ss-check.fancy
//   Cool Guy Settings™ saved!
// %h2
//   %span.ss-creditcard.fancy.warning
//   We have no idea how to pay you!
//
// See screenshot in comments for an example of how it looks.

// The mixin! The default colors are a pleasant green shade.
@mixin fancy-symbol($bg_top: rgb(149,238,162), $bg_bottom: rgb(47,202,52), $border: rgb(83,169,86), $text_shadow: rgb(103,185,115)) {
  display: inline-block;
  margin-right: 5px;
  padding: 8px;
  line-height: 1;
  border: 1px solid $border;
  color: #fff;
  text-shadow: 0 0 2px $text_shadow, 0 0 2px $text_shadow, 0 0 1px $text_shadow, 0 0 1px $text_shadow, 0 0 1px $text_shadow;
  border-radius(51%); // Droping Firefox 3.6 Support & Safari 5.0
  @include background(linear-gradient(top, $bg_top, $bg_bottom), $bg_top);
}

// Fancy versions with the circle behind it
[class^="ss-"].fancy,
[class*=" ss-"].fancy,
.ss-icon.fancy {
  @include fancy-symbol();

  &:before {
    position: relative;
    top: 1px;
    margin: 1px;
  }

  // colors
  &.error {
    @include fancy-symbol(rgb(247,129,129), rgb(227,41,41), rgb(186,36,33), rgb(181,62,62));
  }

  &.warning {
    @include fancy-symbol(rgb(247,237,129), rgb(227,197,39), rgb(225,198,41), rgb(221,196,57));
  }
}

// A few tweaks for larger font-size headings
// Our h1 and h2 font-sizes are 48px and 36px, respectively.
h1, h2 {
  [class^="ss-"].fancy,
  [class*=" ss-"].fancy,
  .ss-icon.fancy {
    padding: 8px 9px;

    &:before {
      top: 3px;
    }

    &.error, &.warning { padding: 8px 9px; }
  }
}

// Just don't even show these in less than IE 9.
.no-borderradius {
  [class^="ss-"].fancy,
  [class*=" ss-"].fancy,
  .ss-icon.fancy {
    display: none;
  }
}