Skip to content

Instantly share code, notes, and snippets.

@zachharkey
Created March 19, 2014 19:53
Show Gist options
  • Save zachharkey/9649876 to your computer and use it in GitHub Desktop.
Save zachharkey/9649876 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="payment-methods">
<span class="pay pay--2co"></span>
<span class="pay pay--ach"></span>
<span class="pay pay--american-express"></span>
<span class="pay pay--cirrus"></span>
<span class="pay pay--delta"></span>
<span class="pay pay--diners-club"></span>
<span class="pay pay--direct-debit"></span>
<span class="pay pay--discover"></span>
<span class="pay pay--jcb"></span>
<span class="pay pay--maestro"></span>
<span class="pay pay--mastercard"></span>
<span class="pay pay--moneybookers"></span>
<span class="pay pay--paypal"></span>
<span class="pay pay--solo"></span>
<span class="pay pay--switch"></span>
<span class="pay pay--visa"></span>
<span class="pay pay--visa-electron"></span>
<span class="pay pay--western-union"></span>
</div>
// ----
// libsass (v0.7.0)
// ----
payment-methods {
text-align: center;
}
.pay {
text-align: center;
display: inline-block;
width: 64px; height: 64px;
margin: .5em;
display: inline-block;
background-color: rgba(0,255,255,.1); outline: 1px solid rgba(0,255,255,.3);
}
.pay--2co { background-image: url('../images/lovicons-payment-card-glyphs/64x64/2co-64.png'); }
.pay--ach { background-image: url('../images/lovicons-payment-card-glyphs/64x64/ach-64.png'); }
.pay--american-express { background-image: url('../images/lovicons-payment-card-glyphs/64x64/american-express-64.png'); }
.pay--cirrus { background-image: url('../images/lovicons-payment-card-glyphs/64x64/cirrus-64.png'); }
.pay--delta { background-image: url('../images/lovicons-payment-card-glyphs/64x64/delta-64.png'); }
.pay--diners-club { background-image: url('../images/lovicons-payment-card-glyphs/64x64/diners-club-64.png'); }
.pay--direct-debit { background-image: url('../images/lovicons-payment-card-glyphs/64x64/direct-debit-64.png'); }
.pay--discover { background-image: url('../images/lovicons-payment-card-glyphs/64x64/discover-64.png'); }
.pay--jcb { background-image: url('../images/lovicons-payment-card-glyphs/64x64/jcb-64.png'); }
.pay--maestro { background-image: url('../images/lovicons-payment-card-glyphs/64x64/maestro-64.png'); }
.pay--mastercard { background-image: url('../images/lovicons-payment-card-glyphs/64x64/mastercard-64.png'); }
.pay--moneybookers { background-image: url('../images/lovicons-payment-card-glyphs/64x64/moneybookers-64.png'); }
.pay--paypal { background-image: url('../images/lovicons-payment-card-glyphs/64x64/paypal-64.png'); }
.pay--solo { background-image: url('../images/lovicons-payment-card-glyphs/64x64/solo-64.png'); }
.pay--switch { background-image: url('../images/lovicons-payment-card-glyphs/64x64/switch-64.png'); }
.pay--visa { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-64.png'); }
.pay--visa-electron { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-electron-64.png'); }
.pay--western-union { background-image: url('../images/lovicons-payment-card-glyphs/64x64/western-union-64.png'); }
payment-methods {
text-align: center; }
.pay {
text-align: center;
display: inline-block;
width: 64px;
height: 64px;
margin: 0.5em;
display: inline-block;
background-color: rgba(0, 255, 255, 0.1);
outline: 1px solid rgba(0, 255, 255, 0.3); }
.pay--2co {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/2co-64.png'); }
.pay--ach {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/ach-64.png'); }
.pay--american-express {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/american-express-64.png'); }
.pay--cirrus {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/cirrus-64.png'); }
.pay--delta {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/delta-64.png'); }
.pay--diners-club {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/diners-club-64.png'); }
.pay--direct-debit {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/direct-debit-64.png'); }
.pay--discover {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/discover-64.png'); }
.pay--jcb {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/jcb-64.png'); }
.pay--maestro {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/maestro-64.png'); }
.pay--mastercard {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/mastercard-64.png'); }
.pay--moneybookers {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/moneybookers-64.png'); }
.pay--paypal {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/paypal-64.png'); }
.pay--solo {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/solo-64.png'); }
.pay--switch {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/switch-64.png'); }
.pay--visa {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-64.png'); }
.pay--visa-electron {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-electron-64.png'); }
.pay--western-union {
background-image: url('../images/lovicons-payment-card-glyphs/64x64/western-union-64.png'); }
<div class="payment-methods">
<span class="pay pay--2co"></span>
<span class="pay pay--ach"></span>
<span class="pay pay--american-express"></span>
<span class="pay pay--cirrus"></span>
<span class="pay pay--delta"></span>
<span class="pay pay--diners-club"></span>
<span class="pay pay--direct-debit"></span>
<span class="pay pay--discover"></span>
<span class="pay pay--jcb"></span>
<span class="pay pay--maestro"></span>
<span class="pay pay--mastercard"></span>
<span class="pay pay--moneybookers"></span>
<span class="pay pay--paypal"></span>
<span class="pay pay--solo"></span>
<span class="pay pay--switch"></span>
<span class="pay pay--visa"></span>
<span class="pay pay--visa-electron"></span>
<span class="pay pay--western-union"></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment