├── .babelrc ├── .editorconfig ├── .eslintrc ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── .postcssrc.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── documentation ├── css │ ├── demo.css │ ├── documentation.css │ └── light-dashboard.css ├── img │ ├── apple-icon.png │ ├── back.jpg │ ├── favicon.png │ └── tim-logo.png └── tutorial-components.html ├── intelij.webpack.js ├── package.json ├── public ├── .gitkeep ├── Dashboard.PNG ├── favicon.png ├── img │ ├── default-avatar.png │ ├── faces │ │ ├── face-0.jpg │ │ ├── face-1.jpg │ │ ├── face-2.jpg │ │ ├── face-3.jpg │ │ ├── face-4.jpg │ │ ├── face-5.jpg │ │ ├── face-6.jpg │ │ ├── face-7.jpg │ │ └── tim_vector.jpe │ ├── favicon.ico │ ├── favicon.png │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg │ ├── loading-bubbles.svg │ ├── mask.png │ ├── new_logo.png │ ├── sidebar-1.jpg │ ├── sidebar-2.jpg │ ├── sidebar-3.jpg │ ├── sidebar-4.jpg │ ├── sidebar-5.jpg │ ├── tim_80x80.png │ └── vue-logo.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.vue ├── assets │ ├── css │ │ └── demo.css │ ├── fonts │ │ ├── nucleo-icons.eot │ │ ├── nucleo-icons.svg │ │ ├── nucleo-icons.ttf │ │ ├── nucleo-icons.woff │ │ └── nucleo-icons.woff2 │ └── sass │ │ ├── lbd │ │ ├── _alerts.scss │ │ ├── _bootstrap-switch.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _chartist.scss │ │ ├── _checkbox-radio-switch.scss │ │ ├── _dropdown.scss │ │ ├── _footers.scss │ │ ├── _inputs.scss │ │ ├── _misc.scss │ │ ├── _mixins.scss │ │ ├── _navbars.scss │ │ ├── _partial-nucleo-icons.scss │ │ ├── _responsive.scss │ │ ├── _sidebar-and-main-panel.scss │ │ ├── _tables.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ ├── mixins │ │ │ ├── _buttons.scss │ │ │ ├── _cards.scss │ │ │ ├── _chartist.scss │ │ │ ├── _icons.scss │ │ │ ├── _inputs.scss │ │ │ ├── _labels.scss │ │ │ ├── _morphing-buttons.scss │ │ │ ├── _navbars.scss │ │ │ ├── _social-buttons.scss │ │ │ ├── _tabs.scss │ │ │ ├── _transparency.scss │ │ │ └── _vendor-prefixes.scss │ │ └── plugins │ │ │ ├── _animate.scss │ │ │ └── _datetime-picker.scss │ │ └── light-bootstrap-dashboard.scss ├── components │ ├── BaseDropdown.vue │ ├── Cards │ │ ├── Card.vue │ │ ├── ChartCard.vue │ │ └── StatsCard.vue │ ├── Inputs │ │ ├── BaseCheckbox.vue │ │ ├── BaseInput.vue │ │ └── BaseRadio.vue │ ├── NotificationPlugin │ │ ├── Notification.vue │ │ ├── Notifications.vue │ │ └── index.js │ ├── SidebarPlugin │ │ ├── SideBar.vue │ │ ├── SidebarLink.vue │ │ └── index.js │ ├── Table.vue │ └── index.js ├── directives │ └── click-ouside.js ├── globalComponents.js ├── globalDirectives.js ├── layout │ ├── Content.vue │ ├── ContentFooter.vue │ ├── DashboardLayout.vue │ ├── MobileMenu.vue │ └── TopNavbar.vue ├── light-bootstrap-main.js ├── main.js ├── pages │ ├── Icons.vue │ ├── Maps.vue │ ├── Maps │ │ └── API_KEY.js │ ├── NotFoundPage.vue │ ├── Notifications.vue │ ├── Overview.vue │ ├── TableList.vue │ ├── Typography.vue │ ├── Upgrade.vue │ ├── UserProfile.vue │ └── UserProfile │ │ ├── EditProfileForm.vue │ │ └── UserCard.vue ├── registerServiceWorker.js └── routes │ └── routes.js └── vue.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@vue/app", 5 | { 6 | "polyfills": ["es7.object.entries", "es6.promise"] 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:vue/essential" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-light-bootstrap-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | package-lock.json 4 | yarn.lock 5 | dist/ 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | test/unit/coverage 10 | 11 | # Editor directories and files 12 | .idea 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [2.1.0] 2023-01-10 4 | 5 | - Update dependencies and devDependencies 6 | - Migrate from `node-sass` to `sass` 7 | - Fix installation issue when running `npm i` 8 | 9 | ## [2.0.0] 2019-02-14 10 | 11 | - Update to Bootstrap 4 12 | - Update to Vue CLI 3 13 | - Several UI fixes & improvements 14 | - Cleanup and simplify code structure 15 | - Add pwa support 16 | 17 | ## [1.0.0] 2017-06-18 18 | 19 | ### Stable Original Release 20 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at joracristi@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | * Fork the repository 2 | * Clone it on your PC 3 | * `npm install` or `yarn install` 4 | * Make changes, commit and open a PR 5 | 6 | ### Notes 7 | * Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives 8 | * Write unit tests for your custom components. See fgInput.spec and paper-table.spec 9 | 10 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 11 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Cristi Jora 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 | # [Vue Light Bootstrap Dashboard](http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard) [![version][version-badge]][changelog] [![license][license-badge]][license] 2 | 3 | > Admin dashboard based on light bootstrap dashboard UI template + vue-router 4 | 5 | This project is a vue version of [Light bootstrap dashboard](https://www.creative-tim.com/product/light-bootstrap-dashboard) 6 | designed for vue js. The dashboard includes Bootstrap 4, vue-router, chartist, google-maps and several other plugins/components. 7 | 8 | Check the [Live Demo here](http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard). 9 | 10 | ![](public/Dashboard.PNG) 11 | 12 | ## :rocket: Getting started 13 | 14 | Vue Light Bootstrap Dashboard is built on top of Bootstrap 4, Vuejs and Vue-router. To get started do the following steps: 15 | 16 | 1. Download the project 17 | 2. Make sure you have node.js (https://nodejs.org/en/) installed 18 | 3. Type `npm install` in the source folder where `package.json` is located 19 | 4. Type `npm run dev` to start the development server 20 | 21 | The repo uses [vue-cli](https://github.com/vuejs/vue-cli) scaffolding which takes care of the development setup with webpack and all the necessary modern tools to make web development faster and easier. 22 | 23 | ## [Documentation](https://demos.creative-tim.com/vue-light-bootstrap-dashboard/documentation/#/buttons) 24 | 25 | ## :cloud: Build Setup 26 | 27 | ### install dependencies 28 | 29 | `npm install` 30 | 31 | ### serve with hot reload at localhost:8000 32 | 33 | `npm run dev` 34 | 35 | ### build for production with minification 36 | 37 | `npm run build` 38 | 39 | ### run unit tests 40 | 41 | `npm run unit` 42 | 43 | ### run and watch unit tests 44 | 45 | `npm run unit:watch` 46 | 47 | ## :clipboard: Contribution guide 48 | 49 | - `npm install` or `yarn install` 50 | - Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives 51 | 52 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 53 | 54 | [changelog]: ./CHANGELOG.md 55 | [license]: ./LICENSE.md 56 | [version-badge]: https://img.shields.io/badge/version-2.1.0-blue.svg 57 | [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg 58 | -------------------------------------------------------------------------------- /documentation/css/demo.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 992px){ 2 | .typo-line{ 3 | padding-left: 140px; 4 | margin-bottom: 40px; 5 | position: relative; 6 | } 7 | 8 | .typo-line .category{ 9 | transform: translateY(-50%); 10 | top: 50%; 11 | left: 0px; 12 | position: absolute; 13 | } 14 | } 15 | 16 | .icon-section { 17 | margin: 0 0 3em; 18 | clear: both; 19 | overflow: hidden; 20 | } 21 | .icon-container { 22 | width: 240px; 23 | padding: .7em 0; 24 | float: left; 25 | position: relative; 26 | text-align: left; 27 | } 28 | .icon-container [class^="ti-"], 29 | .icon-container [class*=" ti-"] { 30 | color: #000; 31 | position: absolute; 32 | margin-top: 3px; 33 | transition: .3s; 34 | } 35 | .icon-container:hover [class^="ti-"], 36 | .icon-container:hover [class*=" ti-"] { 37 | font-size: 2.2em; 38 | margin-top: -5px; 39 | } 40 | .icon-container:hover .icon-name { 41 | color: #000; 42 | } 43 | .icon-name { 44 | color: #aaa; 45 | margin-left: 35px; 46 | font-size: .8em; 47 | transition: .3s; 48 | } 49 | .icon-container:hover .icon-name { 50 | margin-left: 45px; 51 | } 52 | 53 | .places-buttons .btn{ 54 | margin-bottom: 30px 55 | } 56 | .sidebar .nav > li.active-pro{ 57 | position: absolute; 58 | width: 100%; 59 | bottom: 10px; 60 | } 61 | .sidebar .nav > li.active-pro a{ 62 | background: rgba(255, 255, 255, 0.14); 63 | opacity: 1; 64 | color: #FFFFFF; 65 | } 66 | 67 | .table-upgrade td:nth-child(2), 68 | .table-upgrade td:nth-child(3){ 69 | text-align: center; 70 | } 71 | body.nude{ 72 | background-color: #f4f3ef; 73 | } 74 | -------------------------------------------------------------------------------- /documentation/css/documentation.css: -------------------------------------------------------------------------------- 1 | .tim-row{ 2 | padding-top: 60px; 3 | } 4 | pre.prettyprint{ 5 | background-color: #eee; 6 | border: 0px; 7 | margin-bottom: 0; 8 | margin-top: 20px; 9 | padding: 20px; 10 | text-align: left; 11 | } 12 | .atv, .str{ 13 | color: #05AE0E; 14 | } 15 | .tag, .pln, .kwd{ 16 | color: #3472F7; 17 | } 18 | .atn{ 19 | color: #2C93FF; 20 | } 21 | .pln{ 22 | color: #333; 23 | } 24 | .com{ 25 | color: #999; 26 | } 27 | .space-top{ 28 | margin-top: 50px; 29 | } 30 | .btn-primary .caret{ 31 | border-top-color: #3472F7; 32 | color: #3472F7; 33 | } 34 | .area-line{ 35 | border: 1px solid #999; 36 | border-left: 0; 37 | border-right: 0; 38 | color: #666; 39 | display: block; 40 | margin-top: 20px; 41 | padding: 8px 0; 42 | text-align: center; 43 | } 44 | .area-line a{ 45 | color: #666; 46 | } 47 | .container-fluid{ 48 | padding-right: 15px; 49 | padding-left: 15px; 50 | } 51 | .logo-container .logo{ 52 | overflow: hidden; 53 | border-radius: 50%; 54 | border: 1px solid #333333; 55 | width: 50px; 56 | float: left; 57 | } 58 | .header-wrapper { 59 | position: relative; 60 | height: 100%; 61 | } 62 | 63 | .header-wrapper .navbar { 64 | border-radius: 0; 65 | position: absolute; 66 | width: 100%; 67 | z-index: 3; 68 | } 69 | .header-wrapper .header { 70 | background-color: #ff8f5e; 71 | background-position: center center; 72 | background-size: cover; 73 | height: 100%; 74 | overflow: hidden; 75 | position: absolute; 76 | width: 100%; 77 | z-index: 1; 78 | } 79 | .header-wrapper .header .filter::after { 80 | content: ""; 81 | display: block; 82 | height: 100%; 83 | left: 0; 84 | opacity: 0.77; 85 | position: absolute; 86 | top: 0; 87 | width: 100%; 88 | z-index: 2; 89 | } 90 | .header-wrapper .title-container{ 91 | color: #fff; 92 | position: relative; 93 | top: 30%; 94 | z-index: 3; 95 | 96 | } 97 | .logo-container .brand{ 98 | font-size: 18px; 99 | color: #FFFFFF; 100 | line-height: 20px; 101 | float: left; 102 | margin-left: 10px; 103 | margin-top: 5px; 104 | width: 50px; 105 | height: 50px; 106 | } 107 | .logo-container{ 108 | margin-top: 10px; 109 | margin-left: 15px; 110 | } 111 | .logo-container .logo img{ 112 | width: 100%; 113 | } 114 | .navbar-small .logo-container .brand{ 115 | color: #333333; 116 | } 117 | .fixed-section{ 118 | top: 90px; 119 | max-height: 493px; 120 | overflow: scroll; 121 | border-bottom: 1px solid rgba(220,220,220, .6); 122 | } 123 | 124 | .fixed-section ul{ 125 | padding: 0; 126 | } 127 | 128 | .fixed-section.affix-top{ 129 | margin-top: 90px; 130 | } 131 | 132 | .fixed-section ul li{ 133 | list-style: none; 134 | } 135 | .fixed-section li a{ 136 | font-size: 14px; 137 | padding: 2px; 138 | display: block; 139 | color: #666666; 140 | } 141 | .fixed-section li a.active{ 142 | color: #00bbff; 143 | } 144 | .fixed-section.float{ 145 | position: fixed; 146 | top: 100px; 147 | width: 200px; 148 | margin-top: 0; 149 | } 150 | .copyright { 151 | color: #777777; 152 | padding: 10px 15px; 153 | font-size: 14px; 154 | margin: 15px 3px; 155 | line-height: 20px; 156 | text-align: center; 157 | } 158 | 159 | .table-bigboy .img-container{ 160 | width: 130px; 161 | height: 85px; 162 | } 163 | 164 | .table-bigboy .td-name{ 165 | min-width: 170px; 166 | } 167 | #buttons-row .btn{ 168 | margin-bottom: 15px; 169 | } 170 | 171 | .navbar .navbar-nav > li > a.btn.btn-white, 172 | .navbar .navbar-nav > li > a.btn.btn-white:hover, 173 | .navbar .navbar-nav > li > a.btn.btn-white:focus{ 174 | color: #FFFFFF; 175 | } 176 | 177 | @media (min-width: 992px){ 178 | .navbar { 179 | min-height: 70px; 180 | } 181 | } 182 | 183 | .header-full{ 184 | min-height: 100vh; 185 | height: auto; 186 | max-height: 999px; 187 | } 188 | .filter{ 189 | position: absolute; 190 | left: 0; 191 | right: 0; 192 | top: 0; 193 | bottom: 0; 194 | width: 100%; 195 | height: 100%; 196 | z-index: 0; 197 | 198 | } 199 | .filter:after{ 200 | background: #0a6715; 201 | background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #0ab961 0%, #0a6715 100%) repeat scroll 0 0 / 150% 150%; 202 | height: 100% !important; 203 | } 204 | -------------------------------------------------------------------------------- /documentation/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/documentation/img/apple-icon.png -------------------------------------------------------------------------------- /documentation/img/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/documentation/img/back.jpg -------------------------------------------------------------------------------- /documentation/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/documentation/img/favicon.png -------------------------------------------------------------------------------- /documentation/img/tim-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/documentation/img/tim-logo.png -------------------------------------------------------------------------------- /documentation/tutorial-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Components - Vue Light Bootstrap Dashboard by Creative Tim 11 | 12 | 16 | 17 | 18 | 24 | 25 | 26 | 27 | 28 | 29 | 33 | 38 | 39 | 40 | 41 | 77 | 78 |
79 |
80 |
81 |
82 |

