├── .babelrc ├── .circleci └── config.yml ├── .dockerignore ├── .editorconfig ├── .eslintignore.js ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── Dockerfile ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── load-minified.js ├── openChrome.applescript ├── preview.js ├── service-worker-dev.js ├── service-worker-prod.js ├── utils.js ├── vendor-manifest.json ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.dll.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js ├── svgo-config.json └── test.env.js ├── docker-compose.yml ├── index.ejs ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── icons │ │ ├── account.svg │ │ ├── bell.svg │ │ ├── help.svg │ │ ├── index.js │ │ ├── logout.svg │ │ ├── settings.svg │ │ ├── switch.svg │ │ ├── tips.svg │ │ └── zero.svg │ ├── images │ │ ├── 404.png │ │ └── logo.png │ └── scss │ │ ├── bootstrap4 │ │ ├── .scss-lint.yml │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _breadcrumb.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _close.scss │ │ ├── _code.scss │ │ ├── _custom-forms.scss │ │ ├── _custom.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _jumbotron.scss │ │ ├── _list-group.scss │ │ ├── _media.scss │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _normalize.scss │ │ ├── _pagination.scss │ │ ├── _popover.scss │ │ ├── _print.scss │ │ ├── _progress.scss │ │ ├── _reboot.scss │ │ ├── _responsive-embed.scss │ │ ├── _tables.scss │ │ ├── _tooltip.scss │ │ ├── _transitions.scss │ │ ├── _type.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── bootstrap-grid.scss │ │ ├── bootstrap-reboot.scss │ │ ├── bootstrap.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _badge.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _cards.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _float.scss │ │ │ ├── _forms.scss │ │ │ ├── _gradients.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _grid.scss │ │ │ ├── _hover.scss │ │ │ ├── _image.scss │ │ │ ├── _list-group.scss │ │ │ ├── _lists.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _navbar-align.scss │ │ │ ├── _pagination.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _resize.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _size.scss │ │ │ ├── _table-row.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _text-hide.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _transforms.scss │ │ │ └── _visibility.scss │ │ └── utilities │ │ │ ├── _align.scss │ │ │ ├── _background.scss │ │ │ ├── _borders.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _display.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _position.scss │ │ │ ├── _screenreaders.scss │ │ │ ├── _sizing.scss │ │ │ ├── _spacing.scss │ │ │ ├── _text.scss │ │ │ └── _visibility.scss │ │ ├── common.scss │ │ ├── frame.scss │ │ ├── icon.scss │ │ ├── mixins.scss │ │ ├── style.scss │ │ ├── theme-element.scss │ │ ├── theme.scss │ │ └── variables.scss ├── components │ ├── Icon │ │ ├── Icon.vue │ │ └── index.js │ ├── _global │ │ ├── globals.json │ │ └── index.js │ └── index.js ├── constants │ └── index.js ├── filters.js ├── global.js ├── helper │ ├── ajax.js │ ├── apis │ │ ├── index.js │ │ └── user.js │ ├── auth.js │ ├── document.js │ ├── index.js │ ├── lodash.js │ └── utils.js ├── locales │ ├── common.js │ └── index.js ├── main.js ├── mixins │ └── globalMixin.js ├── router │ ├── beforeEachHooks.js │ ├── commonRoutes.js │ ├── index.js │ └── routes │ │ ├── demo.js │ │ └── index.js ├── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js └── views │ ├── Login.vue │ ├── demo │ ├── EditDialog.vue │ ├── Form.vue │ └── List.vue │ └── partials │ ├── Frame.vue │ ├── Header.vue │ ├── NotFound.vue │ ├── SideNav.vue │ └── SideNavNode.vue ├── static ├── .gitkeep ├── img │ ├── JARVIS for Webpack.png │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg ├── js │ └── vendor.dll.js └── manifest.json ├── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ │ └── test.js ├── index.js └── unit │ ├── .eslintrc │ ├── index.js │ ├── karma.conf.js │ └── specs │ └── Hello.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["minify"], 4 | ["env", { "modules": false }], 5 | "stage-2" 6 | ], 7 | "plugins": ["transform-runtime"], 8 | "comments": false, 9 | "env": { 10 | "test": { 11 | "presets": ["env", "stage-2"], 12 | "plugins": [ "istanbul" ] 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:carbon-jessie 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/repo 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: yarn install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | # - run: yarn test 38 | 39 | # run build 40 | - run: yarn run build 41 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | selenium-debug.log 9 | .happypack/ 10 | .cache/ 11 | .circleci -------------------------------------------------------------------------------- /.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 | 11 | [*.{vue,js,css,scss,html}] 12 | indent_style = space 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintignore.js: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | 'no-multiple-empty-lines': [2, {'max': 4}], 25 | // allow funName() {} & funName () {} & function() {} 26 | 'space-before-function-paren': ['error', { 27 | 'anonymous': 'ignore', 28 | 'named': 'ignore', 29 | 'asyncArrow': 'always' 30 | }], 31 | // allow debugger during development 32 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | selenium-debug.log 9 | .happypack/ 10 | .cache/ -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | 'plugins': { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | 'autoprefixer': {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node 2 | 3 | MAINTAINER nicejade 4 | 5 | COPY . /app 6 | 7 | WORKDIR /app 8 | 9 | RUN npm install 10 | 11 | EXPOSE 8080 12 | 13 | CMD npm start -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 JadeYang(杨琼璞) 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 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | require('shelljs/global') 4 | 5 | env.NODE_ENV = process.env.NODE_ENV || 'production' 6 | 7 | var ora = require('ora') 8 | var path = require('path') 9 | var chalk = require('chalk') 10 | var shell = require('shelljs') 11 | var webpack = require('webpack') 12 | var config = require('../config') 13 | var webpackConfig = require('./webpack.prod.conf') 14 | 15 | var spinner = ora('building for production...') 16 | spinner.start() 17 | 18 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 19 | shell.rm('-rf', assetsPath) 20 | shell.mkdir('-p', assetsPath) 21 | shell.config.silent = true 22 | shell.cp('-R', 'static/*', assetsPath) 23 | shell.config.silent = false 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n\n') 35 | 36 | console.log(chalk.cyan(' Build complete.\n')) 37 | console.log(chalk.yellow( 38 | ' Tip: built files are meant to be served over an HTTP server.\n' + 39 | ' Opening index.html over file:// won\'t work.\n' 40 | )) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | const config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | const path = require('path') 9 | const express = require('express') 10 | const webpack = require('webpack') 11 | const proxyMiddleware = require('http-proxy-middleware') 12 | const portfinder = require('portfinder') 13 | const chalk = require('chalk') 14 | const utils = require('./utils.js') 15 | 16 | const webpackConfig = process.env.NODE_ENV === 'testing' 17 | ? require('./webpack.prod.conf') 18 | : require('./webpack.dev.conf') 19 | 20 | // automatically open browser, if not set will be false 21 | let autoOpenBrowser = !!config.dev.autoOpenBrowser 22 | // Define HTTP proxies to your custom API backend 23 | // https://github.com/chimurai/http-proxy-middleware 24 | let proxyTable = config.dev.proxyTable 25 | 26 | let app = express() 27 | let compiler = webpack(webpackConfig) 28 | 29 | let devMiddleware = require('webpack-dev-middleware')(compiler, { 30 | publicPath: webpackConfig.output.publicPath, 31 | quiet: true 32 | }) 33 | 34 | let hotMiddleware = require('webpack-hot-middleware')(compiler, { 35 | log: () => {} 36 | }) 37 | // force page reload when html-webpack-plugin template changes 38 | compiler.plugin('compilation', function (compilation) { 39 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 40 | hotMiddleware.publish({ action: 'reload' }) 41 | cb() 42 | }) 43 | }) 44 | 45 | // proxy api requests 46 | Object.keys(proxyTable).forEach(function (context) { 47 | let options = proxyTable[context] 48 | if (typeof options === 'string') { 49 | options = { target: options } 50 | } 51 | app.use(proxyMiddleware(options.filter || context, options)) 52 | }) 53 | 54 | // handle fallback for HTML5 history API 55 | app.use(require('connect-history-api-fallback')()) 56 | 57 | // serve webpack bundle output 58 | app.use(devMiddleware) 59 | 60 | // enable hot-reload and state-preserving 61 | // compilation error display 62 | app.use(hotMiddleware) 63 | 64 | // serve pure static assets 65 | let staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 66 | app.use(staticPath, express.static('./static')) 67 | 68 | 69 | portfinder.basePort = +process.env.PORT || config.dev.port || 8080 70 | 71 | module.exports = portfinder.getPortPromise().then(port => { 72 | const urls = utils.prepareUrls('http', '0.0.0.0', port) 73 | 74 | devMiddleware.waitUntilValid(function () { 75 | console.log() 76 | console.log([ 77 | ` App running at:`, 78 | ` - Local: ${chalk.cyan(urls.localUrlForTerminal)}`, 79 | ` - Network: ${chalk.cyan(urls.lanUrlForTerminal)}` 80 | ].join('\n')) 81 | console.log() 82 | }) 83 | 84 | app.listen(port, function (err) { 85 | if (err) { 86 | console.log(err) 87 | return 88 | } 89 | 90 | // when env is testing, don't need open it 91 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 92 | utils.startBrowserProcess(urls.localUrlForBrowser) 93 | } 94 | }) 95 | }).catch(err => { 96 | console.log(err) 97 | }) 98 | -------------------------------------------------------------------------------- /build/load-minified.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('fs') 4 | const UglifyJS = require('uglify-es') 5 | 6 | module.exports = function(filePath) { 7 | const code = fs.readFileSync(filePath, 'utf-8') 8 | const result = UglifyJS.minify(code) 9 | if (result.error) return '' 10 | return result.code 11 | } 12 | -------------------------------------------------------------------------------- /build/openChrome.applescript: -------------------------------------------------------------------------------- 1 | (* 2 | Copyright (c) 2015-present, Facebook, Inc. 3 | This source code is licensed under the MIT license found in the 4 | LICENSE file at 5 | https://github.com/facebookincubator/create-react-app/blob/master/LICENSE 6 | *) 7 | 8 | property targetTab: null 9 | property targetTabIndex: -1 10 | property targetWindow: null 11 | 12 | on run argv 13 | set theURL to item 1 of argv 14 | 15 | tell application "Chrome" 16 | 17 | if (count every window) = 0 then 18 | make new window 19 | end if 20 | 21 | -- 1: Looking for tab running debugger 22 | -- then, Reload debugging tab if found 23 | -- then return 24 | set found to my lookupTabWithUrl(theURL) 25 | if found then 26 | set targetWindow's active tab index to targetTabIndex 27 | tell targetTab to reload 28 | tell targetWindow to activate 29 | set index of targetWindow to 1 30 | return 31 | end if 32 | 33 | -- 2: Looking for Empty tab 34 | -- In case debugging tab was not found 35 | -- We try to find an empty tab instead 36 | set found to my lookupTabWithUrl("chrome://newtab/") 37 | if found then 38 | set targetWindow's active tab index to targetTabIndex 39 | set URL of targetTab to theURL 40 | tell targetWindow to activate 41 | return 42 | end if 43 | 44 | -- 3: Create new tab 45 | -- both debugging and empty tab were not found 46 | -- make a new tab with url 47 | tell window 1 48 | activate 49 | make new tab with properties {URL:theURL} 50 | end tell 51 | end tell 52 | end run 53 | 54 | -- Function: 55 | -- Lookup tab with given url 56 | -- if found, store tab, index, and window in properties 57 | -- (properties were declared on top of file) 58 | on lookupTabWithUrl(lookupUrl) 59 | tell application "Chrome" 60 | -- Find a tab with the given url 61 | set found to false 62 | set theTabIndex to -1 63 | repeat with theWindow in every window 64 | set theTabIndex to 0 65 | repeat with theTab in every tab of theWindow 66 | set theTabIndex to theTabIndex + 1 67 | if (theTab's URL as string) contains lookupUrl then 68 | -- assign tab, tab index, and window to properties 69 | set targetTab to theTab 70 | set targetTabIndex to theTabIndex 71 | set targetWindow to theWindow 72 | set found to true 73 | exit repeat 74 | end if 75 | end repeat 76 | 77 | if found then 78 | exit repeat 79 | end if 80 | end repeat 81 | end tell 82 | return found 83 | end lookupTabWithUrl -------------------------------------------------------------------------------- /build/preview.js: -------------------------------------------------------------------------------- 1 | /* 2 | @date: @2018-5-19 3 | @desc: 以 Node 本地服务器，运行打包到 Dist 中的代码（❗️：npm run pretest） 4 | */ 5 | 6 | const express = require('express') 7 | const chalk = require('chalk') 8 | const childProcess = require('child_process') 9 | const fs = require('fs') 10 | const path = require('path') 11 | const opn = require('opn') 12 | 13 | const app = express() 14 | const entryFilePath = path.join(__dirname, './../dist/index.html') 15 | 16 | const openStaticServer = () => { 17 | app.use('/static', express.static(path.join(__dirname, './../dist/static'))) 18 | 19 | app.get('*', function (req, res) { 20 | const content = fs.readFileSync(entryFilePath, 'utf8') 21 | res.send(content) 22 | }) 23 | 24 | app.listen(3000, function () { 25 | console.log(chalk.cyan('Example app listening on port 3000!\n')) 26 | console.log(chalk.yellow('You Can Visit: ') + chalk.green('http://localhost:3000/')) 27 | opn('http://localhost:3000') 28 | }) 29 | } 30 | 31 | const main = () => { 32 | const isExist = fs.existsSync(entryFilePath) 33 | if (isExist) { 34 | openStaticServer() 35 | } else { 36 | const buildFile = path.join(__dirname, './build.js') 37 | const commandStr = `node ${buildFile}` 38 | const output = childProcess.execSync(commandStr, { 39 | cwd: process.cwd(), 40 | timeout: 60000, 41 | encoding: 'utf8' 42 | }) 43 | openStaticServer() 44 | console.log(output) 45 | } 46 | } 47 | 48 | main() -------------------------------------------------------------------------------- /build/service-worker-dev.js: -------------------------------------------------------------------------------- 1 | // This service worker file is effectively a 'no-op' that will reset any 2 | // previous service worker registered for the same host:port combination. 3 | // In the production build, this file is replaced with an actual service worker 4 | // file that will precache your site's local assets. 5 | // See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 6 | 7 | self.addEventListener('install', () => self.skipWaiting()); 8 | 9 | self.addEventListener('activate', () => { 10 | self.clients.matchAll({ type: 'window' }).then(windowClients => { 11 | for (let windowClient of windowClients) { 12 | // Force open pages to refresh, so that they have a chance to load the 13 | // fresh navigation response from the local dev server. 14 | windowClient.navigate(windowClient.url); 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /build/service-worker-prod.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | // Check to make sure service workers are supported in the current browser, 5 | // and that the current page is accessed from a secure origin. Using a 6 | // service worker from an insecure origin will trigger JS console errors. 7 | const isLocalhost = Boolean(window.location.hostname === 'localhost' || 8 | // [::1] is the IPv6 localhost address. 9 | window.location.hostname === '[::1]' || 10 | // 127.0.0.1/8 is considered localhost for IPv4. 11 | window.location.hostname.match( 12 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 13 | ) 14 | ); 15 | 16 | window.addEventListener('load', function() { 17 | if ('serviceWorker' in navigator && 18 | (window.location.protocol === 'https:' || isLocalhost)) { 19 | navigator.serviceWorker.register('/service-worker.js') 20 | .then(function(registration) { 21 | // updatefound is fired if service-worker.js changes. 22 | registration.onupdatefound = function() { 23 | // updatefound is also fired the very first time the SW is installed, 24 | // and there's no need to prompt for a reload at that point. 25 | // So check here to see if the page is already controlled, 26 | // i.e. whether there's an existing service worker. 27 | if (navigator.serviceWorker.controller) { 28 | // The updatefound event implies that registration.installing is set 29 | const installingWorker = registration.installing; 30 | 31 | installingWorker.onstatechange = function() { 32 | switch (installingWorker.state) { 33 | case 'installed': 34 | // At this point, the old content will have been purged and the 35 | // fresh content will have been added to the cache. 36 | // It's the perfect time to display a "New content is 37 | // available; please refresh." message in the page's interface. 38 | break; 39 | 40 | case 'redundant': 41 | throw new Error('The installing ' + 42 | 'service worker became redundant.'); 43 | 44 | default: 45 | // Ignore 46 | } 47 | }; 48 | } 49 | }; 50 | }).catch(function(e) { 51 | console.error('Error during service worker registration:', e); 52 | }); 53 | } 54 | }); 55 | })(); 56 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var config = require('../config') 6 | var merge = require('webpack-merge') 7 | var baseWebpackConfig = require('./webpack.base.conf') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 10 | var WebpackBuildNotifierPlugin = require('webpack-build-notifier') 11 | // add hot-reload related code to entry chunks 12 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 13 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 14 | }) 15 | 16 | module.exports = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: '#cheap-module-eval-source-map', 22 | plugins: [ 23 | new WebpackBuildNotifierPlugin({ 24 | logo: path.resolve('./src/assets/images/logo.png'), 25 | suppressSuccess: true 26 | }), 27 | new webpack.DefinePlugin({ 28 | 'process.env': config.dev.env 29 | }), 30 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 31 | new webpack.HotModuleReplacementPlugin(), 32 | new webpack.NoEmitOnErrorsPlugin(), 33 | // https://github.com/ampedandwired/html-webpack-plugin 34 | new HtmlWebpackPlugin({ 35 | filename: 'index.html', 36 | template: 'index.ejs', 37 | inject: true, 38 | serviceWorkerLoader: `` 40 | }), 41 | new FriendlyErrorsPlugin() 42 | ] 43 | }) 44 | -------------------------------------------------------------------------------- /build/webpack.dll.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 5 | 6 | module.exports = { 7 | mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', 8 | entry: { 9 | vendor: [ 10 | 'axios', 11 | 'babel-polyfill', 12 | 'dayjs', 13 | 'js-cookie', 14 | 'q', 15 | 'vue/dist/vue.min.js', 16 | 'vue-i18n', 17 | 'vue-router', 18 | 'vuex' 19 | ] 20 | }, 21 | output: { 22 | path: path.resolve(__dirname, '../static/js'), 23 | filename: '[name].dll.js', 24 | library: '[name]_library' 25 | }, 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.vue$/, 30 | loader: 'vue-loader' 31 | }, 32 | { 33 | test: /\.js$/, 34 | loader: 'babel-loader', 35 | exclude: /node_modules/ 36 | } 37 | ] 38 | }, 39 | optimization: { 40 | minimizer: [ 41 | new UglifyJsPlugin({ 42 | cache: true, 43 | parallel: true, 44 | sourceMap: false // set to true if you want JS source maps 45 | }), 46 | // Compress extracted CSS. We are using this plugin so that possible 47 | // duplicated CSS from different components can be deduped. 48 | new OptimizeCSSAssetsPlugin({}) 49 | ] 50 | }, 51 | plugins: [ 52 | /* 53 | @desc: https://webpack.js.org/plugins/module-concatenation-plugin/ 54 | "作用域提升(scope hoisting)",使代码体积更小[函数申明会产生大量代码](#webpack3) 55 | */ 56 | new webpack.optimize.ModuleConcatenationPlugin(), 57 | new webpack.DllPlugin({ 58 | path: path.join(__dirname, '.', '[name]-manifest.json'), 59 | name: '[name]_library' 60 | }) 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | const path = require('path') 3 | 4 | /* ~~~~~~~~~~~~~~~~~~~~~~~~@CHANGE@~~~~~~~~~~~~~~~~~~~~~~~~ */ 5 | // You can specify a specific path prefix based on your deployment. 6 | const STATIC_PATH = '/' // Example: 'https://your-domain-name/' 7 | const publicPathPrefix = process.env.NODE_ENV === 'production' ? STATIC_PATH : '/' 8 | 9 | module.exports = { 10 | build: { 11 | env: require('./prod.env'), 12 | index: path.resolve(__dirname, '../dist/index.html'), 13 | assetsRoot: path.resolve(__dirname, '../dist'), 14 | assetsSubDirectory: 'static', 15 | assetsPublicPath: publicPathPrefix, 16 | productionSourceMap: false, 17 | // Gzip off by default as many popular static hosts such as 18 | // Surge or Netlify already gzip all static assets for you. 19 | // Before setting to `true`, make sure to: 20 | // npm install --save-dev compression-webpack-plugin 21 | productionGzip: false, 22 | productionGzipExtensions: ['js', 'css'], 23 | // Run the build command with an extra argument to 24 | // View the bundle analyzer report after build finishes: 25 | // `npm run build --report` 26 | // Set to `true` or `false` to always turn it on or off 27 | bundleAnalyzerReport: process.env.npm_config_report, 28 | bundleIntelligentDashboard: process.env.npm_config_dashboard 29 | }, 30 | dev: { 31 | env: require('./dev.env'), 32 | port: 8080, 33 | autoOpenBrowser: true, 34 | assetsSubDirectory: 'static', 35 | assetsPublicPath: '/', 36 | proxyTable: { 37 | // (💛)If the agent's protocol is http, you can configure like this: 38 | '/api': 'http://localhost:3000', 39 | // [‼️💯💞]If the proxy protocol is https, you need to configure this： 40 | '/api/v1': { 41 | target: { 42 | host: 'google.com', 43 | protocol: 'https:', 44 | port: 443 45 | }, 46 | changeOrigin: true, 47 | logLevel: 'info', 48 | secure: false 49 | } 50 | }, 51 | // CSS Sourcemaps off by default because relative paths are "buggy" 52 | // with this option, according to the CSS-Loader README 53 | // (https://github.com/webpack/css-loader#sourcemaps) 54 | // In our experience, they generally work as expected, 55 | // just be aware of this issue when enabling this option. 56 | cssSourceMap: false 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/svgo-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | { 4 | "cleanupAttrs": true 5 | }, 6 | { 7 | "cleanupEnableBackground": true 8 | }, 9 | { 10 | "cleanupIDs": true 11 | }, 12 | { 13 | "cleanupListOfValues": true 14 | }, 15 | { 16 | "cleanupNumericValues": true 17 | }, 18 | { 19 | "collapseGroups": true 20 | }, 21 | { 22 | "convertColors": true 23 | }, 24 | { 25 | "convertPathData": true 26 | }, 27 | { 28 | "convertShapeToPath": true 29 | }, 30 | { 31 | "convertStyleToAttrs": true 32 | }, 33 | { 34 | "convertTransform": true 35 | }, 36 | { 37 | "mergePaths": true 38 | }, 39 | { 40 | "moveElemsAttrsToGroup": true 41 | }, 42 | { 43 | "moveGroupAttrsToElems": true 44 | }, 45 | { 46 | "removeComments": true 47 | }, 48 | { 49 | "removeDesc": true 50 | }, 51 | { 52 | "removeDimensions": true 53 | }, 54 | { 55 | "removeDoctype": true 56 | }, 57 | { 58 | "removeEditorsNSData": true 59 | }, 60 | { 61 | "removeEmptyAttrs": true 62 | }, 63 | { 64 | "removeEmptyContainers": true 65 | }, 66 | { 67 | "removeEmptyText": true 68 | }, 69 | { 70 | "removeHiddenElems": true 71 | }, 72 | { 73 | "removeMetadata": true 74 | }, 75 | { 76 | "removeNonInheritableGroupAttrs": true 77 | }, 78 | { 79 | "removeRasterImages": true 80 | }, 81 | { 82 | "removeTitle": true 83 | }, 84 | { 85 | "removeUnknownsAndDefaults": true 86 | }, 87 | { 88 | "removeUselessDefs": true 89 | }, 90 | { 91 | "removeUnusedNS": true 92 | }, 93 | { 94 | "removeUselessStrokeAndFill": true 95 | }, 96 | { 97 | "removeXMLProcInst": true 98 | }, 99 | { 100 | "sortAttrs": true 101 | } 102 | ] 103 | } 104 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | services: 3 | web: 4 | build: . 5 | ports: 6 | - "8080:8080" -------------------------------------------------------------------------------- /index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue-Boilerplate-Template 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | <% for (var chunk of webpack.chunks) { 26 | for (var file of chunk.files) { 27 | if (file.match(/\.(css)$/)) { %> 28 | 29 | <% }}} %> 30 | 31 | 32 | 33 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-boilerplate-template", 3 | "version": "3.1.0", 4 | "description": "A Nice Boilerplate Template for creating medium plus Vue.js projects ", 5 | "author": "nicejade ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "NODE_ENV=production node build/build.js", 11 | "cli": "cd cli && npm i -g && cd -", 12 | "build:dll": "webpack --config build/webpack.dll.conf.js", 13 | "lint-staged": "lint-staged", 14 | "precommit-msg": "echo 'Pre-commit checks...' && exit 0", 15 | "analyz": "npm_config_report=true npm run build", 16 | "jarvis": "npm_config_dashboard=true npm run build", 17 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 18 | "e2e": "node test/e2e/runner.js", 19 | "test": "npm run unit && npm run e2e", 20 | "pretest": "NODE_ENV=production node build/build.js && node test/index.js", 21 | "preview": "NODE_ENV=production node build/preview.js", 22 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 23 | }, 24 | "pre-commit": [ 25 | "precommit-msg", 26 | "lint-staged" 27 | ], 28 | "lint-staged": { 29 | "linters": { 30 | "src/**/*.{js,vue}": "eslint -f ./node_modules/eslint-friendly-formatter" 31 | } 32 | }, 33 | "dependencies": { 34 | "axios": "^0.18.1", 35 | "babel-polyfill": "^6.20.0", 36 | "dayjs": "^1.5.19", 37 | "element-ui": "^2.3.6", 38 | "js-cookie": "^2.1.3", 39 | "lodash": "^4.17.4", 40 | "q": "^1.4.1", 41 | "vue": "^2.5.2", 42 | "vue-i18n": "^5.0.3", 43 | "vue-router": "^2.2.0", 44 | "vuex": "^2.1.2" 45 | }, 46 | "devDependencies": { 47 | "add-asset-html-webpack-plugin": "^2.1.3", 48 | "address": "^1.0.3", 49 | "autoprefixer": "^6.7.2", 50 | "babel-core": "^6.22.1", 51 | "babel-eslint": "^7.1.1", 52 | "babel-loader": "^7.1.4", 53 | "babel-plugin-istanbul": "^3.1.2", 54 | "babel-plugin-transform-runtime": "^6.22.0", 55 | "babel-preset-env": "^1.7.0", 56 | "babel-preset-minify": "^0.4.3", 57 | "babel-preset-stage-2": "^6.22.0", 58 | "babel-register": "^6.22.0", 59 | "chalk": "^1.1.3", 60 | "connect-history-api-fallback": "^1.3.0", 61 | "copy-webpack-plugin": "^4.0.1", 62 | "cross-env": "^3.1.4", 63 | "css-loader": "^0.26.1", 64 | "eslint": "^4.18.2", 65 | "eslint-config-standard": "^6.2.1", 66 | "eslint-friendly-formatter": "^2.0.7", 67 | "eslint-loader": "^1.6.1", 68 | "eslint-plugin-html": "^2.0.0", 69 | "eslint-plugin-promise": "^3.4.0", 70 | "eslint-plugin-standard": "^2.0.1", 71 | "eventsource-polyfill": "^0.9.6", 72 | "express": "^4.14.1", 73 | "file-loader": "^0.10.0", 74 | "friendly-errors-webpack-plugin": "^1.1.3", 75 | "function-bind": "^1.1.0", 76 | "handlebars": "^4.5.3", 77 | "happypack": "^5.0.0-beta.1", 78 | "hard-source-webpack-plugin": "^0.12.0", 79 | "html-webpack-plugin": "^3.2.0", 80 | "http-proxy-middleware": "^0.17.3", 81 | "lint-staged": "^3.6.1", 82 | "mini-css-extract-plugin": "^0.4.0", 83 | "node-sass": "^4.13.1", 84 | "opn": "^4.0.2", 85 | "optimize-css-assets-webpack-plugin": "^1.3.0", 86 | "ora": "^1.1.0", 87 | "portfinder": "^1.0.13", 88 | "pre-commit": "^1.2.2", 89 | "progress-bar-webpack-plugin": "^1.9.3", 90 | "sass-loader": "^7.0.1", 91 | "scss-loader": "^0.0.1", 92 | "semver": "^5.3.0", 93 | "shelljs": "^0.7.8", 94 | "standard": "^9.0.1", 95 | "svg-sprite-loader": "^0.3.0", 96 | "svgo": "^0.7.1", 97 | "svgo-loader": "^1.1.0", 98 | "sw-precache-webpack-plugin": "^0.11.4", 99 | "uglify-es": "^3.3.9", 100 | "url-loader": "^0.5.7", 101 | "vue-loader": "^11.0.0", 102 | "vue-style-loader": "^2.0.0", 103 | "vue-template-compiler": "^2.5.2", 104 | "webpack": "4.8.1", 105 | "webpack-build-notifier": "^0.1.13", 106 | "webpack-bundle-analyzer": "3.3.2", 107 | "webpack-dev-middleware": "^3.1.3", 108 | "webpack-hot-middleware": "^2.16.1", 109 | "webpack-jarvis": "^0.3.2", 110 | "webpack-merge": "^2.6.1", 111 | "webpack-parallel-uglify-plugin": "^1.0.0" 112 | }, 113 | "engines": { 114 | "node": ">= 8.0.0", 115 | "npm": ">= 3.0.0" 116 | }, 117 | "browserslist": [ 118 | "> 1%", 119 | "last 2 versions", 120 | "not ie <= 8" 121 | ] 122 | } 123 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /src/assets/icons/account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/icons/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/assets/icons/index.js: -------------------------------------------------------------------------------- 1 | const files = require.context('.', true, /\.svg$/) 2 | 3 | const modules = {} 4 | 5 | files.keys().forEach((key) => { 6 | if (key === './index.js') return 7 | modules[key.replace(/(\.\/|\.svg)/g, '')] = files(key) 8 | }) 9 | export default modules 10 | -------------------------------------------------------------------------------- /src/assets/icons/logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/assets/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 29 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/assets/icons/switch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 12 | 21 | 27 | 29 | 32 | 35 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/assets/icons/tips.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/zero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/assets/images/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicejade/vue-boilerplate-template/f8c3c990b96dd8dd64b478e30cb9884071c06062/src/assets/images/404.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicejade/vue-boilerplate-template/f8c3c990b96dd8dd64b478e30cb9884071c06062/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/scss/bootstrap4/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | padding: $alert-padding-y $alert-padding-x; 7 | margin-bottom: $alert-margin-bottom; 8 | border: $alert-border-width solid transparent; 9 | @include border-radius($alert-border-radius); 10 | } 11 | 12 | // Headings for larger alerts 13 | .alert-heading { 14 | // Specified to prevent conflicts of changing $headings-color 15 | color: inherit; 16 | } 17 | 18 | // Provide class for links that match alerts 19 | .alert-link { 20 | font-weight: $alert-link-font-weight; 21 | } 22 | 23 | 24 | // Dismissible alerts 25 | // 26 | // Expand the right padding and account for the close button's positioning. 27 | 28 | .alert-dismissible { 29 | // Adjust close link position 30 | .close { 31 | position: relative; 32 | top: -$alert-padding-y; 33 | right: -$alert-padding-x; 34 | padding: $alert-padding-y $alert-padding-x; 35 | color: inherit; 36 | } 37 | } 38 | 39 | 40 | // Alternate styles 41 | // 42 | // Generate contextual modifier classes for colorizing the alert. 43 | 44 | .alert-success { 45 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 46 | } 47 | .alert-info { 48 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 49 | } 50 | .alert-warning { 51 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 52 | } 53 | .alert-danger { 54 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 55 | } 56 | -------------------------------------------------------------------------------- /src/assets/scss/bootstrap4/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | color: $badge-color; 13 | text-align: center; 14 | white-space: nowrap; 15 | vertical-align: baseline; 16 | @include border-radius(); 17 | 18 | // Empty badges collapse automatically 19 | &:empty { 20 | display: none; 21 | } 22 | } 23 | 24 | // Quick fix for badges in buttons 25 | .btn .badge { 26 | position: relative; 27 | top: -1px; 28 | } 29 | 30 | // scss-lint:disable QualifyingElement 31 | // Add hover effects, but only for links 32 | a.badge { 33 | @include hover-focus { 34 | color: $badge-link-hover-color; 35 | text-decoration: none; 36 | cursor: pointer; 37 | } 38 | } 39 | // scss-lint:enable QualifyingElement 40 | 41 | // Pill badges 42 | // 43 | // Make them extra rounded with a modifier to replace v3's badges. 44 | 45 | .badge-pill { 46 | padding-right: $badge-pill-padding-x; 47 | padding-left: $badge-pill-padding-x; 48 | @include border-radius($badge-pill-border-radius); 49 | } 50 | 51 | // Colors 52 | // 53 | // Contextual variations (linked badges get darker on :hover). 54 | 55 | .badge-default { 56 | @include badge-variant($badge-default-bg); 57 | } 58 | 59 | .badge-primary { 60 | @include badge-variant($badge-primary-bg); 61 | } 62 | 63 | .badge-success { 64 | @include badge-variant($badge-success-bg); 65 | } 66 | 67 | .badge-info { 68 | @include badge-variant($badge-info-bg); 69 | } 70 | 71 | .badge-warning { 72 | @include badge-variant($badge-warning-bg); 73 | } 74 | 75 | .badge-danger { 76 | @include badge-variant($badge-danger-bg); 77 | } 78 | -------------------------------------------------------------------------------- /src/assets/scss/bootstrap4/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 3 | margin-bottom: $spacer-y; 4 | list-style: none; 5 | background-color: $breadcrumb-bg; 6 | @include border-radius($border-radius); 7 | @include clearfix; 8 | } 9 | 10 | .breadcrumb-item { 11 | float: left; 12 | 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item::before { 15 | display: inline-block; // Suppress underlining of the separator in modern browsers 16 | padding-right: $breadcrumb-item-padding; 17 | padding-left: $breadcrumb-item-padding; 18 | color: $breadcrumb-divider-color; 19 | content: "#{$breadcrumb-divider}"; 20 | } 21 | 22 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 23 | // without `