WIP Migrate form styles to tailwind

2020-09-23 21:03:23 +02:00
parent 80bcefd8b8
commit 8b22da7ae0
13 changed files with 280 additions and 187 deletions
@@ -25,6 +25,42 @@ module.exports = {
        fontFamily: {
            'sans': [ 'Lato', 'sans-serif' ],
        },
+        customForms: theme => ({
+            default: {
+                'input, textarea, select, multiselect': {
+                    paddingTop: theme('spacing.4'),
+                    paddingBottom: theme('spacing.4'),
+                    paddingLeft: theme('spacing.8'),
+                    paddingRight: theme('spacing.8'),
+                    borderColor: theme('colors.gray.500'),
+                    borderRadius: undefined,
+                    '&:focus': {
+                        borderColor: undefined,
+                        boxShadow: undefined,
+                    },
+                },
+                'checkbox, radio': {
+                    width: theme('spacing.6'),
+                    height: theme('spacing.6'),
+                    backgroundColor: theme('colors.white'),
+                    borderColor: undefined,
+                    '&:focus': {
+                        borderColor: undefined,
+                        boxShadow: undefined,
+                    },
+                    '&:checked': {
+                        backgroundColor: theme('colors.ep.secondary'),
+                        boxShadow: undefined,
+                    },
+                },
+            },
+            error: {
+                'input, textarea, select, multiselect': {
+                    color: theme('colors.red.500'),
+                    borderColor: theme('colors.red.500'),
+                }
+            },
+        }),
        extend: {
            colors: {
                'overlay': {