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

Commit 4c901ee

Browse files
adamwathanadamwathan
authored
Merge pull request #8 from tailwindcss/shadow-borders
Fix background-image placement in checkbox/radios
2 parents 6b8682a + 99f0cdd commit 4c901ee

File tree

2 files changed

+102
-5
lines changed

2 files changed

+102
-5
lines changed

‎docs/pages/demo.jsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import '../static/css/tailwind.css'
2+
import Head from 'next/head'
3+
4+
export default () => (
5+
<div className="antialiased text-gray-900 px-6">
6+
<Head>
7+
<title>Tailwind CSS Custom Forms</title>
8+
</Head>
9+
10+
<div className="max-w-2xl mx-auto py-12">
11+
<div className="flex flex-wrap -mx-6">
12+
<div className="w-1/2 px-6">
13+
<label className="block">
14+
<span className="text-gray-700">Input</span>
15+
<input type="email" className="form-input mt-1 block w-full" placeholder="[email protected]"/>
16+
</label>
17+
18+
<label className="block mt-4">
19+
<span className="text-gray-700">Textarea</span>
20+
<textarea className="form-textarea mt-1 block w-full h-24" rows="3" placeholder="Enter some long form content."></textarea>
21+
</label>
22+
23+
<div className="block mt-4">
24+
<span className="text-gray-700">Checkboxes</span>
25+
<div className="mt-2">
26+
<div>
27+
<label className="inline-flex items-center">
28+
<input type="checkbox" className="form-checkbox text-gray-800"/>
29+
<span className="ml-2">Option 1</span>
30+
</label>
31+
</div>
32+
<div>
33+
<label className="inline-flex items-center">
34+
<input type="checkbox" className="form-checkbox text-gray-800"/>
35+
<span className="ml-2">Option 2</span>
36+
</label>
37+
</div>
38+
<div>
39+
<label className="inline-flex items-center">
40+
<input type="checkbox" className="form-checkbox text-gray-800"/>
41+
<span className="ml-2">Option 3</span>
42+
</label>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div className="w-1/2 px-2">
49+
<label className="block">
50+
<span className="text-gray-700">Select</span>
51+
<select className="form-select block w-full mt-1">
52+
<option>Option 1</option>
53+
<option>Option 2</option>
54+
</select>
55+
</label>
56+
57+
<label className="block mt-4">
58+
<span className="text-gray-700">Multiselect</span>
59+
<select className="form-multiselect block w-full h-24 mt-1" multiple>
60+
<option>Option 1</option>
61+
<option>Option 2</option>
62+
<option>Option 3</option>
63+
<option>Option 4</option>
64+
<option>Option 5</option>
65+
</select>
66+
</label>
67+
68+
<div className="block mt-4">
69+
<span className="text-gray-700">Radio Buttons</span>
70+
<div className="mt-2">
71+
<div>
72+
<label className="inline-flex items-center">
73+
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="1"/>
74+
<span className="ml-2">Option 1</span>
75+
</label>
76+
</div>
77+
<div>
78+
<label className="inline-flex items-center">
79+
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="2"/>
80+
<span className="ml-2">Option 2</span>
81+
</label>
82+
</div>
83+
<div>
84+
<label className="inline-flex items-center">
85+
<input type="radio" className="form-radio text-gray-800" name="radio-direct" value="3"/>
86+
<span className="ml-2">Option 3</span>
87+
</label>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
)

‎index.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const svgToDataUri = require('mini-svg-data-uri')
2-
const defaultTheme = require('tailwindcss/defaultTheme')
2+
const defaultTheme = require('tailwindcss/resolveConfig')(require('tailwindcss/defaultConfig')).theme
33

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

@@ -16,8 +16,8 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
1616
focusShadow: defaultTheme.boxShadow.outline,
1717
checkboxSize: '1em',
1818
radioSize: '1em',
19-
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>`,
20-
radioIcon: `<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>`,
19+
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>`,
20+
radioIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
2121
checkedColor: 'currentColor',
2222
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>`,
2323
selectIconOffset: defaultTheme.spacing[2],
@@ -36,6 +36,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
3636
borderWidth: options.borderWidth,
3737
borderRadius: options.borderRadius,
3838
backgroundColor: options.backgroundColor,
39+
backgroundOrigin: 'border-box',
3940
userSelect: 'none',
4041
'&:focus': {
4142
outline: 'none',
@@ -48,7 +49,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
4849
backgroundColor: options.checkedColor,
4950
borderColor: options.checkedColor,
5051
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
51-
backgroundSize: 'cover',
52+
backgroundSize: '100% 100%',
5253
backgroundPosition: 'center',
5354
backgroundRepeat: 'no-repeat',
5455
},
@@ -70,6 +71,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
7071
borderWidth: options.borderWidth,
7172
borderRadius: '50%',
7273
backgroundColor: options.backgroundColor,
74+
backgroundOrigin: 'border-box',
7375
userSelect: 'none',
7476
'&:focus': {
7577
outline: 'none',
@@ -82,7 +84,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
8284
backgroundColor: options.checkedColor,
8385
borderColor: options.checkedColor,
8486
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
85-
backgroundSize: 'cover',
87+
backgroundSize: '100% 100%',
8688
backgroundPosition: 'center',
8789
backgroundRepeat: 'no-repeat',
8890
},

0 commit comments

Comments
 (0)