style: normalize CSS units to use em instead of px

jimmyn · jimmyn · commit 3fd55a165b53 · 2025-10-02T20:17:12.000+02:00
diff --git a/assets/css/monei-blocks-checkout.css b/assets/css/monei-blocks-checkout.css
@@ -1,11 +1,11 @@
 /* Card Input Container */
 .monei-card-input {
-    padding: 12px;
+    padding: 0.75em;
     transition: border-color 0.2s ease;
-    margin-bottom: 12px;
+    margin-bottom: 0.75em;
     background-color: #fff;
-    border: 1px solid hsla(0, 0%, 7%, .8);
-    border-radius: 4px;
+    border: 0.0625em solid hsla(0, 0%, 7%, .8);
+    border-radius: 0.25em;
     box-sizing: border-box;
     color: #2b2d2f;
     font-family: inherit;
@@ -20,7 +20,7 @@
 
 .monei-card-input.is-focused {
     border-color: #007cba;
-    box-shadow: 0 0 0 1px #007cba;
+    box-shadow: 0 0 0 0.0625em #007cba;
 }
 
 .monei-card-input.is-invalid {
@@ -30,8 +30,8 @@
 /* Cardholder Name Input */
 .monei-input {
     background-color: #fff;
-    border: 1px solid hsla(0, 0%, 7%, .8);
-    border-radius: 4px;
+    border: 0.0625em solid hsla(0, 0%, 7%, .8);
+    border-radius: 0.25em;
     box-sizing: border-box;
     color: #2b2d2f;
     font-family: inherit;
@@ -47,7 +47,7 @@
 .monei-input:focus {
     outline: none;
     border-color: #007cba;
-    box-shadow: 0 0 0 1px #007cba;
+    box-shadow: 0 0 0 0.0625em #007cba;
 }
 
 .monei-input.has-error {
@@ -61,9 +61,7 @@
 
 /* Payment Request Container */
 .monei-payment-request-container {
-    min-height: 50px;
-    display: flex;
-    align-items: center;
+    min-height: 3.125em;
     justify-content: center;
     background: #fff;
     width: 100%;
@@ -74,7 +72,7 @@
 .monei-label-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 0.5em;
 }
 
 .monei-text {
@@ -84,12 +82,12 @@
 .monei-card-brands {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: 0.3125em;
 }
 
 .monei-card-brands img,
 .card-brand-icon {
-    height: 24px !important;
+    height: 1.5em !important;
     width: auto !important;
     display: inline-block !important;
     margin: 0 !important;
@@ -101,7 +99,7 @@
 }
 
 .monei-logo img {
-    height: 24px;
+    height: 1.5em;
     width: auto;
 }
 
@@ -114,13 +112,13 @@
 }
 
 .monei-card-fieldset {
-    margin-top: 12px;
+    margin-top: 0.75em;
 }
 
 /* Loading State */
 .monei-loading {
     text-align: center;
-    padding: 20px;
+    padding: 1.25em;
     color: #666;
 }
 
@@ -133,7 +131,7 @@
 /* Animation for smooth transitions */
 .monei-input-container {
     position: relative;
-    margin-bottom: 16px;
+    margin: 0 0 1em 0 !important;
 }
 
 
@@ -147,10 +145,10 @@
 @media (max-width: 480px) {
     .monei-input,
     .monei-card-input {
-        font-size: 16px; /* Prevents zoom on iOS */
+        font-size: 1em; /* Prevents zoom on iOS */
     }
 
     .monei-payment-request-container {
-        min-height: 60px;
+        min-height: 3.75em;
     }
 }
