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

Port flexbox module to plugin

Browse source
This commit is contained in:
Adam Wathan 2019-01-09 21:23:27 -05:00
parent dce3b5fcb0
commit fd1729ec81
4 changed files with 119 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/defaultPlugins.js
View file

@ -1,3 +1,4 @@
import flexbox from './plugins/flexbox'
import float from './plugins/float'
import fonts from './plugins/fonts'
import fontWeights from './plugins/fontWeights'
@ -36,6 +37,7 @@ import zIndex from './plugins/zIndex'
export default function (config) {
return [
config.modules.flexbox === false ? () => {} : flexbox(),
config.modules.float === false ? () => {} : float(),
config.modules.fonts === false ? () => {} : fonts(),
config.modules.fontWeights === false ? () => {} : fontWeights(),

117
src/generators/flexbox.js
View file

@ -1,117 +0,0 @@
import defineClasses from '../util/defineClasses'
export default function() {
return defineClasses({
flex: {
display: 'flex',
},
'inline-flex': {
display: 'inline-flex',
},
'flex-row': {
'flex-direction': 'row',
},
'flex-row-reverse': {
'flex-direction': 'row-reverse',
},
'flex-col': {
'flex-direction': 'column',
},
'flex-col-reverse': {
'flex-direction': 'column-reverse',
},
'flex-wrap': {
'flex-wrap': 'wrap',
},
'flex-wrap-reverse': {
'flex-wrap': 'wrap-reverse',
},
'flex-no-wrap': {
'flex-wrap': 'nowrap',
},
'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',
},
'self-start': {
'align-self': 'flex-start',
},
'self-end': {
'align-self': 'flex-end',
},
'self-center': {
'align-self': 'center',
},
'self-stretch': {
'align-self': 'stretch',
},
'justify-start': {
'justify-content': 'flex-start',
},
'justify-end': {
'justify-content': 'flex-end',
},
'justify-center': {
'justify-content': 'center',
},
'justify-between': {
'justify-content': 'space-between',
},
'justify-around': {
'justify-content': 'space-around',
},
'content-center': {
'align-content': 'center',
},
'content-start': {
'align-content': 'flex-start',
},
'content-end': {
'align-content': 'flex-end',
},
'content-between': {
'align-content': 'space-between',
},
'content-around': {
'align-content': 'space-around',
},
'flex-1': {
flex: '1 1 0%',
},
'flex-auto': {
flex: '1 1 auto',
},
'flex-initial': {
flex: '0 1 auto',
},
'flex-none': {
flex: 'none',
},
'flex-grow': {
'flex-grow': '1',
},
'flex-shrink': {
'flex-shrink': '1',
},
'flex-no-grow': {
'flex-grow': '0',
},
'flex-no-shrink': {
'flex-shrink': '0',
},
})
}

117
src/plugins/flexbox.js Normal file
View file

@ -0,0 +1,117 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.flex': {
display: 'flex',
},
'.inline-flex': {
display: 'inline-flex',
},
'.flex-row': {
'flex-direction': 'row',
},
'.flex-row-reverse': {
'flex-direction': 'row-reverse',
},
'.flex-col': {
'flex-direction': 'column',
},
'.flex-col-reverse': {
'flex-direction': 'column-reverse',
},
'.flex-wrap': {
'flex-wrap': 'wrap',
},
'.flex-wrap-reverse': {
'flex-wrap': 'wrap-reverse',
},
'.flex-no-wrap': {
'flex-wrap': 'nowrap',
},
'.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',
},
'.self-start': {
'align-self': 'flex-start',
},
'.self-end': {
'align-self': 'flex-end',
},
'.self-center': {
'align-self': 'center',
},
'.self-stretch': {
'align-self': 'stretch',
},
'.justify-start': {
'justify-content': 'flex-start',
},
'.justify-end': {
'justify-content': 'flex-end',
},
'.justify-center': {
'justify-content': 'center',
},
'.justify-between': {
'justify-content': 'space-between',
},
'.justify-around': {
'justify-content': 'space-around',
},
'.content-center': {
'align-content': 'center',
},
'.content-start': {
'align-content': 'flex-start',
},
'.content-end': {
'align-content': 'flex-end',
},
'.content-between': {
'align-content': 'space-between',
},
'.content-around': {
'align-content': 'space-around',
},
'.flex-1': {
flex: '1 1 0%',
},
'.flex-auto': {
flex: '1 1 auto',
},
'.flex-initial': {
flex: '0 1 auto',
},
'.flex-none': {
flex: 'none',
},
'.flex-grow': {
'flex-grow': '1',
},
'.flex-shrink': {
'flex-shrink': '1',
},
'.flex-no-grow': {
'flex-grow': '0',
},
'.flex-no-shrink': {
'flex-shrink': '0',
},
}, config('modules.flexbox'))
}
}

2
src/utilityModules.js
View file

@ -12,7 +12,6 @@ import borderStyle from './generators/borderStyle'
import borderWidths from './generators/borderWidths'
import cursor from './generators/cursor'
import display from './generators/display'
import flexbox from './generators/flexbox'
export default [
{ name: 'lists', generator: lists },
@ -29,5 +28,4 @@ export default [
{ name: 'borderWidths', generator: borderWidths },
{ name: 'cursor', generator: cursor },
{ name: 'display', generator: display },
{ name: 'flexbox', generator: flexbox },
]