Commit 4f7f49d5 authored by colemanw's avatar colemanw

Spiff up credit card icons CRM-12515

----------------------------------------
* CRM-12515: Visual selection of "credit card type" on contribute/event forms
  http://issues.civicrm.org/jira/browse/CRM-12515
parent a4c5e9a3
......@@ -3960,7 +3960,7 @@ span.crm-status-icon {
text-align: center;
}
/* Styles for credit card payment logos (FIXME: replace with sprite?) */
/* Styles for credit card payment logos */
#crm-container .credit_card_type-section .crm-credit_card_type-icons a {
display: block;
float: left;
......@@ -3968,31 +3968,41 @@ span.crm-status-icon {
height: 30px;
background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
text-indent: -20000px;
margin-right: 10px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
border-radius: 3px;
border: 1px solid #FFFFFF;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
background-position: 0 0;
width: 75px;
background-position: -50px 0;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
background-position: -75px 0;
background-position: -100px 0;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
background-position: -125px 0;
background-position: -150px 0;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
background-position: -175px 0;
background-position: -200px 0;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
background-position: -225px 0;
background-position: -250px 0;
}
#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
background-position: -275px 0;
background-position: -300px 0;
}
#crm-container .cvv2-icon {
display: inline-block;
width: 50px;
height: 30px;
background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
}
/* Avoid weird border around the images (some themes will add a border around images) */
......
i/creditcard-icons.png

11 KB | W: | H:

i/creditcard-icons.png

10.2 KB | W: | H:

i/creditcard-icons.png
i/creditcard-icons.png
i/creditcard-icons.png
i/creditcard-icons.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -96,7 +96,7 @@
<div class="label">{$form.cvv2.label} {$reqMark}</div>
<div class="content">
{$form.cvv2.html}
<img src="{$config->resourceBase}i/mini_cvv2.gif" alt="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" style="vertical-align: text-bottom;" />
<span class="cvv2-icon" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}"> </span>
</div>
<div class="clear"></div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment