keyrune/sass/_rarities.scss

// _rarities.scs

/** Set Symbol Rarities ==========================
 * | Strangely enough, autoprefixer doesn't wanna prefix
 * | some of the things in here properly. Either way, I kept those
 * | hard-coded prefxed to ensure it to work!
 */
@each $scheme in $keyrune_palette {
  /* #{nth($scheme, 1)} */
  .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($scheme, 1)} {
    color: #{nth($scheme, 2)};

    &.#{$keyrune_prefix}-grad {
      // webkit outline/gradient
      /* Chrome, Safari4+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #{nth($scheme, 3)}), color-stop(50%, #{nth($scheme, 4)}), color-stop(100%, #{nth($scheme, 3)}));
      /* Chrome10+, Safari5.1+ */
      background: -webkit-linear-gradient(left, #{nth($scheme, 3)} 0%, #{nth($scheme, 4)} 50%, #{nth($scheme, 3)} 100%);
      -webkit-text-stroke: 0.03em #{nth($scheme, 5)};
      -webkit-text-fill-color: $keyrune_text_fill;
      -webkit-background-clip: $keyrune_background_clip;
      background-clip: $keyrune_background_clip;
    }
  }
}

/* Hard coding foil rarity for now because it's so much more complex */
.#{$keyrune_prefix}-foil {
    color: #a6dced;
    &.#{$keyrune_prefix}-grad {
        // webkit outline/gradient
        background: -webkit-linear-gradient(-45deg, #ea8d66 0%,#ea8d66 10%,#fdef8a 17%,#8bcc93 33%,#a6dced 50%,#6f75aa 67%,#e599c2 83%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg, #ea8d66 0%,#ea8d66 15%,#fdef8a 28%,#8bcc93 42%,#a6dced 55%,#6f75aa 68%,#e599c2 84%,#e599c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        -webkit-text-stroke: 0.03em #333;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: $keyrune_background_clip;
    }
}