├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── public ├── 2019-04-03_04-17-17.gif ├── 2019-04-05_22-31-17.gif ├── _redirects ├── error │ ├── 403.svg │ ├── 404.svg │ └── 500.svg ├── favicon.ico ├── favicon.png ├── img │ ├── Screenshot 2021-07-01 143732.png │ ├── Screenshot 2021-07-08 185537.png │ ├── Screenshot 2021-07-15 212811.png │ ├── Screenshot 2021-07-15 at 21-28-53 M-Dashboard by Materialfy .png │ ├── mwQYxL1mES.gif │ └── vuetifylogo.png └── index.html ├── src ├── App.vue ├── assets │ ├── img │ │ ├── first.png │ │ ├── redditicon.png │ │ ├── second.png │ │ └── third.png │ └── logo.svg ├── components │ ├── core │ │ ├── Footer.vue │ │ ├── NavBar.vue │ │ └── Sidedrawer.vue │ ├── error │ │ ├── Error.vue │ │ └── NotFound.vue │ ├── index.js │ └── materialfy │ │ ├── ApexDonut.vue │ │ ├── ApexLineGraph.vue │ │ ├── ApexMultipleRadialBars.vue │ │ ├── ApexPolarMap.vue │ │ ├── ApexYAxis.vue │ │ ├── BasicCard.vue │ │ ├── BasicTextCard.vue │ │ ├── Calendar.vue │ │ ├── ColorCard.vue │ │ ├── DataTable.vue │ │ ├── HeaderCard.vue │ │ ├── HeaderDataTable.vue │ │ ├── Notifications.vue │ │ ├── Settings.vue │ │ ├── Toasts.vue │ │ └── userSnippet.vue ├── i18n │ └── index.js ├── lang │ ├── en │ │ ├── Common.json │ │ ├── Core │ │ │ ├── Footer.json │ │ │ └── Toolbar.json │ │ └── Home.json │ └── index.js ├── main.js ├── plugins │ ├── apexcharts.js │ ├── axios.js │ ├── chartist.js │ ├── index.js │ └── vuetify.js ├── router │ ├── index.js │ └── paths.js ├── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── modules │ │ ├── drawertoggle │ │ │ ├── actions.js │ │ │ ├── mutations.js │ │ │ └── state.js │ │ └── index.js │ ├── mutations.js │ └── state.js ├── styles │ ├── index.scss │ └── materialfy │ │ ├── _alerts.scss │ │ ├── _backgrounds.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _checkboxes.scss │ │ ├── _colors.scss │ │ ├── _dropdown.scss │ │ ├── _fixed-plugin.scss │ │ ├── _footer.scss │ │ ├── _inputs.scss │ │ ├── _misc.scss │ │ ├── _mixins.scss │ │ ├── _sidebar.scss │ │ ├── _tables.scss │ │ ├── _tabs.scss │ │ ├── _toolbar.scss │ │ ├── _tooltips.scss │ │ ├── _typography.scss │ │ └── _variables.scss └── views │ ├── DashboardView.vue │ ├── DashboardViews │ ├── CardsView.vue │ ├── Dash.vue │ ├── DataTableView.vue │ ├── MapsView.vue │ ├── NotificationsView.vue │ ├── SimpleTablesView.vue │ └── UserProfileView.vue │ ├── ExternalView.vue │ └── LoginView.vue ├── vue.config.js ├── workspace.code-workspace └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | module.exports = { 3 | root: true, 4 | // this section will be used to determine which APIs are available to us 5 | // (i.e are we running in a browser environment or a node.js env) 6 | env: { 7 | //node: true, 8 | browser: true, 9 | }, 10 | extends: [ 11 | // use the recommended rule set for both plain javascript and vue, this changes warning level 12 | 'eslint:recommended', 13 | 'plugin:vue/essential', 14 | 'plugin:vuetify/base', 15 | //'prettier/vue', 16 | //'plugin:prettier/recommended' 17 | ], 18 | rules: { 19 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 21 | 'template-curly-spacing': 'off', 22 | 'indent': 'off', 23 | }, 24 | parserOptions: { 25 | parser: 'babel-eslint', 26 | 'sourceType': 'module', 27 | }, 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | package-lock.json 5 | /docs/.vuepress/dist 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | What-is-this.txt 24 | *.code-workspace 25 | workspace.code-workspace 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Materialfy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![version](https://img.shields.io/badge/version-2.0-blue.svg) 3 | 4 | 5 | [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/1512-shield.svg)](https://madewithvuejs.com/p/functional-vuetify-admin-dashboard/shield-link) 6 | 7 | 8 | ##### Formerly known by Vuetify Admin Dashboard 9 | 10 | 11 | ### [2.0 Demo Site](https://materialfy-demo.netlify.app) 12 | - logout button is in user menu in app bar 13 | 14 | 15 | ![Preview](https://github.com/ClintOxx/M-Dashboard-Materialfy/blob/master/public/img/mwQYxL1mES.gif) 16 | 17 | M-Dashboard is a simple (Hopefully not ugly) productivity Dashboard to monitor tasks/work, it can also be used as an crud admin panel. 18 | Using the Dashboard is pretty simple but requires basic knowledge of Javascript, and basic knowledge on libraries listed in the [docs](https://docs.materialfy.com/guide/) 19 | 20 | ## Table of Contents 21 | 22 | - [Whats New in 2.0](https://docs.materialfy.com/guide/features.html#whats-new-in-2-0) 23 | - [Quick Start](#getting-started) 24 | - [Documentation](https://docs.materialfy.com/) 25 | - [Reporting Issues](#reporting-issues) 26 | 27 | 28 | # Dashboard Features 29 | [Link to Features](https://docs.materialfy.com/guide/features.html) 30 | 31 | ![Crud Table](https://github.com/ClintOxx/M-Dashboard-Materialfy/blob/master/public/img/Screenshot%202021-07-15%20at%2021-28-53%20M-Dashboard%20by%20Materialfy%20.png) 32 | 33 | 34 | ### Few things on the roadmap 35 | - user roles 36 | - user page api's 37 | - more prepackaged components 38 | - pro version(if I get to it) 39 | - this will always be free 40 | - more features and support 41 | - dynamic inline edit 42 | - Cool new login screen 43 | 44 | 45 | ##### [Old version 1.0 Demo](https://clintoxx.github.io/M-Dashboard-Materialfy/) 46 | 47 | 48 | ## Getting Started 49 | 1. Install Nodejs from [Nodejs Official Page](https://nodejs.org/en/) 50 | 2. Install @Vue/cli 4 [globally](https://cli.vuejs.org/guide/installation.html) 51 | 3. clone repo 52 | 4. & navigate to the folder you cloned the repo to 53 | 5. Open your terminal(CMD/Power Shell etc) to project root( or use Shift + right-click in the folder on windows) 54 | 6. at project root (/M-Dashboard) run one of the following commands in the terminal depending on which you use: 55 | - `npm install`, or `yarn install`if you use [Yarn](https://yarnpkg.com/en/) 56 | 7. Run `npm run dev --open` or `yarn serve --open` to start a local development server or use [Vue UI](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui) 57 | 8. A new tab will be opened in your browser or click the url in the terminal 58 | 9. You can use [Reqres](https://reqres.in/) to test logging in/out, or for data tables api(its already hooked up) 59 | - otherwise use your own backend or a package like [Json Server](https://github.com/typicode/json-server) or [JSONPlaceholder](https://jsonplaceholder.typicode.com/) 60 | 61 | After installing the dependencies you can also run additional tasks such as these fun ones: 62 | - `npm/yarn run build` to build your app for production 63 | - `npm/yarn run lint` to run linting. 64 | 65 | 66 | ### Current Bugs 67 | Checkout the Issues tab to see if any have been reported or closed. 68 | 69 | ### Reporting Issues 70 | 1. Make sure that you are using the latest version of the M-Dashboard and installed corerct versions of the dependcies with NPM/YARN. 71 | 2. Provide reproducible steps on how to recreate the issue, this can speed things up & will help a lot. 72 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 73 | 4. Provide screenshots if you are trying to point out an visual bug 74 | 75 | You can [send us a tweet](https://twitter.com/Materialfy) if you need faster minorish assistance, otherwise create an issue on here. 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "m-dashboard", 3 | "version": "2.0.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "dev": "npm run serve" 10 | }, 11 | "dependencies": { 12 | "@sentry/tracing": "^6.9.0", 13 | "@sentry/vue": "^6.9.0", 14 | "apexcharts": "^3.27.2", 15 | "axios": "^0.21.1", 16 | "chartist": "0.11.4", 17 | "eslint-plugin-prettier": "^3.4.0", 18 | "material-design-icons-iconfont": "^6.1.0", 19 | "node-sass": "4.14.1", 20 | "nprogress": "^0.2.0", 21 | "secure-ls": "^1.2.6", 22 | "vue": "^2.6.14", 23 | "vue-apexcharts": "^1.6.1", 24 | "vue-chartist": "^2.3.1", 25 | "vue-meta": "^2.4.0", 26 | "vue-router": "^3.5.1", 27 | "vuetify": "2.5.5", 28 | "vuex": "^3.6.2", 29 | "vuex-router-sync": "^5.0.0" 30 | }, 31 | "devDependencies": { 32 | "@mdi/font": "^5.9.55", 33 | "@mdi/js": "^5.9.55", 34 | "@vue/cli-plugin-babel": "^4.5.13", 35 | "@vue/cli-plugin-eslint": "^4.5.13", 36 | "@vue/cli-service": "^4.5.13", 37 | "babel-eslint": "^10.1.0", 38 | "eslint": "7.0.0", 39 | "eslint-plugin-import": "^2.23.4", 40 | "eslint-plugin-promise": "4.2.1", 41 | "eslint-plugin-vue": "^7.11.1", 42 | "eslint-plugin-vuetify": "^1.0.1", 43 | "prettier": "^2.3.1", 44 | "sass": "~1.32.0", 45 | "sass-loader": "^10.0.0", 46 | "stylus": "^0.54.8", 47 | "stylus-loader": "^6.1.0", 48 | "vue-analytics": "^5.8.0", 49 | "vue-cli-plugin-vuetify": "~2.4.1", 50 | "vue-i18n": "^8.24.4", 51 | "vue-template-compiler": "^2.6.14", 52 | "vuetify-loader": "^1.7.0", 53 | "vuex-persistedstate": "^4.0.0-beta.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/2019-04-03_04-17-17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/2019-04-03_04-17-17.gif -------------------------------------------------------------------------------- /public/2019-04-05_22-31-17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/2019-04-05_22-31-17.gif -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/favicon.png -------------------------------------------------------------------------------- /public/img/Screenshot 2021-07-01 143732.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/Screenshot 2021-07-01 143732.png -------------------------------------------------------------------------------- /public/img/Screenshot 2021-07-08 185537.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/Screenshot 2021-07-08 185537.png -------------------------------------------------------------------------------- /public/img/Screenshot 2021-07-15 212811.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/Screenshot 2021-07-15 212811.png -------------------------------------------------------------------------------- /public/img/Screenshot 2021-07-15 at 21-28-53 M-Dashboard by Materialfy .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/Screenshot 2021-07-15 at 21-28-53 M-Dashboard by Materialfy .png -------------------------------------------------------------------------------- /public/img/mwQYxL1mES.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/mwQYxL1mES.gif -------------------------------------------------------------------------------- /public/img/vuetifylogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/public/img/vuetifylogo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Vuetify Material Dashboard by Clintox 10 | 11 | 12 | 13 | 14 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 11 | 12 | 13 | 54 | 55 | 81 | 82 | -------------------------------------------------------------------------------- /src/assets/img/first.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/src/assets/img/first.png -------------------------------------------------------------------------------- /src/assets/img/redditicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/src/assets/img/redditicon.png -------------------------------------------------------------------------------- /src/assets/img/second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/src/assets/img/second.png -------------------------------------------------------------------------------- /src/assets/img/third.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Materialfy/M-Dash/4aa3f18630ad81627a722cf458597dfcc1946c8d/src/assets/img/third.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /src/components/core/Footer.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 44 | 45 | 50 | -------------------------------------------------------------------------------- /src/components/core/NavBar.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 68 | 69 | 74 | -------------------------------------------------------------------------------- /src/components/core/Sidedrawer.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /src/components/error/Error.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | 55 | -------------------------------------------------------------------------------- /src/components/error/NotFound.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 49 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import upperFirst from 'lodash/upperFirst' 3 | import camelCase from 'lodash/camelCase' 4 | 5 | /* 6 | This file automatically imports the components in this folder Aka Automatic Global Registration 7 | Components are registered using the PascalCased version of their file name. 8 | files like the nav bar get them name from the folder name + the component file name i.e core-navbar, material-card 9 | */ 10 | // eslint-disable-next-line no-undef 11 | const requireComponent = require.context( //gets config of component 12 | // The relative path of the components folder 13 | '@/components', 14 | // Whether or not to look in subfolders 15 | true, 16 | //matches component filenames that have: .vue 17 | /\.vue$/ 18 | ) 19 | //iterates using the context module .keys array with foreach 20 | //passes in each filename and sets the config with the filename for each file 21 | requireComponent.keys().forEach(fileName => { 22 | // sets component config with the filename 23 | const componentConfig = requireComponent(fileName) 24 | 25 | /* 26 | Get PascalCase name of component. This uses two lodash methods to convert to pascal 27 | The _.upperFirst() method is used to convert the first character of the string to the upper case. 28 | */ 29 | const componentName = upperFirst( 30 | /* 31 | _.camelCase() converts a string to camel case. 32 | The string can be separated by space, dash, underscores 33 | */ 34 | camelCase( 35 | fileName 36 | /* 37 | searches for a "./" and deletes them 38 | ^ asserts position at start of a line 39 | \. matches the character "." literally (case sensitive) 40 | \/ matches the character "/" literally (case sensitive) 41 | '' matches the characters , "''" literally (case sensitive) 42 | .replace method replaces first value with second 43 | */ 44 | .replace(/^\.\//, '') 45 | 46 | /* 47 | searches for ".vue" 48 | \. matches the character "." literally (case sensitive) 49 | \w matches any word character (equivalent to [a-zA-Z0-9_]) 50 | + matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy) 51 | $ asserts position at the end of a line 52 | */ 53 | .replace(/\.\w+$/, '') 54 | ) 55 | ) 56 | /* 57 | At the end the componantName to be exported will be: 58 | the foldername + .vue filename (.core/NavBar.vue -> CoreNavBar -> ) 59 | */ 60 | 61 | 62 | // Register component globally 63 | Vue.component( 64 | componentName, 65 | // Look for the component options on `.default`, which will 66 | // exist if the component was exported with `export default`, 67 | // otherwise fall back to module's root. 68 | componentConfig.default || componentConfig 69 | ) 70 | }) 71 | 72 | -------------------------------------------------------------------------------- /src/components/materialfy/ApexDonut.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 68 | -------------------------------------------------------------------------------- /src/components/materialfy/ApexLineGraph.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 105 | -------------------------------------------------------------------------------- /src/components/materialfy/ApexMultipleRadialBars.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 105 | -------------------------------------------------------------------------------- /src/components/materialfy/ApexPolarMap.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 65 | -------------------------------------------------------------------------------- /src/components/materialfy/ApexYAxis.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/materialfy/BasicCard.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 124 | 125 | 133 | -------------------------------------------------------------------------------- /src/components/materialfy/BasicTextCard.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 136 | 137 | 145 | -------------------------------------------------------------------------------- /src/components/materialfy/Calendar.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/materialfy/ColorCard.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 90 | 91 | -------------------------------------------------------------------------------- /src/components/materialfy/DataTable.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 225 | 226 | 458 | 459 | 467 | -------------------------------------------------------------------------------- /src/components/materialfy/HeaderCard.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 103 | 104 | 109 | -------------------------------------------------------------------------------- /src/components/materialfy/HeaderDataTable.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 168 | 169 | 174 | 175 | 183 | -------------------------------------------------------------------------------- /src/components/materialfy/Notifications.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 112 | 113 | -------------------------------------------------------------------------------- /src/components/materialfy/Settings.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 129 | 130 | 179 | 180 | 190 | -------------------------------------------------------------------------------- /src/components/materialfy/Toasts.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/materialfy/userSnippet.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Vue i18n 3 | * 4 | * @library 5 | * 6 | * http://kazupon.github.io/vue-i18n/en/ 7 | */ 8 | 9 | // Lib imports 10 | import Vue from 'vue' 11 | import VueI18n from 'vue-i18n' 12 | import messages from '@/lang' 13 | 14 | Vue.use(VueI18n) 15 | 16 | const i18n = new VueI18n({ 17 | locale: 'en', 18 | fallbackLocale: 'en', 19 | messages 20 | }) 21 | 22 | export default i18n 23 | -------------------------------------------------------------------------------- /src/lang/en/Common.json: -------------------------------------------------------------------------------- 1 | { 2 | "needHelp": "Need Help?" 3 | } 4 | -------------------------------------------------------------------------------- /src/lang/en/Core/Footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "facebook": "Facebook", 3 | "footer": "Footer", 4 | "github": "Github", 5 | "twitter": "Twitter" 6 | } 7 | -------------------------------------------------------------------------------- /src/lang/en/Core/Toolbar.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Title" 3 | } 4 | -------------------------------------------------------------------------------- /src/lang/en/Home.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Vuetify Admin Alpha", 3 | "footer": "2021 Vuetify LLC", 4 | "drawerItems": ["Inspire"], 5 | "needHelp": "Need help?" 6 | } 7 | -------------------------------------------------------------------------------- /src/lang/index.js: -------------------------------------------------------------------------------- 1 | // http://kazupon.github.io/vue-i18n/en/messages.html 2 | 3 | // eslint-disable-next-line no-undef 4 | const requireLang = require.context( 5 | '@/lang', 6 | true, 7 | /\.json$/ 8 | ) 9 | 10 | const messages = {} 11 | 12 | for (const file of requireLang.keys()) { 13 | if (file === './index.js') continue 14 | 15 | const path = file.replace(/(\.\/|\.json$)/g, '').split('/') 16 | 17 | path.reduce((o, s, i) => { 18 | if (o[s]) return o[s] 19 | 20 | o[s] = i + 1 === path.length 21 | ? requireLang(file) 22 | : {} 23 | 24 | return o[s] 25 | }, messages) 26 | } 27 | 28 | export default messages 29 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import "./components"; //this is where the auto registered components import 3 | import "./plugins"; 4 | // Sync router with store 5 | import { sync } from "vuex-router-sync"; 6 | // Application imports 7 | import App from "./App"; 8 | import i18n from "@/i18n"; 9 | import router from "@/router"; 10 | import store from "@/store"; 11 | import { genericApi } from './plugins/axios' 12 | import vuetify from './plugins/vuetify' 13 | 14 | // makes genericApi common base instance axios the default http handler 15 | Vue.prototype.$http = genericApi; 16 | 17 | Vue.use(vuetify); 18 | 19 | // Sync store with router 20 | sync(store, router); 21 | 22 | Vue.config.productionTip = false; 23 | 24 | /* eslint-disable no-new */ 25 | new Vue({ 26 | i18n, 27 | router, 28 | store, 29 | vuetify, 30 | render: (h) => h(App), 31 | }).$mount("#app"); 32 | -------------------------------------------------------------------------------- /src/plugins/apexcharts.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueApexCharts from 'vue-apexcharts' 3 | Vue.use(VueApexCharts) 4 | 5 | Vue.component('apexchart', VueApexCharts) 6 | -------------------------------------------------------------------------------- /src/plugins/axios.js: -------------------------------------------------------------------------------- 1 | // Lib imports 2 | import axios from "axios"; 3 | import NProgress from "nprogress"; 4 | import SecureLS from 'secure-ls' 5 | 6 | let ls = new SecureLS() 7 | 8 | // state set to the previous token, the authorization Axios header set to same 9 | const token = ls.get('tokenKey') 10 | //const token = localStorage.getItem("token"); 11 | 12 | 13 | // creates a new instance that you will call instead of axios. 14 | const restApi = axios.create({ 15 | baseURL: 'https://reqres.in/api/', 16 | timeout: 3000, 17 | headers: { 18 | Authorization: 'Bearer ' + token, 19 | }, 20 | }) 21 | // Sets the default global url used by all of this axios instance's requests 22 | const genericApi = axios.create({ 23 | baseURL: 'https://reqres.in/api/', 24 | timeout: 3000, 25 | headers: {}, 26 | }) 27 | if (token) { 28 | restApi.defaults.headers.common['Authorization'] = 'Bearer ' + token 29 | } 30 | axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*' 31 | restApi.defaults.headers.post['Access-Control-Allow-Origin'] = '*' 32 | restApi.defaults.headers.get["Accepts"] = "application/json"; 33 | genericApi.defaults.headers.get["Accepts"] = "application/json"; 34 | 35 | restApi.interceptors.request.use( 36 | function (request) { 37 | // Do something before request is sent 38 | NProgress.start(); 39 | return request; 40 | }, 41 | function (error) { 42 | // Do something with request error 43 | console.log(error); 44 | NProgress.done(); 45 | return Promise.reject(error); 46 | } 47 | ); 48 | 49 | // Add a response interceptor 50 | restApi.interceptors.response.use( 51 | function (response) { 52 | NProgress.done(); 53 | return response; 54 | }, 55 | function (error) { 56 | // Do something with response error 57 | console.log(error); 58 | NProgress.done(); 59 | return Promise.reject(error); 60 | } 61 | ); 62 | 63 | 64 | 65 | export { 66 | restApi, 67 | genericApi 68 | }; 69 | -------------------------------------------------------------------------------- /src/plugins/chartist.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import 'chartist/dist/chartist.min.css' 3 | 4 | // eslint-disable-next-line no-undef 5 | Vue.use(require('vue-chartist')) 6 | -------------------------------------------------------------------------------- /src/plugins/index.js: -------------------------------------------------------------------------------- 1 | import './chartist' 2 | import './apexcharts' 3 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuetify from "vuetify/lib/framework"; 3 | import "@mdi/font/css/materialdesignicons.css"; 4 | import "material-design-icons-iconfont/dist/material-design-icons.css"; 5 | 6 | Vue.use(Vuetify); 7 | 8 | export default new Vuetify({ 9 | icons: { 10 | iconfont: "mdi", 11 | }, 12 | theme: { 13 | dark: false, 14 | themes: { 15 | light: { 16 | primary: "#607D8B", 17 | secondary: "#90A4AE", 18 | tertiary: "#ffc107", 19 | accent: "#26C6DA", 20 | error: "#f44336", 21 | warning: "#ff5722", 22 | danger: "#CE93D8", 23 | info: "#ff9800", 24 | success: "#8bc34a", 25 | general: "#2196F3", 26 | anchor: "#ffc107", 27 | background: "#78909C", 28 | }, 29 | dark: { 30 | primary: "#424242", 31 | secondary: "#90A4AE", 32 | tertiary: "#82B1FF", 33 | accent: "#26C6DA", 34 | error: "#f55a4e", 35 | info: "#00d3ee", 36 | success: "#5cb860", 37 | warning: "#ffa21a", 38 | danger: "#CE93D8", 39 | general: "#2196F3", 40 | anchor: "#E0E0E0", 41 | background: "#757575", 42 | }, 43 | }, 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Vue Router 4 | * https://router.vuejs.org/en/ 5 | */ 6 | 7 | // Lib imports 8 | import Vue from 'vue' 9 | //import VueAnalytics from 'vue-analytics' 10 | import Router from 'vue-router' 11 | import store from '../store' 12 | import Meta from 'vue-meta' 13 | import NProgress from "nprogress"; 14 | 15 | // Routes 16 | import paths from './paths' 17 | 18 | Vue.use(Router) 19 | 20 | // Create a new router 21 | const router = new Router({ 22 | base: '/', 23 | mode: 'history', 24 | routes: paths, 25 | 26 | // this allows your SPA to act more like a traditional webpage allowing the user to use back and forward buttons 27 | scrollBehavior(to, from, savedPosition) { 28 | if (savedPosition) { 29 | return savedPosition 30 | } 31 | if (to.hash) { 32 | return { selector: to.hash } 33 | } 34 | return { x: 0, y: 0 } 35 | } 36 | }) 37 | 38 | /* Route guard checks to see if you are logged in(has valid auth token), if not reroutes to login, 39 | "matched.some" looks for any matching props in 'record', its used to find which routes(aka records) have requiresAuth meta data 40 | if they have requireAuth(dashboard routes) you use the "to" objects name prop to direct you to where you were already going 41 | https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards 42 | */ 43 | router.beforeEach((to, from, next) => { 44 | if ( 45 | to.matched.some((record) => record.meta.requiresAuth) && 46 | !store.getters.authorized 47 | ) { 48 | console.log('authorize for route: ' + store.getters.authorized) 49 | console.log('next() value: ' + next()) 50 | next('/login') // if the authorized getter returns true, you can continue on to the current route. to.name 51 | } else if (to.name == 'login' && store.getters.authorized) { 52 | next('/') //sends to login if auth token isnt true 53 | } else { 54 | next() // you called `next('/')` which redirected to the homepage over and over again. 55 | } 56 | } 57 | ); 58 | 59 | //N progress bar 60 | router.beforeResolve((to, from, next) => { 61 | if (to.path) { 62 | NProgress.start(); 63 | } 64 | next(); 65 | }); 66 | 67 | router.afterEach(() => { 68 | NProgress.done(); 69 | }); 70 | 71 | Vue.use(Meta) 72 | 73 | // Bootstrap Analytics 74 | // Set in .env 75 | // https://github.com/MatteoGabriele/vue-analytics 76 | // if (process.env.GOOGLE_ANALYTICS) { 77 | // Vue.use(VueAnalytics, { 78 | // id: process.env.GOOGLE_ANALYTICS, 79 | // router, 80 | // autoTracking: { 81 | // page: process.env.NODE_ENV !== 'development' 82 | // } 83 | // }) 84 | // } 85 | 86 | export default router 87 | -------------------------------------------------------------------------------- /src/router/paths.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Define all of your application routes here 3 | * for more information on routes, see the 4 | * official documentation https://router.vuejs.org/en/ 5 | */ 6 | 7 | //import store from "../store"; 8 | export default [ 9 | // This section is primarily for the login but it allows you to add external other pages to be rendered outside the dashboard layout like the login 10 | //if you want to add more external routes make them in the children array 11 | { 12 | // using the named route option 13 | path: '/login', 14 | meta: { 15 | name: 'External', 16 | requiresAuth: false, 17 | }, 18 | component: () => import(`@/views/ExternalView.vue`), // this renders the children in this layout 19 | children: [ 20 | //any components in this path auto render in External 21 | { 22 | path: '', // you leave this blank if you want it to default to the parents path 23 | name: 'login', 24 | component: () => import(`@/views/LoginView.vue`), 25 | }, 26 | ], 27 | }, 28 | 29 | { 30 | path: '/', 31 | meta: { 32 | name: 'dashboard-view', 33 | requiresAuth: true, 34 | }, 35 | component: () => import(`@/views/DashboardView.vue`), 36 | children: [ 37 | { 38 | path: '', //defaults to / if left blank 39 | meta: { 40 | name: 'Dash', 41 | }, 42 | component: () => import(`@/views/DashboardViews/Dash.vue`), 43 | }, 44 | { 45 | path: 'user', // ends up as /user 46 | meta: { 47 | name: 'UserProfile', 48 | }, 49 | component: () => 50 | import(`@/views/DashboardViews/UserProfileView.vue`), 51 | }, 52 | { 53 | path: 'table-list', 54 | meta: { 55 | name: 'TableList', 56 | }, 57 | component: () => 58 | import(`@/views/DashboardViews/SimpleTablesView.vue`), 59 | }, 60 | { 61 | path: 'data-tables', 62 | meta: { 63 | name: 'DataTable', 64 | }, 65 | component: () => import(`@/views/DashboardViews/DataTableView.vue`), 66 | }, 67 | { 68 | path: 'maps', 69 | meta: { 70 | name: 'Maps', 71 | }, 72 | component: () => import(`@/views/DashboardViews/MapsView.vue`), 73 | }, 74 | { 75 | path: 'notifications', 76 | meta: { 77 | name: 'Notifications', 78 | }, 79 | component: () => 80 | import(`@/views/DashboardViews/NotificationsView.vue`), 81 | }, 82 | { 83 | path: 'cardsview', 84 | meta: { 85 | name: 'CardsView', 86 | }, 87 | component: () => import(`@/views/DashboardViews/CardsView.vue`), 88 | }, 89 | ], 90 | //per route guard if you dont want to use the global version in /router/index 91 | // beforeEnter: (to, from, next) => { 92 | // // checks to see if you are trying to go to dashboard and are logged in 93 | // if (to.name !== 'dashboard' && store.getters.authorized) { 94 | // next("/dashboard"); 95 | // } 96 | // // sends you to login if you arent authorized 97 | // else if (to.name !== 'dashboard' && !store.getters.authorized) { // 98 | // next("/login"); 99 | // } 100 | // else { 101 | // next(to.name); // this sends you to your original route if you arent trying to go to login 102 | // } 103 | // }, 104 | }, 105 | // This is a catch all aka page not found route. it will send you to the dashboard 106 | { 107 | path: '*', 108 | redirect: { 109 | name: 'catchAll', 110 | path: '/', 111 | }, 112 | meta: { 113 | requiresAuth: true, 114 | }, 115 | }, 116 | //Error component fallback 117 | { 118 | path: '/:catchAll(.*)', 119 | component: () => import(`@/components/error/NotFound.vue`), 120 | name: 'NotFound', 121 | }, 122 | ] 123 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/en/actions.html 2 | import axios from 'axios' 3 | import { restApi } from '../plugins/axios' 4 | import SecureLS from 'secure-ls' 5 | 6 | let ls = new SecureLS() 7 | /* The login action(function) first param is the vuex commit destructured object, 8 | second is userData which is passed from where-ever you call that action. 9 | You then create a promise in the "login"'s return which is where we put the code 10 | that we will use to trigger mutations. 11 | */ 12 | 13 | async function login({ commit }, userData) { 14 | // one day ill implement snackbars with the auth state or use it in a component or footer 15 | commit('auth_request') 16 | let response = await restApi 17 | .post('login', { 18 | username: userData.username, 19 | password: userData.password, 20 | }) 21 | .then((response) => { 22 | // we use the data we get back in the response object after the promise succeeds 23 | //you can change the data object props to match whatever your sever sends 24 | const token = response.data.token 25 | const user = response.data.username 26 | // storing jwt in localStorage. https cookie is safer place to store 27 | ls.set('tokenKey', { token: token }) // using secure-ls to encrypt local storage 28 | ls.set('userKey', { user: user }) 29 | axios.defaults.headers.common['Authorization'] = 'Bearer ' + token 30 | // calling the mutation "auth_success" to change/update state.properties to the new values passed along in the second param 31 | commit('auth_success', { token, user }) 32 | }) 33 | .catch((err) => { 34 | console.log('login error' + err) 35 | commit('auth_error') 36 | ls.remove('token') 37 | }) 38 | return response 39 | } 40 | 41 | export default { 42 | login, 43 | logout({ commit }) { 44 | return new Promise((resolve, reject) => { 45 | commit('logout') 46 | ls.remove('token') 47 | delete restApi.defaults.headers.common['Authorization'] 48 | resolve() 49 | //catches any errors and passed them to the promise for you to do something with 50 | .catch((error) => reject(error)) 51 | }) 52 | }, 53 | refreshtoken({ commit }) { 54 | restApi 55 | .get('/refresh') 56 | .then((response) => { 57 | const token = response.data.access_token 58 | ls.set('tokenKey', { token: token }) 59 | axios.defaults.headers.common['Authorization'] = 'Bearer ' + token 60 | commit('auth_success', { token }) 61 | }) 62 | .catch((error) => { 63 | console.log('refresh token error') 64 | commit('logout') 65 | ls.remove('token') 66 | console.log(error) 67 | }) 68 | }, 69 | getTableList({ commit }, tableName) { 70 | restApi 71 | .get(`/${tableName}`) 72 | .then((response) => { 73 | console.log(response) 74 | let tableList = response.data.Keys 75 | commit('setTableList', { tableList }) 76 | }) 77 | .catch((error) => console.log(error)) 78 | }, 79 | updateTableItem(tableData) { 80 | return new Promise((resolve, reject) => { 81 | let httpmethod = tableData.method //allows you to delete/update and change the request method type without hardcoding 82 | axios({ 83 | url: `/${tableData.endpoint}`, 84 | method: httpmethod, 85 | data: tableData.tableItem, 86 | }) 87 | .then((response) => { 88 | // you can also do some kind of data alteration here if you want 89 | resolve(response) 90 | }) 91 | .catch((error) => { 92 | console.log(error) 93 | reject(error) 94 | }) 95 | }) 96 | }, 97 | 98 | // autoRefreshToken ({ commit }) { 99 | // return new Promise((resolve, reject) => { 100 | // setInterval(function () { 101 | // // code goes here that will be run every 20 minutes. 102 | // axios.get('/refresh') 103 | // .then(response => { 104 | // const token = response.data.access_token 105 | // localStorage.setItem('token', token) 106 | // axios.defaults.headers.common['Authorization'] = 'Bearer ' + token 107 | // commit('auth_success', { token }) 108 | // resolve(response) 109 | // }) 110 | // .catch(error => { 111 | // console.log('refresh token error') 112 | // console.log(error) 113 | // reject(error) 114 | // }) 115 | // }, 1200000) 116 | // } 117 | // ) 118 | // }, 119 | } 120 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/en/getters.html 2 | 3 | 4 | 5 | // authorized lets you know if the token is true or not, its exported to be used to check state elsewhere(In router. app.vue. toolbar.vue) 6 | //auth status isn't used anywhere??? why did i do this 7 | export default { 8 | authorized: state => !!state.token, 9 | authstatus: state => state.authStatus, 10 | getNotifications: state => state.notifications, 11 | getNotifHeader: state => state.currentTime, 12 | getNotificationAmt: state => state.notifications.length, 13 | getAvatar: state => state.avatarURL 14 | } 15 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Vuex 3 | * 4 | * @library 5 | * 6 | * https://vuex.vuejs.org/en/ 7 | */ 8 | 9 | // Lib imports 10 | import Vue from "vue"; 11 | import Vuex from "vuex"; 12 | 13 | // Store functionality 14 | import actions from "./actions"; 15 | import getters from "./getters"; 16 | import modules from "./modules"; 17 | import mutations from "./mutations"; 18 | import state from "./state"; 19 | //import createPersistedState from "vuex-persistedstate"; 20 | 21 | Vue.use(Vuex); 22 | 23 | // Create a new store 24 | const store = new Vuex.Store({ 25 | actions, 26 | getters, 27 | //modules object from modules/index.js 28 | modules, 29 | mutations, 30 | state, 31 | //plugins: [createPersistedState()], 32 | }); 33 | 34 | export default store; 35 | -------------------------------------------------------------------------------- /src/store/modules/drawertoggle/actions.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | drawerOn({ commit }) { 4 | commit('toggleDrawerState') 5 | }, 6 | } -------------------------------------------------------------------------------- /src/store/modules/drawertoggle/mutations.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | these are nested arrow functions aka curried functions 4 | this passes in the state to thats gonna be changed and the payload with the data to change it 5 | example: set = color => return (state, newcolor) => return (state[color] = newcolor) 6 | you're adding new data to which ever state object property passed in 7 | drawerapp state: color, drawer, image 8 | */ 9 | //state[property] and state.property mean the same thing 10 | const set = property => (state, dataPayload) => (state[property] = dataPayload) 11 | 12 | // const toggle = property => 13 | // state => { 14 | // return (state[property] = !state[property]) 15 | // } 16 | 17 | const toggleDrawerState = state => { 18 | state.drawerState = true 19 | } 20 | /* 21 | these are called in navbar.vue, settings.vue and sidedrawer.vue 22 | */ 23 | export default { 24 | setDrawer: set('drawer'), 25 | setImage: set('image'), 26 | setColor: set('color'), 27 | toggleDrawerState 28 | } 29 | -------------------------------------------------------------------------------- /src/store/modules/drawertoggle/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | drawerState: false, //controls the side bar "SideDrawer" drawer open/close state 3 | color: "secondary", 4 | image: "", //change if you want a picture but if you are using this internally get rid of the picture links here and in filter.vue 5 | }; 6 | -------------------------------------------------------------------------------- /src/store/modules/index.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/en/modules.html 2 | //module names are set in here automatically, the name will be modulefoldername to access that modules state 3 | import createPersistedState from "vuex-persistedstate"; 4 | // eslint-disable-next-line no-undef 5 | const requireModule = require.context( 6 | ".", // The relative path of this folder 7 | true, //This turns on check subfolders 8 | /\.js$/ //regex is searching for ".js" 9 | ); 10 | //create modules object to export and set a level up in "const store = new Vuex.Store({"" 11 | const modules = {}; 12 | 13 | /* 14 | iterates through the .keys array with foreach. 15 | passes in each filename and checks to see if any of them matches ./index.js 16 | line:19 just checks for and stops this if index is returned 17 | */ 18 | requireModule.keys().forEach((fileName) => { 19 | if (fileName === "./index.js") return; 20 | 21 | //if not index.js, Remove ./ and .js with with replace() which returns: modulename/file.js i.e app/state.js 22 | const path = fileName.replace(/(\.\/|\.js)/g, ""); 23 | //split into two different variables based on '/', modulename is the folder name of each module i.e drawertoggle 24 | const [moduleName, imported] = path.split("/"); //imported is the file.js that was inside the module 25 | // if the modules exists, turn on name spacing for modules 26 | if (!modules[moduleName]) { 27 | modules[moduleName] = { 28 | namespaced: true, 29 | }; 30 | } 31 | 32 | modules[moduleName][imported] = requireModule(fileName).default; 33 | }); 34 | 35 | export let plugins = [ 36 | createPersistedState({ 37 | paths: ["drawertoggle"], 38 | }), 39 | ]; 40 | 41 | export default modules 42 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/en/mutations.html 2 | 3 | export default { 4 | auth_request (state) { 5 | state.authStatus = 'loading' 6 | }, 7 | auth_success (state,{ token, user }) { 8 | state.authStatus = 'success' 9 | state.token = token 10 | state.user = user 11 | }, 12 | auth_error (state) { 13 | state.authStatus = 'error' 14 | }, 15 | logout (state) { 16 | state.authStatus = '' 17 | state.token = '' 18 | state.user = '' 19 | }, 20 | setTableList (state, tableList) { 21 | state.tableList = tableList 22 | }, 23 | clearNotifications(state){ 24 | state.notifications = 0 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/en/state.html 2 | import SecureLS from 'secure-ls' 3 | 4 | let ls = new SecureLS() 5 | 6 | export default { 7 | authStatus: '', 8 | token: ls.get('tokenKey') || '', 9 | user: {}, 10 | tableList: [], 11 | notifications: [ 12 | { 13 | avatar: null, 14 | //'https://banner2.cleanpng.com/20180820/iyz/kisspng-computer-icons-vector-graphics-image-icon-design-i-flat-delete-icon-bing-images-5b7b43bfdfb3e4.1170827415348049279163.jpg', 15 | title: 'Server error', 16 | subtitle: `Ali Connors — I'll be a hero and fix this bug team member`, 17 | divider: true, 18 | inset: true, 19 | icon: 'mdi-close-circle', 20 | }, 21 | { 22 | avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg', 23 | title: 'Summer BBQ @4', 24 | subtitle: `to Alex, Scott, Jennifer — Wish I could come, but I'm out of town this weekend.`, 25 | divider: true, 26 | inset: true, 27 | }, 28 | { 29 | avatar: null, 30 | title: 'Reminder: Meeting with person in 30 mins', 31 | subtitle: 32 | 'Sandra Adams — You have an very important meeting thats important.', 33 | divider: true, 34 | inset: true, 35 | icon: 'mdi-chat-alert', 36 | }, 37 | ], 38 | currentTime: new Date().toLocaleString(), 39 | avatarURL: 40 | 'https://bookingagentinfo.com/wp-content/uploads/2014/12/Travis-Scott-Contact-Information.jpg', 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "materialfy/backgrounds"; 2 | // @import "material-dashboard/variables"; 3 | // @import "material-dashboard/typography"; 4 | // @import "material-dashboard/sidebar"; 5 | // @import "material-dashboard/toolbar"; 6 | // @import "material-dashboard/misc"; 7 | // @import "material-dashboard/inputs"; 8 | // @import "material-dashboard/footer"; 9 | // @import "material-dashboard/cards"; 10 | // @import "material-dashboard/tables"; 11 | // @import "material-dashboard/tabs"; 12 | // @import "material-dashboard/checkboxes"; 13 | // @import "material-dashboard/tooltips"; 14 | // @import "material-dashboard/buttons"; 15 | // @import "material-dashboard/alerts"; 16 | // @import "material-dashboard/fixed-plugin"; 17 | // @import "material-dashboard/dropdown"; 18 | -------------------------------------------------------------------------------- /src/styles/materialfy/_alerts.scss: -------------------------------------------------------------------------------- 1 | .v-alert { 2 | .v-alert__dismissible .v-icon { 3 | color: rgba($white, .5); 4 | font-size: $font-size-default + 2; 5 | } 6 | 7 | .v-alert__icon.v-icon { 8 | font-size: $font-size-alert-icon; 9 | color: $white; 10 | } 11 | } 12 | 13 | .v-snack { 14 | .v-icon:not(:first-child) { 15 | color: rgba($white, .5); 16 | margin-left: $margin-general + 1; 17 | } 18 | 19 | .v-icon:first-child { 20 | font-size: $font-size-alert-icon; 21 | } 22 | 23 | .v-snack__content { 24 | padding: $padding-general $padding-general + 5; 25 | height: auto; 26 | } 27 | 28 | .v-snack__wrapper { 29 | border-radius: $border-radius-base + 1; 30 | } 31 | } 32 | 33 | .v-snack .v-snack__wrapper, 34 | .v-alert { 35 | @include alert-shadow('info', lighten($brand-info, 5%)); 36 | @include alert-shadow('success', $brand-success); 37 | @include alert-shadow('error', $brand-danger); 38 | @include alert-shadow('warning', $brand-warning); 39 | @include alert-shadow('purple', $brand-primary); 40 | } 41 | 42 | .v-snack { 43 | @include notifications-color('info', lighten($brand-info, 5%)); 44 | @include notifications-color('success', $brand-success); 45 | @include notifications-color('error', $brand-danger); 46 | @include notifications-color('warning', $brand-warning); 47 | @include notifications-color('purple', $brand-primary); 48 | } 49 | -------------------------------------------------------------------------------- /src/styles/materialfy/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | $material-light: ( 4 | 'background': #ffc107 5 | ); -------------------------------------------------------------------------------- /src/styles/materialfy/_buttons.scss: -------------------------------------------------------------------------------- 1 | .v-btn { 2 | margin: $margin-small 1px; 3 | padding: $padding-small + 2 $padding-general + 15; 4 | font-size: $font-size-small; 5 | font-weight: $font-weight-base !important; 6 | height: auto; 7 | line-height: $line-height-base; 8 | color: $white !important; 9 | cursor: pointer; 10 | border-radius: $border-radius-base; 11 | 12 | &.v-btn--round, 13 | &.v-btn--round:after { 14 | border-radius: $btn-round-padding; 15 | } 16 | 17 | &.v-btn-facebook { 18 | @include social-buttons-color($social-facebook); 19 | } 20 | &.v-btn-twitter { 21 | @include social-buttons-color($social-twitter); 22 | } 23 | 24 | .v-icon--left { 25 | margin-right: $btn-margin-icon; 26 | } 27 | .v-icon--right { 28 | margin-left: $btn-margin-icon; 29 | } 30 | 31 | &.v-btn--large { 32 | font-size: $font-size-general; 33 | padding: $btn-y-large-padding $btn-x-large-padding !important; 34 | line-height: $btn-large-line-height; 35 | } 36 | 37 | &.v-btn--small { 38 | padding: $btn-y-small-padding $btn-x-small-padding !important; 39 | font-size: $font-size-small - 1; 40 | } 41 | 42 | &.v-btn--icon { 43 | width: $btn-icon-dim; 44 | height: $btn-icon-dim; 45 | line-height: $btn-icon-dim; 46 | padding: 0; 47 | 48 | &.v-btn--round { 49 | border-radius: 50%; 50 | } 51 | } 52 | 53 | &.success { 54 | @include button-color($brand-success); 55 | } 56 | 57 | &.default { 58 | @include button-color($gray-light); 59 | } 60 | 61 | &.primary { 62 | @include button-color($brand-primary); 63 | } 64 | 65 | &.warning { 66 | @include button-color($brand-warning); 67 | } 68 | 69 | &.info { 70 | @include button-color($brand-info); 71 | } 72 | &.general { 73 | @include button-color($brand-general); 74 | } 75 | 76 | &.danger { 77 | @include button-color($brand-danger); 78 | } 79 | 80 | .v-icon { 81 | font-size: $btn-font-size-icon; 82 | } 83 | } 84 | 85 | .v-btn--fixed { 86 | border-radius: $border-radius-base + 3; 87 | border-bottom-right-radius: 0; 88 | border-top-right-radius: 0; 89 | background-color: rgba($black, .3) !important; 90 | right: 0; 91 | padding: 0; 92 | width: $btn-fixed-width; 93 | 94 | .v-icon { 95 | font-size: $btn-fixed-icon-size; 96 | padding: $padding-small; 97 | } 98 | } 99 | 100 | .v-btn--active:before, 101 | .v-btn:focus:before, 102 | .v-btn:hover:before { 103 | background-color: transparent; 104 | } 105 | -------------------------------------------------------------------------------- /src/styles/materialfy/_cards.scss: -------------------------------------------------------------------------------- 1 | .v-card { 2 | box-shadow: $card-shadow; 3 | border-radius: $border-radius-base; 4 | 5 | .category { 6 | margin: 0; 7 | } 8 | 9 | .title { 10 | margin-top: 0; 11 | line-height: $line-height-base !important; 12 | letter-spacing: 0 !important; 13 | font-size: $font-size-h4 !important; 14 | margin-bottom: $card-title-margin !important; 15 | } 16 | 17 | .v-divider { 18 | border-top: $divider-border; 19 | margin-left: $card-content-x-padding !important; 20 | margin-right: $card-content-x-padding !important; 21 | margin-bottom: 1px; 22 | } 23 | 24 | .v-offset { 25 | top: $card-offset !important; 26 | margin-bottom: $card-offset !important; 27 | 28 | .category { 29 | color: rgba($white, .62); 30 | } 31 | 32 | .v-card--material__header.v-card{ 33 | padding: $padding-general; 34 | } 35 | } 36 | 37 | .v-card__actions { 38 | margin: 0 $card-actions-y-margin 0; 39 | padding: $padding-small 0 $padding-small; 40 | line-height: $line-height-higher; 41 | } 42 | } 43 | 44 | .v-card--material-chart.v-card { 45 | &:not(.v-card--material__header) { 46 | margin: $card-margin 0 !important; 47 | } 48 | 49 | .v-card--material__header{ 50 | border-radius: $border-radius-base + 3; 51 | min-height: $card-chart-min-height; 52 | padding: 0 !important; 53 | 54 | .ct-label { 55 | font-size: $font-size-chart-label; 56 | } 57 | } 58 | 59 | .title { 60 | margin-top: 0; 61 | } 62 | 63 | .category { 64 | margin: 0 !important; 65 | line-height: $line-height-higher; 66 | color: $gray-light; 67 | } 68 | 69 | .v-card__text { 70 | padding: $padding-general $card-content-x-padding; 71 | line-height: $line-height-higher; 72 | } 73 | } 74 | 75 | .v-card--material-stats.v-card:not(.v-card--material__header), 76 | .v-card--material-chart.v-card:not(.v-card--material__header) { 77 | margin: $card-margin 0 !important; 78 | } 79 | 80 | @include card-header-color('info', $brand-info, $cyan-400, $cyan-600); 81 | @include card-header-color('general', $brand-general, $blue-400, $blue-600); 82 | @include card-header-color('red', $brand-danger, $red-400, $red-600); 83 | @include card-header-color('green', $brand-success, $green-400, $green-600); 84 | @include card-header-color('orange', $brand-warning, $orange-400, $orange-600); 85 | @include card-header-color('purple', $brand-primary, $purple-400, $purple-600); 86 | 87 | .v-card--material-stats.v-card { 88 | .v-offset { 89 | position: absolute; 90 | 91 | .v-card { 92 | max-width: $card-stats-offset; 93 | max-height: $card-stats-offset; 94 | line-height: $card-stats-offset; 95 | padding: $padding-general !important; 96 | 97 | i { 98 | font-size: $font-size-big !important; 99 | line-height: $line-height-high; 100 | width: $card-stats-icons-dim; 101 | height: $card-stats-icons-dim; 102 | } 103 | } 104 | } 105 | 106 | .v-card__text { 107 | text-align: right; 108 | padding-top: $padding-small; 109 | position: relative; 110 | } 111 | 112 | .title { 113 | margin: 0 !important; 114 | line-height: $line-height-base !important; 115 | letter-spacing: 0 !important; 116 | font-size: $font-size-h3 !important; 117 | 118 | small { 119 | color: $gray-light; 120 | font-size: $font-size-small-tag; 121 | line-height: 1; 122 | font-weight: $font-weight-base; 123 | } 124 | } 125 | 126 | .v-card__actions { 127 | i { 128 | position: relative; 129 | top: -1px; 130 | font-size: $font-size-default + 2 !important; 131 | } 132 | 133 | .caption { 134 | color: $gray-light; 135 | } 136 | } 137 | } 138 | 139 | .v-card-profile { 140 | display: inline-block; 141 | 142 | .v-offset { 143 | top: unset !important; 144 | margin-bottom: unset !important; 145 | margin-top: $card-profile-avatar-pos; 146 | } 147 | 148 | .v-card__text .v-card__text { 149 | padding-bottom: 0; 150 | } 151 | 152 | .v-card__text { 153 | padding: $padding-general; 154 | } 155 | 156 | img { 157 | @include shadow-big(); 158 | } 159 | } 160 | 161 | .v-card--flat { 162 | background-color: transparent !important; 163 | box-shadow: none; 164 | 165 | .v-table { 166 | background-color: transparent; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/styles/materialfy/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | .mdi-checkbox-blank-outline:before { 2 | -webkit-text-stroke: 1px $white; 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/materialfy/_colors.scss: -------------------------------------------------------------------------------- 1 | $red-50: #ffebee !default; 2 | $red-100: #ffcdd2 !default; 3 | $red-200: #ef9a9a !default; 4 | $red-300: #e57373 !default; 5 | $red-400: #ef5350 !default; 6 | $red-500: #f44336 !default; 7 | $red-600: #e53935 !default; 8 | $red-700: #d32f2f !default; 9 | $red-800: #c62828 !default; 10 | $red-900: #b71c1c !default; 11 | $red-A100: #ff8a80 !default; 12 | $red-A200: #ff5252 !default; 13 | $red-A400: #ff1744 !default; 14 | $red-A700: #d50000 !default; 15 | $red: $red-500 !default; 16 | 17 | 18 | $pink-50: #fce4ec !default; 19 | $pink-100: #f8bbd0 !default; 20 | $pink-200: #f48fb1 !default; 21 | $pink-300: #f06292 !default; 22 | $pink-400: #ec407a !default; 23 | $pink-500: #e91e63 !default; 24 | $pink-600: #d81b60 !default; 25 | $pink-700: #c2185b !default; 26 | $pink-800: #ad1457 !default; 27 | $pink-900: #880e4f !default; 28 | $pink-A100: #ff80ab !default; 29 | $pink-A200: #ff4081 !default; 30 | $pink-A400: #f50057 !default; 31 | $pink-A700: #c51162 !default; 32 | $pink: $pink-500 !default; 33 | 34 | 35 | $purple-50: #f3e5f5 !default; 36 | $purple-100: #e1bee7 !default; 37 | $purple-200: #ce93d8 !default; 38 | $purple-300: #ba68c8 !default; 39 | $purple-400: #ab47bc !default; 40 | $purple-500: #9c27b0 !default; 41 | $purple-600: #8e24aa !default; 42 | $purple-700: #7b1fa2 !default; 43 | $purple-800: #6a1b9a !default; 44 | $purple-900: #4a148c !default; 45 | $purple-A100: #ea80fc !default; 46 | $purple-A200: #e040fb !default; 47 | $purple-A400: #d500f9 !default; 48 | $purple-A700: #aa00ff !default; 49 | $purple: $purple-500 !default; 50 | 51 | 52 | $deep-purple-50: #ede7f6 !default; 53 | $deep-purple-100: #d1c4e9 !default; 54 | $deep-purple-200: #b39ddb !default; 55 | $deep-purple-300: #9575cd !default; 56 | $deep-purple-400: #7e57c2 !default; 57 | $deep-purple-500: #673ab7 !default; 58 | $deep-purple-600: #5e35b1 !default; 59 | $deep-purple-700: #512da8 !default; 60 | $deep-purple-800: #4527a0 !default; 61 | $deep-purple-900: #311b92 !default; 62 | $deep-purple-A100: #b388ff !default; 63 | $deep-purple-A200: #7c4dff !default; 64 | $deep-purple-A400: #651fff !default; 65 | $deep-purple-A700: #6200ea !default; 66 | $deep-purple: $deep-purple-500 !default; 67 | 68 | 69 | $indigo-50: #e8eaf6 !default; 70 | $indigo-100: #c5cae9 !default; 71 | $indigo-200: #9fa8da !default; 72 | $indigo-300: #7986cb !default; 73 | $indigo-400: #5c6bc0 !default; 74 | $indigo-500: #3f51b5 !default; 75 | $indigo-600: #3949ab !default; 76 | $indigo-700: #303f9f !default; 77 | $indigo-800: #283593 !default; 78 | $indigo-900: #1a237e !default; 79 | $indigo-A100: #8c9eff !default; 80 | $indigo-A200: #536dfe !default; 81 | $indigo-A400: #3d5afe !default; 82 | $indigo-A700: #304ffe !default; 83 | $indigo: $indigo-500 !default; 84 | 85 | 86 | $blue-50: #e3f2fd !default; 87 | $blue-100: #bbdefb !default; 88 | $blue-200: #90caf9 !default; 89 | $blue-300: #64b5f6 !default; 90 | $blue-400: #42a5f5 !default; 91 | $blue-500: #2196f3 !default; 92 | $blue-600: #1e88e5 !default; 93 | $blue-700: #1976d2 !default; 94 | $blue-800: #1565c0 !default; 95 | $blue-900: #0d47a1 !default; 96 | $blue-A100: #82b1ff !default; 97 | $blue-A200: #448aff !default; 98 | $blue-A400: #2979ff !default; 99 | $blue-A700: #2962ff !default; 100 | $blue: $blue-500 !default; 101 | 102 | 103 | $light-blue-50: #e1f5fe !default; 104 | $light-blue-100: #b3e5fc !default; 105 | $light-blue-200: #81d4fa !default; 106 | $light-blue-300: #4fc3f7 !default; 107 | $light-blue-400: #29b6f6 !default; 108 | $light-blue-500: #03a9f4 !default; 109 | $light-blue-600: #039be5 !default; 110 | $light-blue-700: #0288d1 !default; 111 | $light-blue-800: #0277bd !default; 112 | $light-blue-900: #01579b !default; 113 | $light-blue-A100: #80d8ff !default; 114 | $light-blue-A200: #40c4ff !default; 115 | $light-blue-A400: #00b0ff !default; 116 | $light-blue-A700: #0091ea !default; 117 | $light-blue: $light-blue-500 !default; 118 | 119 | 120 | $cyan-50: #e0f7fa !default; 121 | $cyan-100: #b2ebf2 !default; 122 | $cyan-200: #80deea !default; 123 | $cyan-300: #4dd0e1 !default; 124 | $cyan-400: #26c6da !default; 125 | $cyan-500: #00bcd4 !default; 126 | $cyan-600: #00acc1 !default; 127 | $cyan-700: #0097a7 !default; 128 | $cyan-800: #00838f !default; 129 | $cyan-900: #006064 !default; 130 | $cyan-A100: #84ffff !default; 131 | $cyan-A200: #18ffff !default; 132 | $cyan-A400: #00e5ff !default; 133 | $cyan-A700: #00b8d4 !default; 134 | $cyan: $cyan-500 !default; 135 | 136 | 137 | $teal-50: #e0f2f1 !default; 138 | $teal-100: #b2dfdb !default; 139 | $teal-200: #80cbc4 !default; 140 | $teal-300: #4db6ac !default; 141 | $teal-400: #26a69a !default; 142 | $teal-500: #009688 !default; 143 | $teal-600: #00897b !default; 144 | $teal-700: #00796b !default; 145 | $teal-800: #00695c !default; 146 | $teal-900: #004d40 !default; 147 | $teal-A100: #a7ffeb !default; 148 | $teal-A200: #64ffda !default; 149 | $teal-A400: #1de9b6 !default; 150 | $teal-A700: #00bfa5 !default; 151 | $teal: $teal-500 !default; 152 | 153 | 154 | $green-50: #e8f5e9 !default; 155 | $green-100: #c8e6c9 !default; 156 | $green-200: #a5d6a7 !default; 157 | $green-300: #81c784 !default; 158 | $green-400: #66bb6a !default; 159 | $green-500: #4caf50 !default; 160 | $green-600: #43a047 !default; 161 | $green-700: #388e3c !default; 162 | $green-800: #2e7d32 !default; 163 | $green-900: #1b5e20 !default; 164 | $green-A100: #b9f6ca !default; 165 | $green-A200: #69f0ae !default; 166 | $green-A400: #00e676 !default; 167 | $green-A700: #00c853 !default; 168 | $green: $green-500 !default; 169 | 170 | 171 | $light-green-50: #f1f8e9 !default; 172 | $light-green-100: #dcedc8 !default; 173 | $light-green-200: #c5e1a5 !default; 174 | $light-green-300: #aed581 !default; 175 | $light-green-400: #9ccc65 !default; 176 | $light-green-500: #8bc34a !default; 177 | $light-green-600: #7cb342 !default; 178 | $light-green-700: #689f38 !default; 179 | $light-green-800: #558b2f !default; 180 | $light-green-900: #33691e !default; 181 | $light-green-A100: #ccff90 !default; 182 | $light-green-A200: #b2ff59 !default; 183 | $light-green-A400: #76ff03 !default; 184 | $light-green-A700: #64dd17 !default; 185 | $light-green: $light-green-500 !default; 186 | 187 | 188 | $lime-50: #f9fbe7 !default; 189 | $lime-100: #f0f4c3 !default; 190 | $lime-200: #e6ee9c !default; 191 | $lime-300: #dce775 !default; 192 | $lime-400: #d4e157 !default; 193 | $lime-500: #cddc39 !default; 194 | $lime-600: #c0ca33 !default; 195 | $lime-700: #afb42b !default; 196 | $lime-800: #9e9d24 !default; 197 | $lime-900: #827717 !default; 198 | $lime-A100: #f4ff81 !default; 199 | $lime-A200: #eeff41 !default; 200 | $lime-A400: #c6ff00 !default; 201 | $lime-A700: #aeea00 !default; 202 | $lime: $lime-500 !default; 203 | 204 | 205 | $yellow-50: #fffde7 !default; 206 | $yellow-100: #fff9c4 !default; 207 | $yellow-200: #fff59d !default; 208 | $yellow-300: #fff176 !default; 209 | $yellow-400: #ffee58 !default; 210 | $yellow-500: #fec60a !default; 211 | $yellow-600: #fdd835 !default; 212 | $yellow-700: #fbc02d !default; 213 | $yellow-800: #f9a825 !default; 214 | $yellow-900: #f57f17 !default; 215 | $yellow-A100: #ffff8d !default; 216 | $yellow-A200: #ffff00 !default; 217 | $yellow-A400: #ffea00 !default; 218 | $yellow-A700: #ffd600 !default; 219 | $yellow: $yellow-700 !default; 220 | 221 | 222 | $amber-50: #fff8e1 !default; 223 | $amber-100: #ffecb3 !default; 224 | $amber-200: #ffe082 !default; 225 | $amber-300: #ffd54f !default; 226 | $amber-400: #ffca28 !default; 227 | $amber-500: #ffc107 !default; 228 | $amber-600: #ffb300 !default; 229 | $amber-700: #ffa000 !default; 230 | $amber-800: #ff8f00 !default; 231 | $amber-900: #ff6f00 !default; 232 | $amber-A100: #ffe57f !default; 233 | $amber-A200: #ffd740 !default; 234 | $amber-A400: #ffc400 !default; 235 | $amber-A700: #ffab00 !default; 236 | $amber: $amber-500 !default; 237 | 238 | 239 | $orange-50: #fff3e0 !default; 240 | $orange-100: #ffe0b2 !default; 241 | $orange-200: #ffcc80 !default; 242 | $orange-300: #ffb74d !default; 243 | $orange-400: #ffa726 !default; 244 | $orange-500: #ff9800 !default; 245 | $orange-600: #fb8c00 !default; 246 | $orange-700: #f57c00 !default; 247 | $orange-800: #ef6c00 !default; 248 | $orange-900: #e65100 !default; 249 | $orange-A100: #ffd180 !default; 250 | $orange-A200: #ffab40 !default; 251 | $orange-A400: #ff9100 !default; 252 | $orange-A700: #ff6d00 !default; 253 | $orange: $orange-500 !default; 254 | 255 | 256 | $deep-orange-50: #fbe9e7 !default; 257 | $deep-orange-100: #ffccbc !default; 258 | $deep-orange-200: #ffab91 !default; 259 | $deep-orange-300: #ff8a65 !default; 260 | $deep-orange-400: #ff7043 !default; 261 | $deep-orange-500: #ff5722 !default; 262 | $deep-orange-600: #f4511e !default; 263 | $deep-orange-700: #e64a19 !default; 264 | $deep-orange-800: #d84315 !default; 265 | $deep-orange-900: #bf360c !default; 266 | $deep-orange-A100: #ff9e80 !default; 267 | $deep-orange-A200: #ff6e40 !default; 268 | $deep-orange-A400: #ff3d00 !default; 269 | $deep-orange-A700: #dd2c00 !default; 270 | $deep-orange: $deep-orange-500 !default; 271 | 272 | 273 | $brown-50: #efebe9 !default; 274 | $brown-100: #d7ccc8 !default; 275 | $brown-200: #bcaaa4 !default; 276 | $brown-300: #a1887f !default; 277 | $brown-400: #8d6e63 !default; 278 | $brown-500: #795548 !default; 279 | $brown-600: #6d4c41 !default; 280 | $brown-700: #5d4037 !default; 281 | $brown-800: #4e342e !default; 282 | $brown-900: #3e2723 !default; 283 | $brown-A100: #d7ccc8 !default; 284 | $brown-A200: #bcaaa4 !default; 285 | $brown-A400: #8d6e63 !default; 286 | $brown-A700: #5d4037 !default; 287 | $brown: $brown-500 !default; 288 | 289 | 290 | $grey-50: #fafafa !default; 291 | $grey-100: #f5f5f5 !default; 292 | $grey-200: #eeeeee !default; 293 | $grey-300: #e0e0e0 !default; 294 | $grey-400: #bdbdbd !default; 295 | $grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default; 296 | $grey-600: #757575 !default; 297 | $grey-700: #616161 !default; 298 | $grey-800: #424242 !default; 299 | $grey-900: #212121 !default; 300 | $grey-A100: #f5f5f5 !default; 301 | $grey-A200: #eeeeee !default; 302 | $grey-A400: #bdbdbd !default; 303 | $grey-A700: #616161 !default; 304 | $grey: $grey-500 !default; 305 | 306 | 307 | $blue-grey-50: #eceff1 !default; 308 | $blue-grey-100: #cfd8dc !default; 309 | $blue-grey-200: #b0bec5 !default; 310 | $blue-grey-300: #90a4ae !default; 311 | $blue-grey-400: #78909c !default; 312 | $blue-grey-500: #607d8b !default; 313 | $blue-grey-600: #546e7a !default; 314 | $blue-grey-700: #455a64 !default; 315 | $blue-grey-800: #37474f !default; 316 | $blue-grey-900: #263238 !default; 317 | $blue-grey-A100: #cfd8dc !default; 318 | $blue-grey-A200: #b0bec5 !default; 319 | $blue-grey-A400: #78909c !default; 320 | $blue-grey-A700: #455a64 !default; 321 | $blue-grey: $blue-grey-500 !default; 322 | 323 | 324 | $black: #000000; $rgb-black: "0,0,0" !default; 325 | $white: #ffffff; $rgb-white: "255,255,255" !default; 326 | -------------------------------------------------------------------------------- /src/styles/materialfy/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | border-radius: $border-radius-base; 3 | 4 | .v-list__tile { 5 | border-radius: $border-radius-base - 1; 6 | color: #333 !important; 7 | display: flex; 8 | font-size: $font-size-dropdown; 9 | font-weight: $font-weight-base; 10 | margin: 0 $margin-small - 5; 11 | padding: $padding-small 1.5rem; 12 | text-transform: none; 13 | @include transition-except-props(.15s linear, color, background-color, box-shadow 0ms); 14 | white-space: nowrap; 15 | 16 | .v-list__tile__title { 17 | transition: none; 18 | } 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | @include dropdown-menu-color($brand-primary); 24 | 25 | &, 26 | .v-list__tile__title { 27 | color: $white !important; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/materialfy/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | .v-menu__content { 2 | border-radius: $border-radius-dropdown; 3 | box-shadow: $box-shadow-general; 4 | 5 | .sidebar-filter { 6 | height: 30px; 7 | line-height: 25px; 8 | font-size: $font-size-small !important; 9 | font-weight: $font-weight-bolder + 100; 10 | color: $black-color; 11 | } 12 | 13 | .v-responsive { 14 | max-height: 100px; 15 | border-radius: $border-radius-dropdown; 16 | max-width: 50px; 17 | margin: 0 auto; 18 | } 19 | 20 | .container.grid-list-xl .layout .flex { 21 | padding: $padding-small - 5; 22 | } 23 | 24 | .v-avatar, 25 | .v-responsive { 26 | border: 3px solid $white; 27 | transition: all .34s; 28 | 29 | &:not(:last-child) { 30 | margin-right: 5px; 31 | } 32 | 33 | &.image-active, 34 | &.color-active { 35 | border-color: $brand-info; 36 | } 37 | } 38 | 39 | .v-avatar { 40 | @include fixed-plugin-colors('primary', $brand-primary); 41 | @include fixed-plugin-colors('info', $brand-info); 42 | @include fixed-plugin-colors('danger', $brand-danger); 43 | @include fixed-plugin-colors('warning', $brand-warning); 44 | @include fixed-plugin-colors('success', $brand-success); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/styles/materialfy/_footer.scss: -------------------------------------------------------------------------------- 1 | .theme--light.v-footer { 2 | border-top: $footer-border-top; 3 | background: transparent; 4 | padding: $padding-general $padding-x-footer; 5 | } 6 | 7 | .v-footer { 8 | .footer-links { 9 | font-weight: $font-weight-bolder; 10 | text-decoration: none; 11 | text-transform: uppercase; 12 | font-size: $font-size-small; 13 | padding: $padding-general; 14 | line-height: $line-height-footer-items; 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | color: $brand-primary !important; 20 | } 21 | } 22 | 23 | .copyright { 24 | color: $black-color; 25 | 26 | a { 27 | &, 28 | &:hover, 29 | &:focus, 30 | &:active { 31 | color: $brand-primary; 32 | } 33 | } 34 | } 35 | } 36 | 37 | @media all and (max-width: 991px) { 38 | .v-footer { 39 | height: auto !important; 40 | flex-direction: column; 41 | } 42 | 43 | .footer-items, 44 | .copyright { 45 | width: 100%; 46 | } 47 | 48 | .copyright { 49 | text-align: right; 50 | } 51 | } 52 | 53 | @media all and (max-width: 550px) { 54 | .footer-items, 55 | .copyright { 56 | width: unset; 57 | text-align: center; 58 | } 59 | 60 | .copyright { 61 | margin-top: $margin-small; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/styles/materialfy/_inputs.scss: -------------------------------------------------------------------------------- 1 | .theme--light.v-text-field .v-input__slot:before { 2 | border-color: $input-color !important; 3 | } 4 | 5 | .input--is-focused .v-input__control .v-input__slot:after{ 6 | border-color: red !important; 7 | } 8 | 9 | .v-text-field__slot { 10 | input { 11 | @include material-placeholder{ 12 | color: $input-color; 13 | }; 14 | } 15 | 16 | .v-label { 17 | color: $label-color !important; 18 | font-size: $font-size-default; 19 | font-weight: $font-weight-base; 20 | } 21 | } 22 | 23 | .theme--light.v-input:not(.v-input--is-disabled) input, 24 | .theme--light.v-input:not(.v-input--is-disabled) textarea { 25 | color: $black-color; 26 | font-size: $font-size-default; 27 | } 28 | 29 | @include inputs-color($brand-primary, 'purple'); 30 | @include inputs-color($brand-warning, 'orange'); 31 | @include inputs-color($brand-info, 'info'); 32 | @include inputs-color($brand-danger, 'danger'); 33 | @include inputs-color($brand-success, 'success'); 34 | @include inputs-color($brand-success, 'primary'); 35 | -------------------------------------------------------------------------------- /src/styles/materialfy/_misc.scss: -------------------------------------------------------------------------------- 1 | .theme--light.application { 2 | background: $body-color; 3 | } 4 | 5 | a { 6 | text-transform: none; 7 | text-decoration: none; 8 | } 9 | 10 | html { 11 | font-size: $font-size-general + 2!important; 12 | } 13 | 14 | .category { 15 | font-size: $font-size-general; 16 | } 17 | 18 | .theme--light.v-icon { 19 | color: $gray-light; 20 | } 21 | 22 | blockquote { 23 | display: block; 24 | margin-block-start: 1em; 25 | margin-block-end: 1em; 26 | margin-inline-start: 40px; 27 | margin-inline-end: 40px; 28 | 29 | p { 30 | font-style: italic; 31 | color: $blockquote-color; 32 | font-weight: $font-weight-bolder; 33 | } 34 | 35 | small { 36 | font-size: 70%; 37 | } 38 | } 39 | 40 | b, 41 | strong { 42 | font-size: $font-size-small; 43 | font-weight: $font-weight-bolder; 44 | } 45 | 46 | .v-list--three-line .v-list__tile { 47 | height: auto; 48 | } 49 | 50 | @include drawer-active-colors('primary', $brand-primary); 51 | @include drawer-active-colors('success', $brand-success); 52 | @include drawer-active-colors('danger', $brand-danger); 53 | @include drawer-active-colors('info', $brand-info); 54 | @include drawer-active-colors('warning', $brand-warning); 55 | -------------------------------------------------------------------------------- /src/styles/materialfy/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin shadow-big(){ 2 | box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3), 3 | 0 4px 25px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), 4 | 0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); 5 | } 6 | 7 | @mixin shadow-2dp-color($color){ 8 | box-shadow: 0 2px 2px 0 rgba($color, $mdb-shadow-key-penumbra-opacity), 9 | 0 3px 1px -2px rgba($color, $mdb-shadow-key-umbra-opacity), 10 | 0 1px 5px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity) !important; 11 | } 12 | 13 | @mixin button-shadow-color($color){ 14 | box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3), 15 | 0 4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity), 16 | 0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity) !important; 17 | } 18 | 19 | @mixin shadow-8dp(){ 20 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity), 21 | 0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), 22 | 0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); 23 | } 24 | 25 | @mixin shadow-big-color($color){ 26 | box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2), 27 | 0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity), 28 | 0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity) !important; 29 | } 30 | 31 | @mixin material-placeholder() { 32 | &::-moz-placeholder {@content; } // Firefox 33 | &:-ms-input-placeholder {@content; } // Internet Explorer 10+ 34 | &::-webkit-input-placeholder {@content; } // Safari and Chrome 35 | } 36 | 37 | @mixin inputs-color($color, $color-name) { 38 | .v-text-field.#{$color-name}-input > .v-input__control > .v-input__slot:after { 39 | border-color: $color; 40 | } 41 | } 42 | 43 | @mixin drawer-active-colors($color-name, $color) { 44 | .v-navigation-drawer .v-list .v-list-item .v-list__tile.v-list__tile--active.#{$color-name} { 45 | background-color: $color !important; 46 | @include shadow-big-color($color); 47 | } 48 | } 49 | 50 | @mixin toolbar-colors($color-name, $color) { 51 | &.#{$color-name} { 52 | background-color: $color !important; 53 | @include shadow-big-color($color); 54 | } 55 | } 56 | 57 | @mixin fixed-plugin-colors($color-name, $color) { 58 | &.color-#{$color-name}{ 59 | background-color: $color; 60 | } 61 | } 62 | 63 | @mixin notifications-color($color-name, $color) { 64 | .v-snack__wrapper.#{$color-name} { 65 | background-color: $color !important; 66 | border-color: $color !important 67 | } 68 | } 69 | 70 | @mixin card-header-color($color, $shadow-color, $color-400, $color-600) { 71 | .v-card.#{$color} { 72 | background: linear-gradient(60deg, $color-400, $color-600) !important; 73 | @include shadow-big-color($shadow-color); 74 | } 75 | } 76 | 77 | @mixin alert-shadow($color-name, $shadow-color) { 78 | &.#{$color-name} { 79 | @include shadow-big-color($shadow-color); 80 | } 81 | } 82 | 83 | @mixin transition-except-props($property...){ 84 | transition: all $property; 85 | } 86 | 87 | @mixin dropdown-menu-color($color) { 88 | background-color: $color !important; 89 | @include button-shadow-color($color); 90 | } 91 | 92 | @mixin button-color($color) { 93 | background-color: $color !important; 94 | @include shadow-2dp-color($color); 95 | 96 | &:focus, 97 | &:active, 98 | &:hover{ 99 | // remove this line if you want black shadows 100 | @include button-shadow-color($color); 101 | background-color: darken($color, 3%) !important; 102 | } 103 | 104 | &.v-btn--simple{ 105 | &, 106 | &:hover, 107 | &:focus, 108 | &:active, 109 | &.active, 110 | &:active:focus, 111 | &:active:hover, 112 | &.active:focus, 113 | &.active:hover{ 114 | background-color: transparent !important; 115 | color: $color !important; 116 | box-shadow: none !important; 117 | 118 | i{ 119 | color: $color !important; 120 | } 121 | } 122 | } 123 | } 124 | 125 | @mixin social-buttons-color ($color){ 126 | background-color: $color !important; 127 | color: $white; 128 | @include shadow-2dp-color($color); 129 | 130 | &:hover, 131 | &:focus, 132 | &:active, 133 | &.active, 134 | &:active:focus, 135 | &:active:hover, 136 | &.active:focus, 137 | &.active:hover{ 138 | background-color: $color !important; 139 | color: $white; 140 | @include button-shadow-color($color); 141 | } 142 | 143 | &.v-btn--simple{ 144 | &, 145 | &:hover, 146 | &:focus, 147 | &:active, 148 | &.active, 149 | &:active:focus, 150 | &:active:hover, 151 | &.active:focus, 152 | &.active:hover{ 153 | color: $color !important; 154 | background-color: transparent; 155 | box-shadow: none; 156 | 157 | i{ 158 | color: $color !important; 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /src/styles/materialfy/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .v-navigation-drawer { 2 | @include shadow-big(); 3 | 4 | .v-list { 5 | background: $sidebar-bg; 6 | padding: 0; 7 | 8 | .v-list-item { 9 | &:not(:nth-child(3)){ 10 | margin: $margin-small $margin-general 0; 11 | } 12 | 13 | &:nth-child(3) { 14 | margin: 0 $margin-general; 15 | } 16 | 17 | & > .v-list__tile { 18 | padding: $padding-small $padding-general; 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | background-color: $list-item-hover; 24 | } 25 | 26 | .v-list__tile__title { 27 | font-size: $font-size-general !important; 28 | font-weight: $font-weight-lighter; 29 | padding: 0; 30 | } 31 | } 32 | 33 | .v-list__tile__action { 34 | margin-right: $margin-general; 35 | min-width: unset; 36 | 37 | i { 38 | width: $icon-width; 39 | } 40 | } 41 | 42 | .v-list__tile:not(.v-list__tile--active) .v-list__tile__action i { 43 | opacity: $list-item-icon-opacity; 44 | } 45 | 46 | .v-list__tile.v-list__tile--active { 47 | @include shadow-big-color($brand-success); 48 | } 49 | } 50 | 51 | .v-list__tile--avatar { 52 | height: unset; 53 | padding: $padding-logo 0; 54 | } 55 | 56 | .v-list__tile__avatar { 57 | margin-left: $margin-list-left; 58 | margin-right: $margin-list-right; 59 | min-width: unset; 60 | } 61 | 62 | .v-list__tile__title { 63 | line-height: $line-height; 64 | padding: $padding-avatar-title 0; 65 | height: unset; 66 | font-size: $font-size-avatar-title !important; 67 | font-weight: $font-weight-base; 68 | letter-spacing: unset !important; 69 | } 70 | 71 | .v-divider { 72 | border-color: $black-opacity-3; 73 | margin: $divider-margins auto $divider-margins + 25; 74 | width: $divider-width; 75 | 76 | } 77 | 78 | .v-image__image--contain { 79 | top: $top-dim; 80 | } 81 | 82 | .v-avatar { 83 | @include shadow-big; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/styles/materialfy/_tables.scss: -------------------------------------------------------------------------------- 1 | .theme--light.v-table tbody tr:not(:last-child), 2 | .theme--light.v-table thead tr:first-child { 3 | border-bottom: 1px solid $table-border-color!important; 4 | } 5 | 6 | table.v-table thead tr { 7 | height: $table-head-height; 8 | } 9 | 10 | .theme--light.v-table tbody tr:hover:not(.v-datatable__expand-row) { 11 | background: $table-hover-color !important; 12 | } 13 | 14 | table.v-table tbody td { 15 | font-size: $font-size-general; 16 | font-weight: $font-weight-lighter; 17 | } 18 | 19 | table.v-table tbody td:first-child, table.v-table tbody td:not(:first-child), 20 | table.v-table tbody th:first-child, table.v-table tbody th:not(:first-child), 21 | table.v-table thead td:first-child, table.v-table thead td:not(:first-child), 22 | table.v-table thead th:first-child, table.v-table thead th:not(:first-child) { 23 | padding: $padding-small + 2 $tabs-text-box-padding; 24 | } 25 | 26 | .v-datatable__progress { 27 | display: none; 28 | } 29 | 30 | table thead tr th span{ 31 | font-size: 1.0625rem !important; 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/materialfy/_tabs.scss: -------------------------------------------------------------------------------- 1 | .card-tabs { 2 | .v-divider { 3 | margin-left: 0 !important; 4 | margin-right: 0 !important; 5 | } 6 | 7 | .flex { 8 | padding: 0 !important; 9 | } 10 | 11 | .v-tabs__item { 12 | border-radius: $border-radius-base; 13 | } 14 | 15 | .v-tabs__slider-wrapper .white{ 16 | background-color: $tabs-active-line !important; 17 | border-color: $tabs-active-line !important 18 | } 19 | 20 | .v-tabs__slider { 21 | height: 1px; 22 | } 23 | 24 | .v-list__tile__title { 25 | font-size: $font-size-default; 26 | font-weight: $font-weight-lighter; 27 | padding: 0 $tabs-text-box-padding; 28 | overflow: visible; 29 | white-space: inherit; 30 | height: auto; 31 | } 32 | 33 | .v-list .v-input, .v-list .v-input__slot { 34 | justify-content: center; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/styles/materialfy/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .v-toolbar { 2 | min-height: $toolbar-min-height; 3 | border-radius: $border-radius-base; 4 | margin-bottom: $margin-general; 5 | 6 | // &:not(.v-toolbar--fixed) .v-toolbar__content { 7 | // margin-left: $toolbar-margin-left; 8 | // } 9 | 10 | @include toolbar-colors('bg-danger', $brand-danger); 11 | @include toolbar-colors('bg-warning', $brand-warning); 12 | @include toolbar-colors('bg-primary', $brand-primary); 13 | @include toolbar-colors('bg-info', $brand-info); 14 | @include toolbar-colors('bg-general', $brand-general); 15 | @include toolbar-colors('bg-success', $brand-success); 16 | @include toolbar-colors('bg-default', $gray-light); 17 | 18 | &[class*="bg-"] { 19 | .v-toolbar__title, 20 | .v-btn__content, 21 | .v-ripple__container { 22 | color: $white !important; 23 | } 24 | } 25 | 26 | .v-toolbar__content { 27 | min-height: $toolbar-min-height; 28 | padding-bottom: $padding-small; 29 | padding-top: $padding-small; 30 | 31 | .v-toolbar__title { 32 | font-size: $font-size-toolbar-title; 33 | letter-spacing: unset; 34 | color: $black-color; 35 | } 36 | 37 | .v-toolbar__items { 38 | & > div { 39 | padding: 0 !important; 40 | } 41 | 42 | .toolbar-items{ 43 | align-items: center; 44 | border-radius: $border-radius-base; 45 | display: flex; 46 | min-height: $list-item-height; 47 | padding: $padding-small $padding-general; 48 | 49 | .v-badge__badge { 50 | border: $badge-border !important; 51 | font-size: $font-size-mini; 52 | height: $badge-dimension; 53 | line-height: normal; 54 | right: -7px; 55 | top: -12px; 56 | width: $badge-dimension; 57 | font-weight: $font-weight-base; 58 | } 59 | 60 | .v-icon { 61 | font-size: $font-size-toolbar-items; 62 | } 63 | } 64 | 65 | .v-input { 66 | margin: 0 !important; 67 | padding: 0; 68 | } 69 | } 70 | } 71 | } 72 | 73 | @media all and (max-width: 990px) { 74 | .v-toolbar:not(.v-toolbar--fixed) .v-toolbar__content { 75 | margin-left: 0; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/styles/materialfy/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .v-tooltip__content { 2 | background: $white; 3 | padding: $padding-small $padding-general; 4 | min-width: $tooltip-min-width; 5 | max-width: $tooltip-max-width; 6 | color: $gray !important; 7 | font-size: $font-size-small; 8 | font-weight: $font-weight-base; 9 | @include shadow-8dp(); 10 | text-align: center; 11 | 12 | &:after{ 13 | position: absolute; 14 | bottom: -$tooltip-border; 15 | height: 0; 16 | left: 0; 17 | right: 0; 18 | margin-left: auto; 19 | margin-right: auto; 20 | width: $tooltip-border; 21 | vertical-align: $tooltip-arrow-align; 22 | content: ""; 23 | } 24 | 25 | &.top:after { 26 | border-top: $tooltip-border solid $white; 27 | border-right: $tooltip-border solid transparent; 28 | border-bottom: 0; 29 | border-left: $tooltip-border solid transparent; 30 | } 31 | 32 | &.bottom:after{ 33 | top: -$tooltip-border; 34 | border-top: 0; 35 | border-right: $tooltip-border solid transparent; 36 | border-bottom: $tooltip-border solid $white; 37 | border-left: $tooltip-border solid transparent; 38 | } 39 | &.left:after{ 40 | margin-right: 0; 41 | right: -$tooltip-border; 42 | top: $tooltip-top-border-pos; 43 | border-top: $tooltip-border solid transparent; 44 | border-bottom: $tooltip-border solid transparent; 45 | border-left: $tooltip-border solid $white; 46 | } 47 | &.right:after{ 48 | margin-left: 0; 49 | left: -$tooltip-border; 50 | top: $tooltip-top-border-pos; 51 | border-top: $tooltip-border solid transparent; 52 | border-bottom: $tooltip-border solid transparent; 53 | border-right: $tooltip-border solid $white; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/styles/materialfy/_typography.scss: -------------------------------------------------------------------------------- 1 | body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { 2 | font-family: $font-family-sans-serif !important; 3 | font-weight: $font-weight-lighter !important; 4 | line-height: $line-height-base !important; 5 | } 6 | 7 | h1,h2,h3,.h1,.h2,.h3{ 8 | margin-top: $margin-general + 5; 9 | margin-bottom: $margin-small; 10 | } 11 | 12 | h4,h5,h6,.h4,.h5,.h6{ 13 | margin-top: $margin-small; 14 | margin-bottom: $margin-small; 15 | } 16 | 17 | h1, .h1 { 18 | font-size: $font-size-h1 !important; 19 | line-height: 1.15em !important; 20 | } 21 | h2, .h2{ 22 | font-size: $font-size-h2 !important; 23 | line-height: $line-height-base !important; 24 | } 25 | h3, .h3{ 26 | font-size: $font-size-h3 !important; 27 | line-height: 1.4em !important; 28 | } 29 | h4, .h4{ 30 | font-size: $font-size-h4 !important; 31 | line-height: $line-height-base !important; 32 | } 33 | h5, .h5 { 34 | font-size: $font-size-h5 !important; 35 | line-height: 1.55em !important; 36 | margin-bottom: $margin-general; 37 | } 38 | h6, .h6{ 39 | font-size: $font-size-h6 !important; 40 | text-transform: uppercase; 41 | font-weight: $font-weight-bolder; 42 | } 43 | 44 | p{ 45 | font-size: $font-paragraph !important; 46 | margin: 0 0 $margin-small; 47 | } 48 | 49 | h2.title{ 50 | margin-bottom: $margin-general * 2; 51 | } 52 | 53 | .description, 54 | .card-description, 55 | .footer-big p{ 56 | color: $gray-light; 57 | } 58 | 59 | .text-warning { 60 | color: $brand-warning !important; 61 | } 62 | .text-primary { 63 | color: $brand-primary !important; 64 | } 65 | .text-danger { 66 | color: $brand-danger !important; 67 | } 68 | .text-success { 69 | color: $brand-success !important; 70 | } 71 | .text-info { 72 | color: $brand-info !important; 73 | } 74 | .text-gray{ 75 | color: $gray-light !important; 76 | } 77 | .text-general { 78 | color: $brand-general !important; 79 | } 80 | -------------------------------------------------------------------------------- /src/styles/materialfy/_variables.scss: -------------------------------------------------------------------------------- 1 | // Importing All Material Design Colors 2 | @import "./colors"; 3 | 4 | // Brand Colors 5 | $brand-primary: $purple !default; 6 | $brand-success: $green !default; 7 | $brand-danger: $red !default; 8 | $brand-warning: $orange !default; 9 | $brand-info: $cyan !default; 10 | $brand-general: $blue !default; 11 | 12 | // Paddings 13 | $padding-logo: 15px !default; 14 | $padding-avatar-title: 5px !default; 15 | $padding-x-footer: 24px !default; 16 | 17 | // Line Height 18 | $line-height: 30px !default; 19 | $line-height-base: 1.5em !default; 20 | $line-height-footer-items: 1.8 !default; 21 | $line-height-higher: 22px !default; 22 | $line-height-high: 56px !default; 23 | 24 | // Sidebar List Items Icons 25 | $icon-width: $line-height; 26 | 27 | // Sidebar List Items 28 | $padding-small: 10px !default; 29 | $padding-general: 15px !default; 30 | $margin-general: $padding-general; 31 | $margin-small: $padding-small; 32 | $font-size-general: 14px !default; 33 | $list-item-hover: rgba(200, 200, 200, .2) !default; 34 | $list-item-icon-opacity: .8 !default; 35 | $list-item-height: 48px !default; 36 | $badge-border: 1px solid $white !default; 37 | $badge-dimension: 20px !default; 38 | 39 | // Border Radius 40 | $border-radius-base: 3px !default; 41 | 42 | // Sidebar Avatar Margins 43 | $margin-list-right: 11px !default; 44 | $margin-list-left: 25px !default; 45 | 46 | // Sidebar Divider 47 | $divider-width: calc(100% - 30px) !default; 48 | $divider-margins: -1px !default; 49 | $divider-border: 1px solid #eee; 50 | 51 | // Sidebar Background 52 | $sidebar-bg: rgba(27, 27, 27, .74) !default; 53 | 54 | // Font size 55 | $font-size-mini: 9px !default; 56 | $font-size-small: 12px !default; 57 | $font-size-default: 14px !default; 58 | $font-size-avatar-title: 18px !default; 59 | $font-size-alert-icon: 30px !default; 60 | $font-size-big: 36px !default; 61 | $font-size-small-tag: 65% !default; 62 | $font-size-toolbar-title: $font-size-avatar-title; 63 | $font-size-toolbar-items: 20px !default; 64 | $font-size-h1: 3.3125rem; 65 | $font-size-h2: 2.25rem !default; 66 | $font-size-h3: 1.5625rem; 67 | $font-size-h4: 1.125rem !default; 68 | $font-size-h5: 1.0625rem !default; 69 | $font-size-h6: 0.75rem !default; 70 | $font-paragraph: $font-size-default !default; 71 | $font-size-chart-label: .730rem !default; 72 | 73 | // Font Weight 74 | $font-weight-lighter: 300 !default; 75 | $font-weight-base: 400 !default; 76 | $font-weight-bolder: 500 !default; 77 | 78 | // Opacity Colors 79 | $black-opacity-3: rgba(180, 180, 180, .3) !default; 80 | 81 | // Image from Avatar 82 | $top-dim: 1px !default; 83 | 84 | // Shadows 85 | $mdb-shadow-key-umbra-opacity: .2 !default; 86 | $mdb-shadow-key-penumbra-opacity: .14 !default; 87 | $mdb-shadow-ambient-shadow-opacity: .12 !default; 88 | 89 | // Toolbar Height 90 | $toolbar-min-height: 70px !default; 91 | 92 | // Toolbar Margin 93 | $toolbar-margin-left: 260px !default; 94 | 95 | // Body Background Color 96 | $body-color: rgb(165, 35, 35) !default; 97 | 98 | // Black Color 99 | $black-color: #495057 !default; 100 | $blockquote-color: rgba(0, 0, 0, .87) !default; 101 | 102 | // Gray Color 103 | $gray-light: #999 !default; 104 | $gray: lighten(#000, 33.5%) !default; 105 | 106 | // Inputs Color 107 | $input-color: #d2d2d2 !default; 108 | $label-color: #aaa !default; 109 | 110 | // Footer Border 111 | $footer-border-color: #e7e7e7 !default; 112 | $footer-border-top: 1px solid $footer-border-color !default; 113 | 114 | // Cards 115 | $card-shadow: 0 1px 4px 0 rgba(0,0,0,0.14) !default; 116 | $card-margin: 25px !default; 117 | $card-content-x-padding: 20px !default; 118 | $card-actions-y-margin: $card-content-x-padding; 119 | $card-title-margin: 5px !default; 120 | $card-offset: -20px !default; 121 | $card-chart-min-height: 160px !default; 122 | $card-stats-offset: 85px !default; 123 | $card-stats-icons-dim: 56px !default; 124 | $card-profile-avatar-pos: -50px !default; 125 | 126 | // Typography 127 | $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; 128 | $font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default; 129 | 130 | // Tooltips 131 | $tooltip-min-width: 130px !default; 132 | $tooltip-max-width: 200px !default; 133 | $tooltip-border: 5px !default; 134 | $tooltip-top-border-pos: 16px !default; 135 | $tooltip-arrow-align: .255em !default; 136 | 137 | // Buttons 138 | $btn-icon-dim: 41px !default; 139 | $btn-y-large-padding: 1.125rem !default; 140 | $btn-x-large-padding: 2.25rem !default; 141 | $btn-large-line-height: 1.333333 !default; 142 | $btn-y-small-padding: .40625rem !default; 143 | $btn-x-small-padding: 1.25rem !default; 144 | $btn-round-padding: 30px !default; 145 | $btn-font-size-icon: 1.25rem !default; 146 | $btn-margin-icon: 7px !default; 147 | $btn-fixed-icon-size: 1.8rem !default; 148 | $btn-fixed-width: 64px !default; 149 | 150 | // Tabs 151 | $tabs-active-line: rgba(255, 255, 255, .3) !default; 152 | $tabs-text-box-padding: 8px !default; 153 | 154 | // Table 155 | $table-hover-color: #f5f5f5 !default; 156 | $table-border-color: rgba(0,0,0,.06) !default; 157 | $table-head-height: 32px !default; 158 | 159 | // Social Buttons 160 | $social-facebook: #3b5998 !default; 161 | $social-twitter: #55acee !default; 162 | 163 | // Dropdown 164 | $font-size-dropdown: .8125rem !default; 165 | $border-radius-dropdown: 10px !default; 166 | 167 | // Box-shadow 168 | $box-shadow-general: 0 2px 5px 0 rgba($black, .26); 169 | -------------------------------------------------------------------------------- /src/views/DashboardView.vue: -------------------------------------------------------------------------------- 1 | 3 | 19 | 20 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/views/DashboardViews/CardsView.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/views/DashboardViews/Dash.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 174 | 175 | 291 | 292 | 299 | -------------------------------------------------------------------------------- /src/views/DashboardViews/MapsView.vue: -------------------------------------------------------------------------------- 1 |