From 3c8fa053b865763457a7a5ed182d56f507070afc Mon Sep 17 00:00:00 2001
From: Olga Matviienko <omatviienko@ebay.com>
Date: Tue, 30 Jun 2015 15:07:38 +0300
Subject: [PATCH] MAGETWO-39422: [UI] Assistance with applying new style for
Credit card validation
---
.../Payment/view/base/web/images/cc/ae.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/di.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/dn.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/jc.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/mc.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/sm.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/un.png | Bin 0 -> 1663 bytes
.../Payment/view/base/web/images/cc/vi.png | Bin 0 -> 1663 bytes
.../web/template/payment/cc-form.html | 32 +++++++++---------
.../module/checkout/_payment-options.less | 24 +++++++++++++
10 files changed, 40 insertions(+), 16 deletions(-)
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/ae.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/di.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/dn.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/jc.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/mc.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/sm.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/un.png
create mode 100644 app/code/Magento/Payment/view/base/web/images/cc/vi.png
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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
GIT binary patch
literal 1663
zcmaJ?X;2eq7|zIeR%#U~hZdLM*_vz)V#t;Nfe=k42q8$Y9u3(gtRdOByO2P2=m=`7
z6qQ=Fb`+sgQOYIYf#8L0wJM;9BUsPk1xi6MTnR}x2-qK`JM-=Pz27{~^B&*3v)@F7
zFLj>cIfX`}IZKy`<&<So%WIMo^@cyXca$<7WT=vi!s1Dz3P)%n7>h#ysZOOq<cJDR
z+3*MAPop^js6t69WnqvS(=k;J4AZ1DP;45_KhR`QskI0R#333~FQj)=ou>mRETqTq
zWGtB>1W7=brQ%3bYPdq3s#ObMdSC$HZ-OWR9YU%AlP*zDKqeu5NEf2^j$@Dx3_(b(
zkp4C)r7Qvn!EglNF<A^XYY7Wj!e+9$zI;A^F~DK5Ss;r8vN;SkAL4Q#77G}D=u|Wu
zj)&x8$#5*n6Vek%(g1;=(P(5Exl9b#fNX(4;LzZ37!-m*r07YNiJ>QaMij&dp~g`I
ziDG)dp{R<(l1L$)%JgjsI>V@}o)~Tu)iBVcGJtF*%Tdw@P$v6-s7^PECP+E*F5mwY
zCKM?K1e7BLmV~RRi;MShgfc)OIHDpkT!CSUBVCM0z(|Zpzzjf06c30&^)O~6hR`w@
zB-In7O0PzwVj-R4Gf@<V1QMPfm&X;bC9GgJJCql^L=Y;F2qYqrZ?H(h=Z$d1m^w*^
z=*bZ-{EjOclj|4+oq>uhMsPG4fh9Pm1BMEQ(6MvjkEu7zg~!gtZ%i&oB?CIH^<URK
zazxFJV>>#ulruW^h@P5toEmCD8v26zATC6NDMGUjo!yszZNs+ek7b8z8(S<Ti}TAH
zUUzl3zUsc$(q^}I^;9a`J9}PU$!fU!bSh_0m$~osr9b00o!+wV(vJo8Eic+7NWq%q
z@}J7;U$wXQ^jZ4{`p12;+tTy0_essbrF9RVwf9x6@CZC`;o5!Lyq$Kt*>1O%o^ATQ
z{_(Ed%l#JXpv~4tEt@5$@TPTeu&1vtQdg2wQa9M&wL)7+^V)9t+0|~hQwSSn?6$!{
z8|Cn0k6hg3+<Yunl$$G~(Z(&3ibV?3-HJV*8}nE*B`&2w@$PweclIjhNb!!)-?lE_
zZ?mWICP#d_=HSEumSuL!<ivn-k|BalCSE(oU1<h6vD@5sRT|>2D^9uh9&5=fn7Dar
z6Dw4xy{+By@Z84RX^|l=O<pxl$Io`W?3^{=uDsE|;>=UVSCbh<ngUt$sf+?e+TkA_
z$lF}q@`|Ip{oGa;&G2sizN5<45ZQL}@{YWt*Oz;Rx%nqK>GH=*TQg)X;d`Tb*_Aip
z1#`f*s<oXE-1zLvnz-*cPLaW_GX4%<c>k{pqq7={!okndBkb;_)u%sLUlrD?D}C-?
zlN$0@L3E?4FsixEpWb+2dbOMPdl{02dnP_Y>+W&WFRxtmgs(n$h773jUEfquMn1!r
zE|}YEL^6-1?X{G&e%-*$)lPSLH7N@Z+x)c5yVzQR)^=z*Zf%jV=QE#sYTs{`&-A=_
z1@OB=X2%o}8FN~z3NI@8{YuR$*9qm)aPqu2Cq4U-HZ^v9rh9d!yNCDHxqe&uvtw;<
zj%cn<2RZk9O(~0Aebn;q86L0mlsOeQlKP(b?hec+wohCA;Q7Hr0m;@TeaX(46KhW~
z?zD&3-FGz?zcHic&H+|NzQ#n;VrD3_mY^s3DbnPSXYtPHR8E9_@Z_=&Y4d)`$!Q|r
z+_EH>r&y5r9zpsF%;Q_Q*H33Arr|yM2^%K`jhpb;Q=U^_RJj@oi|SdBcp|g*?{&AW
bJ{M?Zvks-r4XQux_$5d~!^OqHUu^ydtm(GT
literal 0
HcmV?d00001
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 67336808c1e..49d1d57f958 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 4c74ef027fb..67db5bfdedb 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
+ }
+ }
}
}
--
GitLab