From 6b9b000753ff6433a7d84c59fa7a907c0966de2f Mon Sep 17 00:00:00 2001 From: Anjie Li Date: Thu, 17 Jan 2019 00:35:02 +0800 Subject: [PATCH] add a prototype navbar component --- package-lock.json | 200 +++++++++++ package.json | 2 + readme.md | 2 + src/components/navbar.js | 40 +++ src/index.js | 29 +- src/static/chota.css | 752 +++++++++++++++++++++++++++++++++++++++ webpack.config.js | 31 +- 7 files changed, 1038 insertions(+), 18 deletions(-) create mode 100644 src/components/navbar.js create mode 100644 src/static/chota.css diff --git a/package-lock.json b/package-lock.json index ef8d2ad..9844428 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1949,6 +1949,37 @@ "randomfill": "^1.0.3" } }, + "css-loader": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.0.tgz", + "integrity": "sha512-MoOu+CStsGrSt5K2OeZ89q3Snf+IkxRfAIt9aAKg4piioTrhtP1iEFPu+OVn3Ohz24FO6L+rw9UJxBILiSBw5Q==", + "dev": true, + "requires": { + "icss-utils": "^4.0.0", + "loader-utils": "^1.2.1", + "lodash": "^4.17.11", + "postcss": "^7.0.6", + "postcss-modules-extract-imports": "^2.0.0", + "postcss-modules-local-by-default": "^2.0.3", + "postcss-modules-scope": "^2.0.0", + "postcss-modules-values": "^2.0.0", + "postcss-value-parser": "^3.3.0", + "schema-utils": "^1.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", @@ -1960,11 +1991,62 @@ "nth-check": "~1.0.1" } }, + "css-selector-tokenizer": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz", + "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==", + "dev": true, + "requires": { + "cssesc": "^0.1.0", + "fastparse": "^1.1.1", + "regexpu-core": "^1.0.0" + }, + "dependencies": { + "jsesc": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", + "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=", + "dev": true + }, + "regexpu-core": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", + "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=", + "dev": true, + "requires": { + "regenerate": "^1.2.1", + "regjsgen": "^0.2.0", + "regjsparser": "^0.1.4" + } + }, + "regjsgen": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", + "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=", + "dev": true + }, + "regjsparser": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", + "dev": true, + "requires": { + "jsesc": "~0.5.0" + } + } + } + }, "css-what": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz", "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==" }, + "cssesc": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", + "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=", + "dev": true + }, "cyclist": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz", @@ -2628,6 +2710,12 @@ "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -3734,6 +3822,21 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "icss-replace-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", + "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", + "dev": true + }, + "icss-utils": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.0.0.tgz", + "integrity": "sha512-bA/xGiwWM17qjllIs9X/y0EjsB7e0AV08F3OL8UPsoNkNRibIuu8f1eKTnQ8QO1DteKKTxTUAn+IEWUToIwGOA==", + "dev": true, + "requires": { + "postcss": "^7.0.5" + } + }, "ieee754": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz", @@ -4965,6 +5068,80 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, + "postcss": { + "version": "7.0.13", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.13.tgz", + "integrity": "sha512-h8SY6kQTd1wISHWjz+E6cswdhMuyBZRb16pSTv3W4zYZ3/YbyWeJdNUeOXB5IdZqE1U76OUEjjjqsC3z2f3hVg==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss-modules-extract-imports": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", + "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==", + "dev": true, + "requires": { + "postcss": "^7.0.5" + } + }, + "postcss-modules-local-by-default": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.4.tgz", + "integrity": "sha512-WvuSaTKXUqYJbnT7R3YrsNrHv/C5vRfr5VglS4bFOk0MYT4CLBfc/xgExA+x2RftlYgiBDvWmVs191Xv8S8gZQ==", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^7.0.6", + "postcss-value-parser": "^3.3.1" + } + }, + "postcss-modules-scope": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.0.1.tgz", + "integrity": "sha512-7+6k9c3/AuZ5c596LJx9n923A/j3nF3ormewYBF1RrIQvjvjXe1xE8V8A1KFyFwXbvnshT6FBZFX0k/F1igneg==", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^7.0.6" + } + }, + "postcss-modules-values": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz", + "integrity": "sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==", + "dev": true, + "requires": { + "icss-replace-symbols": "^1.1.0", + "postcss": "^7.0.6" + } + }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "pretty-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", @@ -5992,6 +6169,29 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "style-loader": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", + "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index 1041d7d..99c38a8 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "babel-loader": "^8.0.5", + "css-loader": "^2.1.0", + "style-loader": "^0.23.1", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" diff --git a/readme.md b/readme.md index ce143af..4d82651 100644 --- a/readme.md +++ b/readme.md @@ -15,4 +15,6 @@ TBD ## To-Do +* database & expressjs +* Look into styled-components (or other methods of adding css to react?) * Add support for Ethereum addresses. \ No newline at end of file diff --git a/src/components/navbar.js b/src/components/navbar.js new file mode 100644 index 0000000..d422e87 --- /dev/null +++ b/src/components/navbar.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; + +export default class NavBar extends Component { + + constructor(props) { + super(props); + } + + renderButton(button) { + return (button) => { + if (button === this.props.active) { + return {button.text} + } else { + return {button.text} + } + } + } + + renderName() { + return {this.props.name} + } + + + + render() { + return ( + + ); + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1eb68a7..23dec39 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,31 @@ require("@babel/polyfill"); -import React, { Component } from 'react'; +import React, { Component } from 'react'; import ReactDOM from 'react-dom'; +import NavBar from './components/navbar'; +import './static/chota.css'; + +class App extends Component { + constructor(props) { + super(props); + } -class HelloWorld extends Component { render() { - return
Hello World!
+ let navButtons = [{ + text: 'Page 1', + link: 'Link 1' + }, { + text: 'Page 2', + link: 'Link 2' + }]; + + return ( + <> + +
Hello World!
+ + ) } } -const App = () => - -ReactDOM.render(, document.getElementById('root')); \ No newline at end of file +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/src/static/chota.css b/src/static/chota.css new file mode 100644 index 0000000..327cae2 --- /dev/null +++ b/src/static/chota.css @@ -0,0 +1,752 @@ +/*! chota.css v0.5.2 | MIT License | github.com/jenil/chota */ +:root { + --color-primary: #1a9f60; + --color-lightGrey: #d2d6dd; + --color-grey: #7e818b; + --color-darkGrey: #3f4144; + --color-error: #d43939; + --color-success: #28bd14; + --grid-maxWidth: 120rem; + --grid-gutter: 2rem; + --font-size: 1.6rem; + --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; +} +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +html { + font-size: 62.5%; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + letter-spacing: 0.01em; + line-height: 1.6; + font-size: var(--font-size); + font-weight: 400; + font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/ + font-family: var(--font-family); + margin: 0; + padding: 0; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; + margin: 0.35em 0 0.7em 0; +} +h1 { + font-size: 2em; +} +h2 { + font-size: 1.75em; +} +h3 { + font-size: 1.5em; +} +h4 { + font-size: 1.25em; +} +h5 { + font-size: 1em; +} +h6 { + font-size: 0.85em; +} +a { + color: var(--color-primary); + text-decoration: none; +} +a:hover:not(.button) { + opacity: 0.75; +} +p { + margin-top: 0; +} +blockquote { + background-color: #f3f3f6; + padding: 1.5rem 2rem; + border-left: 3px solid var(--color-lightGrey); +} +dl dt { + font-weight: bold; +} +hr { + border: none; + background-color: var(--color-lightGrey); + height: 1px; + margin: 1rem 0; +} +table { + width: 100%; + border: none; + border-collapse: collapse; + border-spacing: 0; + text-align: left; +} +table.striped tr:nth-of-type(2n) { + background-color: #f3f3f6; +} +td, +th { + vertical-align: middle; + padding: 1.2rem 0.4rem; +} +thead { + border-bottom: 2px solid var(--color-lightGrey); +} +tfoot { + border-top: 2px solid var(--color-lightGrey); +} +code, +kbd, +pre, +samp, +tt { + font-family: monaco, "Consolas", "Lucida Console", monospace; +} +code, +kbd { + padding: 0 0.4rem; + font-size: 90%; + white-space: pre-wrap; + border-radius: 4px; + color: #d43939; + padding: 0.2em 0.4em; + background-color: #f3f3f6; +} +pre { + background-color: #f3f3f6; + font-size: 1em; + padding: 1rem; + overflow-x: auto; +} +pre code { + background: none; + padding: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +img { + max-width: 100%; +} +fieldset { + border: 1px solid var(--color-lightGrey); +} +iframe { + border: 0; +} +.container { + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 96%; + padding: 0 calc(var(--grid-gutter) / 2); +} +.row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + margin-left: calc(var(--grid-gutter) / -2); + margin-right: calc(var(--grid-gutter) / -2); +} +.col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.col, +[class*=" col-"], +[class^='col-'] { + margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); +} +.col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); +} +.col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); +} +.col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); +} +.col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); +} +.col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); +} +.col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); +} +.col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); +} +.col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); +} +.col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); +} +.col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); +} +.col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); +} +.col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); +} +@media screen and (max-width: 768px) { + .container { + width: 100%; + } + + .col, + [class*=" col-"], + [class^='col-'] { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100%; + } +} +fieldset { + padding: 0.5rem 2rem; +} +legend { + text-transform: uppercase; + font-size: 0.8em; + letter-spacing: 0.1rem; +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +select, +textarea, +textarea[type="text"] { + font-family: inherit; + padding: 0.8rem 1rem; + border-radius: 4px; + border: 1px solid var(--color-lightGrey); + font-size: 1em; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + display: block; + width: 100%; +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):not[disabled]:hover, +select:hover, +textarea:hover, +textarea[type="text"]:hover { + border-color: var(--color-grey); +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus, +select:focus, +textarea:focus, +textarea[type="text"]:focus { + outline: none; + border-color: var(--color-primary); + -webkit-box-shadow: 0 0 1px var(--color-primary); + box-shadow: 0 0 1px var(--color-primary); +} +input.error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +textarea.error { + border-color: var(--color-error); +} +input.success:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +textarea.success { + border-color: var(--color-success); +} +select { + -webkit-appearance: none; + background: #f3f3f6 no-repeat 100%; + background-size: 1ex; + background-origin: content-box; + background-image: url("data:image/svg+xml;utf8,"); +} +[type="checkbox"], +[type="radio"] { + width: 1.6rem; + height: 1.6rem; +} +/* BUTTONS */ +.button, +[type="button"], +[type="reset"], +[type="submit"], +button { + padding: 1rem 2.5rem; + color: var(--color-darkGrey); + background: var(--color-lightGrey); + border-radius: 4px; + border: none; + font-size: var(--font-size); + line-height: 1; + text-align: center; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + text-decoration: none; + -webkit-transform: scale(1); + transform: scale(1); + display: inline-block; + cursor: pointer; +} +.grouped { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.grouped > input:not(:last-child), +.grouped > .button:not(:last-child) { + margin-right: 16px; +} +.button + .button { + margin-left: 1rem; +} +.button:hover, +[type="button"]:hover, +[type="reset"]:hover, +[type="submit"]:hover, +button:hover { + opacity: 0.8; +} +.button:active, +[type="button"]:active, +[type="reset"]:active, +[type="submit"]:active, +button:active { + -webkit-transform: scale(0.98); + transform: scale(0.98); +} +input[disabled], +button[disabled], +input[disabled]:hover, +button[disabled]:hover { + opacity: 0.4; + cursor: not-allowed; +} +.button.primary, +.button.secondary, +.button.dark, +.button.error, +.button.success, +[type="submit"] { + color: #fff; + background-color: #000; + background-color: var(--color-primary); +} +.button.secondary { + background-color: var(--color-grey); +} +.button.dark { + background-color: var(--color-darkGrey); +} +.button.error { + background-color: var(--color-error); +} +.button.success { + background-color: var(--color-success); +} +.button.outline { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 1px var(--color-lightGrey); + box-shadow: inset 0 0 0 1px var(--color-lightGrey); +} +.button.outline.primary { + -webkit-box-shadow: inset 0 0 0 1px var(--color-primary); + box-shadow: inset 0 0 0 1px var(--color-primary); + color: var(--color-primary); +} +.button.outline.secondary { + -webkit-box-shadow: inset 0 0 0 1px var(--color-grey); + box-shadow: inset 0 0 0 1px var(--color-grey); + color: var(--color-grey); +} +.button.outline.dark { + -webkit-box-shadow: inset 0 0 0 1px var(--color-darkGrey); + box-shadow: inset 0 0 0 1px var(--color-darkGrey); + color: var(--color-darkGrey); +} +.button.clear { + background-color: transparent; + border-color: transparent; + color: var(--color-primary); +} +.button.icon { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.button.icon > img { + margin-left: 2px; +} +.button.icon-only { + padding: 1rem; +} +::-webkit-input-placeholder { + color: #bdbfc4; +} +:-ms-input-placeholder { + color: #bdbfc4; +} +::-ms-input-placeholder { + color: #bdbfc4; +} +::placeholder { + color: #bdbfc4; +} +.nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 5rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.nav img { + max-height: 3rem; +} +.nav>.container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.nav-center, +.nav-left, +.nav-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.nav-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.nav-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.nav-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +@media screen and (max-width: 480px) { + .nav, + .nav>.container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .nav-center, + .nav-left, + .nav-right { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +.nav a, +.nav .brand { + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 1rem 2rem; + color: #555; +} +.nav .active:not(.button) { + color: #000; /* fallback */ + color: var(--color-primary); +} +.nav .brand { + font-size: 1.75em; + padding-top: 0; + padding-bottom: 0; +} +.nav .brand img { + padding-right: 1rem; +} +.nav .button { + margin: auto 1rem; +} +.card { + padding: 1rem 2rem; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} +.card p:last-child { + margin: 0; +} +.card header > * { + margin-top: 0; + margin-bottom: 1rem; +} +.tabs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.tabs a { + text-decoration: none; +} +.tabs > a { + padding: 1rem 2rem; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + color: var(--color-darkGrey); + border-bottom: 2px solid var(--color-lightGrey); + text-align: center; +} +.tabs > a.active, +.tabs > a:hover { + opacity: 1; + border-bottom: 2px solid #555; +} +.tabs > a.active { + border-color: var(--color-primary); +} +.tabs.is-full a { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.tag { + display: inline-block; + border: 1px solid var(--color-lightGrey); + text-transform: uppercase; + color: var(--color-grey); + padding: 0.5rem; + line-height: 1; + letter-spacing: 0.5px; +} +.tag.is-small { + padding: 0.4rem; + font-size: 0.75em; +} +.tag.is-large { + padding: 0.7rem; + font-size: 1.125em; +} +.tag+.tag { + margin-left: 1rem; +} +/* Colors */ +.bg-primary { + background-color: var(--color-primary); + color: #fff; +} +.bg-light { + background-color: var(--color-lightGrey); +} +.bg-dark { + background-color: var(--color-darkGrey); + color: #fff; +} +.bg-grey { + background-color: var(--color-grey); + color: #fff; +} +.bg-error { + background-color: var(--color-error); + color: #fff; +} +.bg-success { + background-color: var(--color-success); + color: #fff; +} +.text-primary { + color: var(--color-primary); +} +.text-light { + color: var(--color-lightGrey); +} +.text-dark { + color: var(--color-darkGrey); +} +.text-grey { + color: var(--color-grey); +} +.text-error { + color: var(--color-error); +} +.text-success { + color: var(--color-success); +} +/* Position & alignment */ +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.is-text-center { + text-align: center; +} +.is-text-left { + text-align: left; +} +.is-text-right { + text-align: right; +} +.is-text-uppercase { + text-transform: uppercase; +} +.is-text-lowercase { + text-transform: lowercase; +} +.is-text-capitalize { + text-transform: capitalize; +} +.is-full-screen { + width: 100%; + min-height: 100vh; +} +.is-full-width { + width: 100%; +} +.is-vertical-align { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.is-horizontal-align { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.is-center { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.is-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.is-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.is-fixed { + position: fixed; + width: 100%; +} +.is-paddingless { + padding: 0 !important; +} +.is-marginless { + margin: 0 !important; +} +.clearfix { + content: ""; + display: table; + clear: both; +} +.is-hidden { + display: none !important; +} +@media screen and (max-width: 480px) { + .hide-phone { + display: none !important; + } +} +@media screen and (max-width: 768px) { + .hide-tablet { + display: none !important; + } +} diff --git a/webpack.config.js b/webpack.config.js index afce823..6440c79 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,20 +10,27 @@ module.exports = options => { //where the output file would be created (requires absolute path) }, module: { - rules: [{ // rules for the webpack - test: /\.js$/, // all javascript files - exclude: /node_modules/, // excluding node modules - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true, - presets: [ - ['@babel/preset-env', { useBuiltIns: 'entry', }], - '@babel/preset-react', - ], + rules: [ // rules for the webpack + { + test: /\.js$/, // all javascript files + exclude: /node_modules/, // excluding node modules + use: { + loader: 'babel-loader', + options: { + cacheDirectory: true, + presets: [ + ['@babel/preset-env', { useBuiltIns: 'entry', }], + '@babel/preset-react', + ], + } } + }, { + test: /\.css$/, + use: [ + { loader: 'style-loader' }, { loader: 'css-loader' } + ], } - }] + ] }, plugins: [ new HWP(