diff --git a/client/package-lock.json b/client/package-lock.json index 96f3c6b..ef03c46 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1078,6 +1078,17 @@ } } }, + "@tailwindcss/custom-forms": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz", + "integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==", + "dev": true, + "requires": { + "lodash": "^4.17.11", + "mini-svg-data-uri": "^1.0.3", + "traverse": "^0.6.6" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -7700,6 +7711,12 @@ } } }, + "mini-svg-data-uri": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz", + "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==", + "dev": true + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -15800,6 +15817,12 @@ "punycode": "^2.1.1" } }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=", + "dev": true + }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/client/package.json b/client/package.json index 46f32d0..daaf9de 100644 --- a/client/package.json +++ b/client/package.json @@ -19,6 +19,7 @@ "vuex": "^3.5.1" }, "devDependencies": { + "@tailwindcss/custom-forms": "^0.2.1", "@vue/cli-plugin-babel": "^3.12.1", "@vue/cli-plugin-eslint": "^3.12.1", "@vue/cli-service": "^3.12.1", diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 16b7309..c61914a 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -3,6 +3,26 @@ module.exports = { important: false, separator: ':', theme: { + customForms: theme => ({ + default: { + checkbox: { + width: theme('spacing.6'), + height: theme('spacing.6'), + backgroundColor: 'rgba(23, 49, 79, 0.6)', + borderColor: theme('colors.blue.800'), + textColor: theme('colors.blue.1000'), + '&:focus': { + backgroundColor: theme('colors.blue.1000'), + borderColor: theme('colors.blue.700'), + boxShadow: undefined, + }, + '&:checked': { + backgroundColor: theme('colors.blue.1000'), + borderColor: 'transparent', + }, + }, + }, + }), screens: { sm: '640px', md: '768px', @@ -717,7 +737,9 @@ module.exports = { transitionDuration: ['responsive'], }, corePlugins: {}, - plugins: [], + plugins: [ + require('@tailwindcss/custom-forms'), + ], purge: { enabled: process.env.NODE_ENV === 'production', content: [