Login page completed
This commit is contained in:
Aravind142857
38
node_modules/@tailwindcss/forms/.github/ISSUE_TEMPLATE/1.bug_report.yml
generated
vendored
Normal file
38
node_modules/@tailwindcss/forms/.github/ISSUE_TEMPLATE/1.bug_report.yml
generated
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
name: Bug Report
|
||||
description: Create a bug report for @tailwindcss/forms.
|
||||
labels: []
|
||||
body:
|
||||
- type: input
|
||||
attributes:
|
||||
label: What version of @tailwindcss/forms are you using?
|
||||
description: 'For example: v0.1.4'
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
attributes:
|
||||
label: What version of Node.js are you using?
|
||||
description: 'For example: v12.0.0'
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
attributes:
|
||||
label: What browser are you using?
|
||||
description: 'For example: Chrome, Safari, or N/A'
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
attributes:
|
||||
label: What operating system are you using?
|
||||
description: 'For example: macOS, Windows'
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
attributes:
|
||||
label: Reproduction repository
|
||||
description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe your issue
|
||||
description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead
|
||||
11
node_modules/@tailwindcss/forms/.github/ISSUE_TEMPLATE/config.yml
generated
vendored
Normal file
11
node_modules/@tailwindcss/forms/.github/ISSUE_TEMPLATE/config.yml
generated
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Feature Request
|
||||
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
|
||||
about: 'Suggest any ideas you have using our discussion forums.'
|
||||
- name: Help
|
||||
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
|
||||
about: 'If you have a question or need help, ask a question on the discussion forums.'
|
||||
- name: Kind Words
|
||||
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
|
||||
about: "Have something nice to say about @tailwindcss/forms or Tailwind CSS in general? We'd love to hear it!"
|
||||
50
node_modules/@tailwindcss/forms/.github/workflows/release-insiders.yml
generated
vendored
Normal file
50
node_modules/@tailwindcss/forms/.github/workflows/release-insiders.yml
generated
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
name: Release Insiders
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [12]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
|
||||
- name: Use cached node_modules
|
||||
id: cache
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: node_modules
|
||||
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
|
||||
restore-keys: |
|
||||
nodeModules-
|
||||
|
||||
- name: Install dependencies
|
||||
if: steps.cache.outputs.cache-hit != 'true'
|
||||
run: npm install
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Resolve version
|
||||
id: vars
|
||||
run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
|
||||
|
||||
- name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
|
||||
run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
|
||||
|
||||
- name: Publish
|
||||
run: npm publish --tag insiders
|
||||
env:
|
||||
CI: true
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
144
node_modules/@tailwindcss/forms/CHANGELOG.md
generated
vendored
Normal file
144
node_modules/@tailwindcss/forms/CHANGELOG.md
generated
vendored
Normal file
@@ -0,0 +1,144 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
- Nothing yet!
|
||||
|
||||
## [0.5.3] - 2022-09-02
|
||||
|
||||
### Fixed
|
||||
|
||||
- Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
|
||||
|
||||
## [0.5.2] - 2022-05-18
|
||||
|
||||
### Added
|
||||
|
||||
- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
|
||||
|
||||
## [0.5.1] - 2022-05-03
|
||||
|
||||
### Fixed
|
||||
|
||||
- Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
|
||||
- Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
|
||||
|
||||
## [0.5.0] - 2022-03-02
|
||||
|
||||
### Changed
|
||||
|
||||
- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
|
||||
|
||||
## [0.4.1] - 2022-03-02
|
||||
|
||||
### Added
|
||||
|
||||
- Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
|
||||
|
||||
### Fixed
|
||||
|
||||
- Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91))
|
||||
- Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109))
|
||||
|
||||
## [0.4.0] - 2021-12-09
|
||||
|
||||
### Changed
|
||||
|
||||
- Update color palette references for v3 ([#83](https://github.com/tailwindlabs/tailwindcss-forms/pull/83))
|
||||
- Don't read outline.none value from config ([#89](https://github.com/tailwindlabs/tailwindcss-forms/pull/89))
|
||||
|
||||
## [0.3.4] - 2021-09-28
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix compatibility with `optimizeUniversalDefaults` experimental feature in Tailwind CSS v2.2 ([#81](https://github.com/tailwindlabs/tailwindcss-forms/pull/81))
|
||||
|
||||
## [0.3.3] - 2021-06-03
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix typo in selector when using `class` strategy that breaks background colors on checkboxes and radio buttons ([#72](https://github.com/tailwindlabs/tailwindcss-forms/pull/72))
|
||||
|
||||
## [0.3.2] - 2021-03-26
|
||||
|
||||
### Fixed
|
||||
|
||||
- Filter `null` rules for JIT compatibility ([b4c4e03](https://github.com/tailwindlabs/tailwindcss-forms/commit/b4c4e039337c3a5599f5b6d9eabbcc8ab9e8c8d9))
|
||||
|
||||
## [0.3.1] - 2021-03-26
|
||||
|
||||
### Fixed
|
||||
|
||||
- Use `base` as default strategy, not `class` ([#61](https://github.com/tailwindlabs/tailwindcss-forms/pull/61))
|
||||
|
||||
## [0.3.0] - 2021-03-25
|
||||
|
||||
### Added
|
||||
|
||||
- Add `class` strategy for you babies and your custom select and date picker libraries ;) ([#39](https://github.com/tailwindlabs/tailwindcss-forms/pull/39))
|
||||
|
||||
## [0.2.1] - 2020-11-17
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix issue where default checkbox/radio border color took precedence over user border color on focus ([d0b9fd9](https://github.com/tailwindlabs/tailwindcss-forms/commit/d0b9fd9))
|
||||
|
||||
## [0.2.0] - 2020-11-16
|
||||
|
||||
### Changed
|
||||
|
||||
- Update form styles to be less opinionated and encourage custom styling ([3288709](https://github.com/tailwindlabs/tailwindcss-forms/commit/3288709b59f4101511ec19f30cb2dafe7738251e))
|
||||
- Update custom property names to match namespaced variables in Tailwind CSS v2.0 ([adb9807](https://github.com/tailwindlabs/tailwindcss-forms/commit/adb98078fc830d0416cb5ea2c895e997d5f0a5ec), [bbd8510](https://github.com/tailwindlabs/tailwindcss-forms/commit/bbd85102ef4a402b3c39d997c025208a33694cc4))
|
||||
|
||||
## [0.1.4] - 2020-11-12
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix SVG background images not rendering properly in all browsers ([#5](https://github.com/tailwindlabs/tailwindcss-forms/pull/5))
|
||||
|
||||
## [0.1.3] - 2020-11-12
|
||||
|
||||
### Changed
|
||||
|
||||
- Update focus styles to account for changes to `ring` API in latest Tailwind CSS 2.0 alpha ([5c16689](https://github.com/tailwindlabs/tailwindcss-forms/commit/5c166896b06475832bd8364f9f3ef5c4baec585f))
|
||||
|
||||
## [0.1.2] - 2020-11-11
|
||||
|
||||
### Fixed
|
||||
|
||||
- Work around iOS Safari bug that causes date inputs to render with no height when empty ([b98365b](https://github.com/tailwindlabs/tailwindcss-forms/commit/b98365b903b586bfbe7a6ae745ba64b5d87e23e3))
|
||||
|
||||
## [0.1.1] - 2020-11-11
|
||||
|
||||
### Changed
|
||||
|
||||
- Move `tailwindcss` to dependencies, hoping to get it working with Tailwind Play ([d625ea1](https://github.com/tailwindlabs/tailwindcss-forms/commit/d625ea11bd111a4d8cde937e36f3d229ecdf7c6a))
|
||||
|
||||
## [0.1.0] - 2020-11-11
|
||||
|
||||
Initial release!
|
||||
|
||||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...HEAD
|
||||
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3
|
||||
[0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
|
||||
[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
|
||||
[0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
|
||||
[0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1
|
||||
[0.4.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.4.0
|
||||
[0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4
|
||||
[0.3.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.2...v0.3.3
|
||||
[0.3.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.1...v0.3.2
|
||||
[0.3.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.0...v0.3.1
|
||||
[0.3.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.1...v0.3.0
|
||||
[0.2.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...v0.2.1
|
||||
[0.2.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.4...v0.2.0
|
||||
[0.1.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.3...v0.1.4
|
||||
[0.1.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.2...v0.1.3
|
||||
[0.1.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.1...v0.1.2
|
||||
[0.1.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.0...v0.1.1
|
||||
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-forms/releases/tag/v0.1.0
|
||||
21
node_modules/@tailwindcss/forms/LICENSE
generated
vendored
Normal file
21
node_modules/@tailwindcss/forms/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Tailwind Labs, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
124
node_modules/@tailwindcss/forms/README.md
generated
vendored
Normal file
124
node_modules/@tailwindcss/forms/README.md
generated
vendored
Normal file
@@ -0,0 +1,124 @@
|
||||
# @tailwindcss/forms
|
||||
|
||||
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin from npm:
|
||||
|
||||
```sh
|
||||
npm install -D @tailwindcss/forms
|
||||
```
|
||||
|
||||
Then add the plugin to your `tailwind.config.js` file:
|
||||
|
||||
```js
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
theme: {
|
||||
// ...
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
// ...
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
|
||||
|
||||
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
|
||||
|
||||
Currently we add basic utility-friendly form styles for the following form element types:
|
||||
|
||||
- `input[type='text']`
|
||||
- `input[type='password']`
|
||||
- `input[type='email']`
|
||||
- `input[type='number']`
|
||||
- `input[type='url']`
|
||||
- `input[type='date']`
|
||||
- `input[type='datetime-local']`
|
||||
- `input[type='month']`
|
||||
- `input[type='week']`
|
||||
- `input[type='time']`
|
||||
- `input[type='search']`
|
||||
- `input[type='tel']`
|
||||
- `input[type='checkbox']`
|
||||
- `input[type='radio']`
|
||||
- `select`
|
||||
- `select[multiple]`
|
||||
- `textarea`
|
||||
|
||||
**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example.
|
||||
|
||||
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
|
||||
|
||||
```html
|
||||
<!-- You can actually customize padding on a select element now: -->
|
||||
<select class="px-4 py-3 rounded-full">
|
||||
<!-- ... -->
|
||||
</select>
|
||||
|
||||
<!-- Or change a checkbox color using text color utilities: -->
|
||||
<input type="checkbox" class="rounded text-pink-500" />
|
||||
```
|
||||
|
||||
More customization examples and best practices coming soon.
|
||||
|
||||
### Using classes to style
|
||||
|
||||
In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
|
||||
|
||||
```html
|
||||
<input type="email" class="form-input px-4 py-3 rounded-full">
|
||||
|
||||
<select class="form-select px-4 py-3 rounded-full">
|
||||
<!-- ... -->
|
||||
</select>
|
||||
|
||||
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
|
||||
```
|
||||
|
||||
Here is a complete table of the provided `form-*` classes for reference:
|
||||
|
||||
| Base | Class |
|
||||
| ------------------------- | ------------------ |
|
||||
| `[type='text']` | `form-input` |
|
||||
| `[type='email']` | `form-input` |
|
||||
| `[type='url']` | `form-input` |
|
||||
| `[type='password']` | `form-input` |
|
||||
| `[type='number']` | `form-input` |
|
||||
| `[type='date']` | `form-input` |
|
||||
| `[type='datetime-local']` | `form-input` |
|
||||
| `[type='month']` | `form-input` |
|
||||
| `[type='search']` | `form-input` |
|
||||
| `[type='tel']` | `form-input` |
|
||||
| `[type='time']` | `form-input` |
|
||||
| `[type='week']` | `form-input` |
|
||||
| `textarea` | `form-textarea` |
|
||||
| `select` | `form-select` |
|
||||
| `select[multiple]` | `form-multiselect` |
|
||||
| `[type='checkbox']` | `form-checkbox` |
|
||||
| `[type='radio']` | `form-radio` |
|
||||
|
||||
### Using only global styles or only classes
|
||||
|
||||
Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.
|
||||
|
||||
If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.
|
||||
|
||||
```js
|
||||
// tailwind.config.js
|
||||
plugins: [
|
||||
require("@tailwindcss/forms")({
|
||||
strategy: 'base', // only generate global styles
|
||||
strategy: 'class', // only generate classes
|
||||
}),
|
||||
],
|
||||
```
|
||||
|
||||
When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.
|
||||
|
||||
When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.
|
||||
390
node_modules/@tailwindcss/forms/index.html
generated
vendored
Normal file
390
node_modules/@tailwindcss/forms/index.html
generated
vendored
Normal file
@@ -0,0 +1,390 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@tailwindcss/forms examples</title>
|
||||
<link rel="stylesheet" href="/dist/tailwind.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="antialiased text-gray-900 px-6">
|
||||
<div class="max-w-xl mx-auto py-12 divide-y md:max-w-4xl">
|
||||
<div class="py-8">
|
||||
<h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
|
||||
<p class="mt-2 text-lg text-gray-600">
|
||||
An opinionated form reset designed to make form elements easy to style with utility
|
||||
classes.
|
||||
</p>
|
||||
<div class="mt-4 flex space-x-4">
|
||||
<a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"
|
||||
>Documentation</a
|
||||
>
|
||||
<a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-12">
|
||||
<h2 class="text-2xl font-bold">Unstyled</h2>
|
||||
<p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>
|
||||
<div class="mt-8 max-w-md">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Full name</span>
|
||||
<input type="text" class="mt-1 block w-full" placeholder="" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email address</span>
|
||||
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">When is your event?</span>
|
||||
<input type="date" class="mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">What type of event is it?</span>
|
||||
<select class="block w-full mt-1">
|
||||
<option>Corporate event</option>
|
||||
<option>Wedding</option>
|
||||
<option>Birthday</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Additional details</span>
|
||||
<textarea class="mt-1 block w-full" rows="3"></textarea>
|
||||
</label>
|
||||
<div class="block">
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="checkbox" checked />
|
||||
<span class="ml-2">Email me news and special offers</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-12">
|
||||
<h2 class="text-2xl font-bold">Simple</h2>
|
||||
<div class="mt-8 max-w-md">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Full name</span>
|
||||
<input
|
||||
type="text"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
border-gray-300
|
||||
shadow-sm
|
||||
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
||||
"
|
||||
placeholder=""
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email address</span>
|
||||
<input
|
||||
type="email"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
border-gray-300
|
||||
shadow-sm
|
||||
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
||||
"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">When is your event?</span>
|
||||
<input
|
||||
type="date"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
border-gray-300
|
||||
shadow-sm
|
||||
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">What type of event is it?</span>
|
||||
<select
|
||||
class="
|
||||
block
|
||||
w-full
|
||||
mt-1
|
||||
rounded-md
|
||||
border-gray-300
|
||||
shadow-sm
|
||||
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
||||
"
|
||||
>
|
||||
<option>Corporate event</option>
|
||||
<option>Wedding</option>
|
||||
<option>Birthday</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Additional details</span>
|
||||
<textarea
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
border-gray-300
|
||||
shadow-sm
|
||||
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
|
||||
"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="block">
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="
|
||||
rounded
|
||||
border-gray-300
|
||||
text-indigo-600
|
||||
shadow-sm
|
||||
focus:border-indigo-300
|
||||
focus:ring
|
||||
focus:ring-offset-0
|
||||
focus:ring-indigo-200
|
||||
focus:ring-opacity-50
|
||||
"
|
||||
checked
|
||||
/>
|
||||
<span class="ml-2">Email me news and special offers</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-12">
|
||||
<h2 class="text-2xl font-bold">Underline</h2>
|
||||
<div class="mt-8 max-w-md">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Full name</span>
|
||||
<input
|
||||
type="text"
|
||||
class="
|
||||
mt-0
|
||||
block
|
||||
w-full
|
||||
px-0.5
|
||||
border-0 border-b-2 border-gray-200
|
||||
focus:ring-0 focus:border-black
|
||||
"
|
||||
placeholder=""
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email address</span>
|
||||
<input
|
||||
type="email"
|
||||
class="
|
||||
mt-0
|
||||
block
|
||||
w-full
|
||||
px-0.5
|
||||
border-0 border-b-2 border-gray-200
|
||||
focus:ring-0 focus:border-black
|
||||
"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">When is your event?</span>
|
||||
<input
|
||||
type="date"
|
||||
class="
|
||||
mt-0
|
||||
block
|
||||
w-full
|
||||
px-0.5
|
||||
border-0 border-b-2 border-gray-200
|
||||
focus:ring-0 focus:border-black
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">What type of event is it?</span>
|
||||
<select
|
||||
class="
|
||||
block
|
||||
w-full
|
||||
mt-0
|
||||
px-0.5
|
||||
border-0 border-b-2 border-gray-200
|
||||
focus:ring-0 focus:border-black
|
||||
"
|
||||
>
|
||||
<option>Corporate event</option>
|
||||
<option>Wedding</option>
|
||||
<option>Birthday</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Additional details</span>
|
||||
<textarea
|
||||
class="
|
||||
mt-0
|
||||
block
|
||||
w-full
|
||||
px-0.5
|
||||
border-0 border-b-2 border-gray-200
|
||||
focus:ring-0 focus:border-black
|
||||
"
|
||||
rows="2"
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="block">
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="
|
||||
border-gray-300 border-2
|
||||
text-black
|
||||
focus:border-gray-300 focus:ring-black
|
||||
"
|
||||
/>
|
||||
<span class="ml-2">Email me news and special offers</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-12">
|
||||
<h2 class="text-2xl font-bold">Solid</h2>
|
||||
<div class="mt-8 max-w-md">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Full name</span>
|
||||
<input
|
||||
type="text"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
bg-gray-100
|
||||
border-transparent
|
||||
focus:border-gray-500 focus:bg-white focus:ring-0
|
||||
"
|
||||
placeholder=""
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email address</span>
|
||||
<input
|
||||
type="email"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
bg-gray-100
|
||||
border-transparent
|
||||
focus:border-gray-500 focus:bg-white focus:ring-0
|
||||
"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">When is your event?</span>
|
||||
<input
|
||||
type="date"
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
bg-gray-100
|
||||
border-transparent
|
||||
focus:border-gray-500 focus:bg-white focus:ring-0
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">What type of event is it?</span>
|
||||
<select
|
||||
class="
|
||||
block
|
||||
w-full
|
||||
mt-1
|
||||
rounded-md
|
||||
bg-gray-100
|
||||
border-transparent
|
||||
focus:border-gray-500 focus:bg-white focus:ring-0
|
||||
"
|
||||
>
|
||||
<option>Corporate event</option>
|
||||
<option>Wedding</option>
|
||||
<option>Birthday</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Additional details</span>
|
||||
<textarea
|
||||
class="
|
||||
mt-1
|
||||
block
|
||||
w-full
|
||||
rounded-md
|
||||
bg-gray-100
|
||||
border-transparent
|
||||
focus:border-gray-500 focus:bg-white focus:ring-0
|
||||
"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="block">
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="
|
||||
rounded
|
||||
bg-gray-200
|
||||
border-transparent
|
||||
focus:border-transparent focus:bg-gray-200
|
||||
text-gray-700
|
||||
focus:ring-1 focus:ring-offset-2 focus:ring-gray-500
|
||||
"
|
||||
/>
|
||||
<span class="ml-2">Email me news and special offers</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
201
node_modules/@tailwindcss/forms/kitchen-sink.html
generated
vendored
Normal file
201
node_modules/@tailwindcss/forms/kitchen-sink.html
generated
vendored
Normal file
@@ -0,0 +1,201 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@tailwindcss/forms Kitchen Sink</title>
|
||||
<link rel="stylesheet" href="/dist/tailwind.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="antialiased text-gray-900 px-6">
|
||||
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
|
||||
<h2 class="text-2xl font-bold">Reset styles</h2>
|
||||
<p class="mt-2 text-lg text-gray-500">
|
||||
These are form elements this plugin styles by default.
|
||||
</p>
|
||||
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (text)</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (email)</span>
|
||||
<input
|
||||
type="email"
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (email, multiple)</span>
|
||||
<input
|
||||
type="email"
|
||||
multiple
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (password)</span>
|
||||
<input
|
||||
type="password"
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (date)</span>
|
||||
<input type="date" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (datetime-local)</span>
|
||||
<input type="datetime-local" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (month)</span>
|
||||
<input type="month" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (number)</span>
|
||||
<input type="number" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (search)</span>
|
||||
<input type="search" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (time)</span>
|
||||
<input type="time" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (week)</span>
|
||||
<input type="week" class="form-input mt-1 block w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (tel)</span>
|
||||
<input
|
||||
type="tel"
|
||||
multiple
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (url)</span>
|
||||
<input
|
||||
type="url"
|
||||
multiple
|
||||
class="form-input mt-1 block w-full"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Select</span>
|
||||
<select class="form-select block w-full mt-1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Select (multiple)</span>
|
||||
<select class="form-multiselect block w-full mt-1" multiple>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Textarea</span>
|
||||
<textarea
|
||||
class="form-textarea mt-1 block w-full h-24"
|
||||
rows="3"
|
||||
placeholder="Enter some long form content."
|
||||
></textarea>
|
||||
</label>
|
||||
<fieldset class="block">
|
||||
<legend class="text-gray-700">Checkboxes</legend>
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-checkbox" type="checkbox" checked />
|
||||
<span class="ml-2">Option 1</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-checkbox" type="checkbox" />
|
||||
<span class="ml-2">Option 2</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-checkbox" type="checkbox" />
|
||||
<span class="ml-2">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="block">
|
||||
<legend class="text-gray-700">Radio Buttons</legend>
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
|
||||
<span class="ml-2">Option 1</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-radio" type="radio" name="radio-direct" value="2" />
|
||||
<span class="ml-2">Option 2</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-radio" type="radio" name="radio-direct" value="3" />
|
||||
<span class="ml-2">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-4xl mx-auto py-12">
|
||||
<h2 class="text-2xl font-bold">Untouched</h2>
|
||||
<p class="mt-2 text-lg text-gray-500">
|
||||
These are form elements we don't handle (yet?), but we use this to make sure we haven't
|
||||
accidentally styled them by mistake.
|
||||
</p>
|
||||
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (range)</span>
|
||||
<input type="range" class="mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (color)</span>
|
||||
<input type="color" class="mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (file)</span>
|
||||
<input type="file" class="mt-1 block w-full" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Input (file, multiple)</span>
|
||||
<input type="file" multiple class="mt-1 block w-full" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
node_modules/@tailwindcss/forms/package.json
generated
vendored
Normal file
36
node_modules/@tailwindcss/forms/package.json
generated
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "@tailwindcss/forms",
|
||||
"version": "0.5.3",
|
||||
"main": "src/index.js",
|
||||
"types": "src/index.d.ts",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 100,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
|
||||
"serve": "live-server .",
|
||||
"watch": "npm run build -- -w",
|
||||
"build": "tailwindcss -o dist/tailwind.css"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.6",
|
||||
"concurrently": "^5.3.0",
|
||||
"live-server": "^1.2.2",
|
||||
"postcss": "^8.4.13",
|
||||
"tailwindcss": "^3.0.24"
|
||||
},
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
}
|
||||
}
|
||||
7
node_modules/@tailwindcss/forms/src/index.d.ts
generated
vendored
Normal file
7
node_modules/@tailwindcss/forms/src/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { handler: () => void }
|
||||
|
||||
declare namespace plugin {
|
||||
const __isOptionsFunction: true
|
||||
}
|
||||
|
||||
export = plugin
|
||||
306
node_modules/@tailwindcss/forms/src/index.js
generated
vendored
Normal file
306
node_modules/@tailwindcss/forms/src/index.js
generated
vendored
Normal file
@@ -0,0 +1,306 @@
|
||||
const svgToDataUri = require('mini-svg-data-uri')
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
const colors = require('tailwindcss/colors')
|
||||
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
|
||||
const { spacing, borderWidth, borderRadius } = defaultTheme
|
||||
|
||||
const forms = plugin.withOptions(function (options = { strategy: undefined }) {
|
||||
return function ({ addBase, addComponents, theme }) {
|
||||
const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
|
||||
|
||||
const rules = [
|
||||
{
|
||||
base: [
|
||||
"[type='text']",
|
||||
"[type='email']",
|
||||
"[type='url']",
|
||||
"[type='password']",
|
||||
"[type='number']",
|
||||
"[type='date']",
|
||||
"[type='datetime-local']",
|
||||
"[type='month']",
|
||||
"[type='search']",
|
||||
"[type='tel']",
|
||||
"[type='time']",
|
||||
"[type='week']",
|
||||
'[multiple]',
|
||||
'textarea',
|
||||
'select',
|
||||
],
|
||||
class: ['.form-input', '.form-textarea', '.form-select', '.form-multiselect'],
|
||||
styles: {
|
||||
appearance: 'none',
|
||||
'background-color': '#fff',
|
||||
'border-color': theme('colors.gray.500', colors.gray[500]),
|
||||
'border-width': borderWidth['DEFAULT'],
|
||||
'border-radius': borderRadius.none,
|
||||
'padding-top': spacing[2],
|
||||
'padding-right': spacing[3],
|
||||
'padding-bottom': spacing[2],
|
||||
'padding-left': spacing[3],
|
||||
'font-size': baseFontSize,
|
||||
'line-height': baseLineHeight,
|
||||
'--tw-shadow': '0 0 #0000',
|
||||
'&: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': theme('colors.blue.600', colors.blue[600]),
|
||||
'--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)`,
|
||||
'border-color': theme('colors.blue.600', colors.blue[600]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
base: ['input::placeholder', 'textarea::placeholder'],
|
||||
class: ['.form-input::placeholder', '.form-textarea::placeholder'],
|
||||
styles: {
|
||||
color: theme('colors.gray.500', colors.gray[500]),
|
||||
opacity: '1',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: ['::-webkit-datetime-edit-fields-wrapper'],
|
||||
class: ['.form-input::-webkit-datetime-edit-fields-wrapper'],
|
||||
styles: {
|
||||
padding: '0',
|
||||
},
|
||||
},
|
||||
{
|
||||
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
|
||||
// This sucks because users can't change line-height with a utility on date inputs now.
|
||||
// Reference: https://github.com/twbs/bootstrap/pull/31993
|
||||
base: ['::-webkit-date-and-time-value'],
|
||||
class: ['.form-input::-webkit-date-and-time-value'],
|
||||
styles: {
|
||||
'min-height': '1.5em',
|
||||
},
|
||||
},
|
||||
{
|
||||
// In Safari on macOS date time inputs are 4px taller than normal inputs
|
||||
// This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements
|
||||
// See https://github.com/tailwindlabs/tailwindcss-forms/issues/95
|
||||
base: [
|
||||
'::-webkit-datetime-edit',
|
||||
'::-webkit-datetime-edit-year-field',
|
||||
'::-webkit-datetime-edit-month-field',
|
||||
'::-webkit-datetime-edit-day-field',
|
||||
'::-webkit-datetime-edit-hour-field',
|
||||
'::-webkit-datetime-edit-minute-field',
|
||||
'::-webkit-datetime-edit-second-field',
|
||||
'::-webkit-datetime-edit-millisecond-field',
|
||||
'::-webkit-datetime-edit-meridiem-field',
|
||||
],
|
||||
class: [
|
||||
'.form-input::-webkit-datetime-edit',
|
||||
'.form-input::-webkit-datetime-edit-year-field',
|
||||
'.form-input::-webkit-datetime-edit-month-field',
|
||||
'.form-input::-webkit-datetime-edit-day-field',
|
||||
'.form-input::-webkit-datetime-edit-hour-field',
|
||||
'.form-input::-webkit-datetime-edit-minute-field',
|
||||
'.form-input::-webkit-datetime-edit-second-field',
|
||||
'.form-input::-webkit-datetime-edit-millisecond-field',
|
||||
'.form-input::-webkit-datetime-edit-meridiem-field',
|
||||
],
|
||||
styles: {
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: ['select'],
|
||||
class: ['.form-select'],
|
||||
styles: {
|
||||
'background-image': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
|
||||
'colors.gray.500',
|
||||
colors.gray[500]
|
||||
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
|
||||
)}")`,
|
||||
'background-position': `right ${spacing[2]} center`,
|
||||
'background-repeat': `no-repeat`,
|
||||
'background-size': `1.5em 1.5em`,
|
||||
'padding-right': spacing[10],
|
||||
'print-color-adjust': `exact`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: ['[multiple]'],
|
||||
class: null,
|
||||
styles: {
|
||||
'background-image': 'initial',
|
||||
'background-position': 'initial',
|
||||
'background-repeat': 'unset',
|
||||
'background-size': 'initial',
|
||||
'padding-right': spacing[3],
|
||||
'print-color-adjust': 'unset',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']`, `[type='radio']`],
|
||||
class: ['.form-checkbox', '.form-radio'],
|
||||
styles: {
|
||||
appearance: 'none',
|
||||
padding: '0',
|
||||
'print-color-adjust': 'exact',
|
||||
display: 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
'background-origin': 'border-box',
|
||||
'user-select': 'none',
|
||||
'flex-shrink': '0',
|
||||
height: spacing[4],
|
||||
width: spacing[4],
|
||||
color: theme('colors.blue.600', colors.blue[600]),
|
||||
'background-color': '#fff',
|
||||
'border-color': theme('colors.gray.500', colors.gray[500]),
|
||||
'border-width': borderWidth['DEFAULT'],
|
||||
'--tw-shadow': '0 0 #0000',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']`],
|
||||
class: ['.form-checkbox'],
|
||||
styles: {
|
||||
'border-radius': borderRadius['none'],
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='radio']`],
|
||||
class: ['.form-radio'],
|
||||
styles: {
|
||||
'border-radius': '100%',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']:focus`, `[type='radio']:focus`],
|
||||
class: ['.form-checkbox:focus', '.form-radio:focus'],
|
||||
styles: {
|
||||
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': theme('colors.blue.600', colors.blue[600]),
|
||||
'--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)`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']:checked`, `[type='radio']:checked`],
|
||||
class: ['.form-checkbox:checked', '.form-radio:checked'],
|
||||
styles: {
|
||||
'border-color': `transparent`,
|
||||
'background-color': `currentColor`,
|
||||
'background-size': `100% 100%`,
|
||||
'background-position': `center`,
|
||||
'background-repeat': `no-repeat`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']:checked`],
|
||||
class: ['.form-checkbox:checked'],
|
||||
styles: {
|
||||
'background-image': `url("${svgToDataUri(
|
||||
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path 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"/></svg>`
|
||||
)}")`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='radio']:checked`],
|
||||
class: ['.form-radio:checked'],
|
||||
styles: {
|
||||
'background-image': `url("${svgToDataUri(
|
||||
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
|
||||
)}")`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [
|
||||
`[type='checkbox']:checked:hover`,
|
||||
`[type='checkbox']:checked:focus`,
|
||||
`[type='radio']:checked:hover`,
|
||||
`[type='radio']:checked:focus`,
|
||||
],
|
||||
class: [
|
||||
'.form-checkbox:checked:hover',
|
||||
'.form-checkbox:checked:focus',
|
||||
'.form-radio:checked:hover',
|
||||
'.form-radio:checked:focus',
|
||||
],
|
||||
styles: {
|
||||
'border-color': 'transparent',
|
||||
'background-color': 'currentColor',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']:indeterminate`],
|
||||
class: ['.form-checkbox:indeterminate'],
|
||||
styles: {
|
||||
'background-image': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
|
||||
)}")`,
|
||||
'border-color': `transparent`,
|
||||
'background-color': `currentColor`,
|
||||
'background-size': `100% 100%`,
|
||||
'background-position': `center`,
|
||||
'background-repeat': `no-repeat`,
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='checkbox']:indeterminate:hover`, `[type='checkbox']:indeterminate:focus`],
|
||||
class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'],
|
||||
styles: {
|
||||
'border-color': 'transparent',
|
||||
'background-color': 'currentColor',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='file']`],
|
||||
class: null,
|
||||
styles: {
|
||||
background: 'unset',
|
||||
'border-color': 'inherit',
|
||||
'border-width': '0',
|
||||
'border-radius': '0',
|
||||
padding: '0',
|
||||
'font-size': 'unset',
|
||||
'line-height': 'inherit',
|
||||
},
|
||||
},
|
||||
{
|
||||
base: [`[type='file']:focus`],
|
||||
class: null,
|
||||
styles: {
|
||||
outline: [
|
||||
`1px solid ButtonText`,
|
||||
`1px auto -webkit-focus-ring-color`
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const getStrategyRules = (strategy) => rules
|
||||
.map((rule) => {
|
||||
if (rule[strategy] === null) return null
|
||||
|
||||
return { [rule[strategy]]: rule.styles }
|
||||
})
|
||||
.filter(Boolean)
|
||||
|
||||
if (strategy.includes('base')) {
|
||||
addBase(getStrategyRules('base'))
|
||||
}
|
||||
|
||||
if (strategy.includes('class')) {
|
||||
addComponents(getStrategyRules('class'))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = forms
|
||||
9
node_modules/@tailwindcss/forms/tailwind.config.js
generated
vendored
Normal file
9
node_modules/@tailwindcss/forms/tailwind.config.js
generated
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
content: ['./index.html', './kitchen-sink.html'],
|
||||
theme: {
|
||||
extend: {
|
||||
//
|
||||
},
|
||||
},
|
||||
plugins: [require('./src')],
|
||||
}
|
||||
Reference in New Issue
Block a user