From 4f43bf2728b22050cd3ca3723d292a1b88c04162 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 9 Dec 2021 15:11:33 +0100 Subject: [PATCH] chore: handle forms --- build.config.ts | 3 +- src/css/forms.css | 205 ++++++++++++++++++++++++++++++++++++++++++++++ src/index.ts | 2 + 3 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 src/css/forms.css diff --git a/build.config.ts b/build.config.ts index 0522be18..0470b3a8 100644 --- a/build.config.ts +++ b/build.config.ts @@ -3,7 +3,8 @@ export default { './src/index', { input: './src/components/', outDir: 'dist/components' }, { input: './src/presets/', outDir: 'dist/presets' }, - { input: './src/utils/', outDir: 'dist/utils' } + { input: './src/utils/', outDir: 'dist/utils' }, + { input: './src/css/', outDir: 'dist/css' } ], declaration: true, externals: [ diff --git a/src/css/forms.css b/src/css/forms.css new file mode 100644 index 00000000..c942e721 --- /dev/null +++ b/src/css/forms.css @@ -0,0 +1,205 @@ +[multiple], +[type=date], +[type=datetime-local], +[type=email], +[type=month], +[type=number], +[type=password], +[type=search], +[type=tel], +[type=text], +[type=time], +[type=url], +[type=week], +select, +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0; + padding-top: .5rem; + padding-right: .75rem; + padding-bottom: .5rem; + padding-left: .75rem; + font-size: 1rem; + line-height: 1.5rem +} + +[multiple]:focus, +[type=date]:focus, +[type=datetime-local]:focus, +[type=email]:focus, +[type=month]:focus, +[type=number]:focus, +[type=password]:focus, +[type=search]:focus, +[type=tel]:focus, +[type=text]:focus, +[type=time]:focus, +[type=url]:focus, +[type=week]:focus, +select:focus, +textarea:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty, ); + /*!*/ + /*!*/ + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + border-color: #2563eb +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #6b7280; + opacity: 1 +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #6b7280; + opacity: 1 +} + +input::placeholder, +textarea::placeholder { + color: #6b7280; + opacity: 1 +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0 +} + +::-webkit-date-and-time-value { + min-height: 1.5em +} + +select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right .5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + color-adjust: exact +} + +[multiple] { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: .75rem; + -webkit-print-color-adjust: unset; + color-adjust: unset +} + +[type=checkbox], +[type=radio] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px +} + +[type=checkbox] { + border-radius: 0 +} + +[type=radio] { + border-radius: 100% +} + +[type=checkbox]:focus, +[type=radio]:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty, ); + /*!*/ + /*!*/ + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) +} + +[type=checkbox]:checked, +[type=radio]:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat +} + +[type=checkbox]:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") +} + +[type=radio]:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") +} + +[type=checkbox]:checked:focus, +[type=checkbox]:checked:hover, +[type=radio]:checked:focus, +[type=radio]:checked:hover { + border-color: transparent; + background-color: currentColor +} + +[type=checkbox]:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat +} + +[type=checkbox]:indeterminate:focus, +[type=checkbox]:indeterminate:hover { + border-color: transparent; + background-color: currentColor +} + +[type=file] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit +} + +[type=file]:focus { + outline: 1px auto -webkit-focus-ring-color +} diff --git a/src/index.ts b/src/index.ts index 5fed98c7..d87af1ba 100644 --- a/src/index.ts +++ b/src/index.ts @@ -207,6 +207,8 @@ export default defineNuxtModule({ watch: false }) + nuxt.options.css.push(resolve(__dirname, './css/forms.css')) + nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue', '@nuxthq/ui') } })