├── .npmignore ├── .babelrc ├── docs ├── .babelrc ├── favicon.png ├── assets │ ├── logo_black.png │ └── logo_black.svg ├── src │ ├── main.js │ ├── highlight.scss │ ├── Header.vue │ ├── c3.min.css │ ├── style.scss │ └── App.vue ├── index.html ├── package.json └── webpack.config.js ├── src ├── index.js ├── events.js └── VueC3.vue ├── .gitignore ├── .editorconfig ├── LICENSE ├── package.json ├── rollup.config.js ├── dist ├── vue-c3.esm.js ├── vue-c3.cjs.js └── vue-c3.umd.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | docs 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "@babel/preset-env" ] 3 | } 4 | -------------------------------------------------------------------------------- /docs/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "@babel/preset-env" ] 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VueC3 from './VueC3.vue' 2 | export default VueC3 3 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biering/vue-c3/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /docs/assets/logo_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biering/vue-c3/HEAD/docs/assets/logo_black.png -------------------------------------------------------------------------------- /src/events.js: -------------------------------------------------------------------------------- 1 | export const INIT = 'init' 2 | export const DESTROY = 'destroy' 3 | export const DISPATCH = 'dispatch' 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | package-lock.json 3 | node_modules/ 4 | npm-debug.log 5 | yarn-error.log 6 | demo/dist 7 | *.map 8 | *.sketch 9 | -------------------------------------------------------------------------------- /docs/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /docs/src/highlight.scss: -------------------------------------------------------------------------------- 1 | .code-wrap { 2 | text-align: left; 3 | margin-top: 30px; 4 | margin-bottom: 30px; 5 | border-radius: 6px; 6 | background-color: #444; 7 | 8 | > code { 9 | font-family: "Roboto Mono", monospace; 10 | color: #fff; 11 | font-size: 13px; 12 | font-size: 0.9em; 13 | } 14 | } 15 | 16 | code .string { 17 | color: #F58F29; 18 | } 19 | 20 | code .method { 21 | color: #EC368D; 22 | font-weight: bold; 23 | } 24 | 25 | code .comment { 26 | color: #999; 27 | } 28 | 29 | code .number { 30 | color: #51E5FF; 31 | } 32 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-c3 Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-c3-demo", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 6 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 7 | }, 8 | "dependencies": { 9 | "vue": "^2.0.0" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "^7.0.0-beta.46", 13 | "@babel/preset-env": "^7.0.0-beta.46", 14 | "babel-loader": "^8.0.0-beta.2", 15 | "cross-env": "^5.1.5", 16 | "css-loader": "^0.28.11", 17 | "node-sass": "^4.9.0", 18 | "sass-loader": "^7.0.1", 19 | "vue-loader": "^15.0.10", 20 | "vue-style-loader": "^4.1.0", 21 | "vue-template-compiler": "^2.0.0", 22 | "webpack": "^4.8.2", 23 | "webpack-cli": "^2.1.3", 24 | "webpack-dev-server": "^3.1.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 - 2018 Christoph Biering 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/src/Header.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-c3", 3 | "version": "1.2.11", 4 | "description": "vue-c3 is a reusable vue component for c3 charts", 5 | "author": "“Christoph (http://www.chryb.me)", 6 | "license": "MIT", 7 | "private": false, 8 | "main": "dist/vue-c3.cjs.js", 9 | "module": "dist/vue-c3.esm.js", 10 | "browser": "dist/vue-c3.umd.js", 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/chryb/vue-c3.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/chryb/vue-c3/issues" 17 | }, 18 | "scripts": { 19 | "build": "rollup -c" 20 | }, 21 | "keywords": [ 22 | "vue", 23 | "c3", 24 | "d3", 25 | "component", 26 | "graph" 27 | ], 28 | "peerDependencies": { 29 | "vue": "^2.0.0", 30 | "c3": "^0.5.4" 31 | }, 32 | "devDependencies": { 33 | "@babel/core": "^7.0.0-beta.46", 34 | "@babel/preset-env": "^7.0.0-beta.46", 35 | "rollup": "^0.60.7", 36 | "rollup-plugin-commonjs": "^9.1.3", 37 | "rollup-plugin-node-resolve": "^3.3.0", 38 | "rollup-plugin-scss": "^0.4.0", 39 | "rollup-plugin-uglify": "^4.0.0", 40 | "rollup-plugin-vue2": "^0.8.0", 41 | "vue-template-compiler": "^2.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import scss from 'rollup-plugin-scss' 4 | import vue from 'rollup-plugin-vue2' 5 | 6 | import pkg from './package.json' 7 | 8 | export default [ 9 | // browser-friendly UMD build 10 | { 11 | input: 'src/index.js', 12 | output: { 13 | name: 'howLongUntilLunch', 14 | file: pkg.browser, 15 | format: 'umd' 16 | }, 17 | plugins: [ 18 | resolve(), // so Rollup can find `ms` 19 | commonjs(), // so Rollup can convert `ms` to an ES module 20 | scss(), 21 | vue() 22 | ], 23 | external: [ 'c3', 'vue' ] 24 | }, 25 | 26 | // CommonJS (for Node) and ES module (for bundlers) build. 27 | // (We could have three entries in the configuration array 28 | // instead of two, but it's quicker to generate multiple 29 | // builds from a single configuration where possible, using 30 | // an array for the `output` option, where we can specify 31 | // `file` and `format` for each target) 32 | { 33 | input: 'src/index.js', 34 | external: ['ms'], 35 | output: [ 36 | { file: pkg.main, format: 'cjs' }, 37 | { file: pkg.module, format: 'es' } 38 | ], 39 | plugins: [ 40 | scss(), 41 | vue() 42 | ], 43 | external: [ 'c3', 'vue' ] 44 | } 45 | ] 46 | -------------------------------------------------------------------------------- /docs/assets/logo_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Artboard Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/VueC3.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 64 | -------------------------------------------------------------------------------- /dist/vue-c3.esm.js: -------------------------------------------------------------------------------- 1 | import c3 from 'c3'; 2 | 3 | const INIT = 'init'; 4 | const DESTROY = 'destroy'; 5 | const DISPATCH = 'dispatch'; 6 | 7 | var VueC3 = { 8 | render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})}, 9 | staticRenderFns: [], 10 | name: 'vuec3', 11 | 12 | // TODO: support for options prop 13 | props: { 14 | handler: { 15 | required: true, 16 | type: Object 17 | } 18 | }, 19 | 20 | data: function () { 21 | return { 22 | $chart: null 23 | } 24 | }, 25 | 26 | methods: { 27 | destroyChart: function () { 28 | if (this.$chart) { 29 | this.$chart = this.$chart.destroy(); 30 | } 31 | }, 32 | 33 | initChart: function (options) { 34 | if (this.$chart) { 35 | this.destroyChart(); 36 | } 37 | if (!options) { 38 | options = {}; 39 | } 40 | options.bindto = this.$el; 41 | this.$chart = c3.generate(options); 42 | }, 43 | 44 | dispatchChart: function (cb) { 45 | if (cb && this.$chart) { 46 | cb.call(null, this.$chart); 47 | } 48 | } 49 | }, 50 | 51 | mounted: function () { 52 | if (this.handler) { 53 | this.handler.$on(INIT, this.initChart); 54 | this.handler.$on(DESTROY, this.destroyChart); 55 | this.handler.$on(DISPATCH, this.dispatchChart); 56 | } 57 | }, 58 | 59 | beforeDestroy: function () { 60 | this.destroyChart(); 61 | } 62 | }; 63 | 64 | export default VueC3; 65 | -------------------------------------------------------------------------------- /dist/vue-c3.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 4 | 5 | var c3 = _interopDefault(require('c3')); 6 | 7 | const INIT = 'init'; 8 | const DESTROY = 'destroy'; 9 | const DISPATCH = 'dispatch'; 10 | 11 | var VueC3 = { 12 | render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})}, 13 | staticRenderFns: [], 14 | name: 'vuec3', 15 | 16 | // TODO: support for options prop 17 | props: { 18 | handler: { 19 | required: true, 20 | type: Object 21 | } 22 | }, 23 | 24 | data: function () { 25 | return { 26 | $chart: null 27 | } 28 | }, 29 | 30 | methods: { 31 | destroyChart: function () { 32 | if (this.$chart) { 33 | this.$chart = this.$chart.destroy(); 34 | } 35 | }, 36 | 37 | initChart: function (options) { 38 | if (this.$chart) { 39 | this.destroyChart(); 40 | } 41 | if (!options) { 42 | options = {}; 43 | } 44 | options.bindto = this.$el; 45 | this.$chart = c3.generate(options); 46 | }, 47 | 48 | dispatchChart: function (cb) { 49 | if (cb && this.$chart) { 50 | cb.call(null, this.$chart); 51 | } 52 | } 53 | }, 54 | 55 | mounted: function () { 56 | if (this.handler) { 57 | this.handler.$on(INIT, this.initChart); 58 | this.handler.$on(DESTROY, this.destroyChart); 59 | this.handler.$on(DISPATCH, this.dispatchChart); 60 | } 61 | }, 62 | 63 | beforeDestroy: function () { 64 | this.destroyChart(); 65 | } 66 | }; 67 | 68 | module.exports = VueC3; 69 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | 5 | function resolve (dir) { 6 | return path.join(__dirname, dir) 7 | } 8 | 9 | module.exports = { 10 | 11 | mode: 'production', 12 | 13 | entry: './src/main.js', 14 | 15 | output: { 16 | path: path.resolve(__dirname, './dist'), 17 | publicPath: '/dist/', 18 | filename: 'build.js' 19 | }, 20 | 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue-loader', 26 | options: { 27 | loaders: { 28 | 'css': 'vue-style-loader!css-loader', 29 | 'scss': 'vue-style-loader!css-loader!sass-loader', 30 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 31 | } 32 | } 33 | }, 34 | { 35 | test: /\.scss$/, 36 | use: [ 37 | { 38 | loader: 'style-loader' 39 | }, 40 | { 41 | loader: 'css-loader' 42 | }, 43 | { 44 | loader: 'sass-loader' 45 | } 46 | ] 47 | }, 48 | { 49 | test: /\.js$/, 50 | loader: 'babel-loader', 51 | exclude: /node_modules/ 52 | } 53 | ] 54 | }, 55 | 56 | resolve: { 57 | modules: [ 58 | 'node_modules' 59 | ], 60 | 61 | alias: { 62 | 'vue$': 'vue/dist/vue.esm.js', 63 | 'plugin': path.resolve(__dirname, "../dist/vue-c3.min.js") 64 | } 65 | }, 66 | 67 | devServer: { 68 | historyApiFallback: true, 69 | noInfo: true 70 | }, 71 | 72 | performance: { 73 | hints: false 74 | }, 75 | 76 | devtool: '#eval-source-map', 77 | 78 | plugins: [ 79 | new webpack.DefinePlugin({ 80 | 'process.env.NODE_ENV': '"production"' 81 | }), 82 | new VueLoaderPlugin() 83 | ] 84 | } 85 | -------------------------------------------------------------------------------- /dist/vue-c3.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('c3')) : 3 | typeof define === 'function' && define.amd ? define(['c3'], factory) : 4 | (global.howLongUntilLunch = factory(global.c3)); 5 | }(this, (function (c3) { 'use strict'; 6 | 7 | c3 = c3 && c3.hasOwnProperty('default') ? c3['default'] : c3; 8 | 9 | const INIT = 'init'; 10 | const DESTROY = 'destroy'; 11 | const DISPATCH = 'dispatch'; 12 | 13 | var VueC3 = { 14 | render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})}, 15 | staticRenderFns: [], 16 | name: 'vuec3', 17 | 18 | // TODO: support for options prop 19 | props: { 20 | handler: { 21 | required: true, 22 | type: Object 23 | } 24 | }, 25 | 26 | data: function () { 27 | return { 28 | $chart: null 29 | } 30 | }, 31 | 32 | methods: { 33 | destroyChart: function () { 34 | if (this.$chart) { 35 | this.$chart = this.$chart.destroy(); 36 | } 37 | }, 38 | 39 | initChart: function (options) { 40 | if (this.$chart) { 41 | this.destroyChart(); 42 | } 43 | if (!options) { 44 | options = {}; 45 | } 46 | options.bindto = this.$el; 47 | this.$chart = c3.generate(options); 48 | }, 49 | 50 | dispatchChart: function (cb) { 51 | if (cb && this.$chart) { 52 | cb.call(null, this.$chart); 53 | } 54 | } 55 | }, 56 | 57 | mounted: function () { 58 | if (this.handler) { 59 | this.handler.$on(INIT, this.initChart); 60 | this.handler.$on(DESTROY, this.destroyChart); 61 | this.handler.$on(DISPATCH, this.dispatchChart); 62 | } 63 | }, 64 | 65 | beforeDestroy: function () { 66 | this.destroyChart(); 67 | } 68 | }; 69 | 70 | return VueC3; 71 | 72 | }))); 73 | -------------------------------------------------------------------------------- /docs/src/c3.min.css: -------------------------------------------------------------------------------- 1 | .c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-c3 2 | 3 | > vue-c3 is a reusable vue component for [c3](https://github.com/c3js/c3) charts 4 | 5 | [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) 6 | [![forthebadge](http://forthebadge.com/images/badges/made-with-vue.svg)](http://forthebadge.com) 7 | [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com) 8 | 9 | ## Install 10 | 11 | ```bash 12 | npm install --save vue-c3 13 | 14 | # and if it's not already installed: 15 | npm install --save c3 16 | ``` 17 | 18 | ## Usage 19 | 20 | In your vue-component: 21 | 22 | ```vue 23 | 28 | 29 | 46 | ``` 47 | 48 | You can use the handler to send events to the `vue-c3` component: 49 | 50 | To initialize the c3 chart call: 51 | 52 | ```vue 53 | 54 | 75 | ``` 76 | 77 | ### Events 78 | 79 | An overview of all events which can be submitted to the `.$emit(name, ..)` method: 80 | 81 | |Name|Parameters|Description| 82 | |:--:|:--:|:--| 83 | |`init`|[options](http://c3js.org/reference.html)|Use this method before anything else to generate the chart| 84 | |`destroy`|-|Used to destroy the chart| 85 | |`dispatch`|[api](http://c3js.org/reference.html#api)|Access the c3 chart object directly to use the api| 86 | 87 | For example you can use `this.handler.$emit('dispatch', (chart) => chart.resize())` to resize the chart. 88 | 89 | For more information about c3 see the documentation [http://c3js.org/reference.html](http://c3js.org/reference.html). 90 | 91 | ## License 92 | 93 | Copyright (c) 2017 - 2018 Christoph Biering, Licensed under the [MIT license](./LICENSE). 94 | -------------------------------------------------------------------------------- /docs/src/style.scss: -------------------------------------------------------------------------------- 1 | $main-color: #FF0F80; 2 | 3 | body, html { 4 | top: 0; 5 | left: 0; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | -webkit-font-smoothing: antialiased; 13 | } 14 | 15 | body { 16 | font-family: "Roboto", sans-serif; 17 | background-color: #fff; 18 | font-size: 16px; 19 | letter-spacing: .9px; 20 | } 21 | 22 | /* elements */ 23 | 24 | .links { 25 | .divider { 26 | color: #999; 27 | margin: 0 10px; 28 | } 29 | } 30 | 31 | .chart { 32 | margin: 30px 0; 33 | } 34 | 35 | 36 | h1, h2 { 37 | font-family: "Roboto", sans-serif; 38 | font-weight: 700; 39 | color: #333; 40 | margin-bottom: 30px; 41 | margin-top: 30px; 42 | } 43 | 44 | h1 { 45 | font-size: 1.625em; 46 | letter-spacing: 6px; 47 | border-left: 3px solid #454545; 48 | padding-left: 20px; 49 | text-transform: uppercase; 50 | } 51 | 52 | h2 { 53 | font-size: 24px; 54 | letter-spacing: 1.9px; 55 | margin-top: 40px; 56 | } 57 | 58 | p { 59 | color: #606c77; 60 | font-size: 1.1em; 61 | font-weight: 300; 62 | letter-spacing: .01em; 63 | line-height: 1.6; 64 | } 65 | 66 | p > code { 67 | background: #f4f5f5; 68 | border-radius: .4rem; 69 | font-size: 86%; 70 | margin: 0 .2rem; 71 | padding: .2rem .5rem; 72 | white-space: nowrap; 73 | font-weight: bold; 74 | } 75 | 76 | .main { 77 | margin: 15vh auto 20px; 78 | -webkit-font-smoothing: antialiased; 79 | -moz-osx-font-smoothing: grayscale; 80 | max-width: 650px; 81 | padding-top: 40px; 82 | } 83 | 84 | .button { 85 | background: none; 86 | border: none; 87 | color: black; 88 | background-color: transparent; 89 | border: 1px solid black; 90 | border-radius: 2px; 91 | cursor: pointer; 92 | padding: 10px 20px; 93 | font-size: 18px; 94 | outline: none; 95 | margin-left: auto; 96 | margin-right: auto; 97 | margin-bottom: 60px; 98 | font-size: 0.8rem; 99 | text-transform: uppercase; 100 | font-weight: bold; 101 | 102 | &:hover { 103 | background-color: black; 104 | color: #fff; 105 | } 106 | } 107 | 108 | .separator { 109 | height: 1px; 110 | background-color: rgba(0, 0, 0, 0.1); 111 | width: 100%; 112 | } 113 | 114 | footer { 115 | margin-top: 60px; 116 | margin-bottom: 20px; 117 | line-height: 2; 118 | } 119 | 120 | a { 121 | color: $main-color; 122 | text-decoration: none; 123 | font-size: 1.1em; 124 | font-weight: 300; 125 | letter-spacing: .01em; 126 | line-height: 1.6; 127 | 128 | &:hover { 129 | text-decoration: underline; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /docs/src/App.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 97 | 98 | 101 | 102 | 106 | --------------------------------------------------------------------------------