Merge pull request #28 from datatrans/add-outline-none

add "outline: none" to fix safari (macos) styling

Author: n3ssi3

pciproxy-examples/account.html

@@ -87,8 +87,8 @@
 
     secureFields.on('ready', function () {
       // Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
-      secureFields.setStyle('accountNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
-      secureFields.setStyle('branchCode', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
+      secureFields.setStyle('accountNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
+      secureFields.setStyle('branchCode', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
       secureFields.focus('accountNumber');
     });
 

pciproxy-examples/floating-label.html

@@ -84,8 +84,8 @@
 
     secureFields.on('ready', function () {
       // Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
-      secureFields.setStyle('cardNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
-      secureFields.setStyle('cvv','font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
+      secureFields.setStyle('cardNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
+      secureFields.setStyle('cvv','font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
       secureFields.focus('cardNumber');
     });
 

pciproxy-examples/iban.html

@@ -64,7 +64,7 @@
 
     secureFields.on('ready', function () {
       // Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
-      secureFields.setStyle('iban', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
+      secureFields.setStyle('iban', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
       secureFields.focus('iban');
     });
 

pciproxy-examples/index.html

@@ -84,8 +84,8 @@
 
     secureFields.on('ready', function () {
       // Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
-      secureFields.setStyle('cardNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
-      secureFields.setStyle('cvv','font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0');
+      secureFields.setStyle('cardNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
+      secureFields.setStyle('cvv','font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
       secureFields.focus('cardNumber');
     });
 

react-example-initTokenize/src/SecureFields.js

@@ -10,7 +10,7 @@ const getUrl = (production) => production
   ? 'https://pay.datatrans.com/upp/payment/js/secure-fields-2.0.0.min.js'
   : 'https://pay.sandbox.datatrans.com/upp/payment/js/secure-fields-2.0.0.min.js'
 
-const initalInputStyle = 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0'
+const initalInputStyle = 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none'
 const initalCssClass = {
   'secure-field': true,
   'secure-field__input ': true,