use styled-components@2
and updated all other dependencies
This commit is contained in:
parent
087d420f85
commit
0fc136c6ae
@ -11,6 +11,7 @@
|
|||||||
}]
|
}]
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
|
"styled-components",
|
||||||
"react-hot-loader/babel",
|
"react-hot-loader/babel",
|
||||||
"transform-es2015-modules-commonjs",
|
"transform-es2015-modules-commonjs",
|
||||||
"transform-exponentiation-operator",
|
"transform-exponentiation-operator",
|
||||||
|
@ -86,7 +86,7 @@
|
|||||||
"jsx-a11y/label-has-for": 2,
|
"jsx-a11y/label-has-for": 2,
|
||||||
"jsx-a11y/lang": 2,
|
"jsx-a11y/lang": 2,
|
||||||
"jsx-a11y/no-access-key": 2,
|
"jsx-a11y/no-access-key": 2,
|
||||||
"jsx-a11y/no-marquee": 2,
|
"jsx-a11y/no-distracting-elements": 2,
|
||||||
"jsx-a11y/no-onchange": 2,
|
"jsx-a11y/no-onchange": 2,
|
||||||
"jsx-a11y/no-static-element-interactions": 1,
|
"jsx-a11y/no-static-element-interactions": 1,
|
||||||
"jsx-a11y/onclick-has-focus": 2,
|
"jsx-a11y/onclick-has-focus": 2,
|
||||||
|
@ -41,64 +41,65 @@
|
|||||||
"react-intl": "^2.2.3",
|
"react-intl": "^2.2.3",
|
||||||
"react-intl-redux": "^0.3.0",
|
"react-intl-redux": "^0.3.0",
|
||||||
"react-redux": "^5.0.2",
|
"react-redux": "^5.0.2",
|
||||||
"react-router": "4.0.0-alpha.6",
|
"react-router-dom": "4.0.0-beta.4",
|
||||||
"react-select": "^1.0.0-rc.2",
|
"react-select": "^1.0.0-rc.3",
|
||||||
"reduce-reducers": "^0.1.2",
|
"reduce-reducers": "^0.1.2",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
"redux-actions": "^1.2.0",
|
"redux-actions": "^1.2.1",
|
||||||
"redux-batched-actions": "^0.1.5",
|
"redux-batched-actions": "^0.1.5",
|
||||||
"redux-form": "^6.4.3",
|
"redux-form": "^6.5.0",
|
||||||
"redux-logger": "^2.7.4",
|
"redux-logger": "^2.8.1",
|
||||||
"redux-promise-middleware": "^4.2.0",
|
"redux-promise-middleware": "^4.2.0",
|
||||||
"redux-thunk": "^2.1.0",
|
"redux-thunk": "^2.2.0",
|
||||||
"require-hacker": "^2.1.4",
|
"require-hacker": "^2.1.4",
|
||||||
"reselect": "^2.5.4",
|
"reselect": "^2.5.4",
|
||||||
"style-loader": "^0.13.1",
|
"style-loader": "^0.13.1",
|
||||||
"styled-components": "^1.3.0",
|
"styled-components": "^2.0.0-1",
|
||||||
"svg-react-loader": "^0.3.7",
|
"svg-react-loader": "^0.3.7",
|
||||||
"understood": "^1.0.1",
|
"understood": "^1.0.1",
|
||||||
"url-loader": "^0.5.7"
|
"url-loader": "^0.5.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"ava": "^0.17.0",
|
"ava": "^0.18.1",
|
||||||
"babel-cli": "^6.18.0",
|
"babel-cli": "^6.22.2",
|
||||||
"babel-core": "^6.21.0",
|
"babel-core": "^6.22.1",
|
||||||
"babel-eslint": "^7.1.1",
|
"babel-eslint": "^7.1.1",
|
||||||
"babel-loader": "^6.2.10",
|
"babel-loader": "^6.2.10",
|
||||||
|
"babel-plugin-styled-components": "^1.0.0",
|
||||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||||
"babel-plugin-transform-async-to-generator": "^6.16.0",
|
"babel-plugin-transform-async-to-generator": "^6.22.0",
|
||||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.20.2",
|
"babel-plugin-transform-object-rest-spread": "^6.22.0",
|
||||||
"babel-plugin-transform-runtime": "^6.15.0",
|
"babel-plugin-transform-runtime": "^6.22.0",
|
||||||
"babel-plugin-webpack-alias": "^2.1.2",
|
"babel-plugin-webpack-alias": "^2.1.2",
|
||||||
"babel-plugin-webpack-loaders": "^0.8.0",
|
"babel-plugin-webpack-loaders": "^0.8.0",
|
||||||
"babel-preset-env": "^1.1.8",
|
"babel-preset-env": "^1.1.8",
|
||||||
"babel-preset-react": "^6.16.0",
|
"babel-preset-react": "^6.22.0",
|
||||||
"babel-register": "^6.18.0",
|
"babel-register": "^6.22.0",
|
||||||
"enzyme": "^2.7.0",
|
"enzyme": "^2.7.1",
|
||||||
"eslint": "^3.13.1",
|
"eslint": "^3.15.0",
|
||||||
"eslint-config-semistandard": "^7.0.0",
|
"eslint-config-semistandard": "^7.0.0",
|
||||||
"eslint-config-standard": "^6.2.1",
|
"eslint-config-standard": "^6.2.1",
|
||||||
"eslint-plugin-babel": "^4.0.0",
|
"eslint-plugin-babel": "^4.0.1",
|
||||||
"eslint-plugin-jsx-a11y": "^3.0.2",
|
"eslint-plugin-jsx-a11y": "^4.0.0",
|
||||||
"eslint-plugin-promise": "^3.4.0",
|
"eslint-plugin-promise": "^3.4.0",
|
||||||
"eslint-plugin-react": "^6.9.0",
|
"eslint-plugin-react": "^6.9.0",
|
||||||
"eslint-plugin-standard": "^2.0.1",
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
"fast-async": "^6.2.0",
|
"fast-async": "^6.2.0",
|
||||||
"file-loader": "^0.9.0",
|
"file-loader": "^0.10.0",
|
||||||
"jsdom": "^9.9.1",
|
"jsdom": "^9.10.0",
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4",
|
||||||
"ncp": "^2.0.0",
|
"ncp": "^2.0.0",
|
||||||
"node-hook": "^0.4.0",
|
"node-hook": "^0.4.0",
|
||||||
"nyc": "^10.0.0",
|
"nyc": "^10.1.2",
|
||||||
"pre-commit": "^1.2.2",
|
"pre-commit": "^1.2.2",
|
||||||
"react-addons-test-utils": "^15.4.2",
|
"react-addons-test-utils": "^15.4.2",
|
||||||
"redux-ava": "^2.2.0",
|
"redux-ava": "^2.2.0",
|
||||||
"simple-mock": "^0.7.3",
|
"simple-mock": "^0.7.3",
|
||||||
"tap-xunit": "^1.5.1",
|
"tap-xunit": "^1.7.0",
|
||||||
"thenify": "^3.2.1",
|
"thenify": "^3.2.1",
|
||||||
"webpack": "^2.1.0-beta.25",
|
"webpack": "^2.2.1",
|
||||||
"webpack-dev-server": "^1.16.2",
|
"webpack-dev-server": "^2.3.0",
|
||||||
"webpack-shell-plugin": "^0.5.0"
|
"webpack-shell-plugin": "^0.5.0"
|
||||||
},
|
},
|
||||||
"ava": {
|
"ava": {
|
||||||
|
@ -4,7 +4,7 @@ const Column = require('@ui/components/column');
|
|||||||
const BaseElements = require('@ui/components/base-elements');
|
const BaseElements = require('@ui/components/base-elements');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
const flatten = require('lodash.flatten');
|
const flatten = require('lodash.flatten');
|
||||||
const fns = require('@ui/shared/functions');
|
const fns = require('@ui/shared/functions');
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
const Column = require('@ui/components/column');
|
const Column = require('@ui/components/column');
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
Redirect
|
Redirect
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactIntl = require('react-intl');
|
const ReactIntl = require('react-intl');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
const Li = require('@ui/components/horizontal-list/li');
|
const Li = require('@ui/components/horizontal-list/li');
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const forceArray = require('force-array');
|
const forceArray = require('force-array');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Anchor = require('@ui/components/anchor');
|
const Anchor = require('@ui/components/anchor');
|
||||||
const List = require('@ui/components/list');
|
const List = require('@ui/components/list');
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
const actions = require('@state/actions');
|
const actions = require('@state/actions');
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Container = require('@ui/components/container');
|
const Container = require('@ui/components/container');
|
||||||
const Org = require('@containers/org');
|
const Org = require('@containers/org');
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const NewProject = require('@containers/new-project/new-project');
|
const NewProject = require('@containers/new-project/new-project');
|
||||||
const Billing = require('@containers/new-project/billing');
|
const Billing = require('@containers/new-project/billing');
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const isEmpty = require('lodash.isempty');
|
const isEmpty = require('lodash.isempty');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const NotFound = require('@containers/not-found');
|
const NotFound = require('@containers/not-found');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Section = require('./section');
|
const Section = require('./section');
|
||||||
const Projects = require('@containers/projects');
|
const Projects = require('@containers/projects');
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
// const ReactIntl = require('react-intl');
|
// const ReactIntl = require('react-intl');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
// const ReactRouter = require('react-router');
|
// const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Section = require('./section');
|
const Section = require('./section');
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const Redirect = require('@components/redirect');
|
const Redirect = require('@components/redirect');
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Section = require('./section');
|
const Section = require('./section');
|
||||||
const Services = require('@containers/services');
|
const Services = require('@containers/services');
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactIntl = require('react-intl');
|
const ReactIntl = require('react-intl');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const Button = require('@ui/components/button');
|
const Button = require('@ui/components/button');
|
||||||
const Column = require('@ui/components/column');
|
const Column = require('@ui/components/column');
|
||||||
@ -28,7 +28,6 @@ const {
|
|||||||
} = ReactRouter;
|
} = ReactRouter;
|
||||||
|
|
||||||
const Projects = (props) => {
|
const Projects = (props) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
org = {},
|
org = {},
|
||||||
projects = [],
|
projects = [],
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const Redirect = require('@components/redirect');
|
const Redirect = require('@components/redirect');
|
||||||
|
@ -2,7 +2,7 @@ const React = require('react');
|
|||||||
const ReactIntlRedux = require('react-intl-redux');
|
const ReactIntlRedux = require('react-intl-redux');
|
||||||
const ReactHotLoader = require('react-hot-loader');
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
|
|
||||||
const App = require('@containers/app');
|
const App = require('@containers/app');
|
||||||
const Store = require('@state/store');
|
const Store = require('@state/store');
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
const ReactIntl = require('react-intl');
|
const ReactIntl = require('react-intl');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router-dom');
|
||||||
const createStore = require('@state/store');
|
const createStore = require('@state/store');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
1103
frontend/yarn.lock
1103
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,7 @@
|
|||||||
"es2015"
|
"es2015"
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
|
"styled-components",
|
||||||
"transform-exponentiation-operator",
|
"transform-exponentiation-operator",
|
||||||
"syntax-async-functions",
|
"syntax-async-functions",
|
||||||
["transform-object-rest-spread", {
|
["transform-object-rest-spread", {
|
||||||
|
@ -86,7 +86,7 @@
|
|||||||
"jsx-a11y/label-has-for": 2,
|
"jsx-a11y/label-has-for": 2,
|
||||||
"jsx-a11y/lang": 2,
|
"jsx-a11y/lang": 2,
|
||||||
"jsx-a11y/no-access-key": 2,
|
"jsx-a11y/no-access-key": 2,
|
||||||
"jsx-a11y/no-marquee": 2,
|
"jsx-a11y/no-distracting-elements": 2,
|
||||||
"jsx-a11y/no-onchange": 2,
|
"jsx-a11y/no-onchange": 2,
|
||||||
"jsx-a11y/no-static-element-interactions": 1,
|
"jsx-a11y/no-static-element-interactions": 1,
|
||||||
"jsx-a11y/onclick-has-focus": 2,
|
"jsx-a11y/onclick-has-focus": 2,
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
"chart.js": "^2.4.0",
|
"chart.js": "^2.4.0",
|
||||||
"chartjs-chart-box-plot": "prerelease",
|
"chartjs-chart-box-plot": "prerelease",
|
||||||
"color": "^1.0.3",
|
"color": "^1.0.3",
|
||||||
"d3": "^4.4.1",
|
"d3": "^4.5.0",
|
||||||
"lodash.find": "^4.6.0",
|
"lodash.find": "^4.6.0",
|
||||||
"lodash.first": "^3.0.0",
|
"lodash.first": "^3.0.0",
|
||||||
"lodash.flatten": "^4.4.0",
|
"lodash.flatten": "^4.4.0",
|
||||||
@ -32,43 +32,45 @@
|
|||||||
"random-natural": "^1.0.3",
|
"random-natural": "^1.0.3",
|
||||||
"react": "^15.4.2",
|
"react": "^15.4.2",
|
||||||
"react-dom": "^15.4.2",
|
"react-dom": "^15.4.2",
|
||||||
"react-select": "^1.0.0-rc.2",
|
"react-select": "^1.0.0-rc.3",
|
||||||
"reduce-css-calc": "^1.3.0",
|
"reduce-css-calc": "^1.3.0",
|
||||||
"styled-components": "^1.3.0",
|
"styled-components": "^2.0.0-1",
|
||||||
"svg-react-loader": "^0.3.7",
|
"svg-react-loader": "^0.3.7",
|
||||||
"transform-props-with": "^2.1.0"
|
"transform-props-with": "^2.1.0",
|
||||||
|
"traverse": "^0.6.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@kadira/storybook": "^2.35.3",
|
"@kadira/storybook": "^2.35.3",
|
||||||
"ava": "^0.17.0",
|
"ava": "^0.18.1",
|
||||||
"babel-cli": "^6.18.0",
|
"babel-cli": "^6.22.2",
|
||||||
"babel-core": "^6.21.0",
|
"babel-core": "^6.22.1",
|
||||||
"babel-eslint": "^7.1.1",
|
"babel-eslint": "^7.1.1",
|
||||||
|
"babel-plugin-styled-components": "^1.0.0",
|
||||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.20.2",
|
"babel-plugin-transform-object-rest-spread": "^6.22.0",
|
||||||
"babel-preset-react": "^6.16.0",
|
"babel-preset-react": "^6.22.0",
|
||||||
"babel-register": "^6.18.0",
|
"babel-register": "^6.22.0",
|
||||||
"dangerously-set-inner-html": "2.0.0",
|
"dangerously-set-inner-html": "2.0.0",
|
||||||
"enzyme": "^2.7.0",
|
"enzyme": "^2.7.1",
|
||||||
"eslint": "^3.13.1",
|
"eslint": "^3.15.0",
|
||||||
"eslint-config-semistandard": "^7.0.0",
|
"eslint-config-semistandard": "^7.0.0",
|
||||||
"eslint-config-standard": "^6.2.1",
|
"eslint-config-standard": "^6.2.1",
|
||||||
"eslint-plugin-babel": "^4.0.0",
|
"eslint-plugin-babel": "^4.0.1",
|
||||||
"eslint-plugin-jsx-a11y": "^3.0.2",
|
"eslint-plugin-jsx-a11y": "^4.0.0",
|
||||||
"eslint-plugin-promise": "^3.4.0",
|
"eslint-plugin-promise": "^3.4.0",
|
||||||
"eslint-plugin-react": "^6.9.0",
|
"eslint-plugin-react": "^6.9.0",
|
||||||
"eslint-plugin-standard": "^2.0.1",
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
"jsdom": "^9.9.1",
|
"jsdom": "^9.10.0",
|
||||||
"memory-fs": "^0.4.1",
|
"memory-fs": "^0.4.1",
|
||||||
"node-hook": "^0.4.0",
|
"node-hook": "^0.4.0",
|
||||||
"nyc": "^10.0.0",
|
"nyc": "^10.1.2",
|
||||||
"pre-commit": "^1.2.2",
|
"pre-commit": "^1.2.2",
|
||||||
"react-addons-test-utils": "^15.4.2",
|
"react-addons-test-utils": "^15.4.2",
|
||||||
"st": "^1.2.0",
|
"st": "^1.2.0",
|
||||||
"stylelint": "^7.7.1",
|
"stylelint": "^7.8.0",
|
||||||
"stylelint-config-standard": "^15.0.1",
|
"stylelint-config-standard": "^16.0.0",
|
||||||
"stylelint-processor-styled-components": "^0.0.4",
|
"stylelint-processor-styled-components": "^0.0.4",
|
||||||
"tap-xunit": "^1.5.1"
|
"tap-xunit": "^1.7.0"
|
||||||
},
|
},
|
||||||
"ava": {
|
"ava": {
|
||||||
"failFast": true,
|
"failFast": true,
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
const styled = require('styled-components');
|
const styled = require('styled-components');
|
||||||
|
|
||||||
|
const {
|
||||||
|
css
|
||||||
|
} = styled;
|
||||||
|
|
||||||
// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
||||||
const small = {
|
const small = {
|
||||||
upper: '48rem'
|
upper: '48rem'
|
||||||
@ -26,17 +30,17 @@ const screens = {
|
|||||||
'smallOnly': `${screen} and (max-width: ${small.upper})`,
|
'smallOnly': `${screen} and (max-width: ${small.upper})`,
|
||||||
'small': `${screen} and (min-width: ${small.upper}})`,
|
'small': `${screen} and (min-width: ${small.upper}})`,
|
||||||
// >= 1024px
|
// >= 1024px
|
||||||
'mediumOnly': `${screen} and (min-width: ${medium.lower})
|
'mediumOnly': `${screen} and (min-width: ${medium.lower})
|
||||||
and (max-width: ${medium.upper})`,
|
and (max-width: ${medium.upper})`,
|
||||||
'mediumDown': `${screen} and (max-width: ${medium.upper})`,
|
'mediumDown': `${screen} and (max-width: ${medium.upper})`,
|
||||||
'medium': `${screen} and (min-width: ${medium.lower})`,
|
'medium': `${screen} and (min-width: ${medium.lower})`,
|
||||||
// >= 1200px
|
// >= 1200px
|
||||||
'largeOnly': `${screen} and (min-width: ${large.lower})
|
'largeOnly': `${screen} and (min-width: ${large.lower})
|
||||||
and (max-width: ${large.upper})`,
|
and (max-width: ${large.upper})`,
|
||||||
'largeDown': `${screen} and (max-width: ${large.upper})`,
|
'largeDown': `${screen} and (max-width: ${large.upper})`,
|
||||||
'large': `${screen} and (min-width: 75rem)`,
|
'large': `${screen} and (min-width: 75rem)`,
|
||||||
|
|
||||||
'xlarge': `${screen} and (min-width: ${xlarge.lower})
|
'xlarge': `${screen} and (min-width: ${xlarge.lower})
|
||||||
and (max-width: ${xlarge.upper})`,
|
and (max-width: ${xlarge.upper})`,
|
||||||
'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
|
'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
|
||||||
};
|
};
|
||||||
@ -44,9 +48,9 @@ const screens = {
|
|||||||
const breakpoints = Object.keys(screens).reduce((acc, label) => {
|
const breakpoints = Object.keys(screens).reduce((acc, label) => {
|
||||||
return {
|
return {
|
||||||
...acc,
|
...acc,
|
||||||
[label]: (...args) => styled.css`
|
[label]: (...args) => css`
|
||||||
@media ${screens[label]} {
|
@media ${screens[label]} {
|
||||||
${styled.css(...args)}
|
${css(...args)}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
};
|
};
|
||||||
|
757
ui/yarn.lock
757
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user