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

diff --git a/css/civicrm.css b/css/civicrm.css
index 286a2a205d969eb31b675aa3e80b77d2cef72914..b64d79104683414fff9b91f55d0f6b573e739189 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -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) */

diff --git a/i/creditcard-icons.png b/i/creditcard-icons.png
index 00076366cfdb257d7afe2ff2f080c09db34e01a8..329106b4e73cf18e5a0b91f7923e88135f11de05 100644 (file)
Binary files a/i/creditcard-icons.png and b/i/creditcard-icons.png differ

diff --git a/i/mini_cvv2.gif b/i/mini_cvv2.gif
deleted file mode 100644 (file)
index c3d6a8d..0000000
Binary files a/i/mini_cvv2.gif and /dev/null differ

diff --git a/templates/CRM/Core/BillingBlock.tpl b/templates/CRM/Core/BillingBlock.tpl
index caccf38c69cb4fe121b06be3bdb8aa41859c1f15..b0d9aa2e3e60c1293387e742ddcfce79c3f413a8 100644 (file)
--- a/templates/CRM/Core/BillingBlock.tpl
+++ b/templates/CRM/Core/BillingBlock.tpl
@@ -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>