Split alignItems into separate plugin

This commit is contained in:
Adam Wathan 2019-02-26 10:09:06 -05:00
parent 7f1c7f578e
commit 435a7f97de
4 changed files with 27 additions and 15 deletions

View file

@ -21,6 +21,7 @@ module.exports = {
display: ['responsive'],
flexDirection: ['responsive'],
flexWrap: ['responsive'],
alignItems: ['responsive'],
flexbox: ['responsive'],
float: ['responsive'],
fontFamily: ['responsive'],

View file

@ -15,6 +15,7 @@ import cursor from './plugins/cursor'
import display from './plugins/display'
import flexDirection from './plugins/flexDirection'
import flexWrap from './plugins/flexWrap'
import alignItems from './plugins/alignItems'
import flexbox from './plugins/flexbox'
import float from './plugins/float'
import fontFamily from './plugins/fontFamily'
@ -91,6 +92,7 @@ export default function(config) {
display,
flexDirection,
flexWrap,
alignItems,
flexbox,
float,
fontFamily,

24
src/plugins/alignItems.js Normal file
View file

@ -0,0 +1,24 @@
export default function({ variants }) {
return function({ addUtilities }) {
addUtilities(
{
'.items-start': {
'align-items': 'flex-start',
},
'.items-end': {
'align-items': 'flex-end',
},
'.items-center': {
'align-items': 'center',
},
'.items-baseline': {
'align-items': 'baseline',
},
'.items-stretch': {
'align-items': 'stretch',
},
},
variants
)
}
}

View file

@ -2,21 +2,6 @@ export default function({ variants }) {
return function({ addUtilities }) {
addUtilities(
{
'.items-start': {
'align-items': 'flex-start',
},
'.items-end': {
'align-items': 'flex-end',
},
'.items-center': {
'align-items': 'center',
},
'.items-baseline': {
'align-items': 'baseline',
},
'.items-stretch': {
'align-items': 'stretch',
},
'.self-auto': {
'align-self': 'auto',
},