Fixes padding for payment method focus state (#1370)

* fixes padding for payment method focus state * adds more semantic css
Adyen · Nov 24, 2021 · f8df759 · f8df759
1 parent 3db67ba
commit f8df759
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.scss b/packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.scss
@@ -38,6 +38,10 @@
     position: relative;
     transition: background .1s ease-out;
     width: 100%;
+
+    .adyen-checkout__payment-method__header__title {
+        padding: $spacing-none;
+    }
 }
 
 

diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.scss
@@ -55,15 +55,16 @@
     justify-content: space-between;
     font-weight: 400;
     font-size: $font-size-medium;
-    padding: 16px;
-    padding-left: 48px;
+    $payment-button-padding: $spacing-xsmall;
+    padding: $spacing-medium - $payment-button-padding;
+    padding-left: $spacing-xxlarge - $payment-button-padding;
     position: relative;
     transition: background 0.1s ease-out;
     width: 100%;
 
     [dir='rtl'] & {
-        padding: 16px;
-        padding-right: 48px;
+        padding: $spacing-medium - $payment-button-padding;
+        padding-right: $spacing-xxlarge - $payment-button-padding;
     }
 
     .adyen-checkout__payment-method--standalone & {
@@ -81,7 +82,7 @@
     border: none;
     background: none;
     cursor: pointer;
-    padding: 0;
+    padding: $spacing-xsmall;
     color: $color-black;
     font-size: 1em;
     font-weight: 400;