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

Commit 5171eb3

Browse files
adamwathanadamwathan
committed
Use box-shadow instead of border for checkbox/radios
1 parent 6b8682a commit 5171eb3

File tree

2 files changed

+114
-14
lines changed

2 files changed

+114
-14
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="john@example.com"/>
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: 19 additions & 14 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 14 14" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M4.707 6.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.414L6 7.586 4.707 6.293z"/></svg>`,
20+
radioIcon: `<svg viewBox="0 0 14 14" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" 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],
@@ -32,26 +32,29 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
3232
height: options.checkboxSize,
3333
width: options.checkboxSize,
3434
verticalAlign: 'middle',
35-
borderColor: options.borderColor,
36-
borderWidth: options.borderWidth,
35+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`,
3736
borderRadius: options.borderRadius,
3837
backgroundColor: options.backgroundColor,
3938
userSelect: 'none',
4039
'&:focus': {
4140
outline: 'none',
42-
boxShadow: options.focusShadow,
41+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}, ${options.focusShadow}`,
4342
},
4443
'&:focus:not(:checked)': {
45-
borderColor: options.focusBorderColor,
44+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.focusBorderColor}, ${options.focusShadow}`,
4645
},
4746
'&:checked': {
47+
boxShadow: 'none',
4848
backgroundColor: options.checkedColor,
4949
borderColor: options.checkedColor,
5050
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
51-
backgroundSize: 'cover',
51+
backgroundSize: '100% 100%',
5252
backgroundPosition: 'center',
5353
backgroundRepeat: 'no-repeat',
5454
},
55+
'&:focus:checked': {
56+
boxShadow: `${options.focusShadow}`,
57+
},
5558
'&::-ms-check': {
5659
color: 'transparent', // Hide the check
5760
background: 'inherit',
@@ -66,26 +69,28 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
6669
height: options.radioSize,
6770
width: options.radioSize,
6871
verticalAlign: 'middle',
69-
borderColor: options.borderColor,
70-
borderWidth: options.borderWidth,
72+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`,
7173
borderRadius: '50%',
7274
backgroundColor: options.backgroundColor,
7375
userSelect: 'none',
7476
'&:focus': {
7577
outline: 'none',
76-
boxShadow: options.focusShadow,
78+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}, ${options.focusShadow}`,
7779
},
7880
'&:focus:not(:checked)': {
79-
borderColor: options.focusBorderColor,
81+
boxShadow: `inset 0 0 0 ${options.borderWidth} ${options.focusBorderColor}, ${options.focusShadow}`,
8082
},
8183
'&:checked': {
84+
boxShadow: 'none',
8285
backgroundColor: options.checkedColor,
83-
borderColor: options.checkedColor,
8486
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
85-
backgroundSize: 'cover',
87+
backgroundSize: '100% 100%',
8688
backgroundPosition: 'center',
8789
backgroundRepeat: 'no-repeat',
8890
},
91+
'&:focus:checked': {
92+
boxShadow: `${options.focusShadow}`,
93+
},
8994
'&::-ms-check': {
9095
color: 'transparent', // Hide the dot
9196
background: 'inherit',

0 commit comments

Comments
 (0)