tailwindcss/src/plugins/inset.js

33 lines
1,006 B
JavaScript
Raw Normal View History

2019-03-14 12:35:37 -04:00
import _ from 'lodash'
2019-03-14 12:19:14 -04:00
export default function() {
2019-04-24 16:37:13 -04:00
return function({ addUtilities, className, theme, variants }) {
2019-03-14 12:35:37 -04:00
const generators = [
(size, modifier) => ({
2019-04-24 16:37:13 -04:00
[className('inset', modifier)]: {
2019-03-14 12:35:37 -04:00
top: `${size}`,
right: `${size}`,
bottom: `${size}`,
left: `${size}`,
2019-03-14 12:19:14 -04:00
},
2019-03-14 12:35:37 -04:00
}),
(size, modifier) => ({
2019-04-24 16:37:13 -04:00
[className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` },
[className('inset-x', modifier)]: { right: `${size}`, left: `${size}` },
2019-03-14 12:35:37 -04:00
}),
(size, modifier) => ({
2019-04-24 16:37:13 -04:00
[className('top', modifier)]: { top: `${size}` },
[className('right', modifier)]: { right: `${size}` },
[className('bottom', modifier)]: { bottom: `${size}` },
[className('left', modifier)]: { left: `${size}` },
2019-03-14 12:35:37 -04:00
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('inset'), generator)
2019-03-14 12:35:37 -04:00
})
addUtilities(utilities, variants('inset'))
2019-03-14 12:19:14 -04:00
}
}