diff --git a/app/code/Magento/Payment/view/base/web/images/cc/ae.png b/app/code/Magento/Payment/view/base/web/images/cc/ae.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/ae.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/di.png b/app/code/Magento/Payment/view/base/web/images/cc/di.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/di.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/dn.png b/app/code/Magento/Payment/view/base/web/images/cc/dn.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/dn.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/jc.png b/app/code/Magento/Payment/view/base/web/images/cc/jc.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/jc.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/mc.png b/app/code/Magento/Payment/view/base/web/images/cc/mc.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/mc.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/sm.png b/app/code/Magento/Payment/view/base/web/images/cc/sm.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/sm.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/un.png b/app/code/Magento/Payment/view/base/web/images/cc/un.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/un.png differ diff --git a/app/code/Magento/Payment/view/base/web/images/cc/vi.png b/app/code/Magento/Payment/view/base/web/images/cc/vi.png new file mode 100644 index 0000000000000000000000000000000000000000..667455e804c2c2b163b9909b5ffc4375662ca6be Binary files /dev/null and b/app/code/Magento/Payment/view/base/web/images/cc/vi.png differ diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html index 67336808c1e1d8fe79c4a6e339b0201198aee9fe..49d1d57f958bdd938284aaeaf11abf1ca926fb3d 100644 --- a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html +++ b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html @@ -5,12 +5,6 @@ */ --> -<style> - .credit-card-types div.active{ - font-weight: bold; - } -</style> - <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}"> <!-- ko if: (isShowLegend())--> <legend class="legend"> @@ -22,18 +16,24 @@ <span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span> </label> <div class="control"> - <div class="credit-card-types"> + <ul class="credit-card-types"> <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} --> - <div data-bind="css: {active: $parent.selectedCardType() == item.value} "> - <!-- ko text: item.type --><!-- /ko --> - </div> + <li class="item" data-bind="css: {_active: $parent.selectedCardType() == item.value} "> + <!-- if picture --> + <img data-bind="attr: { + 'src': 'Magento_Payment::images/cc/'+ item.value + '.png', + 'alt': item.type + }"> + <!-- if NOpicture --> + <span><!-- ko text: item.type --><!-- /ko --></span> + </li> <!--/ko--> - <input type="hidden" - name="payment[cc_number]" - class="input-text" - value="" - data-bind="attr: {id: getCode() + '_cc_type'}, value: creditCardType"> - </div> + </ul> + <input type="hidden" + name="payment[cc_number]" + class="input-text" + value="" + data-bind="attr: {id: getCode() + '_cc_type'}, value: creditCardType"> </div> </div> <div class="field number required"> diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payment-options.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payment-options.less index 4c74ef027fbacf71fce2d5b728bef54601b2c867..67db5bfdedb6037d6e45a04f10f89cb91222617a 100644 --- a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payment-options.less +++ b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payment-options.less @@ -72,6 +72,30 @@ .payment-option-inner { margin: 0 0 @indent__base; } + + .credit-card-types { + padding: 0; + .item { + display: inline-block; + list-style: none; + margin: 0 @indent__xs 0 0; + &._active { + font-weight: @font-weight__bold; + img { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); + filter: none; + } + } + } + img { + -webkit-filter: grayscale(100%); // For Webkit browsers + -webkit-transition: all .6s ease; // Fade to color for Chrome and Safari + filter: grayscale(100%); + filter: gray; // For IE 6 - 9 + filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // Firefox 10+, Firefox on Android + } + } } }