iconfonts/stylesheets/paymentfont.styl

Fine-tuned icon fonts integration for Sass, Less and Stylus.

// PaymentFont v1.0.0
// http://paymentfont.io/
//
// Stylus integration via https://github.com/rstacruz/iconfonts.
// Usage:
//
//    pf-font();
//    .button:before {
//      pf-icon("arrow");
//      pf-icon("arrow", 14px, #333);
//    }
//
// Output:
//
//    @font-face {
//      font-family: "PaymentFont"; ...
//    }
//    .button:before {
//      font-family: "PaymentFont";
//      content: '\f0123';
//    }
//
// Icon files:
//
//     https://cdn.rawgit.com/vendocrat/PaymentFont/v1.0.0/fonts/paymentfont-webfont.eot
//     https://cdn.rawgit.com/vendocrat/PaymentFont/v1.0.0/fonts/paymentfont-webfont.ttf
//     https://cdn.rawgit.com/vendocrat/PaymentFont/v1.0.0/fonts/paymentfont-webfont.woff
//     https://cdn.rawgit.com/vendocrat/PaymentFont/v1.0.0/fonts/paymentfont-webfont.svg

pf = {
  path: "https://cdn.rawgit.com/vendocrat/PaymentFont/v1.0.0/fonts/"
  name: "PaymentFont"
  site: "http://paymentfont.io/"
  basename: "paymentfont-webfont"
  version: "1.0.0"
  svghash: "#paymentfont-webfont"
  nativesize: "14px"
}

pf-font()
  @font-face
    font-family: pf['name']
    src: url(pf['path'] + pf['basename'] + '.eot?v=' + pf['version'])
    src: url(pf['path'] + pf['basename'] + '.eot?#iefix&v=' + pf['version']) format("embedded-opentype"),
         url(pf['path'] + pf['basename'] + ".woff?v=" + pf['version']) format("woff"),
         url(pf['path'] + pf['basename'] + ".ttf?v=" + pf['version']) format("truetype"),
         url(pf['path'] + pf['basename'] + ".svg?v=" + pf['version'] + pf['svghash']) format("svg")
    font-weight: normal
    font-style: normal

//
// Uses a given icon.
//
//     .button:before
//       pf-icon("music")
//       pf-icon("music", 24px)        /* 24px size */
//
// You may specify a color.
//
//     .button:before
//       pf-icon("music", color: #333)
//
// You may also specify a `top` value to compensate for any mis-alignment.
// This nudges the icon by that many pixels from the top.
//
//     .button:before
//       pf-icon("music", top: 2px)

pf-icon(type, size = auto, color = auto, top = auto, left = auto, shadow = none)
  @extend $pf-icon
  content: pf-icons[type]

  unless size is "auto"
    font-size: size
  unless top is "auto"
    position: relative
    top: top
  unless left is "auto"
    position: relative
    left: left
  unless color is "auto"
    color: color
  unless shadow is "none"
    text-shadow: shadow

$pf-icon
  line-height: 1em
  font-family: pf['name']
  font-weight: normal
  font-style: normal
  display: inline-block
  text-decoration: none
  vertical-align: middle
  text-rendering: optimizeLegibility !important
  -webkit-font-smoothing: antialiased !important
  -moz-osx-font-smoothing: grayscale

pf-icons = {

  amazon: "\f000"
  american-express: "\f001"
  american-express-alt: "\f002"
  apple-pay: "\f04c"
  atm: "\f003"
  bancontact-mister-cash: "\f050"
  bank-transfer: "\f005"
  bankomat: "\f004"
  bitcoin: "\f006"
  bitcoin-sign: "\f007"
  braintree: "\f008"
  btc: "\f009"
  card: "\f00a"
  carta-si: "\f00b"
  cash: "\f00c"
  cash-on-delivery: "\f00d"
  cash-on-pickup: "\f053"
  cb: "\f00e"
  cirrus: "\f00f"
  cirrus-alt: "\f010"
  clickandbuy: "\f011"
  credit-card: "\f012"
  dankort: "\f04f"
  diners: "\f013"
  discover: "\f014"
  ec: "\f015"
  elo: "\f055"
  elo-alt: "\f056"
  eps: "\f016"
  eur: "\f017"
  facture: "\f018"
  fattura: "\f019"
  flattr: "\f01a"
  giropay: "\f01b"
  gittip: "\f01c"
  google-wallet: "\f01d"
  google-wallet-alt: "\f01e"
  gpb: "\f01f"
  gratipay: "\f01c"
  gratipay-sign: "\f05c"
  ideal: "\f020"
  ils: "\f021"
  inr: "\f022"
  interac: "\f04d"
  invoice: "\f023"
  invoice-sign: "\f024"
  invoice-sign-alt: "\f025"
  invoice-sign-alt-o: "\f026"
  invoice-sign-o: "\f027"
  jcb: "\f028"
  jpy: "\f029"
  krw: "\f02a"
  maestro: "\f02b"
  maestro-alt: "\f02c"
  mastercard: "\f02d"
  mastercard-alt: "\f02e"
  mastercard-securecode: "\f02f"
  mercado-pago: "\f058"
  mercado-pago-sign: "\f059"
  moip: "\f051"
  multibanco: "\f05b"
  ogone: "\f030"
  pagseguro: "\f052"
  paybox: "\f031"
  paylife: "\f032"
  paymill: "\f04e"
  paypal: "\f033"
  paypal-alt: "\f034"
  paysafecard: "\f035"
  payshop: "\f05a"
  payu: "\f057"
  postepay: "\f036"
  quick: "\f037"
  rechnung: "\f038"
  ripple: "\f039"
  rub: "\f03a"
  sage: "\f054"
  sepa: "\f04a"
  sepa-alt: "\f04b"
  six: "\f05d"
  skrill: "\f03b"
  sofort: "\f03c"
  square: "\f03d"
  stripe: "\f03e"
  truste: "\f03f"
  try: "\f040"
  unionpay: "\f041"
  usd: "\f042"
  verified-by-visa: "\f043"
  verisign: "\f044"
  visa: "\f045"
  visa-electron: "\f046"
  western-union: "\f047"
  western-union-alt: "\f048"
  wirecard: "\f049"
}