Create stripe card element style

2022-02-19 22:14:16 +04:00
parent e55ce5cd0d
commit e59d3194b1
1 changed files with 28 additions and 0 deletions
@@ -0,0 +1,28 @@
+export const appearance = {
+  theme: 'stripe',
+  variables: {
+    colorPrimary: '#4caf50',
+    colorBackground: '#ffffff',
+    colorText: '#30313d',
+    colorDanger: '#df1b41',
+    fontFamily: 'Roboto, Ideal Sans, system-ui, sans-serif',
+    spacingUnit: '2px',
+    borderRadius: '4px',
+  },
+  rules: {
+    '.Tab': {
+      border: '1px solid #E0E6EB',
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
+    },
+    '.Tab:hover': {
+      color: 'var(--colorText)',
+    },
+    '.Tab--selected': {
+      borderColor: '#E0E6EB',
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
+    },
+    '.Input--invalid': {
+      boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
+    }
+  }
+}