wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Support negative values for inset

Browse source
This commit is contained in:
Adam Wathan 2019-04-24 16:37:13 -04:00
parent 6bca0266db
commit c6ae957aff
6 changed files with 76 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/plugins/inset.js
View file

@ -1,10 +1,10 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, className, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`inset-${modifier}`)}`]: {
[className('inset', modifier)]: {
top: `${size}`,
right: `${size}`,
bottom: `${size}`,
@ -12,14 +12,14 @@ export default function() {
},
}),
(size, modifier) => ({
[`.${e(`inset-y-${modifier}`)}`]: { top: `${size}`, bottom: `${size}` },
[`.${e(`inset-x-${modifier}`)}`]: { right: `${size}`, left: `${size}` },
[className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` },
[className('inset-x', modifier)]: { right: `${size}`, left: `${size}` },
}),
(size, modifier) => ({
[`.${e(`top-${modifier}`)}`]: { top: `${size}` },
[`.${e(`right-${modifier}`)}`]: { right: `${size}` },
[`.${e(`bottom-${modifier}`)}`]: { bottom: `${size}` },
[`.${e(`left-${modifier}`)}`]: { left: `${size}` },
[className('top', modifier)]: { top: `${size}` },
[className('right', modifier)]: { right: `${size}` },
[className('bottom', modifier)]: { bottom: `${size}` },
[className('left', modifier)]: { left: `${size}` },
}),
]

20
src/plugins/margin.js
View file

@ -1,30 +1,26 @@
import _ from 'lodash'
function className(prefix, modifier) {
return _.startsWith(modifier, '-') ? `-${prefix}-${modifier.slice(1)}` : `${prefix}-${modifier}`
}
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, className, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(className('m', modifier))}`]: { margin: `${size}` },
[className('m', modifier)]: { margin: `${size}` },
}),
(size, modifier) => ({
[`.${e(className('my', modifier))}`]: {
[className('my', modifier)]: {
'margin-top': `${size}`,
'margin-bottom': `${size}`,
},
[`.${e(className('mx', modifier))}`]: {
[className('mx', modifier)]: {
'margin-left': `${size}`,
'margin-right': `${size}`,
},
}),
(size, modifier) => ({
[`.${e(className('mt', modifier))}`]: { 'margin-top': `${size}` },
[`.${e(className('mr', modifier))}`]: { 'margin-right': `${size}` },
[`.${e(className('mb', modifier))}`]: { 'margin-bottom': `${size}` },
[`.${e(className('ml', modifier))}`]: { 'margin-left': `${size}` },
[className('mt', modifier)]: { 'margin-top': `${size}` },
[className('mr', modifier)]: { 'margin-right': `${size}` },
[className('mb', modifier)]: { 'margin-bottom': `${size}` },
[className('ml', modifier)]: { 'margin-left': `${size}` },
}),
]