From 0a07284d2e179cb3c1752647f2761d427e17cea8 Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Thu, 1 Jul 2021 20:38:47 +0200 Subject: [PATCH 01/16] [gitignore] Usual suspects --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7ab6733 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +package-lock.json +node_modules/ +yarn.lock From 81ac99c0f6115eeda4ed62c42b648b9914a72186 Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Sat, 3 Jul 2021 14:26:46 +0200 Subject: [PATCH 02/16] =?UTF-8?q?[style]=20Give=20ourselves=20a=20pass=20o?= =?UTF-8?q?ver=20=E2=80=9Cno=20anonymous=20default=20export=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Functional React + ES6 sort of naturally want anonymous default exports a lot of the time --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index b0fb20f..561e959 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "version": "1.0.5", "description": "Color palette combination contrast tester", "main": "index.js", + "eslintConfig": { + "rules": { + "import/no-anonymous-default-export": 0 + } + }, "scripts": { "clean": "rm -r demos & rm bundle.js & rm index.html", "copy": "cp -r colorable/* . && rm -r colorable", From 7df3e502506210b80e8dcdfb7e35d8e0fc294bb8 Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Mon, 5 Jul 2021 10:27:47 +0200 Subject: [PATCH 03/16] [deadcode] misc. - Toolbar.jsx: whole file - Weed out commented-out code - Eliminate code that would only be reachable if the commented-out code was uncommented --- docs/components/ColorList.jsx | 1 - docs/components/MatrixDemo.jsx | 32 +++---------------------------- docs/components/Toolbar.jsx | 35 ---------------------------------- 3 files changed, 3 insertions(+), 65 deletions(-) delete mode 100644 docs/components/Toolbar.jsx diff --git a/docs/components/ColorList.jsx b/docs/components/ColorList.jsx index 6f1fa52..d07e24b 100644 --- a/docs/components/ColorList.jsx +++ b/docs/components/ColorList.jsx @@ -31,7 +31,6 @@ var ColorList = React.createClass({ self.props.updateColors(colors) } var ref = 'color-' + i - var id = color var itemId = 'color-item-' + i return (
  • diff --git a/docs/components/MatrixDemo.jsx b/docs/components/MatrixDemo.jsx index c757989..6c9190e 100644 --- a/docs/components/MatrixDemo.jsx +++ b/docs/components/MatrixDemo.jsx @@ -1,46 +1,25 @@ var React = require('react') -//var qs = require('query-string') -//var _debounce = require('lodash').debounce var colorable = require('../..') var SuperModal = require('./SuperModal.jsx') var MatrixRow = require('./MatrixRow.jsx') var ColorList = require('./ColorList.jsx') -var Toolbar = require('./Toolbar.jsx') var ColorPreview = require('./ColorPreview.jsx') var MatrixDemo = React.createClass({ getInitialState: function() { - var params = {} console.log('query', this.props.query); - if (typeof window !== 'undefined') { - //params = qs.parse(window.location.search) - //params = this.props.query - } - if (params.colors) { - var colors = params.colors.split('.') - } else { - var colors = this.props.colors - } + const colors = this.props.colors + return { - colors: colors, + colors, matrix: colorable(colors), threshold: 0, modalColor: false, } }, - //pushState: _debounce(function() { - // if (!window) return false - // var colorString = this.state.colors.join('.') - // var params = { - // colors: colorString, - // } - // var query = '?' + qs.stringify(params) - // window.history.pushState(params, 'Colorable', query) - //}, 200), - updateColors: function(colors) { this.setState({ colors: colors }) this.updateMatrix() @@ -68,10 +47,6 @@ var MatrixDemo = React.createClass({ this.setState({ modalColor: false }) }, - componentDidUpdate: function() { - //this.pushState() - }, - renderRow: function(color, i) { return ( -
    -
    - -
    -
    - ) - } - -}) - -module.exports = Toolbar - From 6fcd482beb05b69e81552f25b7d38e99dd456991 Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Wed, 30 Jun 2021 11:35:44 +0200 Subject: [PATCH 04/16] [modernize] Webpack (and Babel) - Use babel-loader rather than jsx-loader - Configure Babel for React (in package.json) - Work around some nonsense with `self` as per https://webpack.js.org/configuration/output/ - Make it work with modern Webpack, both in development mode (`yarn start`, `yarn webpack`) and in production mode (`yarn prod`) - Add a comment on why we use Webpack in the first place --- package.json | 19 ++++++++++++++----- webpack.config.js | 17 +++++++++++++---- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 561e959..451fb00 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "version": "1.0.5", "description": "Color palette combination contrast tester", "main": "index.js", + "babel": { + "presets": [ + "@babel/react" + ] + }, "eslintConfig": { "rules": { "import/no-anonymous-default-export": 0 @@ -11,10 +16,10 @@ "scripts": { "clean": "rm -r demos & rm bundle.js & rm index.html", "copy": "cp -r colorable/* . && rm -r colorable", - "webpack": "webpack --progress --colors", - "webpack-p": "webpack -p --progress --colors", + "webpack": "webpack --mode=development --progress", + "webpack-p": "webpack --mode=production --progress", "prod": "npm run clean && npm run webpack-p && npm run copy", - "dev": "webpack-dev-server --progress --colors", + "dev": "webpack serve --mode=development", "start": "npm run dev" }, "author": "Brent Jackson", @@ -24,6 +29,9 @@ "lodash": "^3.1.0" }, "devDependencies": { + "@babel/core": "^7.14.6", + "@babel/preset-react": "^7.14.5", + "babel-loader": "^8.2.2", "basscss": "^7.0.0-beta.2", "classnames": "^2.1.2", "colors.css": "^2.3.0", @@ -37,8 +45,9 @@ "react-hsl-sliders": "^2.0.0", "react-router": "^0.13.3", "static-site-generator-webpack-plugin": "^1.0.0", - "webpack": "^1.9.10", - "webpack-dev-server": "^1.9.0" + "webpack": "^5.41.1", + "webpack-cli": "^4.7.2", + "webpack-dev-server": "^3.11.2" }, "directories": { "test": "test" diff --git a/webpack.config.js b/webpack.config.js index 7049d77..567b772 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,11 @@ +/** + * Webpack config for the static documentation + * + * **This only builds the docs.** The main matter of this module, + * index.js is useable as-is in node.js (and should be transpiled + * to use in the browser from your project, in a way that is + * outside the scope of colorable itself). + */ var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'); var data = require('./docs/data'); @@ -10,13 +18,14 @@ module.exports = { filename: 'bundle.js', path: __dirname, //publicPath: '/colorable/', - libraryTarget: 'umd' + libraryTarget: 'umd', + globalObject: 'this' // There are chunks of `self` in UMD + // by default for some reason }, module: { - loaders: [ - { test: /\.jsx$/, loader: 'jsx-loader' }, - { test: /\.json$/, loader: 'json-loader' }, + rules: [ + { test: /\.jsx$/, exclude: /node_modules/, use: 'babel-loader' }, ] }, From 158645f3d529ac5d0aaf34940048bd090216a03c Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Wed, 30 Jun 2021 11:33:20 +0200 Subject: [PATCH 05/16] [modernize] React MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use newest version - React.createClass → createReactClass, as per https://fr.reactjs.org/docs/react-without-es6.html - React.PropTypes → require('prop-types') - Kludge: inject React.createClass for the benefit of react-hsl-sliders --- docs/components/Ad.jsx | 3 ++- docs/components/Badge.jsx | 3 ++- docs/components/Body.jsx | 3 ++- docs/components/Chip.jsx | 3 ++- docs/components/ColorList.jsx | 3 ++- docs/components/ColorListItem.jsx | 6 ++++-- docs/components/ColorPreview.jsx | 3 ++- docs/components/Demos.jsx | 3 ++- docs/components/Footer.jsx | 3 ++- docs/components/ForegroundBackgroundForm.jsx | 6 +++++- docs/components/Head.jsx | 3 ++- docs/components/Header.jsx | 3 ++- docs/components/HeadingBadge.jsx | 3 ++- docs/components/Index.jsx | 3 ++- docs/components/MatrixDemo.jsx | 3 ++- docs/components/MatrixRow.jsx | 3 ++- docs/components/Nav.jsx | 3 ++- docs/components/Readme.jsx | 3 ++- docs/components/Root.jsx | 3 ++- docs/components/SuperModal.jsx | 3 ++- docs/components/TextDemo.jsx | 3 ++- docs/components/ThresholdToggle.jsx | 3 ++- docs/components/TweetButton.jsx | 3 ++- package.json | 6 ++++-- 24 files changed, 55 insertions(+), 26 deletions(-) diff --git a/docs/components/Ad.jsx b/docs/components/Ad.jsx index ddfc711..f4ddcec 100644 --- a/docs/components/Ad.jsx +++ b/docs/components/Ad.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var Ad = React.createClass({ +var Ad = createReactClass({ render: function() { return ( diff --git a/docs/components/Badge.jsx b/docs/components/Badge.jsx index 8bb1bda..2a8e954 100644 --- a/docs/components/Badge.jsx +++ b/docs/components/Badge.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var Badge = React.createClass({ +var Badge = createReactClass({ render: function () { diff --git a/docs/components/Body.jsx b/docs/components/Body.jsx index 2d06845..4a3e9c1 100644 --- a/docs/components/Body.jsx +++ b/docs/components/Body.jsx @@ -4,8 +4,9 @@ var Header = require('./Header.jsx') var Footer = require('./Footer.jsx') var Router = require('react-router') var RouteHandler = Router.RouteHandler +var createReactClass = require('create-react-class') -var Body = React.createClass({ +var Body = createReactClass({ render: function () { return ( diff --git a/docs/components/Chip.jsx b/docs/components/Chip.jsx index 3dff04d..dd63771 100644 --- a/docs/components/Chip.jsx +++ b/docs/components/Chip.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var Badge = require('./Badge.jsx') -var Chip = React.createClass({ +var Chip = createReactClass({ openModal: function() { this.props.openModal(this.props) diff --git a/docs/components/ColorList.jsx b/docs/components/ColorList.jsx index d07e24b..ec20aeb 100644 --- a/docs/components/ColorList.jsx +++ b/docs/components/ColorList.jsx @@ -1,8 +1,9 @@ var React = require('react') var ColorListItem = require('./ColorListItem.jsx') +var createReactClass = require('create-react-class') -var ColorList = React.createClass({ +var ColorList = createReactClass({ getInitialState: function() { return { diff --git a/docs/components/ColorListItem.jsx b/docs/components/ColorListItem.jsx index 1cacf54..5bff5f4 100644 --- a/docs/components/ColorListItem.jsx +++ b/docs/components/ColorListItem.jsx @@ -1,13 +1,15 @@ var React = require('react') +var createReactClass = require('create-react-class') +var PropTypes = require('prop-types') var Color = require('color') var HslSliders = require('react-hsl-sliders') -var ColorListItem = React.createClass({ +var ColorListItem = createReactClass({ propTypes: { - id: React.PropTypes.string + id: PropTypes.string }, handleChange: function(e) { diff --git a/docs/components/ColorPreview.jsx b/docs/components/ColorPreview.jsx index dc4c6e0..bade394 100644 --- a/docs/components/ColorPreview.jsx +++ b/docs/components/ColorPreview.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var HeadingBadge = require('./HeadingBadge.jsx') -var ColorPreview = React.createClass({ +var ColorPreview = createReactClass({ getDefaultProps: function () { return { diff --git a/docs/components/Demos.jsx b/docs/components/Demos.jsx index 9090014..cd3ce64 100644 --- a/docs/components/Demos.jsx +++ b/docs/components/Demos.jsx @@ -1,8 +1,9 @@ var React = require('react') var Ad = require('./Ad.jsx') +var createReactClass = require('create-react-class') -var Demos = React.createClass({ +var Demos = createReactClass({ renderLink: function(item, i) { return ( diff --git a/docs/components/Footer.jsx b/docs/components/Footer.jsx index c0a6ed1..41de57b 100644 --- a/docs/components/Footer.jsx +++ b/docs/components/Footer.jsx @@ -1,7 +1,8 @@ var React = require('react'); +var createReactClass = require('create-react-class') -var Footer = React.createClass({ +var Footer = createReactClass({ render: function() { return ( diff --git a/docs/components/ForegroundBackgroundForm.jsx b/docs/components/ForegroundBackgroundForm.jsx index 61a5af3..f9e2b9d 100644 --- a/docs/components/ForegroundBackgroundForm.jsx +++ b/docs/components/ForegroundBackgroundForm.jsx @@ -1,9 +1,13 @@ var React = require('react') +var createReactClass = require('create-react-class') + +React.createClass = createReactClass // Lest we have to patch react-hsl-sliders too + var Color = require('color') var HslSliders = require('react-hsl-sliders') -var ForegroundBackgroundForm = React.createClass({ +var ForegroundBackgroundForm = createReactClass({ handleForegroundChange: function (e) { this.props.setForeground(e.target.value) diff --git a/docs/components/Head.jsx b/docs/components/Head.jsx index 521fe9d..d4ba449 100644 --- a/docs/components/Head.jsx +++ b/docs/components/Head.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var Head = React.createClass({ +var Head = createReactClass({ render: function () { return ( diff --git a/docs/components/Header.jsx b/docs/components/Header.jsx index 29f8afc..d262f10 100644 --- a/docs/components/Header.jsx +++ b/docs/components/Header.jsx @@ -2,8 +2,9 @@ var React = require('react') var Ad = require('./Ad.jsx') var TweetButton = require('./TweetButton.jsx') +var createReactClass = require('create-react-class') -var Header = React.createClass({ +var Header = createReactClass({ render: function () { return ( diff --git a/docs/components/HeadingBadge.jsx b/docs/components/HeadingBadge.jsx index 1358ed1..6274cc6 100644 --- a/docs/components/HeadingBadge.jsx +++ b/docs/components/HeadingBadge.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var HeadingBadge = React.createClass({ +var HeadingBadge = createReactClass({ render: function () { if (!this.props.combo.accessibility) { diff --git a/docs/components/Index.jsx b/docs/components/Index.jsx index af1ed7f..26789fc 100644 --- a/docs/components/Index.jsx +++ b/docs/components/Index.jsx @@ -1,9 +1,10 @@ var React = require('react') +var createReactClass = require('create-react-class') var Header = require('./Header.jsx') var Readme = require('./Readme.jsx') -module.exports = React.createClass({ +module.exports = createReactClass({ componentDidMount: function () { if (window) { diff --git a/docs/components/MatrixDemo.jsx b/docs/components/MatrixDemo.jsx index 6c9190e..c08834c 100644 --- a/docs/components/MatrixDemo.jsx +++ b/docs/components/MatrixDemo.jsx @@ -5,8 +5,9 @@ var SuperModal = require('./SuperModal.jsx') var MatrixRow = require('./MatrixRow.jsx') var ColorList = require('./ColorList.jsx') var ColorPreview = require('./ColorPreview.jsx') +var createReactClass = require('create-react-class') -var MatrixDemo = React.createClass({ +var MatrixDemo = createReactClass({ getInitialState: function() { console.log('query', this.props.query); diff --git a/docs/components/MatrixRow.jsx b/docs/components/MatrixRow.jsx index db198c4..4ce690a 100644 --- a/docs/components/MatrixRow.jsx +++ b/docs/components/MatrixRow.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var Chip = require('./Chip.jsx') -var MatrixRow = React.createClass({ +var MatrixRow = createReactClass({ renderChip: function(combo, i) { return ( diff --git a/docs/components/Nav.jsx b/docs/components/Nav.jsx index 8110cbd..f3dfe05 100644 --- a/docs/components/Nav.jsx +++ b/docs/components/Nav.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var Link = require('react-router').Link -var Nav = React.createClass({ +var Nav = createReactClass({ render: function () { return ( diff --git a/docs/components/Readme.jsx b/docs/components/Readme.jsx index 05c689b..3b5133a 100644 --- a/docs/components/Readme.jsx +++ b/docs/components/Readme.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var Readme = React.createClass({ +var Readme = createReactClass({ render: function () { return ( diff --git a/docs/components/Root.jsx b/docs/components/Root.jsx index d0c7d5d..af91c8b 100644 --- a/docs/components/Root.jsx +++ b/docs/components/Root.jsx @@ -5,8 +5,9 @@ var Nav = require('./Nav.jsx') var Footer = require('./Footer.jsx') var Router = require('react-router') var RouteHandler = Router.RouteHandler +var createReactClass = require('create-react-class') -var Root = React.createClass({ +var Root = createReactClass({ render: function() { var initialProps = { diff --git a/docs/components/SuperModal.jsx b/docs/components/SuperModal.jsx index 1e99a43..89f1c06 100644 --- a/docs/components/SuperModal.jsx +++ b/docs/components/SuperModal.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var _assign = require('lodash').assign -var SuperModal = React.createClass({ +var SuperModal = createReactClass({ getDefaultProps: function() { return { diff --git a/docs/components/TextDemo.jsx b/docs/components/TextDemo.jsx index 812dbe1..ea134d2 100644 --- a/docs/components/TextDemo.jsx +++ b/docs/components/TextDemo.jsx @@ -7,8 +7,9 @@ var colorable = require('../..') var ColorPreview = require('./ColorPreview.jsx') var ForegroundBackgroundForm = require('./ForegroundBackgroundForm.jsx') var Ad = require('./Ad.jsx') +var createReactClass = require('create-react-class') -module.exports = React.createClass({ +module.exports = createReactClass({ getInitialState: function() { return { diff --git a/docs/components/ThresholdToggle.jsx b/docs/components/ThresholdToggle.jsx index 13635b9..52779f6 100644 --- a/docs/components/ThresholdToggle.jsx +++ b/docs/components/ThresholdToggle.jsx @@ -1,8 +1,9 @@ var React = require('react') +var createReactClass = require('create-react-class') var cx = require('classnames') -var ThresholdToggle = React.createClass({ +var ThresholdToggle = createReactClass({ handleChange: function(e) { var value = e.target.value diff --git a/docs/components/TweetButton.jsx b/docs/components/TweetButton.jsx index ce35ebe..191fa4e 100644 --- a/docs/components/TweetButton.jsx +++ b/docs/components/TweetButton.jsx @@ -1,7 +1,8 @@ var React = require('react') +var createReactClass = require('create-react-class') -var TweetButton = React.createClass({ +var TweetButton = createReactClass({ render: function () { //var script = { diff --git a/package.json b/package.json index 451fb00..0037031 100644 --- a/package.json +++ b/package.json @@ -36,14 +36,16 @@ "classnames": "^2.1.2", "colors.css": "^2.3.0", "cssnext": "^1.6.0", + "create-react-class": "^15.7.0", "json-loader": "^0.5.2", "jsx-loader": "^0.13.2", "marked": "^0.3.3", "node-libs-browser": "^0.5.2", + "prop-types": "^15.7.2", "query-string": "^2.3.0", - "react": "^0.13.3", + "react": "^17.0.2", "react-hsl-sliders": "^2.0.0", - "react-router": "^0.13.3", + "react-router": "^5.2.0", "static-site-generator-webpack-plugin": "^1.0.0", "webpack": "^5.41.1", "webpack-cli": "^4.7.2", From 42c2ce6a1c4351b9aeee3a458f6c46aef4acc04a Mon Sep 17 00:00:00 2001 From: Dominique Quatravaux Date: Mon, 5 Jul 2021 11:13:10 +0200 Subject: [PATCH 06/16] [modernize] basscss + postcss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove cssnext and replace with postcss-preset-env, as instructed by https://moox.io/blog/deprecating-cssnext - Integrate PostCSS with Webpack - To this end, add dependency `postcss-import` (to be very honest I have no idea what it does; however, things stop working if I remove it) - Put postcss config inside webpack.config.js (not in a separate file) - Remove “insert CSS here from data” construct; instead, use `mini-css-extract-plugin` to put the processed CSS in a file like they did in the 20th century - Structure the source thereof (`docs/styles.css`) the way the postcss pipeline expects: imports; then variable definitions (processed/eliminated with `postcss-css-variables`); then actual CSS stuff - Add `basscss-color-input-range` and `basscss-input-range` dependencies, which might have been overlooked upstream --- docs/components/Head.jsx | 2 ++ docs/data.js | 25 ------------------------- docs/styles.css | 12 ++++++++++++ package.json | 9 ++++++++- webpack.config.js | 16 +++++++++++++++- 5 files changed, 37 insertions(+), 27 deletions(-) diff --git a/docs/components/Head.jsx b/docs/components/Head.jsx index d4ba449..22e6c73 100644 --- a/docs/components/Head.jsx +++ b/docs/components/Head.jsx @@ -1,6 +1,7 @@ var React = require('react') var createReactClass = require('create-react-class') +require('../styles.css') var Head = createReactClass({ @@ -12,6 +13,7 @@ var Head = createReactClass({ + \ No newline at end of file +Colorable \ No newline at end of file diff --git a/demos/matrix/index.html b/demos/matrix/index.html index ea7785b..d8dd0ac 100644 --- a/demos/matrix/index.html +++ b/demos/matrix/index.html @@ -1 +1 @@ -Colorable
    Blank
    0.00

    Contrast

    Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.

    \ No newline at end of file +Colorable
    \ No newline at end of file diff --git a/demos/text/index.html b/demos/text/index.html index 5cd0f01..2a073c4 100644 --- a/demos/text/index.html +++ b/demos/text/index.html @@ -1 +1 @@ -Colorable

    AAA

    9.51

    Contrast

    Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.

    \ No newline at end of file +Colorable
    \ No newline at end of file diff --git a/docs.css b/docs.css new file mode 100644 index 0000000..ca00be9 --- /dev/null +++ b/docs.css @@ -0,0 +1,1516 @@ +/*! Basscss | http://basscss.com | MIT License */ + +body { margin: 0 } + +img { max-width: 100% } + +svg { max-height: 100% } + +/* Basscss Base Forms */ + +/* Basscss Defaults */ + +/* + + COLOR VARIABLES + + - Cool + - Warm + - Gray Scale + +*/ + +:root { + + /* Cool */ + + + /* Warm */ + + + /* Gray scale */ + +} + +@custom-media --breakpoint-sm (min-width: 40em); + +@custom-media --breakpoint-md (min-width: 52em); + +@custom-media --breakpoint-lg (min-width: 64em); + +input { + font-family: inherit; + font-size: 1rem; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 0; +} + +select { + font-family: inherit; + font-size: 1rem; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 0; +} + +textarea { + font-family: inherit; + font-size: 1rem; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 0; +} + +fieldset { + font-family: inherit; + font-size: 1rem; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 0; +} + +label { + vertical-align: middle; +} + +input[type=text] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=date] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=datetime] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=datetime-local] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=email] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=month] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=number] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=password] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=search] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=tel] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=time] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=url] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +input[type=week] { + height: 2.25rem; + padding: .5rem .5rem; + vertical-align: middle; + -webkit-appearance: none; +} + +select { + line-height: 1.75; + padding: .5rem .5rem; +} + +select:not([multiple]) { + height: 2.25rem; + vertical-align: middle; +} + +textarea { + line-height: 1.75; + padding: .5rem .5rem; +} + +/* Basscss Base Tables */ + +table { + border-collapse: separate; + border-spacing: 0; + max-width: 100%; + width: 100%; +} + +th { + text-align: left; + font-weight: 500; +} + +th { + padding: .25rem 1rem; + line-height: inherit; +} + +td { + padding: .25rem 1rem; + line-height: inherit; +} + +th { vertical-align: bottom } + +td { vertical-align: top } + +/* Basscss Base Typography */ + +body { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + line-height: 1.5; + font-size: 100%; +} + +h1 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +h2 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +h3 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +h4 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +h5 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +h6 { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +ol { + margin-top: 0; + margin-bottom: 1rem; +} + +ul { + margin-top: 0; + margin-bottom: 1rem; +} + +pre { + font-family: 'Source Code Pro', Consolas, monospace; + font-size: inherit; +} + +code { + font-family: 'Source Code Pro', Consolas, monospace; + font-size: inherit; +} + +samp { + font-family: 'Source Code Pro', Consolas, monospace; + font-size: inherit; +} + +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow-x: scroll; +} + +h1 { font-size: 2rem } + +h2 { font-size: 1.5rem } + +h3 { font-size: 1.5rem } + +h4 { font-size: 1.125rem } + +h5 { font-size: .875rem } + +h6 { font-size: .75rem } + +/* Basscss Color Base */ + +body { + color: #111111; + background-color: #FFFFFF; +} + +a { + color: #0074D9; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +pre { + background-color: transparent; + border-radius: 3px; +} + +code { + background-color: transparent; + border-radius: 3px; +} + +hr { + border: 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: rgba(0, 0, 0, .125); +} + +/* Basscss Color Forms */ + +.field { + border-style: solid; + border-width: 1px; + border-color: rgba(0, 0, 0, .125); + border-radius: 3px; +} + +.field:focus { + outline: none; + border-color: #0074D9; + box-shadow: 0 0 0 2px color(#0074D9 a(.5)); +} + +.field.is-focused { + outline: none; + border-color: #0074D9; + box-shadow: 0 0 0 2px color(#0074D9 a(.5)); +} + +.field:disabled { + background-color: rgba(0, 0, 0, .125); + opacity: .5; +} + +.field.is-disabled { + background-color: rgba(0, 0, 0, .125); + opacity: .5; +} + +.field:read-only:not(select) { + background-color: rgba(0, 0, 0, .125); +} + +.field.is-read-only { + background-color: rgba(0, 0, 0, .125); +} + +.field.is-success { + border-color: #2ECC40; +} + +.field.is-success:focus { + box-shadow: 0 0 0 2px color(#2ECC40 a(.5)); +} + +.field.is-success.is-focused { + box-shadow: 0 0 0 2px color(#2ECC40 a(.5)); +} + +.field.is-warning { + border-color: #FFDC00; +} + +.field.is-warning:focus { + box-shadow: 0 0 0 2px color(#FFDC00 a(.5)); +} + +.field.is-warning.is-focused { + box-shadow: 0 0 0 2px color(#FFDC00 a(.5)); +} + +.field:invalid { + border-color: #FF4136; +} + +.field.is-error { + border-color: #FF4136; +} + +.field:invalid:focus { + box-shadow: 0 0 0 2px color(#FF4136 a(.5)); +} + +.field:invalid.is-focused { + box-shadow: 0 0 0 2px color(#FF4136 a(.5)); +} + +.field.is-error:focus { + box-shadow: 0 0 0 2px color(#FF4136 a(.5)); +} + +.field.is-error.is-focused { + box-shadow: 0 0 0 2px color(#FF4136 a(.5)); +} + +/* Basscss Color Tables */ + +.table-light th { + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: rgba(0, 0, 0, .125); +} + +.table-light td { + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: rgba(0, 0, 0, .125); +} + +.table-light tr:last-child td { + border-bottom: 0; +} + +/* Basscss Btn */ + +.btn { + font-family: inherit; + font-size: inherit; + font-weight: 500; + text-decoration: none; + cursor: pointer; + display: inline-block; + line-height: 1.125rem; + padding: .5rem 1rem; + margin: 0; + height: auto; + border: 1px solid transparent; + vertical-align: middle; + -webkit-appearance: none; + color: inherit; + background-color: transparent; +} + +.btn:hover { + text-decoration: none; +} + +.btn:focus { + outline: none; + border-color: rgba(0, 0, 0, .125); + box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* Basscss Btn Primary */ + +.btn-primary { + color: #fff; + background-color: #0074D9; + border-radius: 3px; +} + +.btn-primary:hover { + box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625); +} + +.btn-primary:active { + box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .125), + inset 0 3px 4px 0 rgba(0, 0, 0, .25), + 0 0 1px rgba(0, 0, 0, .125); +} + +.btn-primary:disabled, +.btn-primary.is-disabled { + opacity: .5; +} + +/* Basscss Btn Outline */ + +.btn-outline, +.btn-outline:hover { + border-color: currentcolor; +} + +.btn-outline { + border-radius: 3px; +} + +.btn-outline:hover { + box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625); +} + +.btn-outline:active { + box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .125), + inset 0 3px 4px 0 rgba(0, 0, 0, .25), + 0 0 1px rgba(0, 0, 0, .125); +} + +.btn-outline:disabled, +.btn-outline.is-disabled { + opacity: .5; +} + +/* Basscss Type Scale */ + +.h00 { font-size: 4rem } + +.h0 { font-size: 3rem } + +.h1 { font-size: 2rem } + +.h2 { font-size: 1.5rem } + +.h3 { font-size: 1.5rem } + +.h4 { font-size: 1.125rem } + +.h5 { font-size: .875rem } + +.h6 { font-size: .75rem } + +/* Basscss Typography */ + +.font-family-inherit { font-family: inherit } + +.font-size-inherit { font-size: inherit } + +.text-decoration-none { text-decoration: none } + +.bold { font-weight: 500 } + +.regular { font-weight: normal } + +.italic { font-style: italic } + +.caps { text-transform: uppercase; letter-spacing: .2em; } + +.left-align { text-align: left } + +.center { text-align: center } + +.right-align { text-align: right } + +.justify { text-align: justify } + +.nowrap { white-space: nowrap } + +.break-word { word-wrap: break-word } + +.line-height-1 { line-height: 1 } + +.line-height-2 { line-height: 1.125 } + +.line-height-3 { line-height: 1.25 } + +.line-height-4 { line-height: 1.5 } + +.list-style-none { list-style: none } + +.underline { text-decoration: underline } + +.truncate { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.list-reset { + list-style: none; + padding-left: 0; +} + +/* Basscss Layout */ + +.inline { display: inline } + +.block { display: block } + +.inline-block { display: inline-block } + +.table { display: table } + +.table-cell { display: table-cell } + +.overflow-hidden { overflow: hidden } + +.overflow-scroll { overflow: scroll } + +.overflow-auto { overflow: auto } + +.clearfix:before, +.clearfix:after { + content: " "; + display: table +} + +.clearfix:after { clear: both } + +.left { float: left } + +.right { float: right } + +.fit { max-width: 100% } + +.max-width-1 { max-width: 24rem } + +.max-width-2 { max-width: 32rem } + +.max-width-3 { max-width: 48rem } + +.max-width-4 { max-width: 64rem } + +.border-box { box-sizing: border-box } + +/* Basscss Align */ + +.align-baseline { vertical-align: baseline } + +.align-top { vertical-align: top } + +.align-middle { vertical-align: middle } + +.align-bottom { vertical-align: bottom } + +/* Basscss Margin */ + +.m0 { margin: 0 } + +.mt0 { margin-top: 0 } + +.mr0 { margin-right: 0 } + +.mb0 { margin-bottom: 0 } + +.ml0 { margin-left: 0 } + +.mx0 { margin-left: 0; margin-right: 0 } + +.my0 { margin-top: 0; margin-bottom: 0 } + +.m1 { margin: .5rem } + +.mt1 { margin-top: .5rem } + +.mr1 { margin-right: .5rem } + +.mb1 { margin-bottom: .5rem } + +.ml1 { margin-left: .5rem } + +.mx1 { margin-left: .5rem; margin-right: .5rem } + +.my1 { margin-top: .5rem; margin-bottom: .5rem } + +.m2 { margin: 1rem } + +.mt2 { margin-top: 1rem } + +.mr2 { margin-right: 1rem } + +.mb2 { margin-bottom: 1rem } + +.ml2 { margin-left: 1rem } + +.mx2 { margin-left: 1rem; margin-right: 1rem } + +.my2 { margin-top: 1rem; margin-bottom: 1rem } + +.m3 { margin: 2rem } + +.mt3 { margin-top: 2rem } + +.mr3 { margin-right: 2rem } + +.mb3 { margin-bottom: 2rem } + +.ml3 { margin-left: 2rem } + +.mx3 { margin-left: 2rem; margin-right: 2rem } + +.my3 { margin-top: 2rem; margin-bottom: 2rem } + +.m4 { margin: 4rem } + +.mt4 { margin-top: 4rem } + +.mr4 { margin-right: 4rem } + +.mb4 { margin-bottom: 4rem } + +.ml4 { margin-left: 4rem } + +.mx4 { margin-left: 4rem; margin-right: 4rem } + +.my4 { margin-top: 4rem; margin-bottom: 4rem } + +.mxn1 { margin-left: calc(.5rem * -1); margin-right: calc(.5rem * -1); } + +.mxn2 { margin-left: calc(1rem * -1); margin-right: calc(1rem * -1); } + +.mxn3 { margin-left: calc(2rem * -1); margin-right: calc(2rem * -1); } + +.mxn4 { margin-left: calc(4rem * -1); margin-right: calc(4rem * -1); } + +.m-auto { margin: auto; } + +.mt-auto { margin-top: auto } + +.mr-auto { margin-right: auto } + +.mb-auto { margin-bottom: auto } + +.ml-auto { margin-left: auto } + +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-auto { margin-top: auto; margin-bottom: auto; } + +/* Basscss Padding */ + +.p0 { padding: 0 } + +.pt0 { padding-top: 0 } + +.pr0 { padding-right: 0 } + +.pb0 { padding-bottom: 0 } + +.pl0 { padding-left: 0 } + +.px0 { padding-left: 0; padding-right: 0 } + +.py0 { padding-top: 0; padding-bottom: 0 } + +.p1 { padding: .5rem } + +.pt1 { padding-top: .5rem } + +.pr1 { padding-right: .5rem } + +.pb1 { padding-bottom: .5rem } + +.pl1 { padding-left: .5rem } + +.py1 { padding-top: .5rem; padding-bottom: .5rem } + +.px1 { padding-left: .5rem; padding-right: .5rem } + +.p2 { padding: 1rem } + +.pt2 { padding-top: 1rem } + +.pr2 { padding-right: 1rem } + +.pb2 { padding-bottom: 1rem } + +.pl2 { padding-left: 1rem } + +.py2 { padding-top: 1rem; padding-bottom: 1rem } + +.px2 { padding-left: 1rem; padding-right: 1rem } + +.p3 { padding: 2rem } + +.pt3 { padding-top: 2rem } + +.pr3 { padding-right: 2rem } + +.pb3 { padding-bottom: 2rem } + +.pl3 { padding-left: 2rem } + +.py3 { padding-top: 2rem; padding-bottom: 2rem } + +.px3 { padding-left: 2rem; padding-right: 2rem } + +.p4 { padding: 4rem } + +.pt4 { padding-top: 4rem } + +.pr4 { padding-right: 4rem } + +.pb4 { padding-bottom: 4rem } + +.pl4 { padding-left: 4rem } + +.py4 { padding-top: 4rem; padding-bottom: 4rem } + +.px4 { padding-left: 4rem; padding-right: 4rem } + +/* Basscss Position */ + +.relative { position: relative } + +.absolute { position: absolute } + +.fixed { position: fixed } + +.top-0 { top: 0 } + +.right-0 { right: 0 } + +.bottom-0 { bottom: 0 } + +.left-0 { left: 0 } + +.z1 { z-index: 1 } + +.z2 { z-index: 2 } + +.z3 { z-index: 3 } + +.z4 { z-index: 4 } + +/* Basscss Utility Responsive States */ + +.sm-show, .md-show, .lg-show { + display: none !important +} + +@media (--breakpoint-sm) { + .sm-show { display: block !important } +} + +@media (--breakpoint-md) { + .md-show { display: block !important } +} + +@media (--breakpoint-lg) { + .lg-show { display: block !important } +} + +@media (--breakpoint-sm) { + .sm-hide { display: none !important } +} + +@media (--breakpoint-md) { + .md-hide { display: none !important } +} + +@media (--breakpoint-lg) { + .lg-hide { display: none !important } +} + +.display-none { display: none !important } + +.hide { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +/* Basscss Grid */ + +.container { + max-width: 64rem; + margin-left: auto; + margin-right: auto; +} + +.col { + float: left; + box-sizing: border-box; +} + +.col-right { + float: right; + box-sizing: border-box; +} + +.col-1 { + width: calc(1/12 * 100%); +} + +.col-2 { + width: calc(2/12 * 100%); +} + +.col-3 { + width: calc(3/12 * 100%); +} + +.col-4 { + width: calc(4/12 * 100%); +} + +.col-5 { + width: calc(5/12 * 100%); +} + +.col-6 { + width: calc(6/12 * 100%); +} + +.col-7 { + width: calc(7/12 * 100%); +} + +.col-8 { + width: calc(8/12 * 100%); +} + +.col-9 { + width: calc(9/12 * 100%); +} + +.col-10 { + width: calc(10/12 * 100%); +} + +.col-11 { + width: calc(11/12 * 100%); +} + +.col-12 { + width: 100%; +} + +@media (--breakpoint-sm) { + + .sm-col { + float: left; + box-sizing: border-box; + } + + .sm-col-right { + float: right; + box-sizing: border-box; + } + + .sm-col-1 { + width: calc(1/12 * 100%); + } + + .sm-col-2 { + width: calc(2/12 * 100%); + } + + .sm-col-3 { + width: calc(3/12 * 100%); + } + + .sm-col-4 { + width: calc(4/12 * 100%); + } + + .sm-col-5 { + width: calc(5/12 * 100%); + } + + .sm-col-6 { + width: calc(6/12 * 100%); + } + + .sm-col-7 { + width: calc(7/12 * 100%); + } + + .sm-col-8 { + width: calc(8/12 * 100%); + } + + .sm-col-9 { + width: calc(9/12 * 100%); + } + + .sm-col-10 { + width: calc(10/12 * 100%); + } + + .sm-col-11 { + width: calc(11/12 * 100%); + } + + .sm-col-12 { + width: 100%; + } + +} + +@media (--breakpoint-md) { + + .md-col { + float: left; + box-sizing: border-box; + } + + .md-col-right { + float: right; + box-sizing: border-box; + } + + .md-col-1 { + width: calc(1/12 * 100%); + } + + .md-col-2 { + width: calc(2/12 * 100%); + } + + .md-col-3 { + width: calc(3/12 * 100%); + } + + .md-col-4 { + width: calc(4/12 * 100%); + } + + .md-col-5 { + width: calc(5/12 * 100%); + } + + .md-col-6 { + width: calc(6/12 * 100%); + } + + .md-col-7 { + width: calc(7/12 * 100%); + } + + .md-col-8 { + width: calc(8/12 * 100%); + } + + .md-col-9 { + width: calc(9/12 * 100%); + } + + .md-col-10 { + width: calc(10/12 * 100%); + } + + .md-col-11 { + width: calc(11/12 * 100%); + } + + .md-col-12 { + width: 100%; + } + +} + +@media (--breakpoint-lg) { + + .lg-col { + float: left; + box-sizing: border-box; + } + + .lg-col-right { + float: right; + box-sizing: border-box; + } + + .lg-col-1 { + width: calc(1/12 * 100%); + } + + .lg-col-2 { + width: calc(2/12 * 100%); + } + + .lg-col-3 { + width: calc(3/12 * 100%); + } + + .lg-col-4 { + width: calc(4/12 * 100%); + } + + .lg-col-5 { + width: calc(5/12 * 100%); + } + + .lg-col-6 { + width: calc(6/12 * 100%); + } + + .lg-col-7 { + width: calc(7/12 * 100%); + } + + .lg-col-8 { + width: calc(8/12 * 100%); + } + + .lg-col-9 { + width: calc(9/12 * 100%); + } + + .lg-col-10 { + width: calc(10/12 * 100%); + } + + .lg-col-11 { + width: calc(11/12 * 100%); + } + + .lg-col-12 { + width: 100%; + } + +} + +/* Flex Object */ + +.flex { display: -webkit-flex; display: flex } + +.flex-column { -webkit-flex-direction: column; flex-direction: column } + +.flex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap } + +.flex-center { -webkit-align-items: center; align-items: center } + +.flex-baseline { -webkit-align-items: baseline; align-items: baseline } + +.flex-stretch { -webkit-align-items: stretch; align-items: stretch } + +.flex-start { -webkit-align-items: flex-start; align-items: flex-start } + +.flex-end { -webkit-align-items: flex-end; align-items: flex-end } + +.flex-justify { -webkit-justify-content: space-between; justify-content: space-between } + +/* + * 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 + */ + +.flex-auto { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-grow { -webkit-flex: 1 0 auto; flex: 1 0 auto } + +.flex-none { -webkit-flex: none; flex: none } + +.flex-first { -webkit-order: -1; order: -1 } + +.flex-last { -webkit-order: 99999; order: 99999 } + +@media (--breakpoint-sm) { + .sm-flex { display: -webkit-flex; display: flex } +} + +@media (--breakpoint-md) { + .md-flex { display: -webkit-flex; display: flex } +} + +@media (--breakpoint-lg) { + .lg-flex { display: -webkit-flex; display: flex } +} + +/* Basscss Border */ + +.border { + border-style: solid; + border-width: 1px; + border-color: rgba(0, 0, 0, .125); +} + +.border-top { + border-top-style: solid; + border-top-width: 1px; + border-top-color: rgba(0, 0, 0, .125); +} + +.border-right { + border-right-style: solid; + border-right-width: 1px; + border-right-color: rgba(0, 0, 0, .125); +} + +.border-bottom { + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: rgba(0, 0, 0, .125); +} + +.border-left { + border-left-style: solid; + border-left-width: 1px; + border-left-color: rgba(0, 0, 0, .125); +} + +.border-none { border: 0 } + +.rounded { border-radius: 3px } + +.circle { border-radius: 50% } + +.rounded-top { border-radius: 3px 3px 0 0 } + +.rounded-right { border-radius: 0 3px 3px 0 } + +.rounded-bottom { border-radius: 0 0 3px 3px } + +.rounded-left { border-radius: 3px 0 0 3px } + +.not-rounded { border-radius: 0 } + +/* Basscss Colors */ + +/* + + VARIABLES + + - Cool + - Warm + - Gray Scale + +*/ + +.black { color: #111111 } + +.gray { color: #AAAAAA } + +.silver { color: #DDDDDD } + +.white { color: #FFFFFF } + +.aqua { color: #7FDBFF } + +.blue { color: #0074D9 } + +.navy { color: #001F3F } + +.teal { color: #39CCCC } + +.green { color: #2ECC40 } + +.olive { color: #3D9970 } + +.lime { color: #01FF70 } + +.yellow { color: #FFDC00 } + +.orange { color: #FF851B } + +.red { color: #FF4136 } + +.fuchsia { color: #F012BE } + +.purple { color: #B10DC9 } + +.maroon { color: #85144B } + +.color-inherit { color: inherit } + +.muted { opacity: .5 } + +/* Basscss Background Colors */ + +.bg-black { background-color: #111111 } + +.bg-gray { background-color: #AAAAAA } + +.bg-silver { background-color: #DDDDDD } + +.bg-white { background-color: #FFFFFF } + +.bg-aqua { background-color: #7FDBFF } + +.bg-blue { background-color: #0074D9 } + +.bg-navy { background-color: #001F3F } + +.bg-teal { background-color: #39CCCC } + +.bg-green { background-color: #2ECC40 } + +.bg-olive { background-color: #3D9970 } + +.bg-lime { background-color: #01FF70 } + +.bg-yellow { background-color: #FFDC00 } + +.bg-orange { background-color: #FF851B } + +.bg-red { background-color: #FF4136 } + +.bg-fuchsia { background-color: #F012BE } + +.bg-purple { background-color: #B10DC9 } + +.bg-maroon { background-color: #85144B } + +.bg-darken-1 { background-color: rgba(0, 0, 0, .0625) } + +.bg-darken-2 { background-color: rgba(0, 0, 0, .125) } + +.bg-darken-3 { background-color: rgba(0, 0, 0, .25) } + +.bg-darken-4 { background-color: rgba(0,0,0,.5) } + +.bg-lighten-1 { background-color: rgba(255,255,255,.0625) } + +.bg-lighten-2 { background-color: rgba(255,255,255,.125) } + +.bg-lighten-3 { background-color: rgba(255,255,255,.25) } + +.bg-lighten-4 { background-color: rgba(255,255,255,.5) } + +/* Basscss Input Range */ + +.input-range { + vertical-align: middle; + background-color: transparent; + padding-top: .5rem; + padding-bottom: .5rem; + color: inherit; + background-color: transparent; + -webkit-appearance: none; +} + +.input-range::-webkit-slider-thumb { + position: relative; + width: .5rem; + height: calc( 2.25rem - (.5rem * 2) ); + cursor: pointer; + margin-top: calc( calc( 2.25rem - (.5rem * 2) ) / -2 + (calc( .5rem / 2 ) / 2) ); + border-radius: 3px; + background-color: currentcolor; + -webkit-appearance: none; +} + +/* Touch screen friendly pseudo element */ + +.input-range::-webkit-slider-thumb:before { + content: ''; + display: block; + position: absolute; + top: calc( -.5 * 2.25rem + (.5 * calc( 2.25rem - (.5rem * 2) )) ); + left: calc( (-.5 * 2.25rem) + (.5 * .5rem) ); + width: 2.25rem; + height: 2.25rem; + opacity: 0; +} + +.input-range::-moz-range-thumb { + width: .5rem; + height: calc( 2.25rem - (.5rem * 2) ); + cursor: pointer; + border-radius: 3px; + border-color: transparent; + border-width: 0; + background-color: currentcolor; +} + +.input-range::-webkit-slider-runnable-track { + height: calc( .5rem / 2 ); + cursor: pointer; + border-radius: 3px; + background-color: rgba(0, 0, 0, .25); +} + +.input-range::-moz-range-track { + height: calc( .5rem / 2 ); + cursor: pointer; + border-radius: 3px; + background-color: rgba(0, 0, 0, .25); +} + +.input-range:focus { + outline: none; +} + +/* Basscss Color Input Range */ + +.range-light { + color: inherit; + background-color: transparent; + -webkit-appearance: none; +} + +.range-light::-webkit-slider-thumb { + -webkit-appearance: none; + border-radius: 3px; + background-color: currentcolor; +} + +.range-light::-moz-range-thumb { + border-radius: 3px; + border-color: transparent; + border-width: 0; + background-color: currentcolor; +} + +.range-light::-webkit-slider-runnable-track { + border-radius: 3px; + background-color: rgba(0, 0, 0, .25); +} + +.range-light::-moz-range-track { + border-radius: 3px; + background-color: rgba(0, 0, 0, .25); +} + +.range-light:focus { + outline: none; +} + +.range-light:focus::-webkit-slider-thumb { + outline: none; + border: 0; + box-shadow: 0 0 1px 2px currentcolor; +} + +.range-light:focus::-moz-range-thumb { + outline: none; + border: 0; + box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); +} + +pre { + padding: 1rem; + background-color: rgba(0, 0, 0, .0625); +} + +.prose p:first-child { + font-size: 1.5rem; +} + +#carbonads { + display: inline-block; + font-size: 14px; + line-height: 1.25; + text-align: left; + /* + padding: .75em; + */ +} + +#carbonads a, +#carbonads a:hover { + text-decoration: none; + color: inherit; +} + +#carbonads span { display: block } + +#carbonads > span::before, +#carbonads > span::after { + content: ''; + display: table; +} + +#carbonads > span::after { + clear: both; +} + +.carbon-img { + float: left; + margin-right: .5em; +} + +.carbon-img > img { display: block } + +.carbon-text { overflow: hidden } + +.carbon-poweredby { + float: left; + margin-top: .25em; + opacity: 0.5; +} + +@media (min-width: 40em) { + #carbonads { + max-width: 320px; + } +} + + diff --git a/index.html b/index.html index 51d558a..20770e1 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,22 @@ -Colorable

    Colorable

    Color palette combination contrast tester

    Take a set color palette and get contrast values for every possible combination – +Colorable

    Colorable

    Color palette combination contrast tester

    Colorable

    +

    Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

    Getting Started

    -
    npm i colorable
    +
    npm i --save colorable
     

    Usage

    Pass an array of color strings or an object with color strings as values.

    -
    var colorable = require('colorable');
    +
    var colorable = require('colorable')
    +
     var colors = {
       red: 'red',
       green: 'green',
       blue: 'blue'
    -};
    -var options = {
    -  compact: true,
    -  threshold: 0 
    -};
    -var result = colorable(colors, options);
    +}
    +
    +var result = colorable(colors, { compact: true, threshold: 0 })
     

    Returns an array of colors with combinations for all other colors and their WCAG contrast @@ -64,16 +63,16 @@

    Accessibility object


    Options

    -

    compact

    +

    compact

    Type: Boolean (default: false)

    If set to true, the result will be a smaller object that only includes hex value color strings, a name for each color (if an object is passed to the function), contrast, and accessibility values. When set to false, the result also includes the entire harthur/color object for each color, which includes other properties and methods for color manipulation.

    -

    threshold

    +

    threshold

    Type: Number (default: 0)

    When set, the colorable function only returns combinations that have a contrast above this value. This is useful for only seeing combinations that pass a minimum contrast level.

    -

    uniq

    +

    uniq

    Type: Boolean (default: true)

    When set to true, the array of colors is passed through lodash.uniq to remove duplicates.


    MIT License

    -
    \ No newline at end of file +
    \ No newline at end of file