Skip to content
This repository was archived by the owner on Sep 11, 2021. It is now read-only.

Fix background-image placement in checkbox/radios #8

Merged
merged 3 commits into from
May 23, 2019
Merged

Fix background-image placement in checkbox/radios #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5171eb3
Use box-shadow instead of border for checkbox/radios
adamwathan May 23, 2019
53893e1
Revert to 16px icons
adamwathan May 23, 2019
99f0cdd
Switch back to using borders, fix image placement with background-origin
adamwathan May 23, 2019
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions docs/pages/demo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import '../static/css/tailwind.css'
import Head from 'next/head'

export default () => (
<div className="antialiased text-gray-900 px-6">
<Head>
<title>Tailwind CSS Custom Forms</title>
</Head>

<div className="max-w-2xl mx-auto py-12">
<div className="flex flex-wrap -mx-6">
<div className="w-1/2 px-6">
<label className="block">
<span className="text-gray-700">Input</span>
<input type="email" className="form-input mt-1 block w-full" placeholder="john@example.com"/>
</label>

<label className="block mt-4">
<span className="text-gray-700">Textarea</span>
<textarea className="form-textarea mt-1 block w-full h-24" rows="3" placeholder="Enter some long form content."></textarea>
</label>

<div className="block mt-4">
<span className="text-gray-700">Checkboxes</span>
<div className="mt-2">
<div>
<label className="inline-flex items-center">
<input type="checkbox" className="form-checkbox text-gray-800"/>
<span className="ml-2">Option 1</span>
</label>
</div>
<div>
<label className="inline-flex items-center">
<input type="checkbox" className="form-checkbox text-gray-800"/>
<span className="ml-2">Option 2</span>
</label>
</div>
<div>
<label className="inline-flex items-center">
<input type="checkbox" className="form-checkbox text-gray-800"/>
<span className="ml-2">Option 3</span>
</label>
</div>
</div>
</div>
</div>

<div className="w-1/2 px-2">
<label className="block">
<span className="text-gray-700">Select</span>
<select className="form-select block w-full mt-1">
<option>Option 1</option>
<option>Option 2</option>
</select>
</label>

<label className="block mt-4">
<span className="text-gray-700">Multiselect</span>
<select className="form-multiselect block w-full h-24 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>

<div className="block mt-4">
<span className="text-gray-700">Radio Buttons</span>
<div className="mt-2">
<div>
<label className="inline-flex items-center">
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="1"/>
<span className="ml-2">Option 1</span>
</label>
</div>
<div>
<label className="inline-flex items-center">
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="2"/>
<span className="ml-2">Option 2</span>
</label>
</div>
<div>
<label className="inline-flex items-center">
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="3"/>
<span className="ml-2">Option 3</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
12 changes: 7 additions & 5 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const svgToDataUri = require('mini-svg-data-uri')
const defaultTheme = require('tailwindcss/defaultTheme')
const defaultTheme = require('tailwindcss/resolveConfig')(require('tailwindcss/defaultConfig')).theme

module.exports = function ({ addUtilities, addComponents, theme }) {

Expand All @@ -16,8 +16,8 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
focusShadow: defaultTheme.boxShadow.outline,
checkboxSize: '1em',
radioSize: '1em',
checkboxIcon: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M13.293 4.293a1 1 0 0 1 0 1.414L7 12a1 1 0 0 1-1.414 0L3.293 9.707a1 1 0 0 1 1.414-1.414l1.586 1.586 5.586-5.586a1 1 0 0 1 1.414 0z"/></svg>`,
radioIcon: `<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>`,
checkboxIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`,
radioIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
checkedColor: 'currentColor',
selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
selectIconOffset: defaultTheme.spacing[2],
Expand All @@ -36,6 +36,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
borderWidth: options.borderWidth,
borderRadius: options.borderRadius,
backgroundColor: options.backgroundColor,
backgroundOrigin: 'border-box',
userSelect: 'none',
'&:focus': {
outline: 'none',
Expand All @@ -48,7 +49,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
backgroundColor: options.checkedColor,
borderColor: options.checkedColor,
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
backgroundSize: 'cover',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
},
Expand All @@ -70,6 +71,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
borderWidth: options.borderWidth,
borderRadius: '50%',
backgroundColor: options.backgroundColor,
backgroundOrigin: 'border-box',
userSelect: 'none',
'&:focus': {
outline: 'none',
Expand All @@ -82,7 +84,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
backgroundColor: options.checkedColor,
borderColor: options.checkedColor,
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
backgroundSize: 'cover',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
},
Expand Down