refactor: dropin payment list gap 32px

Adyen · Feb 2, 2024 · 7a5e426 · 7a5e426
1 parent 3bf568f
commit 7a5e426
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.scss b/packages/lib/src/components/Dropin/components/DropinComponent.scss
@@ -1,7 +1,12 @@
 @use '../../../style/index';
 
+.adyen-checkout__dropin {
+    display: flex;
+    flex-direction: column;
+    gap: var(--adyen-checkout-dropin-payment-list-gap);
+}
+
 .adyen-checkout-payment-methods-container {
-    margin: var(--adyen-checkout-spacer-070) 0;
     display: flex;
     flex-direction: column;
     gap: var(--adyen-checkout-spacer-070);
@@ -31,6 +36,7 @@
 .adyen-checkout__instant-payment-methods-list {
     list-style: none;
     padding: 0;
+    margin: 0;
     display: flex;
     gap: var(--adyen-checkout-spacer-070);
 

diff --git a/packages/lib/src/style/design-tokens.scss b/packages/lib/src/style/design-tokens.scss
@@ -78,6 +78,7 @@
     --adyen-checkout-color-background-secondary: var(--adyen-checkout-color-grey-100);
 
     /* Drop-in */
+    --adyen-checkout-dropin-payment-list-gap: var(--adyen-checkout-spacer-100);
     --adyen-checkout-dropin-payment-item-gap: var(--adyen-checkout-spacer-070);
     --adyen-checkout-dropin-payment-item-border-color: var(--adyen-checkout-color-separator-primary);
     --adyen-checkout-dropin-payment-item-border-radius: var(--adyen-checkout-border-radius-m);