xidedix
@@ -3,7 +3,7 @@
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 9"]
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
@@ -3,4 +3,4 @@
|
||||
/dist/
|
||||
/*.js
|
||||
/test/unit/coverage/
|
||||
/test/e2e/specs
|
||||
/test/e2e/specs/
|
||||
@@ -1,4 +1,4 @@
|
||||
// https://eslint.org/docs/user-guide/configuring
|
||||
// http://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
+16
-4
@@ -1,6 +1,18 @@
|
||||
.DS_Store
|
||||
.idea
|
||||
node_modules/
|
||||
dist/
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
/test/unit/coverage/
|
||||
/test/e2e/reports/
|
||||
selenium-debug.log
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
||||
+37
-81
@@ -1,86 +1,42 @@
|
||||
## [vue](./README.md) version `changelog`
|
||||
|
||||
##### `v1.0.13`
|
||||
- fix: rollback `optimize-css-assets-webpack-plugin` to `^3.2.0`
|
||||
- refactor: App.vue scss/css imports cleanup
|
||||
##### `v2.0.0-alpha.1`
|
||||
- refactor: separation of concerns - (CoreUI template/components) for use CoreUI as npm module
|
||||
- refactor: project structure change
|
||||
- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
|
||||
- chore: moved to [Semantic Versioning](https://semver.org/)
|
||||
- refactor: move to [CoreUI-Vue](https://github.com/coreui/coreui-vue) components `v2`
|
||||
- refactor: rename containers
|
||||
- refactor(Colors): view layout, sub-components
|
||||
- refactor(Switches): move to `Switch component v2`
|
||||
- refactor(Cards): add `transition` to card-header-action `btn-close`
|
||||
- refactor(Cards): add `collapse` to card-header-action `btn-minimize`
|
||||
- refactor(Forms): add `transition` to card-header-action `btn-close`
|
||||
- refactor(Forms): add `autocomplete` attrib
|
||||
- refactor(Forms): add missing `form` tags
|
||||
- refactor(Buttons): view rearrange
|
||||
- refactor(Jumbotrons): view rearrange
|
||||
- feat(Icons): add `CoreUI Icons` set
|
||||
- feat(Tabs): add missing feat `tabs`
|
||||
- feat(Charts): add `CustomTooltips`, fix tooltip `chartId` issue
|
||||
- refactor: move `scss` to `assets`
|
||||
- refactor: IE polyfills
|
||||
- chore: dependencies update
|
||||
- chore: cleanups
|
||||
|
||||
##### `v1.0.12`
|
||||
- refactor(Aside): b-tab title with icon issue
|
||||
- chore: dependencies update
|
||||
- refactor(pages): `<b-input-group-prepend>`, `<b-input-group-text>`
|
||||
- refactor(dashboard): `<b-form-radio-group>`
|
||||
- fix(widgets): props spacing
|
||||
- refactor: `router/index/ja` minor tweaks
|
||||
- refactor: rename components `c-aside`, `c-footer`
|
||||
- refactor(breadcrumb): add `:key` porp
|
||||
- feat(forms): datepicker input `<b-form-input type="date">`
|
||||
|
||||
##### `v1.0.11`
|
||||
- refactor: project directory structure
|
||||
- update: vuejs-templates/webpack to `1.3.1`
|
||||
- update: vue to `2.5.13`
|
||||
- chore: dependencies update
|
||||
|
||||
##### `v1.0.10`
|
||||
- fix: `className` -> `class`
|
||||
- refactor: `<b-input-group-prepend>`
|
||||
- refactor: `<b-input-group-append>`
|
||||
- refactor: `<b-input-group-text>`
|
||||
- refactor: remove `<b-input-group-button>`
|
||||
- test: initial `Dashboard` unit test added
|
||||
- update: bootstrap-vue to `2.0.0-rc.1`
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.9`
|
||||
- refactor: Sidebar structure
|
||||
- test: initial e2e test added
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.8`
|
||||
- update: vue to `2.5.13`
|
||||
- update: Bootstrap to `4.0.0-beta.3`
|
||||
- update: bootstrap-vue to `1.4.0`
|
||||
- chore: dependencies update
|
||||
- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
|
||||
- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
|
||||
- feature: some Bootstrap4 components added
|
||||
- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton`
|
||||
- refactor(checkboxes, radios, labels): temp tweaks
|
||||
- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
|
||||
|
||||
###### `v1.0.6`
|
||||
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
|
||||
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
|
||||
- refactor: Modal's ok-button variants
|
||||
- refactor: forms with validation feedback
|
||||
- update: bootstrap-vue to `1.1.0`
|
||||
- update: vue to `2.5.6`
|
||||
|
||||
###### `v1.0.5`
|
||||
- update: bootstrap-vue to `1.0.x`
|
||||
- fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
|
||||
- refactor: extract `Table` component from `Tables`
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
|
||||
- fix: add `table-responsive-sm` class to `Tables` #26
|
||||
- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
|
||||
- fix: `b-progress` `height` property workaround (bootstrap-vue)
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.4`
|
||||
- refactor: import Bootstrap 4 SCSS files from node_modules
|
||||
- fix: callouts styles
|
||||
|
||||
###### `v1.0.3`
|
||||
- update: Bootstrap version to `4.0.0-beta.2`
|
||||
- update: vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
|
||||
|
||||
###### `v1.0.2`
|
||||
- update: to vue: `^2.5.x`
|
||||
- update: bootstrap-vue to `1.0.0-beta.9`
|
||||
- refactor: (vue `v2.5.x`) deprecated `<template scope="props">` replace with `<div slot-scope="props">`
|
||||
- refactor: `HeaderDropdown` component added to `Header`
|
||||
- refactor: `b-badge` component added (bootstrap-vue)
|
||||
- chore: `package.json` project dependencies update
|
||||
other:
|
||||
|
||||
- feat: app-footer fixed
|
||||
- refactor(dashboard): brand-card, progress-group-bars
|
||||
- refactor(social-box-chart-example): props
|
||||
- feat(forms): new `<b-form-input type="date">` example added
|
||||
- refactor(cards): Card outline, Card accent - title variants added
|
||||
- feat: card-header-actions
|
||||
- feat(_nav): Navbars example added
|
||||
- update: vuejs-templates/webpack to v1.3.1
|
||||
- fix: eslint `valid template root`
|
||||
- refactor: card header title spacing
|
||||
- refactor: btn-brand
|
||||
- test(e2e): update
|
||||
- refactor: sidebar
|
||||
- refactor: chart examples
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
### Check out our Vue Admin Templates and support CoreUI Development
|
||||
|
||||
[](https://genesisui.com/admin-templates/vuejs/prime/?support=1)
|
||||
[](https://genesisui.com/bundle.html?support=1)
|
||||
|
||||
[Check out Bootstrap Admin Templates Bundle](https://genesisui.com/admin-templates/vuejs/prime/?support=1)
|
||||
[Check out Bootstrap Admin Templates Bundle](https://genesisui.com/bundle.html?support=1)
|
||||
|
||||
This is Vue.js version of our Bootstrap 4 admin template [CoreUI](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
|
||||
@@ -32,23 +32,75 @@ Within the download you'll find the following directories and files:
|
||||
|
||||
```
|
||||
CoreUI-Vue/
|
||||
├── Vue_Full_Project/
|
||||
├── Vue_Starter/
|
||||
|
||||
├── build/ # webpack config files
|
||||
├── config/ # main project config
|
||||
├── scss/ # styles
|
||||
├── src/ # project root
|
||||
│ ├── assets/ # module assets (processed by webpack)
|
||||
│ ├── components/ # ui components
|
||||
│ ├── containers/ # ui containers
|
||||
│ ├── router/ # routing
|
||||
│ ├── shared/ # utils
|
||||
│ ├── views/ # ui views
|
||||
│ ├── App.vue # main app component
|
||||
│ └── main.js # app entry file
|
||||
├── _nav.js # sidebar nav config
|
||||
├── static/ # pure static assets (directly copied)
|
||||
├── test/
|
||||
│ └── unit/ # unit tests
|
||||
│ └── e2e/ # e2e tests
|
||||
├── .babelrc.js # babel config
|
||||
├── .editorconfig # settings for your editor
|
||||
├── .eslintignore # eslint ignore rules
|
||||
├── .eslintrc.js # eslint config
|
||||
├── .gitignore # defaults for gitignore
|
||||
├── .postcssrc.js # postcss config
|
||||
├── CHANGELOG.md
|
||||
├── index.html # index.html template
|
||||
├── LICENSE
|
||||
├── README.md
|
||||
└── package.json # build scripts and dependencies
|
||||
```
|
||||
|
||||
## Other Versions
|
||||
|
||||
CoreUI includes 6 Version for Angular 4, AngularJS, React.js, Vue.js, Static HTML5 and AJAX HTML5.
|
||||
|
||||
* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular).
|
||||
* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS).
|
||||
* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
* [React.js Version](https://github.com/mrholek/CoreUI-React).
|
||||
* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue).
|
||||
* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular)
|
||||
* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS)
|
||||
* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template)
|
||||
* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template)
|
||||
* [React.js Version](https://github.com/mrholek/CoreUI-React)
|
||||
* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue)
|
||||
* [ASP.NET Core 2 MVC Version](https://github.com/mrholek/CoreUI-NET)
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
|
||||
# run unit tests
|
||||
npm run unit
|
||||
|
||||
# run e2e tests
|
||||
npm run e2e
|
||||
|
||||
# run all tests
|
||||
npm test
|
||||
```
|
||||
|
||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? [Please open a new issue](https://github.com/mrholek/CoreUI-Vue/issues/new).
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
/build/
|
||||
/config/
|
||||
/dist/
|
||||
/*.js
|
||||
/test/unit/coverage/
|
||||
/test/e2e/specs
|
||||
@@ -1,29 +0,0 @@
|
||||
// https://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'standard'
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
selenium-debug.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
@@ -1,86 +0,0 @@
|
||||
## [vue](./README.md) version `changelog`
|
||||
|
||||
##### `v1.0.13`
|
||||
- fix: rollback `optimize-css-assets-webpack-plugin` to `^3.2.0`
|
||||
- refactor: App.vue scss/css imports cleanup
|
||||
- chore: dependencies update
|
||||
|
||||
##### `v1.0.12`
|
||||
- refactor(Aside): b-tab title with icon issue
|
||||
- chore: dependencies update
|
||||
- refactor(pages): `<b-input-group-prepend>`, `<b-input-group-text>`
|
||||
- refactor(dashboard): `<b-form-radio-group>`
|
||||
- fix(widgets): props spacing
|
||||
- refactor: `router/index/ja` minor tweaks
|
||||
- refactor: rename components `c-aside`, `c-footer`
|
||||
- refactor(breadcrumb): add `:key` porp
|
||||
- feat(forms): datepicker input `<b-form-input type="date">`
|
||||
|
||||
##### `v1.0.11`
|
||||
- refactor: project directory structure
|
||||
- update: vuejs-templates/webpack to `1.3.1`
|
||||
- update: vue to `2.5.13`
|
||||
- chore: dependencies update
|
||||
|
||||
##### `v1.0.10`
|
||||
- fix: `className` -> `class`
|
||||
- refactor: `<b-input-group-prepend>`
|
||||
- refactor: `<b-input-group-append>`
|
||||
- refactor: `<b-input-group-text>`
|
||||
- refactor: remove `<b-input-group-button>`
|
||||
- test: initial `Dashboard` unit test added
|
||||
- update: bootstrap-vue to `2.0.0-rc.1`
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.9`
|
||||
- refactor: Sidebar structure
|
||||
- test: initial e2e test added
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.8`
|
||||
- update: vue to `2.5.13`
|
||||
- update: Bootstrap to `4.0.0-beta.3`
|
||||
- update: bootstrap-vue to `1.4.0`
|
||||
- chore: dependencies update
|
||||
- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
|
||||
- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
|
||||
- feature: some Bootstrap4 components added
|
||||
- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton`
|
||||
- refactor(checkboxes, radios, labels): temp tweaks
|
||||
- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
|
||||
|
||||
###### `v1.0.6`
|
||||
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
|
||||
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
|
||||
- refactor: Modal's ok-button variants
|
||||
- refactor: forms with validation feedback
|
||||
- update: bootstrap-vue to `1.1.0`
|
||||
- update: vue to `2.5.6`
|
||||
|
||||
###### `v1.0.5`
|
||||
- update: bootstrap-vue to `1.0.x`
|
||||
- fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
|
||||
- refactor: extract `Table` component from `Tables`
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
|
||||
- fix: add `table-responsive-sm` class to `Tables` #26
|
||||
- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
|
||||
- fix: `b-progress` `height` property workaround (bootstrap-vue)
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.4`
|
||||
- refactor: import Bootstrap 4 SCSS files from node_modules
|
||||
- fix: callouts styles
|
||||
|
||||
###### `v1.0.3`
|
||||
- update: Bootstrap version to `4.0.0-beta.2`
|
||||
- update: vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
|
||||
|
||||
###### `v1.0.2`
|
||||
- update: to vue: `^2.5.x`
|
||||
- update: bootstrap-vue to `1.0.0-beta.9`
|
||||
- refactor: (vue `v2.5.x`) deprecated `<template scope="props">` replace with `<div slot-scope="props">`
|
||||
- refactor: `HeaderDropdown` component added to `Header`
|
||||
- refactor: `b-badge` component added (bootstrap-vue)
|
||||
- chore: `package.json` project dependencies update
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
# CoreUI Vue
|
||||
|
||||
> CoreUI Vue Open Source Bootsrtap 4 Admin Template
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
|
||||
# run unit tests
|
||||
npm run unit
|
||||
|
||||
# run e2e tests
|
||||
npm run e2e
|
||||
|
||||
# run all tests
|
||||
npm test
|
||||
```
|
||||
|
||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
Generated
-16844
File diff suppressed because it is too large
Load Diff
@@ -1,113 +0,0 @@
|
||||
{
|
||||
"name": "@coreui/vue",
|
||||
"version": "1.0.13",
|
||||
"description": "CoreUI Vue Open Source Bootstrap 4 Admin Template",
|
||||
"author": "Łukasz Holeczek",
|
||||
"homepage": ".",
|
||||
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit && npm run e2e",
|
||||
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.1.1",
|
||||
"bootstrap-vue": "^2.0.0-rc.9",
|
||||
"chart.js": "^2.7.2",
|
||||
"flag-icon-css": "^3.0.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"simple-line-icons": "^2.4.1",
|
||||
"vue": "^2.5.16",
|
||||
"vue-chartjs": "^3.3.1",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^8.5.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.3",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-istanbul": "^4.1.6",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.7.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chai": "^4.1.2",
|
||||
"chalk": "^2.4.1",
|
||||
"chromedriver": "^2.38.3",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"cross-env": "^5.1.5",
|
||||
"cross-spawn": "^6.0.5",
|
||||
"connect-history-api-fallback": "1.5.0",
|
||||
"css-loader": "^0.28.11",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-friendly-formatter": "^4.0.1",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-import": "^2.11.0",
|
||||
"eslint-plugin-html": "^4.0.3",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"eslint-plugin-vue": "^4.5.0",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.11",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"inject-loader": "^4.0.1",
|
||||
"karma": "^2.0.2",
|
||||
"karma-coverage": "^1.1.2",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-phantomjs-shim": "^1.5.0",
|
||||
"karma-sinon-chai": "^1.3.4",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.32",
|
||||
"karma-webpack": "^3.0.0",
|
||||
"lolex": "^2.5.0",
|
||||
"mocha": "^5.1.1",
|
||||
"nightwatch": "^0.9.21",
|
||||
"node-notifier": "^5.2.1",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^2.1.0",
|
||||
"phantomjs-prebuilt": "^2.1.16",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"postcss-url": "^7.3.2",
|
||||
"rimraf": "^2.6.2",
|
||||
"selenium-server": "^3.12.0",
|
||||
"semver": "^5.5.0",
|
||||
"shelljs": "^0.8.2",
|
||||
"sinon": "^5.0.7",
|
||||
"sinon-chai": "^3.0.0",
|
||||
"uglifyjs-webpack-plugin": "^1.2.5",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-loader": "^14.2.2",
|
||||
"vue-style-loader": "^4.1.0",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"webpack": "^3.12.0",
|
||||
"webpack-bundle-analyzer": "^2.11.3",
|
||||
"webpack-dev-server": "^2.11.2",
|
||||
"webpack-merge": "^4.1.2",
|
||||
"node-sass": "^4.9.0",
|
||||
"sass-loader": "^7.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.4",
|
||||
"npm": ">= 5.6.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 9"
|
||||
]
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
// Bootstrap overrides
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f0f3f5;
|
||||
$gray-200: #c2cfd6;
|
||||
$gray-300: #a4b7c1;
|
||||
$gray-400: #869fac;
|
||||
$gray-500: #678898;
|
||||
$gray-600: #536c79;
|
||||
$gray-700: #3e515b;
|
||||
$gray-800: #29363d;
|
||||
$gray-900: #151b1e;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #20a8d8;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f86c6b;
|
||||
$orange: #f8cb00;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #4dbd74;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #63c2de;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-300,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800,
|
||||
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-transitions: true;
|
||||
$enable-rounded: false;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #e4e5e6;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: 0.875rem;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: #fff;
|
||||
$breadcrumb-margin-bottom: 1.5rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
$card-cap-bg: $gray-100;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-padding-y: 0;
|
||||
$dropdown-border-color: $gray-200;
|
||||
$dropdown-divider-bg: $gray-100;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-secondary-border: $gray-300;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-100;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-accent: $gray-100;
|
||||
$table-bg-hover: $gray-100;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-group-addon-bg: $gray-100;
|
||||
$input-border-color: $gray-200;
|
||||
$input-group-addon-border-color: $gray-200;
|
||||
@@ -1 +0,0 @@
|
||||
// core overrides
|
||||
@@ -1,27 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
// animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
.aside-menu {
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $aside-menu-width;
|
||||
color: $aside-menu-color;
|
||||
background: $aside-menu-bg;
|
||||
@include borders($aside-menu-borders);
|
||||
|
||||
.nav-tabs {
|
||||
border-color: $border-color;
|
||||
.nav-link {
|
||||
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
|
||||
color: $body-color;
|
||||
border-top: 0;
|
||||
&.active {
|
||||
color: theme-color("primary");
|
||||
border-right-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
.nav-item:first-child {
|
||||
.nav-link {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($aside-menu-bg, 5%);
|
||||
border-right: 1px solid darken($aside-menu-bg, 5%);
|
||||
border-left: 1px solid darken($aside-menu-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($aside-menu-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.img-avatar {
|
||||
border-radius: 50em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
$width: 36px;
|
||||
$status-width: 10px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-xs {
|
||||
$width: 20px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-sm {
|
||||
$width: 24px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-lg {
|
||||
$width: 72px;
|
||||
$status-width: 12px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatars-stack {
|
||||
.avatar.avatar-xs {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
// .avatar.avatar-sm {
|
||||
//
|
||||
// }
|
||||
|
||||
.avatar {
|
||||
margin-right: -15px;
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
|
||||
|
||||
&:hover {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .avatar.avatar-lg {
|
||||
//
|
||||
// }
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.badge-pill {
|
||||
border-radius: $badge-pill-border-radius;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
.breadcrumb-menu {
|
||||
margin-left: auto;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 $input-btn-padding-x;
|
||||
color: $text-muted;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.btn {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
@@ -1,566 +0,0 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook,
|
||||
.btn-twitter,
|
||||
.btn-linkedin,
|
||||
.btn-flickr,
|
||||
.btn-tumblr,
|
||||
.btn-xing,
|
||||
.btn-github,
|
||||
.btn-html5,
|
||||
.btn-openid,
|
||||
.btn-stack-overflow,
|
||||
.btn-youtube,
|
||||
.btn-css3,
|
||||
.btn-dribbble,
|
||||
.btn-google-plus,
|
||||
.btn-instagram,
|
||||
.btn-pinterest,
|
||||
.btn-vk,
|
||||
.btn-yahoo,
|
||||
.btn-behance,
|
||||
.btn-dropbox,
|
||||
.btn-reddit,
|
||||
.btn-spotify,
|
||||
.btn-vine,
|
||||
.btn-foursquare,
|
||||
.btn-vimeo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
||||
|
||||
&.btn-lg {
|
||||
@include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
$color: $facebook;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09a";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
$color: $twitter;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f099";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
$color: $linkedin;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0e1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flickr {
|
||||
$color: $flickr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
$color: $tumblr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f173";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xing {
|
||||
$color: $xing;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f168";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
$color: $github;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-html5 {
|
||||
$color: $html5;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-openid {
|
||||
$color: $openid;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-stack-overflow {
|
||||
$color: $stack-overflow;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-css3 {
|
||||
$color: $css3;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
$color: $youtube;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f167";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
$color: $dribbble;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f17d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
$color: $google-plus;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d5";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
$color: $instagram;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
$color: $pinterest;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d2";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vk {
|
||||
$color: $vk;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f189";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
$color: $yahoo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-behance {
|
||||
$color: $behance;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1b4";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropbox {
|
||||
$color: $dropbox;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
$color: $reddit;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1a1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
$color: $spotify;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1bc";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vine {
|
||||
$color: $vine;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1ca";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-foursquare {
|
||||
$color: $foursquare;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f180";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
$color: $vimeo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f194";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.callout {
|
||||
position: relative;
|
||||
padding: 0 $spacer;
|
||||
margin: $spacer 0;
|
||||
border: 0 solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
|
||||
@if $enable-rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-bordered {
|
||||
border: 1px solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
}
|
||||
.callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.callout + .callout {
|
||||
margin-top: - .25rem;
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-left-color: $text-muted;
|
||||
|
||||
h4 {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.callout-#{$color} {
|
||||
border-left-color: $value;
|
||||
|
||||
h4 {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
.card {
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: darken($value, 12.5%);
|
||||
.card-header {
|
||||
background-color: darken($value, 3%);
|
||||
border-color: darken($value, 12.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-white .text-muted {
|
||||
color: rgba(255,255,255,.6) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
||||
.icon-bg {
|
||||
display: inline-block;
|
||||
padding: $card-spacer-y $card-spacer-x !important;
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-right: $card-spacer-x;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -$card-spacer-x;
|
||||
line-height: inherit;
|
||||
color: $card-icon-color;
|
||||
vertical-align: bottom;
|
||||
background: $card-icon-bg;
|
||||
border-right: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $card-spacer-y $card-spacer-x / 2;
|
||||
color: $text-muted;
|
||||
border-top: 0;
|
||||
|
||||
&.active {
|
||||
color: $body-color;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-header-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: - $input-btn-padding-y;
|
||||
}
|
||||
.btn-sm {
|
||||
margin-top: - $input-btn-padding-y-sm;
|
||||
}
|
||||
.btn-lg {
|
||||
margin-top: - $input-btn-padding-y-lg;
|
||||
}
|
||||
}
|
||||
//
|
||||
.card-footer {
|
||||
|
||||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
padding: 0 $card-spacer-x;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="card-outline-"] {
|
||||
.card-body {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
&.card-outline-top {
|
||||
border-top-width: 2px;
|
||||
border-right-color: $border-color;
|
||||
border-bottom-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-accent-#{$color} {
|
||||
@include card-accent-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Card Actions
|
||||
.card-header {
|
||||
> i {
|
||||
margin-right: $spacer / 2;
|
||||
}
|
||||
.card-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
//height: inherit;
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50px;
|
||||
padding: $card-spacer-y 0;
|
||||
margin: 0 !important;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-left: 1px solid $border-color;
|
||||
box-shadow: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.r180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 230px;
|
||||
margin: 6px;
|
||||
|
||||
.input-group-prepend, .input-group-append {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-full {
|
||||
margin-top: - $spacer;
|
||||
margin-right: - $grid-gutter-width / 2;
|
||||
margin-left: - $grid-gutter-width / 2;
|
||||
border: 0;
|
||||
border-bottom: $card-border-width solid $border-color;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
|
||||
&.cols-2 {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.drag, .drag {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
.card-placeholder {
|
||||
background: rgba(0,0,0,.025);
|
||||
border: 1px dashed $gray-300;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.chart-wrapper {
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
// scss-lint:disable QualifyingElement
|
||||
base-chart.chart {
|
||||
display: block !important;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
// Temp fix for reactstrap
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu-right {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
color: $dropdown-border-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
padding: 8px 20px;
|
||||
background: $dropdown-divider-bg;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
.btn {
|
||||
margin-top: -7px;
|
||||
color: $dropdown-header-color;
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
width: 250px;
|
||||
}
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.app-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 $spacer;
|
||||
color: $footer-color;
|
||||
background: $footer-bg;
|
||||
@include borders($footer-borders);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.row.row-equal {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.main .container-fluid {
|
||||
padding: 0 30px;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
@@ -1,387 +0,0 @@
|
||||
// IE10&11 Flexbox fix
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
|
||||
.app,
|
||||
app-dashboard,
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
flex: 0 0 $navbar-height;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
flex: 0 0 $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
// $sidebar-width is the width of the columns
|
||||
flex: 0 0 $sidebar-width;
|
||||
// put the nav on the left
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
// $aside-menu-width is the width of the columns
|
||||
flex: 0 0 $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// header
|
||||
//
|
||||
.header-fixed {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
}
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-off-canvas {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky - 2;
|
||||
}
|
||||
|
||||
// if sidebar + main + aside
|
||||
.main:nth-child(2) {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
// if sidebar + main
|
||||
.main:first-child {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// if main + aside
|
||||
.main:last-child {
|
||||
.breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-minimized {
|
||||
.main .breadcrumb {
|
||||
left: $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden, &.sidebar-off-canvas {
|
||||
.main .breadcrumb {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside-menu-hidden, &.aside-menu-off-canvas {
|
||||
.main .breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky;
|
||||
height: $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-bottom: $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
.app-header,
|
||||
.app-footer,
|
||||
.sidebar,
|
||||
.main,
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile layout
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
color: $navbar-color;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: - ($navbar-brand-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
|
||||
.breadcrumb-fixed {
|
||||
.main:nth-child(2) .breadcrumb {
|
||||
right: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
|
||||
.sidebar-nav,
|
||||
.nav {
|
||||
width: $mobile-sidebar-width;
|
||||
min-height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// .aside-menu {
|
||||
// margin-right: - $aside-menu-width;
|
||||
// }
|
||||
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-right: - $mobile-sidebar-width !important;
|
||||
margin-left: $mobile-sidebar-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
// Angular Version
|
||||
// Make clicks pass-through
|
||||
// scss-lint:disable all
|
||||
#loading-bar,
|
||||
#loading-bar-spinner {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
-moz-transition: 350ms linear all;
|
||||
-o-transition: 350ms linear all;
|
||||
-webkit-transition: 350ms linear all;
|
||||
transition: 350ms linear all;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter,
|
||||
#loading-bar.ng-leave.ng-leave-active,
|
||||
#loading-bar-spinner.ng-enter,
|
||||
#loading-bar-spinner.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter.ng-enter-active,
|
||||
#loading-bar.ng-leave,
|
||||
#loading-bar-spinner.ng-enter.ng-enter-active,
|
||||
#loading-bar-spinner.ng-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#loading-bar .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20002;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
-moz-transition: width 350ms;
|
||||
-o-transition: width 350ms;
|
||||
-webkit-transition: width 350ms;
|
||||
transition: width 350ms;
|
||||
}
|
||||
|
||||
// Fancy blur effect
|
||||
#loading-bar .peg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 2px;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-moz-box-shadow: #29d 1px 0 6px 1px;
|
||||
-ms-box-shadow: #29d 1px 0 6px 1px;
|
||||
-webkit-box-shadow: #29d 1px 0 6px 1px;
|
||||
box-shadow: #29d 1px 0 6px 1px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
#loading-bar-spinner {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10002;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading-bar-spinner .spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #29d;
|
||||
border-left-color: #29d;
|
||||
border-radius: 50%;
|
||||
|
||||
-moz-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-ms-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-o-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-webkit-animation: loading-bar-spinner 400ms linear infinite;
|
||||
animation: loading-bar-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading-bar-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes loading-bar-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes loading-bar-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes loading-bar-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loading-bar-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//Ajax & Static Version
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border: 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
padding: $padding-y 0;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar($width, $status-width) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $width;
|
||||
|
||||
.img-avatar {
|
||||
width: $width;
|
||||
height: $width;
|
||||
}
|
||||
|
||||
.avatar-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: $status-width;
|
||||
height: $status-width;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin borders($borders) {
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border: $size $style $color;
|
||||
} @else if $direction == "top" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-top: $size $style $color;
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-right: $size $style $color;
|
||||
} @else if $direction == "bottom" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-bottom: $size $style $color;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-left: $size $style $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-width($borders, $width) {
|
||||
$sidebar-width: $width;
|
||||
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: ($sidebar-width - (2 * $size));
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
}
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-accent-variant($color) {
|
||||
border-top-width: 2px;
|
||||
border-top-color: $color;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
|
||||
.modal-content {
|
||||
border-color: $value;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: #fff;
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
color: $gray-800;
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
.tab-pane {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
.tab-content {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
@include borders($navbar-border);
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
width: $navbar-brand-width;
|
||||
height: $navbar-height;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
margin-right: 0;
|
||||
background-color: $navbar-brand-bg;
|
||||
background-image: $navbar-brand-logo;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $navbar-brand-logo-size;
|
||||
@include borders($navbar-brand-border);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
min-width: 50px;
|
||||
padding: $navbar-toggler-padding-y 0;
|
||||
|
||||
&:hover .navbar-toggler-icon {
|
||||
background-image: $navbar-toggler-icon-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
height: 23px;
|
||||
background-image: $navbar-toggler-icon;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
min-width: 50px;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: 0;
|
||||
border: 0;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding-bottom: 0;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.brand-minimized {
|
||||
.app-header.navbar {
|
||||
.navbar-brand {
|
||||
width: $navbar-brand-minimized-width;
|
||||
background-color: $navbar-brand-minimized-bg;
|
||||
background-image: $navbar-brand-minimized-logo;
|
||||
background-size: $navbar-brand-minimized-logo-size;
|
||||
@include borders($navbar-brand-minimized-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
hr.transparent {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.progress-xs {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// White progress bar
|
||||
.progress-white {
|
||||
background-color: rgba(255,255,255,.2) !important;
|
||||
.progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
//
|
||||
// RTL Support
|
||||
//
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
*[dir="rtl"] {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 0;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
.breadcrumb-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.breadcrumb-menu {
|
||||
right: auto;
|
||||
left: $breadcrumb-padding-x;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
.dropdown-item {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: -10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
//margin-right: 0;
|
||||
margin-left: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
&.nav-dropdown-toggle {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized .sidebar {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
i {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav > .nav-dropdown {
|
||||
|
||||
&:hover {
|
||||
> .nav-dropdown-items {
|
||||
right: $sidebar-minimized-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal bars
|
||||
.horizontal-bars {
|
||||
|
||||
li {
|
||||
|
||||
.bars {
|
||||
padding-right: 100px;
|
||||
padding-left: 0;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon list
|
||||
.icons-list {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
right: auto;
|
||||
left: 45px;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Callouts
|
||||
.callout {
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-right-color: $text-muted;
|
||||
}
|
||||
}
|
||||
@@ -1,454 +0,0 @@
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@include borders($sidebar-borders);
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 0 $spacer;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: $navbar-height;
|
||||
color: $sidebar-color;
|
||||
background: 0;
|
||||
border: 0;
|
||||
opacity: .8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Will be added soon
|
||||
// .sidebar-brand { }
|
||||
|
||||
.sidebar-header {
|
||||
flex: 0 0 $sidebar-header-height;
|
||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
||||
text-align: center;
|
||||
background: $sidebar-header-bg;
|
||||
}
|
||||
|
||||
.sidebar-form .form-control {
|
||||
color: $sidebar-form-color;
|
||||
background: $sidebar-form-bg;
|
||||
border: $sidebar-form-border;
|
||||
|
||||
&::placeholder {
|
||||
color: $sidebar-form-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.nav-link-#{$color} {
|
||||
background: $value;
|
||||
i {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
&:hover {
|
||||
background: darken($value,5%) !important;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <li class="nav-item nav-dropdown">
|
||||
.nav-dropdown.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1500px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 $sidebar-footer-height;
|
||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||
background: $sidebar-footer-bg;
|
||||
@include borders($sidebar-footer-borders);
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
position: relative;
|
||||
flex: 0 0 $sidebar-minimizer-height;
|
||||
background-color: $sidebar-minimizer-bg;
|
||||
border: 0;
|
||||
@include borders($sidebar-minimizer-borders);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $sidebar-minimizer-height;
|
||||
height: $sidebar-minimizer-height;
|
||||
content: "";
|
||||
background-image: $sidebar-minimizer-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: $sidebar-minimizer-height / 4;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-minimizer-hover-bg;
|
||||
&::before {
|
||||
background-image: $sidebar-minimizer-hover-indicator;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
|
||||
.nav-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-compact-width;
|
||||
border-left: 0 !important;
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $spacer / 4 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Minimized Sidebar
|
||||
.sidebar-minimized {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-minimizer::before {
|
||||
width: 100%;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
|
||||
> .nav-link {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,301 +0,0 @@
|
||||
@mixin switch-size($width, $height, $font-size, $handle-margin) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
.switch-label {
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch($type, $width, $height, $font-size, $handle-margin) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
@if $type == icon {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
font-size: $font-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@if $type == ddd {
|
||||
background-color: $gray-100;
|
||||
} @else {
|
||||
background-color: #fff;
|
||||
}
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
transition: opacity background .15s ease-out;
|
||||
}
|
||||
@if $type == text or $type == icon {
|
||||
.switch-label::before,
|
||||
.switch-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transition: inherit;
|
||||
}
|
||||
.switch-label::before {
|
||||
right: 1px;
|
||||
color: $gray-200;
|
||||
content: attr(data-off);
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 1px;
|
||||
color: #fff;
|
||||
content: attr(data-on);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
//background: $gray-lightest;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: $handle-margin;
|
||||
left: $handle-margin;
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1px;
|
||||
transition: left .15s ease-out;
|
||||
@if $type == ddd {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
|
||||
|
||||
@if $type == ddd {
|
||||
@extend .switch-pill;
|
||||
}
|
||||
|
||||
//size variations
|
||||
@if $type == default {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == text {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == icon {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == ddd {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: $color !important;
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-alt-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
background: $color !important;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
$switch-lg-width: 48px;
|
||||
$switch-lg-height: 28px;
|
||||
$switch-lg-font-size: 12px;
|
||||
|
||||
$switch-width: 40px;
|
||||
$switch-height: 24px;
|
||||
$switch-font-size: 10px;
|
||||
|
||||
$handle-margin: 2px;
|
||||
|
||||
$switch-sm-width: 32px;
|
||||
$switch-sm-height: 20px;
|
||||
$switch-sm-font-size: 8px;
|
||||
|
||||
$switch-xs-width: 24px;
|
||||
$switch-xs-height: 16px;
|
||||
$switch-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-text-lg-width: 56px;
|
||||
$switch-text-lg-height: 28px;
|
||||
$switch-text-lg-font-size: 12px;
|
||||
|
||||
$switch-text-width: 48px;
|
||||
$switch-text-height: 24px;
|
||||
$switch-text-font-size: 10px;
|
||||
|
||||
$switch-text-sm-width: 40px;
|
||||
$switch-text-sm-height: 20px;
|
||||
$switch-text-sm-font-size: 8px;
|
||||
|
||||
$switch-text-xs-width: 32px;
|
||||
$switch-text-xs-height: 16px;
|
||||
$switch-text-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-icon-lg-width: 56px;
|
||||
$switch-icon-lg-height: 28px;
|
||||
$switch-icon-lg-font-size: 12px;
|
||||
|
||||
$switch-icon-width: 48px;
|
||||
$switch-icon-height: 24px;
|
||||
$switch-icon-font-size: 10px;
|
||||
|
||||
$switch-icon-sm-width: 40px;
|
||||
$switch-icon-sm-height: 20px;
|
||||
$switch-icon-sm-font-size: 8px;
|
||||
|
||||
$switch-icon-xs-width: 32px;
|
||||
$switch-icon-xs-height: 16px;
|
||||
$switch-icon-xs-font-size: 7px;
|
||||
|
||||
.switch.switch-default {
|
||||
@include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-text {
|
||||
@include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-icon {
|
||||
@include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-3d {
|
||||
@include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
|
||||
}
|
||||
|
||||
//pills style
|
||||
.switch-pill {
|
||||
.switch-label,
|
||||
.switch-handle {
|
||||
border-radius: 50em !important;
|
||||
}
|
||||
|
||||
.switch-label::before {
|
||||
right: 2px !important;
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
//normal style
|
||||
.switch-#{$color} {
|
||||
@include switch-variant($value);
|
||||
}
|
||||
//outline style
|
||||
.switch-#{$color}-outline {
|
||||
@include switch-outline-variant($value);
|
||||
}
|
||||
//outline alternative style
|
||||
.switch-#{$color}-outline-alt {
|
||||
@include switch-outline-alt-variant($value);
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.table-outline {
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-align-middle {
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-clear {
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
.pagination-datatables, .pagination {
|
||||
li {
|
||||
@extend .page-item;
|
||||
|
||||
a {
|
||||
@extend .page-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
// temp fix for Vue & React
|
||||
|
||||
// Open state for the dropdown
|
||||
.open, .show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
.img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@extend .card-body;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: .75rem !important;
|
||||
}
|
||||
|
||||
.font-sm {
|
||||
font-size: .85rem !important;
|
||||
}
|
||||
|
||||
.font-lg {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/display";
|
||||
@@ -1,219 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
// Core Admin Variables
|
||||
|
||||
$enable-sidebar-nav-rounded: false !default;
|
||||
|
||||
$border-color: $gray-200 !default;
|
||||
$layout-transition-speed: .25s !default;
|
||||
|
||||
// Social Colors
|
||||
|
||||
$facebook: #3b5998 !default;
|
||||
$twitter: #00aced !default;
|
||||
$linkedin: #4875b4 !default;
|
||||
$google-plus: #d34836 !default;
|
||||
$flickr: #ff0084 !default;
|
||||
$tumblr: #32506d !default;
|
||||
$xing: #026466 !default;
|
||||
$github: #4183c4 !default;
|
||||
$html5: #e34f26 !default;
|
||||
$openid: #f78c40 !default;
|
||||
$stack-overflow: #fe7a15 !default;
|
||||
$youtube: #b00 !default;
|
||||
$css3: #0170ba !default;
|
||||
$dribbble: #ea4c89 !default;
|
||||
$google-plus: #bb4b39 !default;
|
||||
$instagram: #517fa4 !default;
|
||||
$pinterest: #cb2027 !default;
|
||||
$vk: #45668e !default;
|
||||
$yahoo: #400191 !default;
|
||||
$behance: #1769ff !default;
|
||||
$dropbox: #007ee5 !default;
|
||||
$reddit: #ff4500 !default;
|
||||
$spotify: #7ab800 !default;
|
||||
$vine: #00bf8f !default;
|
||||
$foursquare: #1073af !default;
|
||||
$vimeo: #aad450 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-height: 55px !default;
|
||||
$navbar-bg: #fff !default;
|
||||
$navbar-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$navbar-brand-width: 155px !default;
|
||||
$navbar-brand-bg: #fff !default;
|
||||
$navbar-brand-logo: url('/static/img/logo.png') !default;
|
||||
$navbar-brand-logo-size: 70px auto !default;
|
||||
$navbar-brand-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$navbar-brand-minimized-width: 50px !default;
|
||||
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||
$navbar-brand-minimized-logo: url('/static/img/logo-symbol.png') !default;
|
||||
$navbar-brand-minimized-logo-size: 24px !default;
|
||||
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||
|
||||
$navbar-color: $gray-600 !default;
|
||||
$navbar-hover-color: $gray-800 !default;
|
||||
$navbar-active-color: $gray-800 !default;
|
||||
$navbar-disabled-color: $gray-300 !default;
|
||||
|
||||
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar
|
||||
|
||||
$sidebar-width: 200px !default;
|
||||
$sidebar-padding: 0 !default;
|
||||
$sidebar-minimized-width: 50px !default;
|
||||
$sidebar-minimized-height: $sidebar-minimized-width !default;
|
||||
$sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !default;
|
||||
$sidebar-bg: $gray-800 !default;
|
||||
$sidebar-borders: none !default;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
$sidebar-nav-title-padding-y: .75rem !default;
|
||||
$sidebar-nav-title-padding-x: 1rem !default;
|
||||
$sidebar-nav-title-color: $gray-200 !default;
|
||||
$sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-hover-color: #fff !default;
|
||||
$sidebar-nav-link-hover-bg: theme-color("primary") !default;
|
||||
$sidebar-nav-link-hover-icon-color: #fff !default;
|
||||
$sidebar-nav-link-hover-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-active-color: #fff !default;
|
||||
$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default;
|
||||
$sidebar-nav-link-active-icon-color: theme-color("primary") !default;
|
||||
$sidebar-nav-link-active-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-dropdown-color: #fff !default;
|
||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
$sidebar-footer-borders: 0 !default;
|
||||
|
||||
// Sidebar Minimizer
|
||||
|
||||
$sidebar-minimizer-height: 50px !default;
|
||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-minimizer-borders: 0 !default;
|
||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
||||
$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
|
||||
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
|
||||
// Top Navigation
|
||||
|
||||
$top-nav-bg: #fff !default;
|
||||
$top-nav-color: $body-color !default;
|
||||
$top-nav-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$top-nav-ul-borders: (
|
||||
all: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$top-nav-hover-color: #fff !default;
|
||||
$top-nav-hover-bg: theme-color("primary") !default;
|
||||
$top-nav-active-color: #fff !default;
|
||||
$top-nav-active-bg: theme-color("primary") !default;
|
||||
$top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Aside
|
||||
|
||||
$aside-menu-width: 250px !default;
|
||||
$aside-menu-color: $gray-800 !default;
|
||||
$aside-menu-bg: #fff !default;
|
||||
$aside-menu-borders: (
|
||||
left: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$aside-menu-nav-padding-y: .75rem !default;
|
||||
$aside-menu-nav-padding-x: 1rem !default;
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-height: 50px !default;
|
||||
$footer-bg: $gray-100 !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-borders: (
|
||||
top: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-icon-bg: transparent !default;
|
||||
$card-icon-color: $body-color !default;
|
||||
@@ -1,253 +0,0 @@
|
||||
// .social-box
|
||||
.social-box {
|
||||
min-height: 160px;
|
||||
margin-bottom: 2 * $card-spacer-y;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
i {
|
||||
display: block;
|
||||
margin: -1px -1px 0;
|
||||
font-size: 40px;
|
||||
line-height: 90px;
|
||||
background: $gray-200;
|
||||
|
||||
@include border-radius($card-border-radius $card-border-radius 0 0);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
height: 90px;
|
||||
margin: -90px 0 0;
|
||||
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
height: 90px !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 10px 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: $border-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $facebook;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $twitter;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $linkedin;
|
||||
}
|
||||
}
|
||||
|
||||
&.google-plus {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $google-plus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-bars {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
.title {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.legend {
|
||||
text-align: center;
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: -9px;
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 40px;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
margin: 2px;
|
||||
line-height: 35px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
height: 40px;
|
||||
margin-left: 50px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
padding: 2px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 45px;
|
||||
text-align: right;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
float: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 2px 0 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
// Import core styles
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Additional typography
|
||||
@import "typography";
|
||||
|
||||
// Animations
|
||||
@import "animate";
|
||||
|
||||
// Components
|
||||
@import "aside";
|
||||
@import "avatars";
|
||||
@import "badge";
|
||||
@import "breadcrumb-menu";
|
||||
@import "breadcrumb";
|
||||
@import "buttons";
|
||||
@import "callout";
|
||||
@import "card";
|
||||
@import "charts";
|
||||
@import "dropdown";
|
||||
@import "footer";
|
||||
@import "grid";
|
||||
@import "input-group";
|
||||
@import "loading";
|
||||
@import "modal";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "progress";
|
||||
@import "sidebar";
|
||||
@import "switches";
|
||||
@import "tables";
|
||||
@import "widgets";
|
||||
|
||||
// Layout Options
|
||||
@import "layout";
|
||||
|
||||
@import "others";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
|
||||
// Temporary fixes
|
||||
@import "temp";
|
||||
|
||||
// Right-to-left
|
||||
@import "rtl";
|
||||
@@ -1,8 +0,0 @@
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
//border
|
||||
@each $prop, $abbrev in (border: b) {
|
||||
@each $size in (0,1,2) {
|
||||
@if $size == 0 {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
|
||||
} @else {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.d#{$infix}-down-none { display: none !important; }
|
||||
// .d#{$infix}-inline { display: inline !important; }
|
||||
// .d#{$infix}-inline-block { display: inline-block !important; }
|
||||
// .d#{$infix}-block { display: block !important; }
|
||||
// .d#{$infix}-table { display: table !important; }
|
||||
// .d#{$infix}-table-cell { display: table-cell !important; }
|
||||
// .d#{$infix}-flex { display: flex !important; }
|
||||
// .d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
/*!
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.11
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
// Override Boostrap variables
|
||||
@import "bootstrap-variables";
|
||||
|
||||
// Import Bootstrap source files
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "../bootstrap-variables";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins";
|
||||
@import "../core-variables";
|
||||
@import "../core/variables";
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<aside class="aside-menu">
|
||||
<b-tabs>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class='icon-list'></i>
|
||||
</template>
|
||||
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
|
||||
<small><b>Today</b></small>
|
||||
</Callout>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<Callout variant="warning" class="m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Meeting with <strong>Lucas</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</Callout>
|
||||
<hr class="mx-3 my-0">
|
||||
<Callout variant="info" class="m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Skype with <strong>Megan</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
||||
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
|
||||
</Callout>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
|
||||
<small><b>Tomorrow</b></small>
|
||||
</Callout>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<Callout variant="danger" class="m-0 py-3">
|
||||
<div>New UI Project - <strong>deadline</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</Callout>
|
||||
<hr class="mx-3 my-0">
|
||||
<Callout variant="success" class="m-0 py-3">
|
||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</Callout>
|
||||
<hr class="mx-3 my-0">
|
||||
<Callout variant="primary" class="m-0 py-3">
|
||||
<div><strong>Team meeting</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="static/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</Callout>
|
||||
<hr class="mx-3 my-0">
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class='icon-speech'></i>
|
||||
</template>
|
||||
<div class="p-3">
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class='icon-settings'></i>
|
||||
</template>
|
||||
<div class="p-3">
|
||||
<h6>Settings</h6>
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h6>System Utilization</h6>
|
||||
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
|
||||
<b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
|
||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
||||
<b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
|
||||
<small class="text-muted">11444GB/16384MB</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
||||
<b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
|
||||
<small class="text-muted">243GB/256GB</small>
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
||||
<b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
|
||||
<small class="text-muted">25GB/256GB</small>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Callout from './Callout'
|
||||
import cSwitch from './Switch'
|
||||
export default {
|
||||
name: 'c-aside',
|
||||
components: {
|
||||
Callout,
|
||||
cSwitch
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
|
||||
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
||||
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isLast (index) {
|
||||
return index === this.list.length - 1
|
||||
},
|
||||
showName (item) {
|
||||
if (item.meta && item.meta.label) {
|
||||
item = item.meta && item.meta.label
|
||||
}
|
||||
if (item.name) {
|
||||
item = item.name
|
||||
}
|
||||
return item
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div :class="classList">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
variant: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'callout',
|
||||
this.calloutVariant
|
||||
]
|
||||
},
|
||||
calloutVariant () {
|
||||
return this.variant ? `callout-${this.variant}` : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
|
||||
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'c-footer'
|
||||
}
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<header class="app-header navbar">
|
||||
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<b-link class="navbar-brand" to="#"></b-link>
|
||||
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<b-navbar-nav class="d-md-down-none">
|
||||
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
||||
<b-nav-item class="px-3">Users</b-nav-item>
|
||||
<b-nav-item class="px-3">Settings</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<b-nav-item class="d-md-down-none">
|
||||
<i class="icon-bell"></i>
|
||||
<b-badge pill variant="danger">5</b-badge>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="d-md-down-none">
|
||||
<i class="icon-list"></i>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="d-md-down-none">
|
||||
<i class="icon-location-pin"></i>
|
||||
</b-nav-item>
|
||||
<HeaderDropdown/>
|
||||
</b-navbar-nav>
|
||||
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
<script>
|
||||
import HeaderDropdown from './HeaderDropdown.vue'
|
||||
|
||||
export default {
|
||||
name: 'c-header',
|
||||
components: {
|
||||
HeaderDropdown
|
||||
},
|
||||
methods: {
|
||||
sidebarToggle (e) {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('sidebar-hidden')
|
||||
},
|
||||
sidebarMinimize (e) {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('sidebar-minimized')
|
||||
},
|
||||
mobileSidebarToggle (e) {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('sidebar-mobile-show')
|
||||
},
|
||||
asideToggle (e) {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('aside-menu-hidden')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<b-nav-item-dropdown right no-caret>
|
||||
<template slot="button-content">
|
||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</template>
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'header-dropdown',
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<SidebarHeader/>
|
||||
<SidebarForm/>
|
||||
<nav class="sidebar-nav">
|
||||
<div slot="header"></div>
|
||||
<ul class="nav">
|
||||
<template v-for="(item, index) in navItems">
|
||||
<template v-if="item.title">
|
||||
<SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||
</template>
|
||||
<template v-else-if="item.divider">
|
||||
<SidebarNavDivider :key="index" :classes="item.class"/>
|
||||
</template>
|
||||
<template v-else-if="item.label">
|
||||
<SidebarNavLabel :key="index" :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="item.children">
|
||||
<!-- First level dropdown -->
|
||||
<SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
|
||||
<template v-for="(childL1, index1) in item.children">
|
||||
<template v-if="childL1.children">
|
||||
<!-- Second level dropdown -->
|
||||
<SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
||||
<li class="nav-item" :key="index2" v-for="(childL2, index2) in childL1.children">
|
||||
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
|
||||
</li>
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SidebarNavItem :key="index1" :classes="item.class">
|
||||
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
</template>
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SidebarNavItem :key="index" :classes="item.class">
|
||||
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
<slot></slot>
|
||||
</nav>
|
||||
<SidebarFooter/>
|
||||
<SidebarMinimizer/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SidebarFooter from './SidebarFooter'
|
||||
import SidebarForm from './SidebarForm'
|
||||
import SidebarHeader from './SidebarHeader'
|
||||
import SidebarMinimizer from './SidebarMinimizer'
|
||||
import SidebarNavDivider from './SidebarNavDivider'
|
||||
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
import SidebarNavTitle from './SidebarNavTitle'
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLabel from './SidebarNavLabel'
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
props: {
|
||||
navItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SidebarFooter,
|
||||
SidebarForm,
|
||||
SidebarHeader,
|
||||
SidebarMinimizer,
|
||||
SidebarNavDivider,
|
||||
SidebarNavDropdown,
|
||||
SidebarNavLink,
|
||||
SidebarNavTitle,
|
||||
SidebarNavItem,
|
||||
SidebarNavLabel
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
e.preventDefault()
|
||||
e.target.parentElement.classList.toggle('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.nav-link {
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<!-- <div class="sidebar-footer"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-footer'
|
||||
}
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<!-- <div class="sidebar-form"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-form'
|
||||
}
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<!-- <div class="sidebar-header"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-header'
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-minimizer',
|
||||
methods: {
|
||||
sidebarMinimize () {
|
||||
document.body.classList.toggle('sidebar-minimized')
|
||||
},
|
||||
brandMinimize () {
|
||||
document.body.classList.toggle('brand-minimized')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList"></li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-divider',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'divider',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
|
||||
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
|
||||
<ul class="nav-dropdown-items">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
e.preventDefault()
|
||||
e.target.parentElement.classList.toggle('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList" @click="hideMobile">
|
||||
<slot></slot>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-item',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-item',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideMobile () {
|
||||
if (document.body.classList.contains('sidebar-mobile-show')) {
|
||||
document.body.classList.toggle('sidebar-mobile-show')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<SidebarNavItem :classes="classList.navItem">
|
||||
<a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
export default {
|
||||
name: 'sidebar-nav-label',
|
||||
components: {
|
||||
SidebarNavItem,
|
||||
SidebarNavLink
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: '#'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'fa fa-circle'
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
const classes = {
|
||||
navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
|
||||
navLink: 'nav-label',
|
||||
icon: [
|
||||
this.icon ? this.icon : 'fa fa-circle',
|
||||
this.label.variant ? `text-${this.label.variant}` : '',
|
||||
this.label.class ? this.label.class : ''
|
||||
].join(' ')
|
||||
}
|
||||
return classes
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getClasses (classes) {
|
||||
return classes ? classes.split(' ') : []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div v-if="isExternalLink">
|
||||
<a :href="url" :class="classList">
|
||||
<i :class="icon"></i> {{name}}
|
||||
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else>
|
||||
<router-link :to="url" :class="classList">
|
||||
<i :class="icon"></i> {{name}}
|
||||
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-link',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
badge: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-link',
|
||||
this.linkVariant,
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
linkVariant () {
|
||||
return this.variant ? `nav-link-${this.variant}` : ''
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : []
|
||||
},
|
||||
isExternalLink () {
|
||||
if (this.url.substring(0, 4) === 'http') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList">
|
||||
<template v-if="wrapper && wrapper.element">
|
||||
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
|
||||
{{name}}
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{name}}
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
wrapper: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-title',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<label :class="classList">
|
||||
<input type="checkbox"
|
||||
class="switch-input"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@change="handleChange">
|
||||
<template v-if="isOn">
|
||||
<span class="switch-label" :data-on="on" :data-off="off"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="switch-label"></span>
|
||||
</template>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
default: true
|
||||
},
|
||||
uncheckedValue: {
|
||||
default: false
|
||||
},
|
||||
checked: {
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
pill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
on: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
off: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'switch',
|
||||
this.switchType,
|
||||
this.switchVariant,
|
||||
this.switchPill,
|
||||
this.switchSize
|
||||
]
|
||||
},
|
||||
switchType () {
|
||||
return this.type ? `switch-${this.type}` : `switch-default`
|
||||
},
|
||||
switchVariant () {
|
||||
return this.variant ? `switch-${this.variant}` : `switch-secondary`
|
||||
},
|
||||
switchPill () {
|
||||
return !this.pill ? null : `switch-pill`
|
||||
},
|
||||
switchSize () {
|
||||
return this.size ? `switch-${this.size}` : ''
|
||||
},
|
||||
isChecked () {
|
||||
return this.checked === this.value
|
||||
},
|
||||
isOn () {
|
||||
return !this.on ? null : true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange ({ target: { checked } }) {
|
||||
this.$emit('change', checked ? this.value : this.uncheckedValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
import Aside from './Aside.vue'
|
||||
import Breadcrumb from './Breadcrumb.vue'
|
||||
import Callout from './Callout.vue'
|
||||
import Footer from './Footer.vue'
|
||||
import Header from './Header/Header.vue'
|
||||
import Sidebar from './Sidebar/Sidebar.vue'
|
||||
import Switch from './Switch.vue'
|
||||
|
||||
export {
|
||||
Aside,
|
||||
Breadcrumb,
|
||||
Callout,
|
||||
Footer,
|
||||
Header,
|
||||
Sidebar,
|
||||
Switch
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<AppHeader/>
|
||||
<div class="app-body">
|
||||
<Sidebar :navItems="nav"/>
|
||||
<main class="main">
|
||||
<breadcrumb :list="list"/>
|
||||
<div class="container-fluid">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</main>
|
||||
<AppAside/>
|
||||
</div>
|
||||
<AppFooter/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nav from '../_nav'
|
||||
import { Header as AppHeader, Sidebar, Aside as AppAside, Footer as AppFooter, Breadcrumb } from '../components/'
|
||||
|
||||
export default {
|
||||
name: 'full',
|
||||
components: {
|
||||
AppHeader,
|
||||
Sidebar,
|
||||
AppAside,
|
||||
AppFooter,
|
||||
Breadcrumb
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
nav: nav.items
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
name () {
|
||||
return this.$route.name
|
||||
},
|
||||
list () {
|
||||
return this.$route.matched
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,18 +0,0 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: {
|
||||
App
|
||||
}
|
||||
})
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<p>For more information visit website</p>
|
||||
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>with slots</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron>
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>variants</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'jumbotrons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,339 +0,0 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="3d Switch">
|
||||
<c-switch type="3d" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch default">
|
||||
<c-switch type="default" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch default - pills">
|
||||
<c-switch type="default" variant="primary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline">
|
||||
<c-switch type="default" variant="primary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline - pills">
|
||||
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline alternative">
|
||||
<c-switch type="default" variant="primary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline alternative - pills">
|
||||
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text - pills">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline - pills">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline alternative">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline alternative - pills">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon - pills">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline - pills">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline alternative">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline alternative - pills">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="12">
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
Sizes
|
||||
</div>
|
||||
<b-card-body class="p-0">
|
||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||
<template slot="example" slot-scope="data">
|
||||
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cSwitch from '../../components/Switch'
|
||||
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'size'},
|
||||
{key: 'example'},
|
||||
{key: 'css_class', label: 'CSS Class'}
|
||||
],
|
||||
items: [
|
||||
{size: 'Large', example: {type: '3d', variant: 'primary', size: 'lg', checked: true}, css_class: 'Add following code <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {type: '3d', variant: 'primary', size: '', checked: true}, css_class: '-'},
|
||||
{size: 'Small', example: {type: '3d', variant: 'primary', size: 'sm', checked: true}, css_class: 'Add following code <code>size="sm"</code>'},
|
||||
{size: 'Extra small', example: {type: '3d', variant: 'primary', size: 'xs', checked: true}, css_class: 'Add following code <code>size="xs"</code>'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,292 +0,0 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase"><b-button variant="facebook"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing"><span>Xing</span></b-button>
|
||||
<b-button variant="github"><span>Github</span></b-button>
|
||||
<b-button variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase"><b-button variant="facebook icon"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook icon"></b-button>
|
||||
<b-button size="sm" variant="twitter icon"></b-button>
|
||||
<b-button size="sm" variant="linkedin icon"></b-button>
|
||||
<b-button size="sm" variant="flickr icon"></b-button>
|
||||
<b-button size="sm" variant="tumblr icon"></b-button>
|
||||
<b-button size="sm" variant="xing icon"></b-button>
|
||||
<b-button size="sm" variant="github icon"></b-button>
|
||||
<b-button size="sm" variant="html5 icon"></b-button>
|
||||
<b-button size="sm" variant="openid icon"></b-button>
|
||||
<b-button size="sm" variant="stack-overflow icon"></b-button>
|
||||
<b-button size="sm" variant="css3 icon"></b-button>
|
||||
<b-button size="sm" variant="youtube icon"></b-button>
|
||||
<b-button size="sm" variant="dribbble icon"></b-button>
|
||||
<b-button size="sm" variant="google-plus icon"></b-button>
|
||||
<b-button size="sm" variant="instagram icon"></b-button>
|
||||
<b-button size="sm" variant="pinterest icon"></b-button>
|
||||
<b-button size="sm" variant="vk icon"></b-button>
|
||||
<b-button size="sm" variant="yahoo icon"></b-button>
|
||||
<b-button size="sm" variant="behance icon"></b-button>
|
||||
<b-button size="sm" variant="dropbox icon"></b-button>
|
||||
<b-button size="sm" variant="reddit icon"></b-button>
|
||||
<b-button size="sm" variant="spotify icon"></b-button>
|
||||
<b-button size="sm" variant="vine icon"></b-button>
|
||||
<b-button size="sm" variant="foursquare icon"></b-button>
|
||||
<b-button size="sm" variant="vimeo icon"></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook icon"></b-button>
|
||||
<b-button variant="twitter icon"></b-button>
|
||||
<b-button variant="linkedin icon"></b-button>
|
||||
<b-button variant="flickr icon"></b-button>
|
||||
<b-button variant="tumblr icon"></b-button>
|
||||
<b-button variant="xing icon"></b-button>
|
||||
<b-button variant="github icon"></b-button>
|
||||
<b-button variant="html5 icon"></b-button>
|
||||
<b-button variant="openid icon"></b-button>
|
||||
<b-button variant="stack-overflow icon"></b-button>
|
||||
<b-button variant="css3 icon"></b-button>
|
||||
<b-button variant="youtube icon"></b-button>
|
||||
<b-button variant="dribbble icon"></b-button>
|
||||
<b-button variant="google-plus icon"></b-button>
|
||||
<b-button variant="instagram icon"></b-button>
|
||||
<b-button variant="pinterest icon"></b-button>
|
||||
<b-button variant="vk icon"></b-button>
|
||||
<b-button variant="yahoo icon"></b-button>
|
||||
<b-button variant="behance icon"></b-button>
|
||||
<b-button variant="dropbox icon"></b-button>
|
||||
<b-button variant="reddit icon"></b-button>
|
||||
<b-button variant="spotify icon"></b-button>
|
||||
<b-button variant="vine icon"></b-button>
|
||||
<b-button variant="foursquare icon"></b-button>
|
||||
<b-button variant="vimeo icon"></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook icon"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter icon"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin icon"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr icon"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr icon"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing icon"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github icon"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 icon"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid icon"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow icon"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 icon"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube icon"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble icon"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus icon"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram icon"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest icon"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk icon"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo icon"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance icon"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox icon"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit icon"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify icon"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine icon"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare icon"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase"><b-button variant="facebook text"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github text"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk text"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button variant="github text"><span>Github</span></b-button>
|
||||
<b-button variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk text"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github text"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk text"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'social-buttons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<b-button variant="primary">Primary</b-button>
|
||||
<!-- Secondary, outline button -->
|
||||
<b-button variant="secondary">Secondary</b-button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<b-button variant="success">Success</b-button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<b-button variant="warning">Warning</b-button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<b-button variant="danger">Danger</b-button>
|
||||
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
|
||||
<b-button variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<b-button variant="primary"><i class="fa fa-star"></i> Primary</b-button>
|
||||
<b-button variant="secondary"><i class="fa fa-lightbulb-o"></i> Secondary</b-button>
|
||||
<b-button variant="success"><i class="fa fa-magic"></i> Success</b-button>
|
||||
<b-button variant="warning"><i class="fa fa-map-marker"></i> Warning</b-button>
|
||||
<b-button variant="danger"><i class="fa fa-rss"></i> Danger</b-button>
|
||||
<b-button variant="link"><i class="fa fa-link"></i> Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="primary">Primary</b-button>
|
||||
<b-button size="lg" variant="secondary">Secondary</b-button>
|
||||
<b-button size="lg" variant="success">Success</b-button>
|
||||
<b-button size="lg" variant="info">Info</b-button>
|
||||
<b-button size="lg" variant="warning">Warning</b-button>
|
||||
<b-button size="lg" variant="danger">Danger</b-button>
|
||||
<b-button size="lg" variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
|
||||
</div>
|
||||
<b-button size="sm" variant="primary">Primary</b-button>
|
||||
<b-button size="sm" variant="secondary">Secondary</b-button>
|
||||
<b-button size="sm" variant="success">Success</b-button>
|
||||
<b-button size="sm" variant="info">Info</b-button>
|
||||
<b-button size="sm" variant="warning">Warning</b-button>
|
||||
<b-button size="sm" variant="danger">Danger</b-button>
|
||||
<b-button size="sm" variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="primary" :disabled="true">Primary</b-button>
|
||||
<b-button size="lg" variant="secondary" :disabled="true">Secondary</b-button>
|
||||
<b-button size="lg" variant="success" :disabled="true">Success</b-button>
|
||||
<b-button size="lg" variant="info" :disabled="true">Info</b-button>
|
||||
<b-button size="lg" variant="warning" :disabled="true">Warning</b-button>
|
||||
<b-button size="lg" variant="danger" :disabled="true">Danger</b-button>
|
||||
<b-button size="lg" variant="link" :disabled="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :active="true">Primary</b-button>
|
||||
<b-button variant="secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="success" :active="true">Success</b-button>
|
||||
<b-button variant="info" :active="true">Info</b-button>
|
||||
<b-button variant="warning" :active="true">Warning</b-button>
|
||||
<b-button variant="danger" :active="true">Danger</b-button>
|
||||
<b-button variant="link" :active="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="secondary" :pressed="true">Secondary</b-button>
|
||||
<b-button variant="success" :pressed="true">Success</b-button>
|
||||
<b-button variant="info" :pressed="true">Info</b-button>
|
||||
<b-button variant="warning" :pressed="true">Warning</b-button>
|
||||
<b-button variant="danger" :pressed="true">Danger</b-button>
|
||||
<b-button variant="link" :pressed="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
</b-card>
|
||||
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="secondary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="primary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="success" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="info" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="warning" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="danger" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="link" :block="true">Block level button</b-button>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
<b-col md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<b-button variant="outline-primary">Primary</b-button>
|
||||
<!-- Secondary, outline button -->
|
||||
<b-button variant="outline-secondary">Secondary</b-button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<b-button variant="outline-success">Success</b-button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<b-button variant="outline-warning">Warning</b-button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<b-button variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<b-button variant="outline-primary"><i class="fa fa-star"></i> Primary</b-button>
|
||||
<b-button variant="outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</b-button>
|
||||
<b-button variant="outline-success"><i class="fa fa-magic"></i> Success</b-button>
|
||||
<b-button variant="outline-warning"><i class="fa fa-map-marker"></i> Warning</b-button>
|
||||
<b-button variant="outline-danger"><i class="fa fa-rss"></i> Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="outline-primary">Primary</b-button>
|
||||
<b-button size="lg" variant="outline-secondary">Secondary</b-button>
|
||||
<b-button size="lg" variant="outline-success">Success</b-button>
|
||||
<b-button size="lg" variant="outline-info">Info</b-button>
|
||||
<b-button size="lg" variant="outline-warning">Warning</b-button>
|
||||
<b-button size="lg" variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
|
||||
</div>
|
||||
<b-button size="sm" variant="outline-primary">Primary</b-button>
|
||||
<b-button size="sm" variant="outline-secondary">Secondary</b-button>
|
||||
<b-button size="sm" variant="outline-success">Success</b-button>
|
||||
<b-button size="sm" variant="outline-info">Info</b-button>
|
||||
<b-button size="sm" variant="outline-warning">Warning</b-button>
|
||||
<b-button size="sm" variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :disabled="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :disabled="true">Secondary</b-button>
|
||||
<b-button variant="success" :disabled="true">Success</b-button>
|
||||
<b-button variant="outline-info" :disabled="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :disabled="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :disabled="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :active="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="outline-success" :active="true">Success</b-button>
|
||||
<b-button variant="outline-info" :active="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :active="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :active="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
|
||||
<b-button variant="outline-success" :pressed="true">Success</b-button>
|
||||
<b-button variant="outline-info" :pressed="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :pressed="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :pressed="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="outline-secondary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-primary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-success" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-info" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-warning" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-danger" :block="true">Block level button</b-button>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'standard-buttons',
|
||||
data: () => {
|
||||
return { myToggle: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 39, 10, 40, 39, 80, 40]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,38 +0,0 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderColor: 'transparent',
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
categoryPercentage: 1,
|
||||
barPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const brandPrimary = '#20a8d8'
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [65, 59, 84, 84, 51, 55, 40]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, datasets[0].data) - 5,
|
||||
max: Math.max.apply(Math, datasets[0].data) + 5
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const brandInfo = '#63c2de'
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [1, 18, 9, 17, 34, 22, 11]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, datasets[0].data) - 5,
|
||||
max: Math.max.apply(Math, datasets[0].data) + 5
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 bg-gray-100">100</div>
|
||||
<div class="p-3 bg-gray-200">200</div>
|
||||
<div class="p-3 bg-gray-300">300</div>
|
||||
<div class="p-3 bg-gray-400">400</div>
|
||||
<div class="p-3 bg-gray-500">500</div>
|
||||
<div class="p-3 bg-gray-600">600</div>
|
||||
<div class="p-3 bg-gray-700">700</div>
|
||||
<div class="p-3 bg-gray-800">800</div>
|
||||
<div class="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'colors'
|
||||
}
|
||||
</script>
|
||||
@@ -1,49 +0,0 @@
|
||||
require('babel-register')
|
||||
var config = require('../../config')
|
||||
|
||||
// http://nightwatchjs.org/gettingstarted#settings-file
|
||||
module.exports = {
|
||||
src_folders: ['test/e2e/specs'],
|
||||
output_folder: 'test/e2e/reports',
|
||||
custom_assertions_path: ['test/e2e/custom-assertions'],
|
||||
|
||||
selenium: {
|
||||
start_process: true,
|
||||
server_path: require('selenium-server').path,
|
||||
host: '127.0.0.1',
|
||||
port: 4444,
|
||||
cli_args: {
|
||||
'webdriver.chrome.driver': require('chromedriver').path
|
||||
}
|
||||
},
|
||||
|
||||
test_settings: {
|
||||
default: {
|
||||
selenium_port: 4444,
|
||||
selenium_host: 'localhost',
|
||||
silent: true,
|
||||
globals: {
|
||||
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
|
||||
}
|
||||
},
|
||||
|
||||
chrome: {
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome',
|
||||
javascriptEnabled: true,
|
||||
acceptSslCerts: true,
|
||||
chromeOptions : {
|
||||
args : ["start-maximized", "--incognito"]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
firefox: {
|
||||
desiredCapabilities: {
|
||||
browserName: 'firefox',
|
||||
javascriptEnabled: true,
|
||||
acceptSslCerts: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 9"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["env", "stage-2"],
|
||||
"plugins": ["transform-vue-jsx", "istanbul"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@@ -1,17 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
selenium-debug.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
@@ -1,10 +0,0 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
# CoreUI Vue
|
||||
|
||||
> CoreUI Vue Open Source Bootsrtap 4 Admin Template
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
|
||||
# run unit tests
|
||||
npm run unit
|
||||
|
||||
# run e2e tests
|
||||
npm run e2e
|
||||
|
||||
# run all tests
|
||||
npm test
|
||||
```
|
||||
|
||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
@@ -1,41 +0,0 @@
|
||||
'use strict'
|
||||
require('./check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
const ora = require('ora')
|
||||
const rm = require('rimraf')
|
||||
const path = require('path')
|
||||
const chalk = require('chalk')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config')
|
||||
const webpackConfig = require('./webpack.prod.conf')
|
||||
|
||||
const spinner = ora('building for production...')
|
||||
spinner.start()
|
||||
|
||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
||||
if (err) throw err
|
||||
webpack(webpackConfig, (err, stats) => {
|
||||
spinner.stop()
|
||||
if (err) throw err
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red(' Build failed with errors.\n'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log(chalk.cyan(' Build complete.\n'))
|
||||
console.log(chalk.yellow(
|
||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||
' Opening index.html over file:// won\'t work.\n'
|
||||
))
|
||||
})
|
||||
})
|
||||
@@ -1,54 +0,0 @@
|
||||
'use strict'
|
||||
const chalk = require('chalk')
|
||||
const semver = require('semver')
|
||||
const packageConfig = require('../package.json')
|
||||
const shell = require('shelljs')
|
||||
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
const versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function () {
|
||||
const warnings = []
|
||||
|
||||
for (let i = 0; i < versionRequirements.length; i++) {
|
||||
const mod = versionRequirements[i]
|
||||
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
|
||||
for (let i = 0; i < warnings.length; i++) {
|
||||
const warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const config = require('../config')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const packageConfig = require('../package.json')
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
const assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
|
||||
const cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
const postcssLoader = {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loader, loaderOptions) {
|
||||
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
|
||||
|
||||
if (loader) {
|
||||
loaders.push({
|
||||
loader: loader + '-loader',
|
||||
options: Object.assign({}, loaderOptions, {
|
||||
sourceMap: options.sourceMap
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract({
|
||||
use: loaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
} else {
|
||||
return ['vue-style-loader'].concat(loaders)
|
||||
}
|
||||
}
|
||||
|
||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
return {
|
||||
css: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
less: generateLoaders('less'),
|
||||
sass: generateLoaders('sass', { indentedSyntax: true }),
|
||||
scss: generateLoaders('sass'),
|
||||
stylus: generateLoaders('stylus'),
|
||||
styl: generateLoaders('stylus')
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
const output = []
|
||||
const loaders = exports.cssLoaders(options)
|
||||
|
||||
for (const extension in loaders) {
|
||||
const loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
use: loader
|
||||
})
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
exports.createNotifierCallback = () => {
|
||||
const notifier = require('node-notifier')
|
||||
|
||||
return (severity, errors) => {
|
||||
if (severity !== 'error') return
|
||||
|
||||
const error = errors[0]
|
||||
const filename = error.file && error.file.split('!').pop()
|
||||
|
||||
notifier.notify({
|
||||
title: packageConfig.name,
|
||||
message: severity + ': ' + error.name,
|
||||
subtitle: filename || '',
|
||||
icon: path.join(__dirname, 'logo.png')
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const isProduction = process.env.NODE_ENV === 'production'
|
||||
const sourceMapEnabled = isProduction
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap
|
||||
|
||||
module.exports = {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: sourceMapEnabled,
|
||||
extract: isProduction
|
||||
}),
|
||||
cssSourceMap: sourceMapEnabled,
|
||||
cacheBusting: config.dev.cacheBusting,
|
||||
transformToRequire: {
|
||||
video: ['src', 'poster'],
|
||||
source: 'src',
|
||||
img: 'src',
|
||||
image: 'xlink:href'
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
const createLintingRule = () => ({
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
enforce: 'pre',
|
||||
include: [resolve('src'), resolve('test')],
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter'),
|
||||
emitWarning: !config.dev.showEslintErrorsInOverlay
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
context: path.resolve(__dirname, '../'),
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: '[name].js',
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsPublicPath
|
||||
: config.dev.assetsPublicPath
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue', '.json'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'@': resolve('src'),
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
...(config.dev.useEslint ? [createLintingRule()] : []),
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: vueLoaderConfig
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('media/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
node: {
|
||||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
||||
// source contains it (although only uses it if it's native).
|
||||
setImmediate: false,
|
||||
// prevent webpack from injecting mocks to Node native modules
|
||||
// that does not make sense for the client
|
||||
dgram: 'empty',
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty'
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config')
|
||||
const merge = require('webpack-merge')
|
||||
const path = require('path')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
const portfinder = require('portfinder')
|
||||
|
||||
const HOST = process.env.HOST
|
||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
||||
|
||||
const devWebpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
devtool: config.dev.devtool,
|
||||
|
||||
// these devServer options should be customized in /config/index.js
|
||||
devServer: {
|
||||
clientLogLevel: 'warning',
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
|
||||
],
|
||||
},
|
||||
hot: true,
|
||||
contentBase: false, // since we use CopyWebpackPlugin.
|
||||
compress: true,
|
||||
host: HOST || config.dev.host,
|
||||
port: PORT || config.dev.port,
|
||||
open: config.dev.autoOpenBrowser,
|
||||
overlay: config.dev.errorOverlay
|
||||
? { warnings: false, errors: true }
|
||||
: false,
|
||||
publicPath: config.dev.assetsPublicPath,
|
||||
proxy: config.dev.proxyTable,
|
||||
quiet: true, // necessary for FriendlyErrorsPlugin
|
||||
watchOptions: {
|
||||
poll: config.dev.poll,
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': require('../config/dev.env')
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: config.dev.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
module.exports = new Promise((resolve, reject) => {
|
||||
portfinder.basePort = process.env.PORT || config.dev.port
|
||||
portfinder.getPort((err, port) => {
|
||||
if (err) {
|
||||
reject(err)
|
||||
} else {
|
||||
// publish the new Port, necessary for e2e tests
|
||||
process.env.PORT = port
|
||||
// add port to devServer config
|
||||
devWebpackConfig.devServer.port = port
|
||||
|
||||
// Add FriendlyErrorsPlugin
|
||||
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
|
||||
compilationSuccessInfo: {
|
||||
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
|
||||
},
|
||||
onErrors: config.dev.notifyOnErrors
|
||||
? utils.createNotifierCallback()
|
||||
: undefined
|
||||
}))
|
||||
|
||||
resolve(devWebpackConfig)
|
||||
}
|
||||
})
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user