ui grid system - grid, row and column
This commit is contained in:
parent
73ab7705af
commit
410f5a93e5
@ -22,7 +22,7 @@ const plugins = {
|
||||
}),
|
||||
'define-plugin': new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env['NODE_ENV'] || 'development'),
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||
APP_NAME: JSON.stringify(pkg.name),
|
||||
APP_VERSION: JSON.stringify(pkg.version)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const Button = require('../src/components/grid/readme.md');
|
||||
const Button = require('../src/components/column/readme.md');
|
||||
const InnerHTML = require('dangerously-set-inner-html');
|
||||
|
||||
const {
|
||||
|
@ -13,6 +13,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"lodash.flatten": "^4.4.0",
|
||||
"react": "^15.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -42,6 +43,7 @@
|
||||
"nyc": "^8.3.1",
|
||||
"postcss-cssnext": "^2.8.0",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-mixins": "^5.4.0",
|
||||
"postcss-modules-values": "^1.2.2",
|
||||
"pre-commit": "^1.1.3",
|
||||
"raw-loader": "^0.5.1",
|
||||
|
62
ui/src/components/column/index.js
Normal file
62
ui/src/components/column/index.js
Normal file
@ -0,0 +1,62 @@
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Col.js
|
||||
*/
|
||||
|
||||
const flatten = require('lodash.flatten');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const breakpoints = [
|
||||
'xs',
|
||||
'sm',
|
||||
'md',
|
||||
'lg'
|
||||
];
|
||||
|
||||
const getClasses = (props) => {
|
||||
return flatten(breakpoints.map((size) => {
|
||||
const number = props[size];
|
||||
const offset = props[`${size}Offset`];
|
||||
|
||||
return [
|
||||
number ? styles[`${size}-${number}`] : '',
|
||||
offset ? styles[`${size}-offset-${offset}`] : ''
|
||||
];
|
||||
})).filter(Boolean);
|
||||
};
|
||||
|
||||
const Column = module.exports = (props) => {
|
||||
const {
|
||||
className,
|
||||
reverse,
|
||||
children,
|
||||
style
|
||||
} = props;
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.column,
|
||||
reverse ? styles.reverse : '',
|
||||
...getClasses(props)
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Column.propTypes = {
|
||||
reverse: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node,
|
||||
...breakpoints.reduce((all, bp) => ({
|
||||
...all,
|
||||
[`${bp}Offset`]: React.PropTypes.number,
|
||||
[bp]: React.PropTypes.number
|
||||
}), {})
|
||||
};
|
64
ui/src/components/column/readme.md
Normal file
64
ui/src/components/column/readme.md
Normal file
@ -0,0 +1,64 @@
|
||||
# `<Column>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Grid = require('../grid');
|
||||
const Row = require('../row');
|
||||
const Column = require('./index');
|
||||
|
||||
const styles = {
|
||||
grid: {
|
||||
backgroundColor: '#FFEBEE'
|
||||
},
|
||||
row: {
|
||||
backgroundColor: '#EF5350'
|
||||
},
|
||||
column: {
|
||||
backgroundColor: '#B71C1C',
|
||||
textAlign: 'center'
|
||||
},
|
||||
p: {
|
||||
color: 'white'
|
||||
}
|
||||
};
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid style={styles.grid}>
|
||||
<Row style={styles.row} around>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>1</p>
|
||||
</Column>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>2</p>
|
||||
</Column>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>3</p>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Grid = require('ui/grid');
|
||||
const Row = require('ui/row');
|
||||
const Column = require('ui/index');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Grid>
|
||||
<Row around>
|
||||
<Column xs={2}>1</Column>
|
||||
<Column xs={2}>2</Column>
|
||||
<Column xs={2}>3</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
```
|
152
ui/src/components/column/style.css
Normal file
152
ui/src/components/column/style.css
Normal file
@ -0,0 +1,152 @@
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
||||
*/
|
||||
|
||||
@value half-gutter-width from "../../constants/sizes.css";
|
||||
@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
|
||||
|
||||
:root {
|
||||
--half-gutter-width: half-gutter-width;
|
||||
}
|
||||
|
||||
@define-mixin viewport $size {
|
||||
&.$(size) {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.$(size)-1 {
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-2 {
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-3 {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
&.$(size)-4 {
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-5 {
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-6 {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
&.$(size)-7 {
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-8 {
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-9 {
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
&.$(size)-10 {
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-11 {
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-12 {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.$(size)-offset-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
&.$(size)-offset-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: var(--half-gutter-width, 0.5rem);
|
||||
padding-left: var(--half-gutter-width, 0.5rem);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
@mixin viewport xs;
|
||||
|
||||
@media sm-viewport {
|
||||
@mixin viewport sm;
|
||||
}
|
||||
|
||||
@media md-viewport {
|
||||
@mixin viewport md;
|
||||
}
|
||||
|
||||
@media lg-viewport {
|
||||
@mixin viewport lg;
|
||||
}
|
||||
}
|
@ -1,16 +1,25 @@
|
||||
// based on https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const style = require('./style.css');
|
||||
const classNames = require('classnames');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Grid = module.exports = ({
|
||||
fluid = false,
|
||||
children
|
||||
className,
|
||||
children,
|
||||
style
|
||||
}) => {
|
||||
const className = style[fluid ? 'container-fluid' : 'container'];
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles[fluid ? 'container-fluid' : 'container']
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@ -18,5 +27,7 @@ const Grid = module.exports = ({
|
||||
|
||||
Grid.propTypes = {
|
||||
fluid: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node
|
||||
}
|
||||
};
|
||||
|
@ -21,20 +21,16 @@
|
||||
padding-left: var(--outer-margin);
|
||||
}
|
||||
|
||||
@media sm-viewport {
|
||||
.container {
|
||||
@media sm-viewport {
|
||||
width: var(--container-sm, 46rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media md-viewport {
|
||||
.container {
|
||||
width: var(--container-md, 61rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media lg-viewport {
|
||||
.container {
|
||||
width: var(--container-lg, 71rem);
|
||||
}
|
||||
}
|
||||
|
92
ui/src/components/row/index.js
Normal file
92
ui/src/components/row/index.js
Normal file
@ -0,0 +1,92 @@
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js
|
||||
*/
|
||||
|
||||
const flatten = require('lodash.flatten');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const breakpoints = [
|
||||
'xs',
|
||||
'sm',
|
||||
'md',
|
||||
'lg'
|
||||
];
|
||||
|
||||
const modifiers = [
|
||||
'start',
|
||||
'center',
|
||||
'end',
|
||||
'top',
|
||||
'middle',
|
||||
'bottom',
|
||||
'around',
|
||||
'between',
|
||||
'first',
|
||||
'last'
|
||||
];
|
||||
|
||||
const getClasses = (props) => {
|
||||
return flatten(modifiers.map((name) => {
|
||||
const value = props[name];
|
||||
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bps = (() => {
|
||||
if (value === true) {
|
||||
return breakpoints
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return [value];
|
||||
})();
|
||||
|
||||
return flatten(bps.map(bp => styles[`${name}-${bp}`]));
|
||||
})).filter(Boolean);
|
||||
};
|
||||
|
||||
const Row = module.exports = (props) => {
|
||||
const {
|
||||
className,
|
||||
reverse,
|
||||
children,
|
||||
style
|
||||
} = props;
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.row,
|
||||
reverse ? styles.reverse : '',
|
||||
...getClasses(props)
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ModificatorType = React.PropTypes.oneOfType([
|
||||
React.PropTypes.bool,
|
||||
React.PropTypes.arrayOf(React.PropTypes.oneOf(breakpoints)),
|
||||
React.PropTypes.oneOf(breakpoints)
|
||||
]);
|
||||
|
||||
Row.propTypes = {
|
||||
reverse: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node,
|
||||
...modifiers.reduce((all, m) => ({
|
||||
...all,
|
||||
[m]: ModificatorType
|
||||
}), {})
|
||||
};
|
22
ui/src/components/row/readme.md
Normal file
22
ui/src/components/row/readme.md
Normal file
@ -0,0 +1,22 @@
|
||||
# `<Row>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Row = require('./index.js');
|
||||
const Grid = require('../grid');
|
||||
const Button = require('../button');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid>
|
||||
<Row center='xs' start='sm'>
|
||||
<Button>1</Button>
|
||||
<Button>2</Button>
|
||||
</Row>
|
||||
</Grid>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
85
ui/src/components/row/style.css
Normal file
85
ui/src/components/row/style.css
Normal file
@ -0,0 +1,85 @@
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
||||
*/
|
||||
|
||||
@value gutter-compensation from "../../constants/sizes.css";
|
||||
@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
|
||||
|
||||
:root {
|
||||
--outer-margin: outer-margin;
|
||||
--gutter-compensation: gutter-compensation;
|
||||
}
|
||||
|
||||
@define-mixin viewport $size {
|
||||
&.start-$(size) {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&.center-$(size) {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.end-$(size) {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
&.top-$(size) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.middle-$(size) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.bottom-$(size) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&.around-$(size) {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&.between-$(size) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.first-$(size) {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
&.last-$(size) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-right: var(--gutter-compensation, -0.5rem);
|
||||
margin-left: var(--gutter-compensation, -0.5rem);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@mixin viewport xs;
|
||||
|
||||
@media sm-viewport {
|
||||
@mixin viewport sm;
|
||||
}
|
||||
|
||||
@media md-viewport {
|
||||
@mixin viewport md;
|
||||
}
|
||||
|
||||
@media lg-viewport {
|
||||
@mixin viewport lg;
|
||||
}
|
||||
}
|
@ -13,6 +13,7 @@ const plugins = {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require('postcss-modules-values'),
|
||||
require('postcss-mixins')(),
|
||||
require('postcss-cssnext')()
|
||||
]
|
||||
},
|
||||
|
45
ui/yarn.lock
45
ui/yarn.lock
@ -1272,6 +1272,10 @@ callsites@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
|
||||
|
||||
camelcase-css@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
|
||||
|
||||
camelcase-keys@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
|
||||
@ -2671,6 +2675,16 @@ globby@^5.0.0:
|
||||
pify "^2.0.0"
|
||||
pinkie-promise "^2.0.0"
|
||||
|
||||
globby@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/globby/-/globby-6.0.0.tgz#8f5710eda32296ac53f011a97dccc70e936685dc"
|
||||
dependencies:
|
||||
array-union "^1.0.1"
|
||||
glob "^7.0.3"
|
||||
object-assign "^4.0.1"
|
||||
pify "^2.0.0"
|
||||
pinkie-promise "^2.0.0"
|
||||
|
||||
got@^5.0.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.yarnpkg.com/got/-/got-5.6.0.tgz#bb1d7ee163b78082bbc8eb836f3f395004ea6fbf"
|
||||
@ -3437,7 +3451,7 @@ lodash.filter@^4.4.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
|
||||
|
||||
lodash.flatten@^4.2.0, lodash.flatten@^4.4.0:
|
||||
lodash.flatten, lodash.flatten@^4.2.0, lodash.flatten@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
|
||||
|
||||
@ -4363,6 +4377,13 @@ postcss-initial@^1.3.1:
|
||||
lodash.template "^4.2.4"
|
||||
postcss "^5.0.19"
|
||||
|
||||
postcss-js@^0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-0.1.3.tgz#8c0a5daa1c918b3073c4806a3c5b332c67250c03"
|
||||
dependencies:
|
||||
camelcase-css "^1.0.1"
|
||||
postcss "^5.0.21"
|
||||
|
||||
postcss-load-config@^1.0.0-rc:
|
||||
version "1.0.0-rc"
|
||||
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0-rc.tgz#8aed0d0fb94afe2c1ab0ba2ca69da3af5079e2cc"
|
||||
@ -4458,6 +4479,16 @@ postcss-minify-selectors@^2.0.4:
|
||||
postcss "^5.0.14"
|
||||
postcss-selector-parser "^2.0.0"
|
||||
|
||||
postcss-mixins:
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-5.4.0.tgz#68b4705d1f2c505921f4a2f55bcf72a03b56fc01"
|
||||
dependencies:
|
||||
globby "^6.0.0"
|
||||
postcss "^5.2.4"
|
||||
postcss-js "^0.1.3"
|
||||
postcss-simple-vars "^3.0.0"
|
||||
sugarss "^0.2.0"
|
||||
|
||||
postcss-modules-extract-imports@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
|
||||
@ -4582,6 +4613,12 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0:
|
||||
indexes-of "^1.0.1"
|
||||
uniq "^1.0.1"
|
||||
|
||||
postcss-simple-vars@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-3.0.0.tgz#1fa4ccb4b7151d9f0d52fb8ea19a15c1319599d6"
|
||||
dependencies:
|
||||
postcss "^5.0.21"
|
||||
|
||||
postcss-svgo@^2.1.1:
|
||||
version "2.1.5"
|
||||
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
|
||||
@ -5456,6 +5493,12 @@ style-loader@^0.13.1:
|
||||
dependencies:
|
||||
loader-utils "^0.2.7"
|
||||
|
||||
sugarss@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-0.2.0.tgz#ac34237563327c6ff897b64742bf6aec190ad39e"
|
||||
dependencies:
|
||||
postcss "^5.2.4"
|
||||
|
||||
supports-color@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
|
Loading…
Reference in New Issue
Block a user