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

Commit 025db3e

Browse files
adamwathanadamwathan
committed
Add simple-buttons plugin
1 parent 469109f commit 025db3e

File tree

3 files changed

+155
-0
lines changed

3 files changed

+155
-0
lines changed

‎index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,35 @@
77
<link rel="stylesheet" href="./dist/styles.css">
88
</head>
99
<body class="font-sans text-black">
10+
<div class="bg-grey-lighter py-8">
11+
<div class="container mx-auto px-8">
12+
<h2 class="mb-6">Simple Buttons</h2>
13+
<div class="mb-6">
14+
<h3 class="text-lg text-grey-darker font-semibold mb-4">Colors</h3>
15+
<div class="flex flex-wrap">
16+
<button type="button" class="w-24 btn btn-white mr-2 mb-2">White</button>
17+
<button type="button" class="w-24 btn btn-grey mr-2 mb-2">Grey</button>
18+
<button type="button" class="w-24 btn btn-black mr-2 mb-2">Black</button>
19+
<button type="button" class="w-24 btn btn-red mr-2 mb-2">Red</button>
20+
<button type="button" class="w-24 btn btn-orange mr-2 mb-2">Orange</button>
21+
<button type="button" class="w-24 btn btn-yellow mr-2 mb-2">Yellow</button>
22+
<button type="button" class="w-24 btn btn-green mr-2 mb-2">Green</button>
23+
<button type="button" class="w-24 btn btn-teal mr-2 mb-2">Teal</button>
24+
<button type="button" class="w-24 btn btn-blue mr-2 mb-2">Blue</button>
25+
<button type="button" class="w-24 btn btn-indigo mr-2 mb-2">Indigo</button>
26+
<button type="button" class="w-24 btn btn-purple mr-2 mb-2">Purple</button>
27+
<button type="button" class="w-24 btn btn-pink mr-2 mb-2">Pink</button>
28+
</div>
29+
</div>
30+
<div class="mb-6">
31+
<h3 class="text-lg text-grey-darker font-semibold mb-4">Sizes</h3>
32+
<div>
33+
<button type="button" class="btn btn-sm btn-blue mr-2">Small</button>
34+
<button type="button" class="btn btn-blue mr-2">Default</button>
35+
<button type="button" class="btn btn-lg btn-blue mr-2">Large</button>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
1040
</body>
1141
</html>

‎plugins/simple-buttons/index.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
const _ = require('lodash')
2+
const Color = require('color')
3+
const defaultConfig = require('tailwindcss/defaultConfig')()
4+
5+
const defaultOptions = {
6+
borderRadius: '.25rem',
7+
fontWeight: '600',
8+
lineHeight: '1.25',
9+
fontSize: '1rem',
10+
padding: '.5rem 1rem',
11+
colors: {
12+
white: {
13+
background: defaultConfig.colors['white'],
14+
text: defaultConfig.colors['black'],
15+
},
16+
black: {
17+
background: defaultConfig.colors['black'],
18+
text: defaultConfig.colors['white'],
19+
},
20+
grey: {
21+
background: defaultConfig.colors['grey'],
22+
text: defaultConfig.colors['black'],
23+
},
24+
red: {
25+
background: defaultConfig.colors['red'],
26+
text: defaultConfig.colors['white'],
27+
},
28+
orange: {
29+
background: defaultConfig.colors['orange'],
30+
text: defaultConfig.colors['white'],
31+
},
32+
yellow: {
33+
background: defaultConfig.colors['yellow'],
34+
text: defaultConfig.colors['yellow-darkest'],
35+
},
36+
green: {
37+
background: defaultConfig.colors['green'],
38+
text: defaultConfig.colors['white'],
39+
},
40+
teal: {
41+
background: defaultConfig.colors['teal'],
42+
text: defaultConfig.colors['white'],
43+
},
44+
blue: {
45+
background: defaultConfig.colors['blue'],
46+
text: defaultConfig.colors['white'],
47+
},
48+
indigo: {
49+
background: defaultConfig.colors['indigo'],
50+
text: defaultConfig.colors['white'],
51+
},
52+
purple: {
53+
background: defaultConfig.colors['purple'],
54+
text: defaultConfig.colors['white'],
55+
},
56+
pink: {
57+
background: defaultConfig.colors['pink'],
58+
text: defaultConfig.colors['white'],
59+
},
60+
},
61+
sizes: {
62+
sm: {
63+
fontSize: '.875rem',
64+
padding: '.5rem .75rem',
65+
},
66+
lg: {
67+
fontSize: '1.25rem',
68+
padding: '.75rem 1.5rem',
69+
}
70+
}
71+
}
72+
73+
module.exports = function (options) {
74+
options = _.isFunction(options)
75+
? options(defaultOptions)
76+
: _.defaults(options, defaultOptions)
77+
78+
return function ({ addComponents, e }) {
79+
addComponents([
80+
{
81+
'.btn': {
82+
display: 'inline-block',
83+
padding: options.padding,
84+
fontSize: options.fontSize,
85+
fontWeight: options.fontWeight,
86+
lineHeight: options.lineHeight,
87+
borderRadius: options.borderRadius,
88+
textDecoration: 'none',
89+
}
90+
},
91+
..._.map(_.omit(options.sizes, 'default'), (sizeOptions, name) => {
92+
return {
93+
[`.btn-${e(name)}`]: {
94+
padding: _.get(sizeOptions, 'padding', options.padding),
95+
fontSize: _.get(sizeOptions, 'fontSize', options.fontSize),
96+
fontWeight: _.get(sizeOptions, 'fontWeight', options.fontWeight),
97+
lineHeight: _.get(sizeOptions, 'lineHeight', options.lineHeight),
98+
borderRadius: _.get(sizeOptions, 'borderRadius', options.borderRadius),
99+
},
100+
}
101+
}),
102+
..._.map(options.colors, (colorOptions, name) => {
103+
return {
104+
[`.btn-${e(name)}`]: {
105+
backgroundColor: colorOptions.background,
106+
color: colorOptions.text,
107+
'&:focus': {
108+
outline: 0,
109+
boxShadow: `0 0 0 .2em ${Color(colorOptions.background).alpha(.5).rgb().toString()}`,
110+
},
111+
'&:hover': {
112+
backgroundColor: _.get(colorOptions, 'hoverBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
113+
color: _.get(colorOptions, 'hoverText', colorOptions.text),
114+
},
115+
'&:active': {
116+
backgroundColor: _.get(colorOptions, 'activeBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
117+
color: _.get(colorOptions, 'activeText', colorOptions.text),
118+
}
119+
}
120+
}
121+
})
122+
])
123+
}
124+
}

‎tailwind.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,7 @@ module.exports = {
900900

901901
plugins: [
902902
require('tailwindcss/plugins/container')(),
903+
require('./plugins/simple-buttons')(),
903904
],
904905

905906

0 commit comments

Comments
 (0)