Vue Light Bootstrap Dashboard

83 |

v2.1.0

84 |

85 | We are constantly doing updates for you. 86 |

87 | View Documentation 93 |
94 |
95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /intelij.webpack.js: -------------------------------------------------------------------------------- 1 | // This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports 2 | // Keep in sync with actual webpack aliases 3 | 4 | const path = require('path'); 5 | 6 | module.exports = { 7 | resolve: { 8 | alias: { 9 | '@': path.resolve(__dirname, 'src') 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-light-bootstrap-dashboard", 3 | "version": "2.1.0", 4 | "private": true, 5 | "description": "Vue light bootstrap dashboard", 6 | "author": "cristijora ", 7 | "scripts": { 8 | "serve": "vue-cli-service serve --open", 9 | "build": "vue-cli-service build", 10 | "e2e": "node test/e2e/runner.js", 11 | "lint": "vue-cli-service lint", 12 | "dev": "vue-cli-service serve --open", 13 | "lint-fix": "vue-cli-service lint --fix" 14 | }, 15 | "dependencies": { 16 | "bootstrap": "4.6.0", 17 | "cache-loader": "^4.1.0", 18 | "chartist": "0.11.0", 19 | "google-maps": "3.2.1", 20 | "register-service-worker": "1.7.2", 21 | "v-tooltip": "2.0.0-rc.33", 22 | "vue": "2.7.14", 23 | "vue-router": "3.0.2", 24 | "vue2-google-maps": "0.10.7" 25 | }, 26 | "devDependencies": { 27 | "@vue/cli-plugin-babel": "3.12.1", 28 | "@vue/cli-plugin-eslint": "3.12.1", 29 | "@vue/cli-plugin-pwa": "3.12.1", 30 | "@vue/cli-service": "3.12.1", 31 | "sass": "1.56.2", 32 | "sass-loader": "10.1.1", 33 | "vue-template-compiler": "2.7.14" 34 | }, 35 | "browserslist": [ 36 | "> 1%", 37 | "last 2 versions", 38 | "not ie <= 11" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/.gitkeep -------------------------------------------------------------------------------- /public/Dashboard.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/Dashboard.PNG -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/favicon.png -------------------------------------------------------------------------------- /public/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/default-avatar.png -------------------------------------------------------------------------------- /public/img/faces/face-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-0.jpg -------------------------------------------------------------------------------- /public/img/faces/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-1.jpg -------------------------------------------------------------------------------- /public/img/faces/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-2.jpg -------------------------------------------------------------------------------- /public/img/faces/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-3.jpg -------------------------------------------------------------------------------- /public/img/faces/face-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-4.jpg -------------------------------------------------------------------------------- /public/img/faces/face-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-5.jpg -------------------------------------------------------------------------------- /public/img/faces/face-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-6.jpg -------------------------------------------------------------------------------- /public/img/faces/face-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/face-7.jpg -------------------------------------------------------------------------------- /public/img/faces/tim_vector.jpe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/faces/tim_vector.jpe -------------------------------------------------------------------------------- /public/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/favicon.ico -------------------------------------------------------------------------------- /public/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/favicon.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/loading-bubbles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/mask.png -------------------------------------------------------------------------------- /public/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/new_logo.png -------------------------------------------------------------------------------- /public/img/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/sidebar-1.jpg -------------------------------------------------------------------------------- /public/img/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/sidebar-2.jpg -------------------------------------------------------------------------------- /public/img/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/sidebar-3.jpg -------------------------------------------------------------------------------- /public/img/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/sidebar-4.jpg -------------------------------------------------------------------------------- /public/img/sidebar-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/sidebar-5.jpg -------------------------------------------------------------------------------- /public/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/tim_80x80.png -------------------------------------------------------------------------------- /public/img/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/public/img/vue-logo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 24 | 30 | 31 | Light Bootstrap Dashboard Vue 32 | 33 | 37 | 38 | 39 | 43 | 47 | 48 | 49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-light-bootstrap-dashboard", 3 | "short_name": "vue-light-bootstrap-dashboard", 4 | "icons": [ 5 | { 6 | "src": "./img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "./img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "./index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | 39 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/src/assets/fonts/nucleo-icons.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/src/assets/fonts/nucleo-icons.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/src/assets/fonts/nucleo-icons.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/universal9122/docs3-2/bc91de95b1846ec4d7931043eb51ab88855f9239/src/assets/fonts/nucleo-icons.woff2 -------------------------------------------------------------------------------- /src/assets/sass/lbd/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: 0; 4 | color: #FFFFFF; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | .container &{ 9 | border-radius: 4px; 10 | 11 | } 12 | .navbar &{ 13 | border-radius: 0; 14 | left: 0; 15 | position: absolute; 16 | right: 0; 17 | top: 85px; 18 | width: 100%; 19 | z-index: 3; 20 | } 21 | .navbar:not(.navbar-transparent) &{ 22 | top: 70px; 23 | } 24 | 25 | span[data-notify="icon"]{ 26 | font-size: 30px; 27 | display: block; 28 | left: 15px; 29 | position: absolute; 30 | top: 50%; 31 | margin-top: -15px; 32 | } 33 | 34 | i.nc-simple-remove{ 35 | font-size: 12px !important; 36 | font: bold normal normal 14px/1 'nucleo-icons'; 37 | } 38 | 39 | button.close{ 40 | position: absolute; 41 | right: 10px; 42 | top: 50%; 43 | margin-top: -13px; 44 | z-index: 1033; 45 | background-color: #FFFFFF; 46 | display: block; 47 | border-radius: 50%; 48 | opacity: .4; 49 | line-height: 9px; 50 | width: 25px; 51 | height: 25px; 52 | outline: 0 !important; 53 | text-align: center; 54 | padding: 3px; 55 | font-weight: 300; 56 | 57 | &:hover{ 58 | opacity: .55; 59 | } 60 | } 61 | 62 | .close ~ span{ 63 | display: block; 64 | max-width: 89%; 65 | } 66 | 67 | &[data-notify="container"]{ 68 | padding: 10px 10px 10px 20px; 69 | border-radius: $border-radius-base; 70 | } 71 | 72 | &.alert-with-icon{ 73 | padding-left: 65px; 74 | } 75 | } 76 | .alert-primary{ 77 | background-color: $blue-navbar; 78 | } 79 | .alert-info{ 80 | background-color: $azure-navbar; 81 | } 82 | .alert-success { 83 | background-color: $green-navbar; 84 | } 85 | .alert-warning { 86 | background-color: $orange-navbar; 87 | } 88 | .alert-danger { 89 | background-color: $red-navbar; 90 | } 91 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_bootstrap-switch.scss: -------------------------------------------------------------------------------- 1 | .bootstrap-switch { 2 | display: inline-block; 3 | direction: ltr; 4 | cursor: pointer; 5 | border-radius: 30px; 6 | border: 0; 7 | position: relative; 8 | text-align: left; 9 | overflow: hidden; 10 | margin-bottom: 5px; 11 | margin-left: 66px; 12 | line-height: 8px; 13 | width: 61px !important; 14 | height: 26px; 15 | outline: none; 16 | z-index: 0; 17 | margin-right: 1px; 18 | -webkit-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | user-select: none; 22 | vertical-align: middle; 23 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 24 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 25 | } 26 | 27 | .bootstrap-switch .bootstrap-switch-container { 28 | display: inline-flex; 29 | top: 0; 30 | height: 26px; 31 | border-radius: 4px; 32 | -webkit-transform: translate3d(0, 0, 0); 33 | transform: translate3d(0, 0, 0); 34 | width: 100px !important; 35 | } 36 | 37 | .bootstrap-switch .bootstrap-switch-handle-on, 38 | .bootstrap-switch .bootstrap-switch-handle-off, 39 | .bootstrap-switch .bootstrap-switch-label { 40 | -webkit-box-sizing: border-box; 41 | -moz-box-sizing: border-box; 42 | box-sizing: border-box; 43 | cursor: pointer; 44 | display: inline-block !important; 45 | height: 100%; 46 | color: #fff; 47 | padding: 6px 10px; 48 | font-size: 11px; 49 | text-indent: -5px; 50 | line-height: 15px; 51 | -webkit-transition: 0.25s ease-out; 52 | transition: 0.25s ease-out; 53 | 54 | i{ 55 | font-size: 12px; 56 | line-height: 14px; 57 | } 58 | } 59 | 60 | .bootstrap-switch .bootstrap-switch-handle-on, 61 | .bootstrap-switch .bootstrap-switch-handle-off { 62 | text-align: center; 63 | z-index: 1; 64 | float: left; 65 | width: 50% !important; 66 | background-color: $info-color; 67 | } 68 | 69 | 70 | .bootstrap-switch .bootstrap-switch-label { 71 | text-align: center; 72 | z-index: 100; 73 | color: #333333; 74 | background: #ffffff; 75 | width: 22px !important; 76 | height: 22px; 77 | margin: 2px -11px; 78 | border-radius: 12px; 79 | position: relative; 80 | float: left; 81 | padding: 0; 82 | background-color: #FFFFFF; 83 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25); 84 | } 85 | 86 | .bootstrap-switch .bootstrap-switch-handle-on { 87 | border-bottom-left-radius: 3px; 88 | border-top-left-radius: 3px; 89 | } 90 | 91 | .bootstrap-switch .bootstrap-switch-handle-off { 92 | text-indent: 6px; 93 | } 94 | 95 | .bootstrap-switch input[type='radio'], 96 | .bootstrap-switch input[type='checkbox'] { 97 | position: absolute !important; 98 | top: 0; 99 | left: 0; 100 | opacity: 0; 101 | filter: alpha(opacity=0); 102 | z-index: -1; 103 | } 104 | 105 | 106 | .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { 107 | -webkit-transition: margin-left 0.5s; 108 | transition: margin-left 0.5s; 109 | } 110 | 111 | 112 | .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container { 113 | margin-left: -2px !important; 114 | } 115 | 116 | .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container { 117 | margin-left: -37px !important; 118 | } 119 | 120 | .bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label { 121 | width: 26px !important; 122 | margin: 2px -15px; 123 | } 124 | 125 | .bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label { 126 | width: 26px !important; 127 | margin: 2px -15px -13px -11px; 128 | } 129 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | border-width: $border-thick; 3 | background-color: $transparent-bg; 4 | font-weight: $font-weight-normal; 5 | 6 | @include opacity(.8); 7 | padding: $padding-base-vertical $padding-base-horizontal; 8 | 9 | @include btn-styles($default-color, $default-states-color); 10 | 11 | &:hover, 12 | &:focus{ 13 | @include opacity(1); 14 | outline: 0 !important; 15 | box-shadow: none; 16 | } 17 | &:active, 18 | &.active, 19 | .open > &.dropdown-toggle { 20 | @include box-shadow(none); 21 | outline: 0 !important; 22 | } 23 | 24 | &.btn-icon{ 25 | padding: $padding-base-vertical; 26 | } 27 | 28 | } 29 | 30 | // Apply the mixin to the buttons 31 | //.btn-default { @include btn-styles($default-color, $default-states-color); } 32 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 33 | .btn-success { @include btn-styles($success-color, $success-states-color); } 34 | .btn-info { @include btn-styles($info-color, $info-states-color); } 35 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 36 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 37 | .btn-neutral { 38 | @include btn-styles($white-color, $white-color); 39 | 40 | &:active, 41 | &.active, 42 | .open > &.dropdown-toggle{ 43 | background-color: $white-color; 44 | color: $default-color; 45 | } 46 | 47 | &.btn-fill, 48 | &.btn-fill:hover, 49 | &.btn-fill:focus{ 50 | color: $default-color; 51 | } 52 | 53 | &.btn-simple:active, 54 | &.btn-simple.active{ 55 | background-color: transparent; 56 | } 57 | } 58 | 59 | .btn{ 60 | &:disabled, 61 | &[disabled], 62 | &.disabled{ 63 | @include opacity(.5); 64 | } 65 | } 66 | .btn-round{ 67 | border-width: $border-thin; 68 | border-radius: $btn-round-radius !important; 69 | padding: $padding-round-vertical $padding-round-horizontal; 70 | 71 | &.btn-icon{ 72 | padding: $padding-round-vertical; 73 | } 74 | } 75 | .btn-simple{ 76 | border: $none; 77 | font-size: $font-size-medium; 78 | padding: $padding-base-vertical $padding-base-horizontal; 79 | 80 | &.btn-icon{ 81 | padding: $padding-base-vertical; 82 | } 83 | } 84 | .btn-lg{ 85 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 86 | font-weight: $font-weight-normal; 87 | } 88 | .btn-sm{ 89 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 90 | } 91 | .btn-xs { 92 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); 93 | } 94 | .btn-wd { 95 | min-width: 140px; 96 | } 97 | 98 | .btn-group.select{ 99 | width: 100%; 100 | } 101 | .btn-group.select .btn{ 102 | text-align: left; 103 | } 104 | .btn-group.select .caret{ 105 | position: absolute; 106 | top: 50%; 107 | margin-top: -1px; 108 | right: 8px; 109 | } 110 | .btn-social{ 111 | opacity: 0.85; 112 | } 113 | 114 | .btn-twitter{ 115 | border-color: $social-twitter; 116 | color: $social-twitter; 117 | &:hover{ 118 | opacity: 1 !important; 119 | border-color: $social-twitter; 120 | color: $social-twitter; 121 | } 122 | } 123 | .btn-facebook{ 124 | border-color: $social-facebook; 125 | color: $social-facebook; 126 | 127 | &:hover{ 128 | opacity: 1 !important; 129 | border-color: $social-facebook; 130 | color: $social-facebook; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border-radius: $border-radius-base; 3 | background-color: $white-color; 4 | margin-bottom: 30px; 5 | 6 | .card-image{ 7 | width: 100%; 8 | overflow: hidden; 9 | height: 260px; 10 | border-radius: $border-radius-base $border-radius-base 0 0; 11 | position: relative; 12 | -webkit-transform-style: preserve-3d; 13 | -moz-transform-style: preserve-3d; 14 | transform-style: preserve-3d; 15 | 16 | img { 17 | width: 100%; 18 | } 19 | } 20 | .filter{ 21 | position: absolute; 22 | z-index: 2; 23 | background-color: rgba(0,0,0,.68); 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | text-align: center; 29 | 30 | @include opacity(0); 31 | 32 | .btn{ 33 | @include vertical-align(); 34 | } 35 | } 36 | &:hover .filter{ 37 | @include opacity(1); 38 | } 39 | .btn-hover{ 40 | @include opacity(0); 41 | } 42 | &:hover .btn-hover{ 43 | @include opacity(1); 44 | } 45 | .card-body{ 46 | padding: 15px 15px 10px 15px; 47 | } 48 | .card-header{ 49 | padding: 15px 15px 0; 50 | background-color: $white-color; 51 | border-bottom: none !important; 52 | 53 | } 54 | .card-category, 55 | label{ 56 | font-size: $font-size-base; 57 | font-weight: $font-weight-normal; 58 | color: $dark-gray; 59 | margin-bottom: 0px; 60 | 61 | i{ 62 | font-size: $font-paragraph; 63 | } 64 | } 65 | 66 | label{ 67 | font-size: $font-size-small; 68 | margin-bottom: 5px; 69 | text-transform: uppercase; 70 | } 71 | 72 | .card-title{ 73 | margin: $none; 74 | color: $black-color; 75 | font-weight: $font-weight-light; 76 | } 77 | .avatar{ 78 | width: 30px; 79 | height: 30px; 80 | overflow: hidden; 81 | border-radius: 50%; 82 | margin-right: 5px; 83 | } 84 | .description{ 85 | font-size: $font-size-base; 86 | color: #333; 87 | } 88 | .card-footer{ 89 | padding-top: 0; 90 | background-color: $transparent-bg; 91 | line-height: 30px; 92 | border-top: none !important; 93 | font-size: 14px; 94 | 95 | .legend{ 96 | padding: 5px 0; 97 | } 98 | 99 | hr{ 100 | margin-top: 5px; 101 | margin-bottom: 5px; 102 | } 103 | } 104 | .stats{ 105 | color: #a9a9a9; 106 | } 107 | .card-footer div{ 108 | display: inline-block; 109 | } 110 | 111 | .author{ 112 | font-size: $font-size-small; 113 | font-weight: $font-weight-bold; 114 | text-transform: uppercase; 115 | } 116 | .author i{ 117 | font-size: $font-size-base; 118 | } 119 | h6{ 120 | font-size: $font-size-small; 121 | margin: 0; 122 | } 123 | &.card-separator:after{ 124 | height: 100%; 125 | right: -15px; 126 | top: 0; 127 | width: 1px; 128 | background-color: $medium-gray; 129 | card-body: ""; 130 | position: absolute; 131 | } 132 | 133 | .ct-chart{ 134 | margin: 30px 0 30px; 135 | height: 245px; 136 | } 137 | 138 | .ct-label{ 139 | font-size: 1rem !important; 140 | } 141 | 142 | .table{ 143 | tbody td:first-child, 144 | thead th:first-child{ 145 | padding-left: 15px; 146 | } 147 | 148 | tbody td:last-child, 149 | thead th:last-child{ 150 | padding-right: 15px; 151 | display: inline-flex; 152 | } 153 | } 154 | 155 | .alert{ 156 | border-radius: $border-radius-base; 157 | position: relative; 158 | 159 | &.alert-with-icon{ 160 | padding-left: 65px; 161 | } 162 | } 163 | } 164 | 165 | 166 | 167 | .card-stats{ 168 | .card-body{ 169 | padding: 15px 15px 0px; 170 | 171 | .numbers{ 172 | font-size: 1.8rem; 173 | text-align: right; 174 | 175 | p{ 176 | margin-bottom: 0; 177 | } 178 | } 179 | } 180 | .card-footer{ 181 | padding: 0px 15px 10px 15px; 182 | 183 | 184 | } 185 | .icon-big { 186 | font-size: 3em; 187 | min-height: 64px; 188 | 189 | i{ 190 | font-weight: 400; 191 | line-height: 59px; 192 | } 193 | } 194 | 195 | 196 | } 197 | 198 | .card-user{ 199 | .card-image{ 200 | height: 110px; 201 | } 202 | .card-image-plain{ 203 | height: 0; 204 | margin-top: 110px; 205 | } 206 | .author{ 207 | text-align: center; 208 | text-transform: none; 209 | margin-top: -70px; 210 | } 211 | .avatar{ 212 | width: 124px; 213 | height: 124px; 214 | border: 5px solid #FFFFFF; 215 | position: relative; 216 | margin-bottom: 15px; 217 | 218 | &.border-gray{ 219 | border-color: #EEEEEE; 220 | } 221 | } 222 | .title{ 223 | line-height: 24px; 224 | } 225 | .card-body{ 226 | min-height: 240px; 227 | } 228 | } 229 | 230 | .card-user, 231 | .card-price{ 232 | .card-footer{ 233 | padding: 5px 15px 10px; 234 | } 235 | hr{ 236 | margin: 5px 15px; 237 | } 238 | } 239 | .card-plain{ 240 | background-color: transparent; 241 | box-shadow: none; 242 | border-radius: 0; 243 | 244 | .card-image{ 245 | border-radius: 4px; 246 | } 247 | } 248 | 249 | .card.card-plain{ 250 | border: none !important; 251 | 252 | .card-header{ 253 | background-color: transparent !important; 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_chartist.scss: -------------------------------------------------------------------------------- 1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { 2 | display: block; 3 | position: relative; 4 | width: $width; 5 | 6 | &:before { 7 | display: block; 8 | float: left; 9 | content: ""; 10 | width: 0; 11 | height: 0; 12 | padding-bottom: $ratio * 100%; 13 | } 14 | 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | 21 | > svg { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | } 28 | 29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { 30 | -webkit-box-align: $ct-text-align; 31 | -webkit-align-items: $ct-text-align; 32 | -ms-flex-align: $ct-text-align; 33 | align-items: $ct-text-align; 34 | -webkit-box-pack: $ct-text-justify; 35 | -webkit-justify-content: $ct-text-justify; 36 | -ms-flex-pack: $ct-text-justify; 37 | justify-content: $ct-text-justify; 38 | // Fallback to text-align for non-flex browsers 39 | @if($ct-text-justify == 'flex-start') { 40 | text-align: left; 41 | } @else if ($ct-text-justify == 'flex-end') { 42 | text-align: right; 43 | } @else { 44 | text-align: center; 45 | } 46 | } 47 | 48 | @mixin ct-flex() { 49 | // Fallback to block 50 | display: block; 51 | display: -webkit-box; 52 | display: -moz-box; 53 | display: -ms-flexbox; 54 | display: -webkit-flex; 55 | display: flex; 56 | } 57 | 58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { 59 | fill: $ct-text-color; 60 | color: $ct-text-color; 61 | font-size: $ct-text-size; 62 | line-height: $ct-text-line-height; 63 | } 64 | 65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { 66 | stroke: $ct-grid-color; 67 | stroke-width: $ct-grid-width; 68 | 69 | @if ($ct-grid-dasharray) { 70 | stroke-dasharray: $ct-grid-dasharray; 71 | } 72 | } 73 | 74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { 75 | stroke-width: $ct-point-size; 76 | stroke-linecap: $ct-point-shape; 77 | } 78 | 79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { 80 | fill: none; 81 | stroke-width: $ct-line-width; 82 | 83 | @if ($ct-line-dasharray) { 84 | stroke-dasharray: $ct-line-dasharray; 85 | } 86 | } 87 | 88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { 89 | stroke: none; 90 | fill-opacity: $ct-area-opacity; 91 | } 92 | 93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { 94 | fill: none; 95 | stroke-width: $ct-bar-width; 96 | } 97 | 98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { 99 | fill: none; 100 | stroke-width: $ct-donut-width; 101 | } 102 | 103 | @mixin ct-chart-series-color($color) { 104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { 105 | stroke: $color; 106 | } 107 | 108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} { 109 | fill: $color; 110 | } 111 | } 112 | 113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { 114 | 115 | .#{$ct-class-label} { 116 | @include ct-chart-label($ct-text-color, $ct-text-size); 117 | } 118 | 119 | .#{$ct-class-chart-line} .#{$ct-class-label}, 120 | .#{$ct-class-chart-bar} .#{$ct-class-label} { 121 | @include ct-flex(); 122 | } 123 | 124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 125 | @include ct-align-justify(flex-end, flex-start); 126 | // Fallback for browsers that don't support foreignObjects 127 | text-anchor: start; 128 | } 129 | 130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 131 | @include ct-align-justify(flex-start, flex-start); 132 | // Fallback for browsers that don't support foreignObjects 133 | text-anchor: start; 134 | } 135 | 136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 137 | @include ct-align-justify(flex-end, flex-end); 138 | // Fallback for browsers that don't support foreignObjects 139 | text-anchor: end; 140 | } 141 | 142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 143 | @include ct-align-justify(flex-end, flex-start); 144 | // Fallback for browsers that don't support foreignObjects 145 | text-anchor: start; 146 | } 147 | 148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 149 | @include ct-align-justify(flex-end, center); 150 | // Fallback for browsers that don't support foreignObjects 151 | text-anchor: start; 152 | } 153 | 154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 155 | @include ct-align-justify(flex-start, center); 156 | // Fallback for browsers that don't support foreignObjects 157 | text-anchor: start; 158 | } 159 | 160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 161 | @include ct-align-justify(flex-end, flex-start); 162 | // Fallback for browsers that don't support foreignObjects 163 | text-anchor: start; 164 | } 165 | 166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 167 | @include ct-align-justify(flex-start, flex-start); 168 | // Fallback for browsers that don't support foreignObjects 169 | text-anchor: start; 170 | } 171 | 172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); 174 | @include ct-align-justify(center, flex-end); 175 | // Fallback for browsers that don't support foreignObjects 176 | text-anchor: end; 177 | } 178 | 179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 180 | @include ct-align-justify(center, flex-start); 181 | // Fallback for browsers that don't support foreignObjects 182 | text-anchor: end; 183 | } 184 | 185 | .#{$ct-class-grid} { 186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); 187 | } 188 | 189 | .#{$ct-class-point} { 190 | @include ct-chart-point($ct-point-size, $ct-point-shape); 191 | } 192 | 193 | .#{$ct-class-line} { 194 | @include ct-chart-line($ct-line-width); 195 | } 196 | 197 | .#{$ct-class-area} { 198 | @include ct-chart-area(); 199 | } 200 | 201 | .#{$ct-class-bar} { 202 | @include ct-chart-bar($ct-bar-width); 203 | } 204 | 205 | .#{$ct-class-slice-donut} { 206 | @include ct-chart-donut($ct-donut-width); 207 | } 208 | 209 | @if $ct-include-colored-series { 210 | @for $i from 0 to length($ct-series-names) { 211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { 212 | $color: nth($ct-series-colors, $i + 1); 213 | 214 | @include ct-chart-series-color($color); 215 | } 216 | } 217 | } 218 | } 219 | 220 | @if $ct-include-classes { 221 | @include ct-chart(); 222 | 223 | @if $ct-include-alternative-responsive-containers { 224 | @for $i from 0 to length($ct-scales-names) { 225 | .#{nth($ct-scales-names, $i + 1)} { 226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); 227 | } 228 | } 229 | } 230 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/_checkbox-radio-switch.scss: -------------------------------------------------------------------------------- 1 | .from-check, 2 | .form-check-radio { 3 | margin-bottom: 12px; 4 | position: relative; 5 | 6 | } 7 | 8 | .form-check{ 9 | padding-left: 0; 10 | .form-check-label{ 11 | display: inline-block; 12 | position: relative; 13 | cursor: pointer; 14 | padding-left: 35px; 15 | line-height: 26px; 16 | margin-bottom: 0; 17 | } 18 | 19 | .form-check-sign::before, 20 | .form-check-sign::after{ 21 | font-family: 'FontAwesome'; 22 | content: "\f096"; 23 | display: inline-block; 24 | color: $info-color; 25 | position: absolute; 26 | width: 19px; 27 | height: 19px; 28 | margin-top: -12px; 29 | margin-left: -23px; 30 | font-size: 21px; 31 | cursor: pointer; 32 | -webkit-transition: opacity 0.3s linear; 33 | -moz-transition: opacity 0.3s linear; 34 | -o-transition: opacity 0.3s linear; 35 | -ms-transition: opacity 0.3s linear; 36 | transition: opacity 0.3s linear; 37 | } 38 | .form-check-sign::after{ 39 | font-family: 'FontAwesome'; 40 | content: "\f046"; 41 | text-align: center; 42 | opacity: 0; 43 | color: $info-color; 44 | border: 0; 45 | background-color: inherit; 46 | } 47 | &.disabled{ 48 | .form-check-label{ 49 | color: $dark-gray; 50 | opacity: .5; 51 | cursor: not-allowed; 52 | } 53 | } 54 | 55 | } 56 | 57 | .form-check.disabled .form-check-label, 58 | .form-check.disabled .form-check-label { 59 | 60 | } 61 | 62 | .form-check input[type="checkbox"], 63 | .form-check-radio input[type="radio"]{ 64 | opacity: 0; 65 | position: absolute; 66 | visibility: hidden; 67 | } 68 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 69 | opacity: 1; 70 | } 71 | 72 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 73 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 74 | cursor: not-allowed; 75 | } 76 | 77 | .form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign, 78 | .form-check-radio input[type="radio"]:disabled + .form-check-sign{ 79 | pointer-events: none !important; 80 | } 81 | 82 | .form-check-radio{ 83 | .form-check-label{ 84 | padding-left: 2rem; 85 | } 86 | &.disabled{ 87 | .form-check-label{ 88 | color: $dark-gray; 89 | opacity: .5; 90 | cursor: not-allowed; 91 | } 92 | } 93 | } 94 | 95 | .form-check-radio .form-check-sign::before{ 96 | font-family: 'FontAwesome'; 97 | content: "\f10c"; 98 | font-size: 22px; 99 | -webkit-font-smoothing: antialiased; 100 | -moz-osx-font-smoothing: grayscale; 101 | display: inline-block; 102 | position: absolute; 103 | opacity: .50; 104 | left: 5px; 105 | top: -5px; 106 | } 107 | 108 | .form-check-label input[type="checkbox"]:checked + .form-check-sign:before{ 109 | // background-color: #66615B; 110 | } 111 | 112 | .form-check-radio input[type="radio"] + .form-check-sign:after, 113 | .form-check-radio input[type="radio"] { 114 | opacity: 0; 115 | -webkit-transition: opacity 0.3s linear; 116 | -moz-transition: opacity 0.3s linear; 117 | -o-transition: opacity 0.3s linear; 118 | -ms-transition: opacity 0.3s linear; 119 | transition: opacity 0.3s linear; 120 | content:" "; 121 | display: block; 122 | } 123 | 124 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 125 | font-family: 'FontAwesome'; 126 | content: "\f192"; 127 | top: -5px; 128 | position: absolute; 129 | left: 5px; 130 | opacity: 1; 131 | font-size: 22px; 132 | } 133 | 134 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 135 | opacity: 1; 136 | } 137 | 138 | 139 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 140 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 141 | color: $dark-gray; 142 | } 143 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu{ 2 | visibility: hidden; 3 | margin: 0; 4 | padding: 0; 5 | border-radius: $border-radius-extreme; 6 | display: block; 7 | z-index: 9000; 8 | position: absolute; 9 | 10 | @include opacity(0); 11 | @include box-shadow($dropdown-shadow); 12 | 13 | .show &{ 14 | @include opacity(1); 15 | visibility: visible; 16 | transform: translate3d(0px, 0px, 0px) !important; 17 | } 18 | .select &{ 19 | border-radius: $border-radius-bottom; 20 | @include box-shadow(none); 21 | @include transform-origin($select-coordinates); 22 | @include transform-scale(1); 23 | @include transition($fast-transition-time, $transition-linear); 24 | margin-top: -20px; 25 | } 26 | .select.show &{ 27 | margin-top: -1px; 28 | } 29 | 30 | .dropdown-item { 31 | padding: $padding-base-vertical $padding-base-horizontal; 32 | color: #333333; 33 | 34 | img{ 35 | margin-top: -3px; 36 | } 37 | } 38 | .dropdown-item:focus{ 39 | outline: 0 !important; 40 | } 41 | 42 | .btn-group.select &{ 43 | min-width: 100%; 44 | } 45 | 46 | > li:first-child > a{ 47 | border-top-left-radius: $border-radius-extreme; 48 | border-top-right-radius: $border-radius-extreme; 49 | } 50 | 51 | > li:last-child > a{ 52 | border-bottom-left-radius: $border-radius-extreme; 53 | border-bottom-right-radius: $border-radius-extreme; 54 | } 55 | 56 | .select & > li:first-child > a{ 57 | border-radius: 0; 58 | border-bottom: 0 none; 59 | } 60 | 61 | .dropdown-item:hover, 62 | .dropdown-item:focus { 63 | background-color: $smoke-bg; 64 | color: #333333; 65 | opacity: 1; 66 | text-decoration: none; 67 | } 68 | 69 | &.dropdown-blue > li > a:hover, 70 | &.dropdown-blue > li > a:focus{ 71 | background-color: $light-blue; 72 | } 73 | &.dropdown-azure > li > a:hover, 74 | &.dropdown-azure > li > a:focus{ 75 | background-color: $light-azure; 76 | } 77 | &.ct-green > li > a:hover, 78 | &.ct-green > li > a:focus{ 79 | background-color: $light-green; 80 | } 81 | &.dropdown-orange > li > a:hover, 82 | &.dropdown-orange > li > a:focus{ 83 | background-color: $light-orange; 84 | } 85 | &.dropdown-red > li > a:hover, 86 | &.dropdown-red > li > a:focus{ 87 | background-color: $light-red; 88 | } 89 | 90 | .dropdown-item{ 91 | i[class*="nc-icon"]{ 92 | font-size: 18px; 93 | text-align: center; 94 | line-height: 25px; 95 | float: left; 96 | padding-right: 10px; 97 | } 98 | } 99 | 100 | &.dropdown-menu-right{ 101 | &:before, 102 | &:after{ 103 | right: 12px !important; 104 | left: auto !important; 105 | } 106 | } 107 | 108 | } 109 | 110 | .dropdown-with-icons{ 111 | > li > a{ 112 | padding-left: 0px; 113 | line-height: 28px; 114 | } 115 | i{ 116 | text-align: center; 117 | line-height: 28px; 118 | float: left; 119 | 120 | &[class^="pe-"]{ 121 | font-size: 24px; 122 | width: 46px; 123 | } 124 | &[class^="fa"]{ 125 | font-size: 14px; 126 | width: 38px; 127 | } 128 | } 129 | } 130 | 131 | //fix bug for the select items in btn-group 132 | .btn-group.select{ 133 | overflow: hidden; 134 | } 135 | .btn-group.select.show{ 136 | overflow: visible; 137 | } 138 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | background-color: $white-color; 3 | 4 | .footer-menu{ 5 | height: 41px; 6 | } 7 | 8 | nav > ul{ 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | font-weight: normal; 13 | 14 | a:not(.btn){ 15 | color: $dark-gray; 16 | display: block; 17 | margin-bottom: 3px; 18 | &:hover, 19 | &:focus{ 20 | color: $default-states-color; 21 | } 22 | } 23 | } 24 | .social-area{ 25 | padding: 15px 0; 26 | h5{ 27 | padding-bottom: 15px; 28 | } 29 | } 30 | .social-area > a:not(.btn){ 31 | color: $dark-gray; 32 | display: inline-block; 33 | vertical-align: top; 34 | padding: $padding-social-a; 35 | font-size: $font-size-large-navbar; 36 | font-weight: normal; 37 | line-height: $line-height; 38 | text-align: center; 39 | &:hover, 40 | &:focus{ 41 | color: $default-states-color; 42 | } 43 | } 44 | .copyright{ 45 | color: $default-states-color; 46 | padding: 10px 15px; 47 | margin: 10px 3px; 48 | line-height: 20px; 49 | font-size: $font-size-base; 50 | } 51 | hr{ 52 | border-color: $medium-gray; 53 | } 54 | .title{ 55 | color: $default-states-color; 56 | } 57 | } 58 | 59 | .footer-default{ 60 | background-color: $smoke-bg; 61 | } 62 | 63 | .footer:not(.footer-big){ 64 | nav > ul{ 65 | font-size: $font-size-base; 66 | li{ 67 | margin-left: 20px; 68 | float: left; 69 | } 70 | a{ 71 | padding: 10px 0px; 72 | margin: 10px 10px 10px 0px; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control::-moz-placeholder{ 2 | @include placeholder($medium-gray,1); 3 | } 4 | .form-control:-moz-placeholder{ 5 | @include placeholder($medium-gray,1); 6 | } 7 | .form-control::-webkit-input-placeholder{ 8 | @include placeholder($medium-gray,1); 9 | } 10 | .form-control:-ms-input-placeholder{ 11 | @include placeholder($medium-gray,1); 12 | } 13 | 14 | .form-control { 15 | background-color: $white-bg; 16 | border: 1px solid $light-gray; 17 | border-radius: $border-radius-base; 18 | color: #565656; 19 | @include input-size($padding-base-vertical, $padding-base-horizontal - 4, $height-base); 20 | @include box-shadow(none); 21 | 22 | &:focus{ 23 | background-color: $white-bg; 24 | border: 1px solid $medium-dark-gray; 25 | @include box-shadow(none); 26 | outline: 0 !important; 27 | color: #333333; 28 | } 29 | 30 | .has-success &, 31 | .has-error &, 32 | .has-success &:focus, 33 | .has-error &:focus{ 34 | border-color: $light-gray; 35 | @include box-shadow(none); 36 | } 37 | 38 | .has-success &{ 39 | color: $success-color; 40 | } 41 | .has-success &:focus{ 42 | border-color: $success-color; 43 | } 44 | .has-error &{ 45 | color: $danger-color; 46 | } 47 | .has-error &:focus{ 48 | border-color: $danger-color; 49 | } 50 | 51 | & + .form-control-feedback{ 52 | border-radius: $border-radius-large; 53 | font-size: $font-size-base; 54 | margin-top: -7px; 55 | position: absolute; 56 | right: 10px; 57 | top: 50%; 58 | vertical-align: middle; 59 | } 60 | 61 | .open &{ 62 | border-radius: $border-radius-base $border-radius-base 0 0; 63 | border-bottom-color: transparent; 64 | } 65 | } 66 | 67 | .input-lg{ 68 | height: 55px; 69 | padding: $padding-large-vertical $padding-large-horizontal; 70 | } 71 | 72 | .has-error{ 73 | .form-control-feedback{ 74 | color: $danger-color; 75 | } 76 | } 77 | .has-success{ 78 | .form-control-feedback{ 79 | color: $success-color 80 | } 81 | } 82 | 83 | 84 | .input-group-addon { 85 | background-color: $white-color; 86 | border: 1px solid $light-gray; 87 | border-radius: $border-radius-base; 88 | 89 | .has-success &, 90 | .has-error &{ 91 | background-color: $white-color; 92 | border: 1px solid $light-gray; 93 | } 94 | .has-error .form-control:focus + &{ 95 | border-color: $danger-color; 96 | color: $danger-color; 97 | } 98 | .has-success .form-control:focus + &{ 99 | border-color: $success-color; 100 | color: $success-color; 101 | } 102 | .form-control:focus + &, 103 | .form-control:focus ~ &{ 104 | background-color: $white-color; 105 | border-color: $dark-gray; 106 | } 107 | } 108 | 109 | .input-group .form-control:first-child, 110 | .input-group-addon:first-child, 111 | .input-group-btn:first-child > .dropdown-toggle, 112 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 113 | border-right: 0 none; 114 | } 115 | .input-group .form-control:last-child, 116 | .input-group-addon:last-child, 117 | .input-group-btn:last-child > .dropdown-toggle, 118 | .input-group-btn:first-child > .btn:not(:first-child) { 119 | border-left: 0 none; 120 | } 121 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 122 | background-color: $smoke-bg; 123 | color: $default-color; 124 | cursor: not-allowed; 125 | } 126 | 127 | .input-group-btn .btn{ 128 | border-width: $border-thin; 129 | padding: $padding-round-vertical $padding-base-horizontal; 130 | } 131 | .input-group-btn .btn-default:not(.btn-fill){ 132 | border-color: $medium-gray; 133 | } 134 | 135 | .input-group-btn:last-child > .btn{ 136 | margin-left: 0; 137 | } 138 | 139 | .input-group-focus .input-group-addon{ 140 | border-color: $dark-gray; 141 | } 142 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body, 3 | .wrapper{ 4 | min-height: 100vh; 5 | position: relative; 6 | } 7 | a{ 8 | color: $info-color; 9 | 10 | &:hover, &:focus{ 11 | color: $info-states-color; 12 | text-decoration: none; 13 | } 14 | } 15 | 16 | a:focus, a:active, 17 | button::-moz-focus-inner, 18 | input::-moz-focus-inner, 19 | input[type="reset"]::-moz-focus-inner, 20 | input[type="button"]::-moz-focus-inner, 21 | input[type="submit"]::-moz-focus-inner, 22 | select::-moz-focus-inner, 23 | input[type="file"] > input[type="button"]::-moz-focus-inner{ 24 | outline:0; 25 | } 26 | .ui-slider-handle:focus, 27 | .navbar-toggle, 28 | input:focus { 29 | outline : 0 !important; 30 | } 31 | 32 | /* Animations */ 33 | .form-control, 34 | .input-group-addon, 35 | .tagsinput, 36 | .navbar, 37 | .navbar .alert{ 38 | @include transition($general-transition-time, $transition-linear); 39 | } 40 | 41 | .sidebar .nav a, 42 | .table > tbody > tr .td-actions .btn{ 43 | @include transition($fast-transition-time, $transition-ease-in); 44 | } 45 | 46 | .btn{ 47 | @include transition($ultra-fast-transition-time, $transition-ease-in); 48 | } 49 | .fa{ 50 | width: 18px; 51 | text-align: center; 52 | } 53 | .margin-top{ 54 | margin-top: 50px; 55 | } 56 | 57 | .wrapper{ 58 | position: relative; 59 | top: 0; 60 | height: 100vh; 61 | } 62 | 63 | // documentation 64 | 65 | .page-header{ 66 | .page-header-image{ 67 | background-position: center center; 68 | background-size: cover; 69 | overflow: hidden; 70 | width: 100%; 71 | z-index: 1; 72 | } 73 | .title-container{ 74 | color: #fff; 75 | position: relative; 76 | top: 250px; 77 | z-index: 3; 78 | } 79 | .filter:after{ 80 | background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #9368e9 0%, #943bea 100%) repeat scroll 0 0 / 150% 150%; 81 | content: ""; 82 | display: block; 83 | height: 100%; 84 | left: 0; 85 | opacity: 0.77; 86 | position: absolute; 87 | top: 0; 88 | width: 100%; 89 | z-index: 2; 90 | } 91 | } 92 | 93 | .documentation .page-header, 94 | .documentation .page-header-image, 95 | .documentation .page-header-image .filter:after{ 96 | height: 100vh; 97 | } 98 | 99 | .documentation .footer{ 100 | z-index: 3; 101 | } 102 | .documentation .wrapper{ 103 | margin-top: -61px; 104 | height: 100vh; 105 | } 106 | .documentation .navbar{ 107 | z-index: 21; 108 | } 109 | 110 | .card-tasks{ 111 | .card-body{ 112 | .table{ 113 | td{ 114 | font-size: 14px; 115 | 116 | .btn{ 117 | font-size: 14px; 118 | } 119 | .btn-info{ 120 | margin-top: 3px; 121 | padding-right: 0; 122 | } 123 | } 124 | td:last-child{ 125 | padding-right: 0; 126 | } 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | 7 | //Components 8 | 9 | @import "mixins/buttons"; 10 | @import "mixins/inputs"; 11 | @import "mixins/labels"; 12 | @import "mixins/tabs"; 13 | 14 | @import "mixins/navbars"; 15 | @import "mixins/icons"; 16 | @import "mixins/social-buttons"; 17 | 18 | @import "mixins/morphing-buttons"; 19 | 20 | @import "mixins/cards"; 21 | 22 | @import "mixins/chartist"; -------------------------------------------------------------------------------- /src/assets/sass/lbd/_navbars.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | .nav-item{ 3 | .nav-link:hover, 4 | .nav-link:focus{ 5 | background-color: transparent; 6 | } 7 | } 8 | 9 | } 10 | .navbar{ 11 | border: $none; 12 | font-size: $font-size-navbar; 13 | border-radius: 0; 14 | min-height: 50px; 15 | background-color: $white-navbar; 16 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 17 | padding: 5px 15px; 18 | 19 | .navbar-brand { 20 | font-weight: 400; 21 | margin: 5px 0px; 22 | font-size: 20px; 23 | color: $default-color; 24 | 25 | &:hover{ 26 | color: #5e5e5e; 27 | } 28 | } 29 | .navbar-toggler{ 30 | width: 37px; 31 | height: 27px; 32 | vertical-align: middle; 33 | outline: 0; 34 | cursor: pointer; 35 | 36 | &.navbar-toggler-left{ 37 | position: relative; 38 | left: 0; 39 | padding-left: 0; 40 | } 41 | 42 | & .navbar-toggler-bar{ 43 | width: 3px; 44 | height: 3px; 45 | border-radius: 50%; 46 | margin: 0 auto; 47 | } 48 | .burger-lines{ 49 | display: block; 50 | position: relative; 51 | background-color: #888; 52 | width: 24px; 53 | height: 2px; 54 | border-radius: 1px; 55 | margin: 4px auto; 56 | } 57 | } 58 | 59 | .dropdown.nav-item{ 60 | .dropdown-toggle:after{ 61 | margin-top: 8px; 62 | } 63 | } 64 | 65 | .navbar-nav{ 66 | align-items: center; 67 | 68 | .nav-item{ 69 | .nav-link{ 70 | color: $default-color; 71 | padding: $navbar-padding-a; 72 | position: relative; 73 | display: inline-flex; 74 | line-height: 1.2; 75 | 76 | &.btn{ 77 | margin: $navbar-margin-a-btn; 78 | padding: $padding-base-vertical $padding-base-horizontal; 79 | } 80 | 81 | &.btn-round{ 82 | margin: $navbar-margin-a-btn-round; 83 | } 84 | 85 | [class^="fa"]{ 86 | font-size: $font-size-large + 1; 87 | position: relative; 88 | line-height: 40px; 89 | top: 1px; 90 | } 91 | 92 | &:hover{ 93 | color: $info-color; 94 | } 95 | } 96 | 97 | .dropdown-menu{ 98 | border-radius: $border-radius-extreme; 99 | margin-top: -5px; 100 | 101 | .dropdown-item{ 102 | &:first-child{ 103 | border-top-left-radius: 10px; 104 | border-top-right-radius: 10px; 105 | } 106 | &:last-child{ 107 | border-bottom-left-radius: 10px; 108 | border-bottom-right-radius: 10px; 109 | } 110 | } 111 | 112 | .divider{ 113 | height: 1px; 114 | margin: 5px 0; 115 | overflow: hidden; 116 | background-color: #e5e5e5; 117 | } 118 | } 119 | } 120 | 121 | .notification{ 122 | position: absolute; 123 | background-color: #FB404B; 124 | text-align: center; 125 | border-radius: 10px; 126 | min-width: 18px; 127 | padding: 0 5px; 128 | height: 18px; 129 | font-size: 12px; 130 | color: $white-color; 131 | font-weight: bold; 132 | line-height: 18px; 133 | top: 0; 134 | left: 7px; 135 | } 136 | 137 | .dropdown-toggle:after{ 138 | display: inline-block; 139 | width: 0; 140 | height: 0; 141 | margin-left: 5px; 142 | margin-top: 12px; 143 | vertical-align: middle; 144 | border-top: 4px dashed; 145 | border-top: 4px solid\9; 146 | border-right: 4px solid transparent; 147 | border-left: 4px solid transparent; 148 | } 149 | 150 | 151 | } 152 | .btn{ 153 | margin: $navbar-margin-btn; 154 | font-size: $font-size-base; 155 | } 156 | .btn-simple{ 157 | font-size: $font-size-medium; 158 | } 159 | 160 | &.fixed{ 161 | width: calc(100% - #{$sidebar-width}); 162 | right: 0; 163 | left: auto; 164 | border-radius: 0; 165 | } 166 | 167 | .nc-icon{ 168 | font-weight: 700; 169 | } 170 | } 171 | 172 | .navbar-transparent, [class*="navbar-ct"]{ 173 | .navbar-brand{ 174 | color: $white-color; 175 | @include opacity(.9); 176 | 177 | &:focus, 178 | &:hover{ 179 | background-color: transparent; 180 | @include opacity(1); 181 | color: $white-color; 182 | } 183 | } 184 | 185 | .navbar-nav{ 186 | .nav-item{ 187 | .nav-link:not(.btn){ 188 | color: $white-color; 189 | border-color: $white-color; 190 | @include opacity(0.8); 191 | } 192 | } 193 | 194 | .active, 195 | .nav-item{ 196 | .nav-link:not(.btn), 197 | .nav-link:hover:not(.btn), 198 | .nav-link:focus:not(.btn) { 199 | background-color: transparent; 200 | border-radius: 3px; 201 | color: $white-color; 202 | @include opacity(1); 203 | } 204 | } 205 | 206 | .nav .nav-item .nav-link.btn:hover{ 207 | background-color: transparent; 208 | } 209 | 210 | .show{ 211 | .nav-link, 212 | .nav-link:hover, 213 | .nav-link:focus{ 214 | background-color: transparent; 215 | color: $white-color; 216 | @include opacity(1); 217 | } 218 | } 219 | } 220 | 221 | .btn-default{ 222 | color: $white-color; 223 | border-color: $white-color; 224 | } 225 | .btn-default.btn-fill{ 226 | color: $dark-gray; 227 | background-color: $white-color; 228 | @include opacity(.9); 229 | } 230 | .btn-default.btn-fill:hover, 231 | .btn-default.btn-fill:focus, 232 | .btn-default.btn-fill:active, 233 | .btn-default.btn-fill.active, 234 | .show .dropdown-toggle.btn-fill.btn-default{ 235 | border-color: $white-color; 236 | @include opacity(1); 237 | } 238 | 239 | } 240 | .navbar-transparent{ 241 | .dropdown-menu .divider{ 242 | background-color: rgba($white-color,.2); 243 | } 244 | } 245 | 246 | 247 | .navbar-default { 248 | background-color: $white-navbar; 249 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 250 | 251 | .navbar-nav{ 252 | .nav-item{ 253 | .nav-link:not(.btn){ 254 | color: $dark-gray; 255 | } 256 | } 257 | 258 | .active .nav-link, 259 | .active .nav-link:not(.btn):hover, 260 | .active .nav-link:not(.btn):focus, 261 | .nav-item .nav-link:not(.btn):hover, 262 | .nav-item .nav-link:not(.btn):focus{ 263 | background-color: transparent; 264 | border-radius: 3px; 265 | color: $info-color; 266 | @include opacity(1); 267 | } 268 | 269 | .show{ 270 | .nav-link, 271 | .nav-link:hover, 272 | .nav-link:focus{ 273 | background-color: transparent; 274 | color: $info-color; 275 | } 276 | } 277 | 278 | 279 | .navbar-toggle:hover,.navbar-toggle:focus { 280 | background-color: transparent; 281 | } 282 | 283 | } 284 | 285 | &:not(.navbar-transparent) .btn-default:hover{ 286 | color: $info-color; 287 | border-color: $info-color; 288 | } 289 | &:not(.navbar-transparent) .btn-neutral, 290 | &:not(.navbar-transparent) .btn-neutral:hover, 291 | &:not(.navbar-transparent) .btn-neutral:active{ 292 | color: $dark-gray; 293 | } 294 | } 295 | 296 | /* Navbar with icons */ 297 | 298 | .navbar-icons{ 299 | &.navbar .navbar-brand{ 300 | margin-top: 12px; 301 | margin-bottom: 12px; 302 | } 303 | .navbar-nav{ 304 | .nav-item{ 305 | .nav-link{ 306 | text-align: center; 307 | padding: $navbar-padding-a-icons; 308 | margin: $navbar-margin-a-icons; 309 | } 310 | } 311 | 312 | [class^="pe"] { 313 | font-size: 30px; 314 | position: relative; 315 | } 316 | p { 317 | margin: 3px 0 0; 318 | } 319 | } 320 | } 321 | 322 | .navbar-form{ 323 | @include box-shadow(none); 324 | .form-control{ 325 | @include light-form(); 326 | height: 22px; 327 | font-size: $font-size-navbar; 328 | line-height: $line-height-general; 329 | color: $light-gray; 330 | } 331 | .navbar-transparent & .form-control, 332 | [class*="navbar-ct"] & .form-control{ 333 | color: $white-color; 334 | border: $none; 335 | border-bottom: 1px solid rgba($white-color,.6); 336 | } 337 | 338 | } 339 | 340 | .navbar-ct-blue{ 341 | @include navbar-color($blue-navbar); 342 | } 343 | .navbar-ct-azure{ 344 | @include navbar-color($azure-navbar); 345 | } 346 | .navbar-ct-green{ 347 | @include navbar-color($green-navbar); 348 | } 349 | .navbar-ct-orange{ 350 | @include navbar-color($orange-navbar); 351 | } 352 | .navbar-ct-red{ 353 | @include navbar-color($red-navbar); 354 | } 355 | 356 | .navbar-transparent{ 357 | padding-top: 15px; 358 | background-color: transparent; 359 | border-bottom: 1px solid transparent; 360 | } 361 | 362 | .navbar-toggle{ 363 | margin-top: 19px; 364 | margin-bottom: 19px; 365 | border: $none; 366 | 367 | .icon-bar { 368 | background-color: $white-color; 369 | } 370 | .navbar-collapse, 371 | .navbar-form { 372 | border-color: transparent; 373 | } 374 | 375 | &.navbar-default .navbar-toggle:hover, 376 | &.navbar-default .navbar-toggle:focus { 377 | background-color: transparent; 378 | } 379 | } 380 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .radio, 4 | .checkbox{ 5 | position: relative; 6 | height: 20px; 7 | display: block; 8 | width: 20px; 9 | padding: 0px 0px; 10 | margin: 0px 5px; 11 | text-align: center; 12 | 13 | .icons{ 14 | left: 5px; 15 | } 16 | } 17 | > thead > tr > th, 18 | > tbody > tr > th, 19 | > tfoot > tr > th, 20 | > thead > tr > td, 21 | > tbody > tr > td, 22 | > tfoot > tr > td{ 23 | padding: 12px 8px; 24 | vertical-align: middle; 25 | &:last-child { 26 | width: 100%; 27 | } 28 | } 29 | 30 | > thead > tr > th{ 31 | border-bottom-width: 1px; 32 | font-size: $font-size-small; 33 | text-transform: uppercase; 34 | color: $dark-gray; 35 | font-weight: $font-weight-normal; 36 | padding-bottom: 5px; 37 | border-top: none !important; 38 | border-bottom: none; 39 | text-align: left !important; 40 | } 41 | 42 | .td-actions .btn{ 43 | @include opacity(0.36); 44 | 45 | &.btn-xs{ 46 | padding-left: 3px; 47 | padding-right: 3px; 48 | } 49 | } 50 | .td-actions{ 51 | min-width: 90px; 52 | } 53 | 54 | > tbody > tr{ 55 | position: relative; 56 | 57 | &:hover{ 58 | .td-actions .btn{ 59 | @include opacity(1); 60 | } 61 | } 62 | } 63 | 64 | .btn:focus{ 65 | box-shadow: none !important; 66 | } 67 | } 68 | 69 | .table.table-sm { 70 | 71 | > thead > tr > th, 72 | > tbody > tr > th, 73 | > tfoot > tr > th, 74 | > thead > tr > td, 75 | > tbody > tr > td, 76 | > tfoot > tr > td{ 77 | padding: 6px 6px; 78 | } 79 | 80 | > thead > tr > th, 81 | > thead > th { 82 | font-size: $font-size-small; 83 | padding-bottom: 3px; 84 | } 85 | 86 | > tbody > tr > td { 87 | font-size: $font-size-small; 88 | } 89 | } 90 | 91 | .table-upgrade{ 92 | .table{ 93 | tr{ 94 | td{ 95 | width: 100% 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Font Smoothing */ 2 | body, 3 | h1, .h1, 4 | h2, .h2, 5 | h3, .h3, 6 | h4, .h4, 7 | h5, .h5, 8 | h6, .h6, 9 | p, 10 | .navbar, 11 | .brand, 12 | .btn-simple, 13 | .alert, 14 | a, 15 | .td-name, 16 | td, 17 | button.close{ 18 | -moz-osx-font-smoothing: grayscale; 19 | -webkit-font-smoothing: antialiased; 20 | font-family: "Roboto","Helvetica Neue",Arial,sans-serif; 21 | font-weight: $font-weight-normal; 22 | } 23 | 24 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 25 | font-weight: $font-weight-light; 26 | margin: $margin-large-vertical 0 $margin-base-vertical; 27 | } 28 | 29 | h1, .h1 { 30 | font-size: $font-size-h1; 31 | } 32 | h2, .h2{ 33 | font-size: $font-size-h2; 34 | } 35 | h3, .h3{ 36 | font-size: $font-size-h3; 37 | margin: 20px 0 10px; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 30px; 42 | } 43 | h5, .h5 { 44 | font-size: $font-size-h5; 45 | margin-bottom: 15px; 46 | } 47 | h6, .h6{ 48 | font-size: $font-size-h6; 49 | font-weight: $font-weight-bold; 50 | text-transform: uppercase; 51 | } 52 | p{ 53 | font-size: $font-paragraph; 54 | line-height: $line-height-general; 55 | } 56 | 57 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 58 | color: $dark-gray; 59 | font-weight: $font-weight-light; 60 | line-height: $line-height-general; 61 | } 62 | 63 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 64 | font-size: 60%; 65 | } 66 | 67 | h1 .subtitle{ 68 | display: block; 69 | margin: 0 0 $margin-large-vertical; 70 | } 71 | 72 | .text-muted{ 73 | color: #9A9A9A; 74 | } 75 | .text-primary, .text-primary:hover{ 76 | color: #1D62F0 !important; 77 | } 78 | .text-info, .text-info:hover{ 79 | color: $info-color !important; 80 | } 81 | .text-success, .text-success:hover{ 82 | color: $success-color !important; 83 | } 84 | .text-warning, .text-warning:hover{ 85 | color: $warning-color !important; 86 | } 87 | .text-danger, .text-danger:hover{ 88 | color: $danger-color !important; 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Buttons 2 | // 3 | //## For each of Bootstrap's buttons, define text, background and border color. 4 | 5 | $none: 0 !default; 6 | $border-thin: 1px !default; 7 | $border-thick: 2px !default; 8 | 9 | $white-color: #FFFFFF !default; 10 | $white-bg: #FFFFFF !default; 11 | 12 | $smoke-bg: #F5F5F5 !default; 13 | 14 | $black-bg: rgba(30,30,30,.97) !default; 15 | 16 | $black-color: #333333 !default; 17 | $black-hr: #444444 !default; 18 | 19 | $light-gray: #E3E3E3 !default; 20 | $medium-gray: #DDDDDD !default; 21 | $medium-dark-gray: #AAAAAA !default; 22 | $dark-gray: #9A9A9A !default; 23 | 24 | $transparent-bg: transparent !default; 25 | 26 | $default-color: #888888 !default; 27 | $default-bg: #888888 !default; 28 | $default-states-color: #777777 !default; 29 | 30 | $primary-color: #3472F7 !default; 31 | $primary-bg: #3472F7 !default; 32 | $primary-states-color: #1D62F0 !default; 33 | 34 | $success-color: #87CB16 !default; 35 | $success-bg: #87CB16 !default; 36 | $success-states-color: #049F0C !default; 37 | 38 | $info-color: #1DC7EA !default; 39 | $info-bg: #1DC7EA !default; 40 | $info-states-color: lighten($info-color, 8%) !default; 41 | 42 | $warning-color: #FF9500 !default; 43 | $warning-bg: #FF9500 !default; 44 | $warning-states-color: #ED8D00 !default; 45 | 46 | 47 | $danger-color: #FF4A55 !default; 48 | $danger-bg: #FF4A55 !default; 49 | $danger-states-color: #EE2D20 !default; 50 | 51 | 52 | 53 | $link-disabled-color: #666666 !default; 54 | 55 | 56 | /* light colors */ 57 | $light-blue: rgba($primary-color, .2); 58 | $light-azure: rgba($info-color, .2); 59 | $light-green: rgba($success-color, .2); 60 | $light-orange: rgba($warning-color, .2); 61 | $light-red: rgba($danger-color, .2); 62 | 63 | 64 | //== Components 65 | // 66 | 67 | $padding-base-vertical: 8px !default; 68 | $padding-base-horizontal: 16px !default; 69 | 70 | $padding-round-vertical: 9px !default; 71 | $padding-round-horizontal: 18px !default; 72 | 73 | $padding-simple-vertical: 10px !default; 74 | $padding-simple-horizontal: 18px !default; 75 | 76 | $padding-large-vertical: 14px !default; 77 | $padding-large-horizontal: 30px !default; 78 | 79 | $padding-small-vertical: 5px !default; 80 | $padding-small-horizontal: 10px !default; 81 | 82 | $padding-xs-vertical: 1px !default; 83 | $padding-xs-horizontal: 5px !default; 84 | 85 | $padding-label-vertical: 2px !default; 86 | $padding-label-horizontal: 12px !default; 87 | 88 | $margin-large-vertical: 30px !default; 89 | $margin-base-vertical: 15px !default; 90 | 91 | $padding-zero: 0px !default; 92 | 93 | $margin-bottom: 0 0 10px 0 !default; 94 | $border-radius-small: 3px !default; 95 | $border-radius-base: 4px !default; 96 | $border-radius-large: 6px !default; 97 | $border-radius-extreme: 10px !default; 98 | 99 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; 100 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; 101 | 102 | $btn-round-radius: 30px !default; 103 | 104 | $height-base: 40px !default; 105 | 106 | $font-size-base: 14px !default; 107 | $font-size-small: 12px !default; 108 | $font-size-medium: 16px !default; 109 | $font-size-large: 18px !default; 110 | $font-size-large-navbar: 20px !default; 111 | 112 | $font-size-h1: 52px !default; 113 | $font-size-h2: 36px !default; 114 | $font-size-h3: 28px !default; 115 | $font-size-h4: 22px !default; 116 | $font-size-h5: 16px !default; 117 | $font-size-h6: 14px !default; 118 | $font-paragraph: 16px !default; 119 | $font-size-navbar: 16px !default; 120 | $font-size-small: 12px !default; 121 | 122 | $font-weight-light: 300 !default; 123 | $font-weight-normal: 400 !default; 124 | $font-weight-semi: 500 !default; 125 | $font-weight-bold: 600 !default; 126 | 127 | $line-height-general: 1.5 !default; 128 | $line-height: 20px !default; 129 | $line-height-lg: 54px !default; 130 | 131 | $sidebar-width: calc(100% - 260px) !default; 132 | 133 | 134 | $border-radius-top: 10px 10px 0 0 !default; 135 | $border-radius-bottom: 0 0 10px 10px !default; 136 | 137 | $dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); 138 | 139 | $general-transition-time: 300ms !default; 140 | 141 | $slow-transition-time: 370ms !default; 142 | $dropdown-coordinates: 29px -50px !default; 143 | 144 | $fast-transition-time: 150ms !default; 145 | 146 | $ultra-fast-transition-time: 100ms !default; 147 | 148 | $select-coordinates: 50% -40px !default; 149 | 150 | $transition-linear: linear !default; 151 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 152 | $transition-ease: ease 0s; 153 | $transition-ease-in: ease-in !default; 154 | $transition-ease-out: ease-out !default; 155 | 156 | 157 | $navbar-padding-a: 10px 15px; 158 | $navbar-margin-a: 10px 3px; 159 | 160 | $padding-social-a: 10px 5px; 161 | 162 | $navbar-margin-a-btn: 15px 3px; 163 | $navbar-margin-a-btn-round: 16px 3px; 164 | 165 | $navbar-padding-a-icons: 6px 15px; 166 | $navbar-margin-a-icons: 6px 3px; 167 | 168 | $navbar-padding-brand: 15px 15px; 169 | $navbar-margin-brand: 5px 0px; 170 | 171 | $navbar-margin-brand-icons: 12px auto; 172 | 173 | $navbar-margin-btn: 15px 3px; 174 | 175 | $height-icon: 64px !default; 176 | $width-icon: 64px !default; 177 | $padding-icon: 12px !default; 178 | $border-radius-icon: 15px !default; 179 | 180 | $size-icon: 64px; 181 | $size-icon-sm: 32px; 182 | 183 | 184 | $height-icon-sm: 32px; 185 | $width-icon-sm: 32px; 186 | $padding-icon-sm: 4px; 187 | $border-radius-icon-sm: 7px; 188 | 189 | $height-icon-message: 40px; 190 | $width-icon-message: 40px; 191 | 192 | $height-icon-message-sm: 20px; 193 | $width-icon-message-sm: 20px; 194 | 195 | $default-color-top: #d9d9d9 !default; 196 | $default-color-bottom: #909297 !default; 197 | 198 | $blue-color-top: #4087ea; 199 | $blue-color-bottom: #533ce1; 200 | 201 | $azure-color-top: #45c0fd; 202 | $azure-color-bottom: #4091ff; 203 | 204 | $green-color-top: #a1eb3a; 205 | $green-color-bottom: #6dc030; 206 | 207 | $orange-color-top: #ffb33b; 208 | $orange-color-bottom: #ff5221; 209 | 210 | $red-color-top: #ff3b30; 211 | $red-color-bottom: #bb0502; 212 | 213 | $purple-color-top: #df55e1; 214 | $purple-color-bottom: #943bea; 215 | 216 | $pink-color-top: #ff2a63; 217 | $pink-color-bottom: #ff2e2e; 218 | 219 | $black-color-top: #292929; 220 | $black-color-bottom: #0e0e0e; 221 | 222 | $social-facebook: #3b5998; 223 | $social-twitter: #55acee; 224 | $social-pinterest: #cc2127; 225 | $social-google: #dd4b39; 226 | $social-linkedin: #0976b4; 227 | $social-dribbble: #ea4c89; 228 | $social-github: #333333; 229 | $social-youtube: #e52d27; 230 | $social-stumbleupon: #eb4924; 231 | $social-reddit: #ff4500; 232 | $social-tumblr: #35465c; 233 | $social-behance: #1769ff; 234 | 235 | 236 | $filter-blue: darken($primary-color, 10%); 237 | $filter-azure: darken($info-color, 10%); 238 | $filter-green: darken($success-color, 10%); 239 | $filter-orange: darken($warning-color, 10%); 240 | $filter-red: darken($danger-color, 10%); 241 | 242 | 243 | $new-blue: #1DC7EA; 244 | $new-purple: #9368E9; 245 | $new-red: #FB404B; 246 | $new-green: #87CB16; 247 | $new-orange: #FFA534; 248 | $new-dark-blue: #1F77D0; 249 | $new-black: #5e5e5e; 250 | 251 | 252 | $topbar-x: topbar-x !default; 253 | $topbar-back: topbar-back !default; 254 | $bottombar-x: bottombar-x !default; 255 | $bottombar-back: bottombar-back !default; 256 | 257 | 258 | $white-navbar: rgba(#FFFFFF, .96); 259 | $blue-navbar: lighten($new-dark-blue, 10%); 260 | $azure-navbar: lighten($new-blue, 15%); 261 | $green-navbar: lighten($new-green, 10%); 262 | $orange-navbar: lighten($new-orange, 10%); 263 | $red-navbar: lighten($new-red, 10%); 264 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | border-color: $btn-color; 4 | color: $btn-color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $btn-states-color; 13 | border-color: $btn-states-color; 14 | } 15 | 16 | &.disabled, 17 | &:disabled, 18 | &[disabled], 19 | fieldset[disabled] & { 20 | &, 21 | &:hover, 22 | &:focus, 23 | &.focus, 24 | &:active, 25 | &.active { 26 | background-color: $transparent-bg; 27 | border-color: $btn-color; 28 | } 29 | } 30 | 31 | 32 | &.btn-fill { 33 | color: $white-color; 34 | background-color: $btn-color; 35 | @include opacity(1); 36 | 37 | &:hover, 38 | &:focus, 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle{ 42 | background-color: $btn-states-color; 43 | color: $white-color; 44 | } 45 | 46 | .caret{ 47 | border-top-color: $white-color; 48 | } 49 | } 50 | 51 | .caret{ 52 | border-top-color: $btn-color; 53 | } 54 | } 55 | 56 | 57 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 58 | font-size: $font-size; 59 | border-radius: $border; 60 | padding: $padding-vertical $padding-horizontal; 61 | 62 | &.btn-round{ 63 | padding: $padding-vertical + 1 $padding-horizontal; 64 | } 65 | 66 | &.btn-simple{ 67 | padding: $padding-vertical + 2 $padding-horizontal; 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($color){ 2 | @if $color == #FFFFFF{ 3 | background-color: rgba($color,.91); 4 | } @else { 5 | background-color: rgba($color,.69); 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_chartist.scss: -------------------------------------------------------------------------------- 1 | // Scales for responsive SVG containers 2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; 3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; 4 | 5 | // Class names to be used when generating CSS 6 | $ct-class-chart: ct-chart !default; 7 | $ct-class-chart-line: ct-chart-line !default; 8 | $ct-class-chart-bar: ct-chart-bar !default; 9 | $ct-class-horizontal-bars: ct-horizontal-bars !default; 10 | $ct-class-chart-pie: ct-chart-pie !default; 11 | $ct-class-chart-donut: ct-chart-donut !default; 12 | $ct-class-label: ct-label !default; 13 | $ct-class-series: ct-series !default; 14 | $ct-class-line: ct-line !default; 15 | $ct-class-point: ct-point !default; 16 | $ct-class-area: ct-area !default; 17 | $ct-class-bar: ct-bar !default; 18 | $ct-class-slice-pie: ct-slice-pie !default; 19 | $ct-class-slice-donut: ct-slice-donut !default; 20 | $ct-class-grid: ct-grid !default; 21 | $ct-class-vertical: ct-vertical !default; 22 | $ct-class-horizontal: ct-horizontal !default; 23 | $ct-class-start: ct-start !default; 24 | $ct-class-end: ct-end !default; 25 | 26 | // Container ratio 27 | $ct-container-ratio: (1/1.618) !default; 28 | 29 | // Text styles for labels 30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default; 31 | $ct-text-size: 1.3rem !default; 32 | $ct-text-align: flex-start !default; 33 | $ct-text-justify: flex-start !default; 34 | $ct-text-line-height: 1; 35 | 36 | // Grid styles 37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default; 38 | $ct-grid-dasharray: 2px !default; 39 | $ct-grid-width: 1px !default; 40 | 41 | // Line chart properties 42 | $ct-line-width: 3px !default; 43 | $ct-line-dasharray: false !default; 44 | $ct-point-size: 8px !default; 45 | // Line chart point, can be either round or square 46 | $ct-point-shape: round !default; 47 | // Area fill transparency between 0 and 1 48 | $ct-area-opacity: 0.8 !default; 49 | 50 | // Bar chart bar width 51 | $ct-bar-width: 10px !default; 52 | 53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted) 54 | $ct-donut-width: 60px !default; 55 | 56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you 57 | // should set this property to false 58 | $ct-include-classes: true !default; 59 | 60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the 61 | // properties below 62 | $ct-include-colored-series: $ct-include-classes !default; 63 | 64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script 65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default; 66 | 67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors. 68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; 69 | $ct-series-colors: ( 70 | $new-blue, 71 | $new-red, 72 | $new-orange, 73 | $new-purple, 74 | $new-green, 75 | $new-dark-blue, 76 | $new-black, 77 | $social-google, 78 | $social-tumblr, 79 | $social-youtube, 80 | $social-twitter, 81 | $social-pinterest, 82 | $social-behance, 83 | #6188e2, 84 | #a748ca 85 | ) !default; 86 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-background ($icon-url){ 2 | background-image : url($icon-url); 3 | 4 | } 5 | 6 | @mixin icon-shape ($size, $padding, $border-radius) { 7 | height: $size; 8 | width: $size; 9 | padding: $padding; 10 | border-radius: $border-radius; 11 | display: inline-table; 12 | 13 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity){ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form(){ 12 | border-radius: 0; 13 | border:0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_morphing-buttons.scss: -------------------------------------------------------------------------------- 1 | $prefixes: ('', '-moz-', '-webkit-', '-ms-') !default; 2 | 3 | @mixin circle-animation(){ 4 | @for $i from 0 to length($prefixes) { 5 | @include circle-animation-details(nth($prefixes, $i + 1)); 6 | } 7 | } 8 | 9 | @mixin circle-animation-details($name){ 10 | #{$name}animation-name: spin; 11 | #{$name}animation-duration: 1250ms; 12 | #{$name}animation-iteration-count: infinite; 13 | #{$name}animation-timing-function: linear; 14 | 15 | } 16 | @keyframes spin { 17 | from { transform:rotate(0deg); } 18 | to { transform:rotate(360deg); } 19 | } 20 | 21 | @-webkit-keyframes spin { 22 | from { -webkit-transform: rotate(0deg); } 23 | to { -webkit-transform: rotate(360deg); } 24 | } 25 | 26 | @-moz-keyframes spin { 27 | from { -moz-transform: rotate(0deg); } 28 | to { -moz-transform: rotate(360deg); } 29 | } 30 | 31 | @-ms-keyframes spin { 32 | from { -ms-transform: rotate(0deg); } 33 | to { -ms-transform: rotate(360deg); } 34 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin social-buttons-color ($color){ 2 | 3 | border-color: $color; 4 | color: $color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $color; 13 | border-color: $color; 14 | opacity: 1; 15 | } 16 | 17 | &:disabled, 18 | &[disabled], 19 | &.disabled { 20 | background-color: $transparent-bg; 21 | border-color: $color; 22 | } 23 | 24 | &.btn-fill { 25 | color: $white-color; 26 | background-color: $color; 27 | opacity: 0.9; 28 | 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active, 33 | .open > &.dropdown-toggle{ 34 | background-color: $color; 35 | color: $white-color; 36 | opacity: 1; 37 | } 38 | 39 | } 40 | 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /src/assets/sass/lbd/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | 24 | @mixin transition($time, $type){ 25 | -webkit-transition: all $time $type; 26 | -moz-transition: all $time $type; 27 | -o-transition: all $time $type; 28 | -ms-transition: all $time $type; 29 | transition: all $time $type; 30 | } 31 | 32 | @mixin transform-scale($value){ 33 | -webkit-transform: scale($value); 34 | -moz-transform: scale($value); 35 | -o-transform: scale($value); 36 | -ms-transform: scale($value); 37 | transform: scale($value); 38 | } 39 | 40 | @mixin transform-translate-x($value){ 41 | -webkit-transform: translate3d($value, 0, 0); 42 | -moz-transform: translate3d($value, 0, 0); 43 | -o-transform: translate3d($value, 0, 0); 44 | -ms-transform: translate3d($value, 0, 0); 45 | transform: translate3d($value, 0, 0); 46 | } 47 | 48 | @mixin transform-translate-3d($value){ 49 | -webkit-transform: translate3d($value, 0, 0); 50 | -moz-transform: translate3d($value, 0, 0); 51 | -o-transform: translate3d($value, 0, 0); 52 | -ms-transform: translate3d($value, 0, 0); 53 | transform: translate3d($value, 0, 0) !important; 54 | } 55 | 56 | @mixin transform-translate-y-dropdown($value){ 57 | -webkit-transform: translate3d(0, $value, 0) !important; 58 | -moz-transform: translate3d(0, $value, 0) !important; 59 | -o-transform: translate3d(0, $value, 0) !important; 60 | -ms-transform: translate3d(0, $value, 0) !important; 61 | transform: translate3d(0, $value, 0) !important; 62 | } 63 | 64 | @mixin transform-translate-3d-0($value){ 65 | -webkit-transform: translate3d(0, $value, 0) !important; 66 | -moz-transform: translate3d(0, $value, 0) !important; 67 | -o-transform: translate3d(0, $value, 0) !important; 68 | -ms-transform: translate3d(0, $value, 0) !important; 69 | transform: translate3d(0, $value, 0) !important; 70 | } 71 | 72 | @mixin transform-origin($coordinates){ 73 | -webkit-transform-origin: $coordinates; 74 | -moz-transform-origin: $coordinates; 75 | -o-transform-origin: $coordinates; 76 | -ms-transform-origin: $coordinates; 77 | transform-origin: $coordinates; 78 | } 79 | 80 | @mixin icon-gradient ($top-color, $bottom-color){ 81 | background: $top-color; 82 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); 83 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color)); 84 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%); 85 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%); 86 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%); 87 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%); 88 | background-size: 150% 150%; 89 | } 90 | 91 | @mixin radial-gradient($extern-color, $center-color){ 92 | background: $extern-color; 93 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 94 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 95 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 96 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 97 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 98 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 99 | background-size: 550% 450%; 100 | } 101 | 102 | @mixin vertical-align { 103 | position: relative; 104 | top: 50%; 105 | -webkit-transform: translateY(-50%); 106 | -ms-transform: translateY(-50%); 107 | transform: translateY(-50%); 108 | } 109 | 110 | @mixin rotate-180(){ 111 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 112 | -webkit-transform: rotate(180deg); 113 | -ms-transform: rotate(180deg); 114 | transform: rotate(180deg); 115 | } 116 | 117 | @mixin bar-animation($type){ 118 | -webkit-animation: $type 500ms linear 0s; 119 | -moz-animation: $type 500ms linear 0s; 120 | animation: $type 500ms 0s; 121 | -webkit-animation-fill-mode: forwards; 122 | -moz-animation-fill-mode: forwards; 123 | animation-fill-mode: forwards; 124 | } 125 | 126 | @mixin topbar-x-rotation(){ 127 | @keyframes topbar-x { 128 | 0% {top: 0px; transform: rotate(0deg); } 129 | 45% {top: 6px; transform: rotate(145deg); } 130 | 75% {transform: rotate(130deg); } 131 | 100% {transform: rotate(135deg); } 132 | } 133 | @-webkit-keyframes topbar-x { 134 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 135 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 136 | 75% {-webkit-transform: rotate(130deg); } 137 | 100% { -webkit-transform: rotate(135deg); } 138 | } 139 | @-moz-keyframes topbar-x { 140 | 0% {top: 0px; -moz-transform: rotate(0deg); } 141 | 45% {top: 6px; -moz-transform: rotate(145deg); } 142 | 75% {-moz-transform: rotate(130deg); } 143 | 100% { -moz-transform: rotate(135deg); } 144 | } 145 | } 146 | 147 | @mixin topbar-back-rotation(){ 148 | @keyframes topbar-back { 149 | 0% { top: 6px; transform: rotate(135deg); } 150 | 45% { transform: rotate(-10deg); } 151 | 75% { transform: rotate(5deg); } 152 | 100% { top: 0px; transform: rotate(0); } 153 | } 154 | 155 | @-webkit-keyframes topbar-back { 156 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 157 | 45% { -webkit-transform: rotate(-10deg); } 158 | 75% { -webkit-transform: rotate(5deg); } 159 | 100% { top: 0px; -webkit-transform: rotate(0); } 160 | } 161 | 162 | @-moz-keyframes topbar-back { 163 | 0% { top: 6px; -moz-transform: rotate(135deg); } 164 | 45% { -moz-transform: rotate(-10deg); } 165 | 75% { -moz-transform: rotate(5deg); } 166 | 100% { top: 0px; -moz-transform: rotate(0); } 167 | } 168 | } 169 | 170 | @mixin bottombar-x-rotation(){ 171 | @keyframes bottombar-x { 172 | 0% {bottom: 0px; transform: rotate(0deg);} 173 | 45% {bottom: 6px; transform: rotate(-145deg);} 174 | 75% {transform: rotate(-130deg);} 175 | 100% {transform: rotate(-135deg);} 176 | } 177 | @-webkit-keyframes bottombar-x { 178 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 179 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 180 | 75% {-webkit-transform: rotate(-130deg);} 181 | 100% {-webkit-transform: rotate(-135deg);} 182 | } 183 | @-moz-keyframes bottombar-x { 184 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 185 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 186 | 75% {-moz-transform: rotate(-130deg);} 187 | 100% {-moz-transform: rotate(-135deg);} 188 | } 189 | } 190 | 191 | @mixin bottombar-back-rotation{ 192 | @keyframes bottombar-back { 193 | 0% { bottom: 6px;transform: rotate(-135deg);} 194 | 45% { transform: rotate(10deg);} 195 | 75% { transform: rotate(-5deg);} 196 | 100% { bottom: 0px;transform: rotate(0);} 197 | } 198 | @-webkit-keyframes bottombar-back { 199 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 200 | 45% {-webkit-transform: rotate(10deg);} 201 | 75% {-webkit-transform: rotate(-5deg);} 202 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 203 | } 204 | @-moz-keyframes bottombar-back { 205 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 206 | 45% {-moz-transform: rotate(10deg);} 207 | 75% {-moz-transform: rotate(-5deg);} 208 | 100% {bottom: 0px;-moz-transform: rotate(0);} 209 | } 210 | 211 | } 212 | -------------------------------------------------------------------------------- /src/assets/sass/lbd/plugins/_animate.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | @charset "UTF-8"; 34 | 35 | /*! 36 | Animate.css - http://daneden.me/animate 37 | Licensed under the MIT license - http://opensource.org/licenses/MIT 38 | 39 | Copyright (c) 2015 Daniel Eden 40 | */ 41 | 42 | .animated { 43 | -webkit-animation-duration: 1s; 44 | animation-duration: 1s; 45 | -webkit-animation-fill-mode: both; 46 | animation-fill-mode: both; 47 | } 48 | 49 | .animated.infinite { 50 | -webkit-animation-iteration-count: infinite; 51 | animation-iteration-count: infinite; 52 | } 53 | 54 | .animated.hinge { 55 | -webkit-animation-duration: 2s; 56 | animation-duration: 2s; 57 | } 58 | 59 | .animated.bounceIn, 60 | .animated.bounceOut { 61 | -webkit-animation-duration: .75s; 62 | animation-duration: .75s; 63 | } 64 | 65 | .animated.flipOutX, 66 | .animated.flipOutY { 67 | -webkit-animation-duration: .75s; 68 | animation-duration: .75s; 69 | } 70 | 71 | @-webkit-keyframes shake { 72 | from, to { 73 | -webkit-transform: translate3d(0, 0, 0); 74 | transform: translate3d(0, 0, 0); 75 | } 76 | 77 | 10%, 30%, 50%, 70%, 90% { 78 | -webkit-transform: translate3d(-10px, 0, 0); 79 | transform: translate3d(-10px, 0, 0); 80 | } 81 | 82 | 20%, 40%, 60%, 80% { 83 | -webkit-transform: translate3d(10px, 0, 0); 84 | transform: translate3d(10px, 0, 0); 85 | } 86 | } 87 | 88 | @keyframes shake { 89 | from, to { 90 | -webkit-transform: translate3d(0, 0, 0); 91 | transform: translate3d(0, 0, 0); 92 | } 93 | 94 | 10%, 30%, 50%, 70%, 90% { 95 | -webkit-transform: translate3d(-10px, 0, 0); 96 | transform: translate3d(-10px, 0, 0); 97 | } 98 | 99 | 20%, 40%, 60%, 80% { 100 | -webkit-transform: translate3d(10px, 0, 0); 101 | transform: translate3d(10px, 0, 0); 102 | } 103 | } 104 | 105 | .shake { 106 | -webkit-animation-name: shake; 107 | animation-name: shake; 108 | } 109 | 110 | 111 | 112 | @-webkit-keyframes fadeInDown { 113 | from { 114 | opacity: 0; 115 | -webkit-transform: translate3d(0, -100%, 0); 116 | transform: translate3d(0, -100%, 0); 117 | } 118 | 119 | to { 120 | opacity: 1; 121 | -webkit-transform: none; 122 | transform: none; 123 | } 124 | } 125 | 126 | @keyframes fadeInDown { 127 | from { 128 | opacity: 0; 129 | -webkit-transform: translate3d(0, -100%, 0); 130 | transform: translate3d(0, -100%, 0); 131 | } 132 | 133 | to { 134 | opacity: 1; 135 | -webkit-transform: none; 136 | transform: none; 137 | } 138 | } 139 | 140 | .fadeInDown { 141 | -webkit-animation-name: fadeInDown; 142 | animation-name: fadeInDown; 143 | } 144 | 145 | 146 | @-webkit-keyframes fadeOut { 147 | from { 148 | opacity: 1; 149 | } 150 | 151 | to { 152 | opacity: 0; 153 | } 154 | } 155 | 156 | @keyframes fadeOut { 157 | from { 158 | opacity: 1; 159 | } 160 | 161 | to { 162 | opacity: 0; 163 | } 164 | } 165 | 166 | .fadeOut { 167 | -webkit-animation-name: fadeOut; 168 | animation-name: fadeOut; 169 | } 170 | 171 | @-webkit-keyframes fadeOutDown { 172 | from { 173 | opacity: 1; 174 | } 175 | 176 | to { 177 | opacity: 0; 178 | -webkit-transform: translate3d(0, 100%, 0); 179 | transform: translate3d(0, 100%, 0); 180 | } 181 | } 182 | 183 | @keyframes fadeOutDown { 184 | from { 185 | opacity: 1; 186 | } 187 | 188 | to { 189 | opacity: 0; 190 | -webkit-transform: translate3d(0, 100%, 0); 191 | transform: translate3d(0, 100%, 0); 192 | } 193 | } 194 | 195 | .fadeOutDown { 196 | -webkit-animation-name: fadeOutDown; 197 | animation-name: fadeOutDown; 198 | } 199 | 200 | @-webkit-keyframes fadeOutUp { 201 | from { 202 | opacity: 1; 203 | } 204 | 205 | to { 206 | opacity: 0; 207 | -webkit-transform: translate3d(0, -100%, 0); 208 | transform: translate3d(0, -100%, 0); 209 | } 210 | } 211 | 212 | @keyframes fadeOutUp { 213 | from { 214 | opacity: 1; 215 | } 216 | 217 | to { 218 | opacity: 0; 219 | -webkit-transform: translate3d(0, -100%, 0); 220 | transform: translate3d(0, -100%, 0); 221 | } 222 | } 223 | 224 | .fadeOutUp { 225 | -webkit-animation-name: fadeOutUp; 226 | animation-name: fadeOutUp; 227 | } 228 | -------------------------------------------------------------------------------- /src/assets/sass/light-bootstrap-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vue Light Bootstrap Dashboard - v2.1.0 (Bootstrap 4) 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard 8 | * Copyright 2023 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | @import "lbd/variables"; 18 | @import "lbd/mixins"; 19 | 20 | @import "lbd/typography"; 21 | 22 | // Core CSS 23 | @import "lbd/misc"; 24 | @import "lbd/sidebar-and-main-panel"; 25 | @import "lbd/buttons"; 26 | @import "lbd/inputs"; 27 | 28 | @import "lbd/alerts"; 29 | @import "lbd/tables"; 30 | 31 | @import "lbd/checkbox-radio-switch"; 32 | @import "lbd/navbars"; 33 | @import "lbd/footers"; 34 | 35 | // Fancy Stuff 36 | @import "lbd/plugins/animate"; 37 | @import "lbd/dropdown"; 38 | @import "lbd/cards"; 39 | @import "lbd/chartist"; 40 | @import "lbd/responsive"; 41 | @import "lbd/bootstrap-switch"; 42 | 43 | // Nucleo Icons 44 | @import "lbd/partial-nucleo-icons"; 45 | 46 | // Nucleo Icons 47 | @import "lbd/partial-nucleo-icons"; 48 | -------------------------------------------------------------------------------- /src/components/BaseDropdown.vue: -------------------------------------------------------------------------------- 1 | 23 | 51 | 56 | -------------------------------------------------------------------------------- /src/components/Cards/Card.vue: -------------------------------------------------------------------------------- 1 | 21 | 52 | 54 | -------------------------------------------------------------------------------- /src/components/Cards/ChartCard.vue: -------------------------------------------------------------------------------- 1 | 14 | 135 | 138 | -------------------------------------------------------------------------------- /src/components/Cards/StatsCard.vue: -------------------------------------------------------------------------------- 1 | 20 | 30 | 33 | -------------------------------------------------------------------------------- /src/components/Inputs/BaseCheckbox.vue: -------------------------------------------------------------------------------- 1 | 17 | 53 | -------------------------------------------------------------------------------- /src/components/Inputs/BaseInput.vue: -------------------------------------------------------------------------------- 1 | 37 | 95 | 98 | -------------------------------------------------------------------------------- /src/components/Inputs/BaseRadio.vue: -------------------------------------------------------------------------------- 1 | 15 | 50 | -------------------------------------------------------------------------------- /src/components/NotificationPlugin/Notification.vue: -------------------------------------------------------------------------------- 1 | 27 | 152 | 175 | -------------------------------------------------------------------------------- /src/components/NotificationPlugin/Notifications.vue: -------------------------------------------------------------------------------- 1 | 15 | 56 | 82 | -------------------------------------------------------------------------------- /src/components/NotificationPlugin/index.js: -------------------------------------------------------------------------------- 1 | import Notifications from './Notifications.vue'; 2 | 3 | const NotificationStore = { 4 | state: [], // here the notifications will be added 5 | settings: { 6 | overlap: false, 7 | verticalAlign: 'top', 8 | horizontalAlign: 'right', 9 | type: 'info', 10 | timeout: 5000, 11 | closeOnClick: true, 12 | showClose: true 13 | }, 14 | setOptions(options) { 15 | this.settings = Object.assign(this.settings, options); 16 | }, 17 | removeNotification(timestamp) { 18 | const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp); 19 | if (indexToDelete !== -1) { 20 | this.state.splice(indexToDelete, 1); 21 | } 22 | }, 23 | addNotification(notification) { 24 | if (typeof notification === 'string' || notification instanceof String) { 25 | notification = { message: notification }; 26 | } 27 | notification.timestamp = new Date(); 28 | notification.timestamp.setMilliseconds( 29 | notification.timestamp.getMilliseconds() + this.state.length 30 | ); 31 | notification = Object.assign({}, this.settings, notification); 32 | this.state.push(notification); 33 | }, 34 | notify(notification) { 35 | if (Array.isArray(notification)) { 36 | notification.forEach(notificationInstance => { 37 | this.addNotification(notificationInstance); 38 | }); 39 | } else { 40 | this.addNotification(notification); 41 | } 42 | } 43 | }; 44 | 45 | const NotificationsPlugin = { 46 | install(Vue, options) { 47 | let app = new Vue({ 48 | data: { 49 | notificationStore: NotificationStore 50 | }, 51 | methods: { 52 | notify(notification) { 53 | this.notificationStore.notify(notification); 54 | } 55 | } 56 | }); 57 | Vue.prototype.$notify = app.notify; 58 | Vue.prototype.$notifications = app.notificationStore; 59 | Vue.component('Notifications', Notifications); 60 | if (options) { 61 | NotificationStore.setOptions(options); 62 | } 63 | } 64 | }; 65 | 66 | export default NotificationsPlugin; 67 | -------------------------------------------------------------------------------- /src/components/SidebarPlugin/SideBar.vue: -------------------------------------------------------------------------------- 1 | 36 | 92 | 104 | -------------------------------------------------------------------------------- /src/components/SidebarPlugin/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 14 | 47 | 49 | -------------------------------------------------------------------------------- /src/components/SidebarPlugin/index.js: -------------------------------------------------------------------------------- 1 | import Sidebar from './SideBar.vue' 2 | import SidebarLink from './SidebarLink.vue' 3 | 4 | const SidebarStore = { 5 | showSidebar: false, 6 | sidebarLinks: [ 7 | { 8 | name: 'Dashboard', 9 | icon: 'ti-panel', 10 | path: '/admin/overview' 11 | } 12 | ], 13 | displaySidebar (value) { 14 | this.showSidebar = value 15 | } 16 | } 17 | 18 | const SidebarPlugin = { 19 | 20 | install (Vue) { 21 | Vue.mixin({ 22 | data () { 23 | return { 24 | sidebarStore: SidebarStore 25 | } 26 | } 27 | }) 28 | 29 | Object.defineProperty(Vue.prototype, '$sidebar', { 30 | get () { 31 | return this.$root.sidebarStore 32 | } 33 | }) 34 | Vue.component('side-bar', Sidebar) 35 | Vue.component('sidebar-link', SidebarLink) 36 | } 37 | } 38 | 39 | export default SidebarPlugin 40 | -------------------------------------------------------------------------------- /src/components/Table.vue: -------------------------------------------------------------------------------- 1 | 19 | 36 | 38 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import BaseCheckbox from './Inputs/BaseCheckbox.vue' 2 | import Radio from './Inputs/BaseRadio.vue' 3 | import BaseInput from './Inputs/BaseInput.vue' 4 | 5 | import BaseDropdown from './BaseDropdown.vue' 6 | import Table from './Table.vue' 7 | 8 | import Card from './Cards/Card.vue' 9 | import ChartCard from './Cards/ChartCard.vue' 10 | import StatsCard from './Cards/StatsCard.vue' 11 | 12 | import SidebarPlugin from './SidebarPlugin' 13 | 14 | let components = { 15 | BaseCheckbox, 16 | Radio, 17 | BaseInput, 18 | Card, 19 | ChartCard, 20 | StatsCard, 21 | Table, 22 | BaseDropdown, 23 | SidebarPlugin 24 | } 25 | 26 | export default components 27 | -------------------------------------------------------------------------------- /src/directives/click-ouside.js: -------------------------------------------------------------------------------- 1 | export default { 2 | bind: function (el, binding, vnode) { 3 | el.clickOutsideEvent = function (event) { 4 | // here I check that click was outside the el and his childrens 5 | if (!(el == event.target || el.contains(event.target))) { 6 | // and if it did, call method provided in attribute value 7 | vnode.context[binding.expression](event); 8 | } 9 | }; 10 | document.body.addEventListener('click', el.clickOutsideEvent) 11 | }, 12 | unbind: function (el) { 13 | document.body.removeEventListener('click', el.clickOutsideEvent) 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /src/globalComponents.js: -------------------------------------------------------------------------------- 1 | import BaseInput from './components/Inputs/BaseInput.vue' 2 | import BaseCheckbox from './components/Inputs/BaseCheckbox.vue' 3 | import BaseRadio from './components/Inputs/BaseRadio.vue' 4 | import BaseDropdown from './components/BaseDropdown.vue' 5 | import Card from './components/Cards/Card.vue' 6 | 7 | /** 8 | * You can register global components here and use them as a plugin in your main Vue instance 9 | */ 10 | 11 | const GlobalComponents = { 12 | install (Vue) { 13 | Vue.component(BaseInput.name, BaseInput) 14 | Vue.component(BaseCheckbox.name, BaseCheckbox) 15 | Vue.component(BaseRadio.name, BaseRadio) 16 | Vue.component(BaseDropdown.name, BaseDropdown) 17 | Vue.component('card', Card) 18 | } 19 | } 20 | 21 | export default GlobalComponents 22 | -------------------------------------------------------------------------------- /src/globalDirectives.js: -------------------------------------------------------------------------------- 1 | import clickOutside from './directives/click-ouside.js'; 2 | 3 | 4 | /** 5 | * You can register global directives here and use them as a plugin in your main Vue instance 6 | */ 7 | 8 | const GlobalDirectives = { 9 | install (Vue) { 10 | Vue.directive('click-outside', clickOutside); 11 | } 12 | } 13 | 14 | export default GlobalDirectives 15 | -------------------------------------------------------------------------------- /src/layout/Content.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 23 | -------------------------------------------------------------------------------- /src/layout/ContentFooter.vue: -------------------------------------------------------------------------------- 1 | 20 | 24 | 27 | -------------------------------------------------------------------------------- /src/layout/DashboardLayout.vue: -------------------------------------------------------------------------------- 1 | 53 | 56 | 78 | -------------------------------------------------------------------------------- /src/layout/MobileMenu.vue: -------------------------------------------------------------------------------- 1 | 37 | 42 | 44 | -------------------------------------------------------------------------------- /src/layout/TopNavbar.vue: -------------------------------------------------------------------------------- 1 | 67 | 100 | 103 | -------------------------------------------------------------------------------- /src/light-bootstrap-main.js: -------------------------------------------------------------------------------- 1 | import VTooltip from 'v-tooltip' 2 | // Notifications plugin 3 | import Notifications from 'src/components/NotificationPlugin' 4 | // A plugin file where you could register global components used across the app 5 | import GlobalComponents from './globalComponents' 6 | // A plugin file where you could register global directives 7 | import GlobalDirectives from './globalDirectives' 8 | // Sidebar on the right. Used as a local plugin in DashboardLayout.vue 9 | import SideBar from './components/SidebarPlugin' 10 | 11 | // asset imports 12 | import 'bootstrap/dist/css/bootstrap.css' 13 | import './assets/sass/light-bootstrap-dashboard.scss' 14 | import './assets/css/demo.css' 15 | 16 | /** 17 | * This is the main Light Bootstrap Dashboard Vue plugin where dashboard related plugins are registerd. 18 | */ 19 | export default { 20 | install (Vue) { 21 | Vue.use(GlobalComponents) 22 | Vue.use(GlobalDirectives) 23 | Vue.use(SideBar) 24 | Vue.use(Notifications) 25 | Vue.use(VTooltip) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vue Light Bootstrap Dashboard - v2.1.0 (Bootstrap 4) 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard 8 | * Copyright 2023 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | import Vue from "vue"; 17 | import VueRouter from "vue-router"; 18 | import App from "./App.vue"; 19 | 20 | // LightBootstrap plugin 21 | import LightBootstrap from "./light-bootstrap-main"; 22 | 23 | // router setup 24 | import routes from "./routes/routes"; 25 | 26 | import "./registerServiceWorker"; 27 | // plugin setup 28 | Vue.use(VueRouter); 29 | Vue.use(LightBootstrap); 30 | 31 | // configure router 32 | const router = new VueRouter({ 33 | routes, // short for routes: routes 34 | linkActiveClass: "nav-item active", 35 | scrollBehavior: (to) => { 36 | if (to.hash) { 37 | return { selector: to.hash }; 38 | } else { 39 | return { x: 0, y: 0 }; 40 | } 41 | }, 42 | }); 43 | 44 | /* eslint-disable no-new */ 45 | new Vue({ 46 | el: "#app", 47 | render: (h) => h(App), 48 | router, 49 | }); 50 | -------------------------------------------------------------------------------- /src/pages/Maps.vue: -------------------------------------------------------------------------------- 1 | 13 | 73 | 78 | -------------------------------------------------------------------------------- /src/pages/Maps/API_KEY.js: -------------------------------------------------------------------------------- 1 | export const API_KEY = 'YOUR_API_KEY_HERE' 2 | -------------------------------------------------------------------------------- /src/pages/NotFoundPage.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 67 | -------------------------------------------------------------------------------- /src/pages/Notifications.vue: -------------------------------------------------------------------------------- 1 | 98 | 129 | 132 | -------------------------------------------------------------------------------- /src/pages/Overview.vue: -------------------------------------------------------------------------------- 1 | 172 | 271 | 274 | -------------------------------------------------------------------------------- /src/pages/TableList.vue: -------------------------------------------------------------------------------- 1 | 56 | 114 | 116 | -------------------------------------------------------------------------------- /src/pages/Typography.vue: -------------------------------------------------------------------------------- 1 | 86 | 96 | 99 | -------------------------------------------------------------------------------- /src/pages/Upgrade.vue: -------------------------------------------------------------------------------- 1 | 80 | 83 | 91 | -------------------------------------------------------------------------------- /src/pages/UserProfile.vue: -------------------------------------------------------------------------------- 1 | 17 | 29 | 32 | -------------------------------------------------------------------------------- /src/pages/UserProfile/EditProfileForm.vue: -------------------------------------------------------------------------------- 1 | 101 | 132 | 135 | -------------------------------------------------------------------------------- /src/pages/UserProfile/UserCard.vue: -------------------------------------------------------------------------------- 1 | 24 | 63 | 66 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready () { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | registered () { 14 | console.log('Service worker has been registered.') 15 | }, 16 | cached () { 17 | console.log('Content has been cached for offline use.') 18 | }, 19 | updatefound () { 20 | console.log('New content is downloading.') 21 | }, 22 | updated () { 23 | console.log('New content is available; please refresh.') 24 | }, 25 | offline () { 26 | console.log('No internet connection found. App is running in offline mode.') 27 | }, 28 | error (error) { 29 | console.error('Error during service worker registration:', error) 30 | } 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /src/routes/routes.js: -------------------------------------------------------------------------------- 1 | import DashboardLayout from '../layout/DashboardLayout.vue' 2 | // GeneralViews 3 | import NotFound from '../pages/NotFoundPage.vue' 4 | 5 | // Admin pages 6 | import Overview from 'src/pages/Overview.vue' 7 | import UserProfile from 'src/pages/UserProfile.vue' 8 | import TableList from 'src/pages/TableList.vue' 9 | import Typography from 'src/pages/Typography.vue' 10 | import Icons from 'src/pages/Icons.vue' 11 | import Maps from 'src/pages/Maps.vue' 12 | import Notifications from 'src/pages/Notifications.vue' 13 | import Upgrade from 'src/pages/Upgrade.vue' 14 | 15 | const routes = [ 16 | { 17 | path: '/', 18 | component: DashboardLayout, 19 | redirect: '/admin/overview' 20 | }, 21 | { 22 | path: '/admin', 23 | component: DashboardLayout, 24 | redirect: '/admin/overview', 25 | children: [ 26 | { 27 | path: 'overview', 28 | name: 'Overview', 29 | component: Overview 30 | }, 31 | { 32 | path: 'user', 33 | name: 'User', 34 | component: UserProfile 35 | }, 36 | { 37 | path: 'table-list', 38 | name: 'Table List', 39 | component: TableList 40 | }, 41 | { 42 | path: 'typography', 43 | name: 'Typography', 44 | component: Typography 45 | }, 46 | { 47 | path: 'icons', 48 | name: 'Icons', 49 | component: Icons 50 | }, 51 | { 52 | path: 'maps', 53 | name: 'Maps', 54 | component: Maps 55 | }, 56 | { 57 | path: 'notifications', 58 | name: 'Notifications', 59 | component: Notifications 60 | }, 61 | { 62 | path: 'upgrade', 63 | name: 'Upgrade to PRO', 64 | component: Upgrade 65 | } 66 | ] 67 | }, 68 | { path: '*', component: NotFound } 69 | ] 70 | 71 | /** 72 | * Asynchronously load view (Webpack Lazy loading compatible) 73 | * The specified component must be inside the Views folder 74 | * @param {string} name the filename (basename) of the view to load. 75 | function view(name) { 76 | var res= require('../components/Dashboard/Views/' + name + '.vue'); 77 | return res; 78 | };**/ 79 | 80 | export default routes 81 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | function resolveSrc(_path) { 5 | return path.join(__dirname, _path); 6 | } 7 | 8 | module.exports = { 9 | lintOnSave: false, 10 | configureWebpack: { 11 | // Set up all the aliases we use in our app. 12 | resolve: { 13 | alias: { 14 | src: resolveSrc('src'), 15 | 'chart.js': 'chart.js/dist/Chart.js' 16 | } 17 | }, 18 | plugins: [ 19 | new webpack.optimize.LimitChunkCountPlugin({ 20 | maxChunks: 6 21 | }) 22 | ] 23 | }, 24 | pwa: { 25 | name: 'Vue Light Bootstrap Dashboard', 26 | themeColor: '#344675', 27 | msTileColor: '#344675', 28 | appleMobileWebAppCapable: 'yes', 29 | appleMobileWebAppStatusBarStyle: '#344675' 30 | }, 31 | css: { 32 | // Enable CSS source maps. 33 | sourceMap: process.env.NODE_ENV !== 'production' 34 | } 35 | }; 36 | --------------------------------------------------------------------------------