MAGETWO-39422: [UI] Assistance with applying new style for Credit card validation

Author: zanilee

app/code/Magento/Payment/view/base/web/images/cc/ae.png

@@ -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">

app/code/Magento/Payment/view/base/web/images/cc/di.png

@@ -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
+            }
+        }
     }
 }