├── .env ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── docs └── documentation.html ├── genezio.yaml ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html └── manifest.json └── src ├── assets ├── css │ ├── paper-dashboard.css │ ├── paper-dashboard.css.map │ └── paper-dashboard.min.css ├── demo │ └── demo.css ├── fonts │ ├── nucleo-icons.eot │ ├── nucleo-icons.ttf │ ├── nucleo-icons.woff │ └── nucleo-icons.woff2 ├── github │ ├── paper-dashboard-react-dashboard-page.png │ ├── paper-dashboard-react-maps-page.png │ ├── paper-dashboard-react-notifications-page.png │ ├── paper-dashboard-react-table-page.png │ ├── paper-dashboard-react-user-page.png │ └── paper-dashboard-react.gif ├── img │ ├── apple-icon.png │ ├── bg5.jpg │ ├── damir-bosnjak.jpg │ ├── default-avatar.png │ ├── faces │ │ ├── ayo-ogunseinde-1.jpg │ │ ├── ayo-ogunseinde-2.jpg │ │ ├── clem-onojeghuo-1.jpg │ │ ├── clem-onojeghuo-2.jpg │ │ ├── clem-onojeghuo-3.jpg │ │ ├── clem-onojeghuo-4.jpg │ │ ├── erik-lucatero-1.jpg │ │ ├── erik-lucatero-2.jpg │ │ ├── joe-gardner-1.jpg │ │ ├── joe-gardner-2.jpg │ │ ├── kaci-baum-1.jpg │ │ └── kaci-baum-2.jpg │ ├── favicon.png │ ├── header.jpg │ ├── jan-sendereks.jpg │ ├── logo-small.png │ └── mike.jpg └── scss │ ├── paper-dashboard.scss │ └── paper-dashboard │ ├── _alerts.scss │ ├── _animated-buttons.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _fixed-plugin.scss │ ├── _footers.scss │ ├── _images.scss │ ├── _inputs.scss │ ├── _misc.scss │ ├── _mixins.scss │ ├── _navbar.scss │ ├── _nucleo-outline.scss │ ├── _page-header.scss │ ├── _responsive.scss │ ├── _sidebar-and-main-panel.scss │ ├── _tables.scss │ ├── _typography.scss │ ├── _variables.scss │ ├── cards │ ├── _card-chart.scss │ ├── _card-map.scss │ ├── _card-plain.scss │ ├── _card-stats.scss │ └── _card-user.scss │ ├── mixins │ ├── _buttons.scss │ ├── _cards.scss │ ├── _dropdown.scss │ ├── _inputs.scss │ ├── _page-header.scss │ ├── _transparency.scss │ └── _vendor-prefixes.scss │ ├── plugins │ ├── _plugin-animate-bootstrap-notify.scss │ └── _plugin-perfect-scrollbar.scss │ └── react │ ├── custom │ ├── _alerts.scss │ ├── _buttons.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _fixed-plugin.scss │ ├── _inputs.scss │ ├── _navbar.scss │ ├── _nucleo-outline.scss │ ├── _responsive.scss │ └── _typography.scss │ └── react-differences.scss ├── components ├── FixedPlugin │ └── FixedPlugin.js ├── Footer │ └── Footer.js ├── Navbars │ └── DemoNavbar.js └── Sidebar │ └── Sidebar.js ├── index.js ├── layouts └── Admin.js ├── logo-white.svg ├── logo.svg ├── routes.js ├── variables ├── charts.js ├── general.js └── icons.js └── views ├── Dashboard.js ├── Icons.js ├── Map.js ├── Notifications.js ├── Tables.js ├── Typography.js ├── Upgrade.js └── User.js /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false -------------------------------------------------------------------------------- /.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 our 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/paper-dashboard-react\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 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | package-lock.json 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.3.2] 2023-05-23 4 | 5 | - Update dependencies 6 | - Fix issues 7 | 8 | ## [1.3.1] 2021-07-14 9 | 10 | - Update the dependencies 11 | - Migration to React 18 12 | - Migration to sass from node-sass 13 | 14 | ## [1.3.0] 2021-05-17 15 | 16 | ### Bug fixing 17 | 18 | - We've change all class components to function ones, so now, Paper Dashboard React accepts hooks 19 | 20 | ### Major style changes 21 | 22 | ### Deleted components 23 | 24 | ### Added components 25 | 26 | - `@babel/core@7.14.2` (to stop warnings) 27 | 28 | ### Deleted dependencies 29 | 30 | - `history` (no longer needed due to the `BrowserRouter`) 31 | - `react-google-maps` (replaced by simple Google Maps API) 32 | - `@types/googlemaps` 33 | - `@types/markerclustererplus` 34 | - `@types/react` 35 | - `ajv` (no longer needed - this was installed so `react-scripts` install would not show errors) 36 | 37 | ### Added dependencies 38 | 39 | ### Updated dependencies 40 | 41 | ``` 42 | bootstrap 4.5.0 → 4.6.0 43 | chart.js 2.9.3 → 3.2.1 44 | node-sass 4.14.1 → 6.0.0 45 | perfect-scrollbar 1.5.0 → 1.5.1 46 | react 16.13.1 → 17.0.2 47 | react-chartjs-2 2.9.0 → 3.0.3 48 | react-dom 16.13.1 → 17.0.2 49 | react-notification-alert 0.0.12 → 0.0.13 50 | react-scripts 3.4.1 → 4.0.3 51 | reactstrap 8.4.1 → 8.9.0 52 | gulp-append-prepend 1.0.8 → 1.0.9 53 | jquery 3.5.1 → 3.6.0 54 | typescript 3.9.5 → 4.2.4 55 | ``` 56 | 57 | ### Warning 58 | 59 | _We will update Bootstrap to v5 when we'll release a new design for the Paper products._ 60 | _You will also have the following message: found 80 vulnerabilities (1 low, 79 moderate). This comes from react-scripts, and will be fixed in the next version. NOTE: the product works as expected with these vulnerabilities._ 61 | 62 | ## [1.2.0] 2020-06-12 63 | 64 | ### Bug fixing 65 | 66 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/15 67 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/13 68 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/12 69 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/9 (could not reproduce the issue, so we've left the perfect-scrollbar initialization as is, if there are layout problems, please delete the bits of code specified here: https://github.com/creativetimofficial/paper-dashboard-react/issues/9#issuecomment-593385860) 70 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/8 71 | - Other Paper React products issues solved here as well 72 | - https://github.com/creativetimofficial/ct-paper-kit-pro-react/issues/2 73 | - https://github.com/creativetimofficial/paper-kit-react/issues/2 74 | - https://github.com/creativetimofficial/ct-paper-dashboard-pro-react/issues/8 75 | - https://github.com/creativetimofficial/ct-paper-dashboard-pro-react/issues/6 - solution to this is to change the usage of the ModalHeader from Reactstrap to simple Bootstrap ones: 76 | So, instead of: 77 | 78 | ``` 79 | 80 | Modal Title 81 | 82 | ``` 83 | 84 | You should use 85 | 86 | ``` 87 |
88 | 91 |
Modal Title
92 |
93 | ``` 94 | 95 | ### Major style changes 96 | 97 | - - There will be additional changes in each `.js` and `.html` files since we've used `prettier` to prettify them 98 | - `src/assets/scss/paper-dashboard/_nucleo-outline.scss` (changed the fonts import to `~assets/fonts` and also added assets path inside `jsconfig.json` file) 99 | - `src/assets/scss/paper-dashboard/react/custom/_nucleo-outline.scss` (changed the fonts import to `~assets/fonts` and also added assets path inside `jsconfig.json` file) 100 | - `src/assets/scss/paper-dashboard/react/custom/_responsive.scss` 101 | - `src/assets/scss/paper-dashboard/react/custom/_inputs.scss` 102 | 103 | ### Deleted components 104 | 105 | ### Added components 106 | 107 | ### Deleted dependencies 108 | 109 | ### Added dependencies 110 | 111 | - gulp@4.0.2 (for Creative Tim copyrights) 112 | - gulp-append-prepend@1.0.8 (for Creative Tim copyrights) 113 | 114 | ### Updated dependencies 115 | 116 | ``` 117 | bootstrap 4.3.1 → 4.5.0 118 | chart.js 2.8.0 → 2.9.3 119 | history 4.9.0 → 4.10.1 120 | node-sass 4.12.0 → 4.14.1 121 | perfect-scrollbar 1.4.0 → 1.5.0 122 | react 16.8.6 → 16.13.1 123 | react-chartjs-2 2.7.6 → 2.9.0 124 | react-dom 16.8.6 → 16.13.1 125 | react-router 5.0.0 → 5.2.0 126 | react-router-dom 5.0.0 → 5.2.0 127 | react-scripts 3.0.1 → 3.4.1 128 | reactstrap 8.0.0 → 8.4.1 129 | @types/googlemaps 3.36.2 → 3.39.6 130 | @types/react 16.8.19 → 16.9.35 131 | ajv 6.10.0 → 6.12.2 132 | jquery 3.4.1 → 3.5.1 133 | typescript 3.4.5 → 3.9.5 134 | ``` 135 | 136 | ### Warning 137 | 138 | _All the following products: Paper Kit React, Paper Dashboard React, Paper Kit PRO React and Paper Dashboard PRO React have been updated together, and thus, we've added to all of them the same version of 1.2.0 - we may have skipped some versions for some of the above products, we've done so, since we want all Paper & React products to share the same versions._ 139 | _While in development some of the plugins that were used for this product will throw some warnings - note, this only happens in development, the UI or the functionality of the product is not affected, also, if the issues will persist in React 17, we'll drop usage of those plugins, and replace them with other ones._ 140 | _Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself._ 141 | 142 | ## [1.1.0] 2019-05-31 143 | 144 | ### Major changes 145 | 146 | - Almost all of the styles inside `src/scss` have been changed 147 | - We've removed `src/routes/*` files and replaced them with just one file (`src/routes.js`) 148 | - We've renamed `src/layouts/Dashboard/Dashboard.jsx` to `src/layouts/Admin.jsx` 149 | - We've dropped the usage of `NODE_PATH=./src` and the file `.env` with the `jsconfig.json` file for using absolute paths 150 | - We've renamed `src/components/Header/Header.jsx` to `src/components/Navbars/DemoNavbar.jsx` 151 | - We've renamed `src/views/Dashboard/Dashboard.jsx` to `src/views/Dashboard.jsx` 152 | - We've renamed `src/views/Icons/Icons.jsx` to `src/views/Icons.jsx` 153 | - We've renamed `src/views/Maps/Maps.jsx` to `src/views/Map.jsx` 154 | - We've renamed `src/views/Notifications/Notifications.jsx` to `src/views/Notifications.jsx` 155 | - We've renamed `src/views/TableList/TableList.jsx` to `src/views/Tables.jsx` 156 | - We've renamed `src/views/Typography/Typography.jsx` to `src/views/Typography.jsx` 157 | - We've renamed `src/views/UserPage/UserPage.jsx` to `src/views/User.jsx` 158 | 159 | ### Dropped components 160 | 161 | - `src/components/CardElements/CardAuthor.jsx` (replaced with simple HTML/React/Reactstrap syntax) 162 | - `src/components/CustomButton/CustomButton.jsx` (replaced with simple HTML/React/Reactstrap syntax) 163 | - `src/components/CustomCheckbox/SimpleCheckbox.jsx` (replaced with simple HTML/React/Reactstrap syntax) 164 | - `src/components/CustomRadio/CustomRadio.jsx` (replaced with simple HTML/React/Reactstrap syntax) 165 | - `src/components/FormInputs/FormInputs.jsx` (replaced with simple HTML/React/Reactstrap syntax) 166 | - `src/components/Stats/Stats.jsx` (replaced with simple HTML/React/Reactstrap syntax) 167 | 168 | ### Added components 169 | 170 | - `src/views/Upgrade.jsx` 171 | 172 | ### Deleted dependencies 173 | 174 | - eslint-config-prettier 175 | - eslint-plugin-prettier 176 | 177 | ### Added dependencies 178 | 179 | - typescript v3.4.5 180 | - react-router v5.0.0 181 | 182 | ### Updated dependencies 183 | 184 | - @types/react 16.4.16 → 16.8.18 185 | - bootstrap 4.1.3 → 4.3.1 186 | - chart.js 2.7.2 → 2.8.0 187 | - history 4.7.2 → 4.9.0 188 | - node-sass 4.9.3 → 4.12.0 189 | - react 16.5.2 → 16.8.6 190 | - react-chartjs-2 2.7.4 → 2.7.6 191 | - react-dom 16.5.2 → 16.8.6 192 | - react-notification-alert 0.0.8 → 0.0.12 193 | - react-router-dom 4.3.1 → 5.0.0 194 | - react-scripts 2.0.4 → 3.0.1 195 | - reactstrap 6.5.0 → 8.0.0 196 | - ajv 6.0.0 → 6.10.0 197 | - jquery 3.3.1 → 3.4.1 198 | - @types/googlemaps 3.30.13 → 3.36.0 199 | 200 | ## [1.0.0] 2018-10-12 201 | 202 | ### Original Release 203 | 204 | - Added Reactstrap as base framework 205 | - Added design from Paper Dashboard 2 by Creative Tim 206 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/documentation.html: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | Components Documentation - Paper Dashboard React by Creative Tim 34 | 35 | 39 | 40 | 44 | 48 | 49 | 53 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 108 | 109 |
110 |
114 |
115 |
116 |
117 |

Paper Dashboard React

118 |

Documentation v1.3.0

119 |
120 | View documentation 125 |
126 |
127 |
128 |
129 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: paper-dashboard-react 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"], 6 | "assets": ["src/assets"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-dashboard-react", 3 | "version": "1.3.2", 4 | "private": true, 5 | "dependencies": { 6 | "ajv": "^8.17.1", 7 | "bootstrap": "4.6.2", 8 | "chart.js": "3.9.1", 9 | "perfect-scrollbar": "1.5.5", 10 | "react": ">=16.8.0", 11 | "react-chartjs-2": "3.3.0", 12 | "react-dom": ">=16.8.0", 13 | "react-notification-alert": "0.0.13", 14 | "react-router-dom": "6.11.1", 15 | "react-scripts": "5.0.1", 16 | "reactstrap": "8.10.0", 17 | "sass": "1.62.1" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 25 | "compile-sass": "node-sass src/assets/scss/paper-dashboard.scss src/assets/css/paper-dashboard.css", 26 | "minify-sass": "node-sass src/assets/scss/paper-dashboard.scss src/assets/css/paper-dashboard.min.css --output-style compressed", 27 | "map-sass": "node-sass src/assets/scss/paper-dashboard.scss src/assets/css/paper-dashboard.css --source-map true" 28 | }, 29 | "eslintConfig": { 30 | "extends": "react-app" 31 | }, 32 | "peerDependencies": { 33 | "react": ">=16.8.0", 34 | "react-dom": ">=16.8.0" 35 | }, 36 | "browserslist": [ 37 | ">0.2%", 38 | "not dead", 39 | "not ie <= 11", 40 | "not op_mini all" 41 | ], 42 | "optionalDependencies": { 43 | "typescript": "5.0.4" 44 | }, 45 | "overrides": { 46 | "svgo": "3.0.2", 47 | "fsevents": "2.3.2", 48 | "chokidar": "3.5.3", 49 | "@babel/core": "7.18.6" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 32 | 33 | 34 | 39 | 48 | 49 | 50 | 54 | 58 | 59 | Paper Dashboard React by Creative Tim 60 | 61 | 62 | 63 |
64 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/demo/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | .tim-row { 20 | margin-bottom: 20px; 21 | } 22 | 23 | .tim-white-buttons { 24 | background-color: #777777; 25 | } 26 | 27 | .typography-line { 28 | padding-left: 25%; 29 | margin-bottom: 35px; 30 | position: relative; 31 | display: block; 32 | width: 100%; 33 | } 34 | 35 | .typography-line span { 36 | bottom: 10px; 37 | color: #c0c1c2; 38 | display: block; 39 | font-weight: 400; 40 | font-size: 13px; 41 | line-height: 13px; 42 | left: 0; 43 | position: absolute; 44 | width: 260px; 45 | text-transform: none; 46 | } 47 | 48 | .tim-row { 49 | padding-top: 60px; 50 | } 51 | 52 | .tim-row h3 { 53 | margin-top: 0; 54 | } 55 | 56 | .offline-doc .page-header { 57 | display: flex; 58 | align-items: center; 59 | } 60 | 61 | .offline-doc .footer { 62 | position: absolute; 63 | width: 100%; 64 | background: transparent; 65 | bottom: 0; 66 | color: #fff; 67 | z-index: 1; 68 | } 69 | 70 | @media all and (min-width: 992px) { 71 | .sidebar .nav > li.active-pro { 72 | position: absolute; 73 | width: 100%; 74 | bottom: 10px; 75 | } 76 | } 77 | 78 | .card.card-upgrade .card-category { 79 | max-width: 530px; 80 | margin: 0 auto; 81 | } 82 | 83 | /* Nucleo Style */ 84 | 85 | .demo-iconshtml { 86 | font-size: 62.5%; 87 | } 88 | 89 | .demo-icons body { 90 | font-size: 1.6rem; 91 | font-family: sans-serif; 92 | color: #333333; 93 | background: white; 94 | } 95 | 96 | .demo-icons a { 97 | color: #608cee; 98 | text-decoration: none; 99 | } 100 | 101 | .demo-icons header { 102 | text-align: center; 103 | padding: 100px 0 0; 104 | } 105 | 106 | .demo-icons header h1 { 107 | font-size: 2.8rem; 108 | } 109 | 110 | .demo-icons header p { 111 | font-size: 1.4rem; 112 | margin-top: 1em; 113 | } 114 | 115 | .demo-icons header a:hover { 116 | text-decoration: underline; 117 | } 118 | 119 | .demo-icons .nc-icon { 120 | font-size: 34px; 121 | } 122 | 123 | .demo-icons section h2 { 124 | border-bottom: 1px solid #e2e2e2; 125 | padding: 0 0 1em 0.2em; 126 | margin-bottom: 1em; 127 | } 128 | 129 | .demo-icons ul { 130 | padding-left: 0; 131 | } 132 | 133 | .demo-icons ul::after { 134 | clear: both; 135 | content: ""; 136 | display: table; 137 | } 138 | 139 | .demo-icons ul li { 140 | width: 20%; 141 | float: left; 142 | padding: 16px 0; 143 | text-align: center; 144 | border-radius: 0.25em; 145 | -webkit-transition: background 0.2s; 146 | -moz-transition: background 0.2s; 147 | transition: background 0.2s; 148 | -webkit-user-select: none; 149 | -moz-user-select: none; 150 | -ms-user-select: none; 151 | user-select: none; 152 | overflow: hidden; 153 | } 154 | 155 | .demo-icons ul li:hover { 156 | background: #f4f4f4; 157 | } 158 | 159 | .demo-icons ul p, 160 | .demo-icons ul em, 161 | .demo-icons ul input { 162 | display: inline-block; 163 | font-size: 1rem; 164 | color: #999999; 165 | -webkit-user-select: auto; 166 | -moz-user-select: auto; 167 | -ms-user-select: auto; 168 | user-select: auto; 169 | white-space: nowrap; 170 | width: 100%; 171 | overflow: hidden; 172 | text-overflow: ellipsis; 173 | cursor: pointer; 174 | } 175 | 176 | .demo-icons ul p { 177 | padding: 20px 0 0; 178 | font-size: 12px; 179 | margin: 0; 180 | } 181 | 182 | .demo-icons ul p::selection, 183 | .demo-icons ul em::selection { 184 | background: #608cee; 185 | color: #efefef; 186 | } 187 | 188 | .demo-icons ul em { 189 | font-size: 12px; 190 | } 191 | 192 | .demo-icons ul em::before { 193 | content: "["; 194 | } 195 | 196 | .demo-icons ul em::after { 197 | content: "]"; 198 | } 199 | 200 | .demo-icons ul input { 201 | text-align: center; 202 | background: transparent; 203 | border: none; 204 | box-shadow: none; 205 | outline: none; 206 | display: none; 207 | } 208 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/fonts/nucleo-icons.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/fonts/nucleo-icons.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/fonts/nucleo-icons.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/fonts/nucleo-icons.woff2 -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react-dashboard-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react-dashboard-page.png -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react-maps-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react-maps-page.png -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react-notifications-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react-notifications-page.png -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react-table-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react-table-page.png -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react-user-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react-user-page.png -------------------------------------------------------------------------------- /src/assets/github/paper-dashboard-react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/github/paper-dashboard-react.gif -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/bg5.jpg -------------------------------------------------------------------------------- /src/assets/img/damir-bosnjak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/damir-bosnjak.jpg -------------------------------------------------------------------------------- /src/assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/default-avatar.png -------------------------------------------------------------------------------- /src/assets/img/faces/ayo-ogunseinde-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/ayo-ogunseinde-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/ayo-ogunseinde-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/ayo-ogunseinde-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/clem-onojeghuo-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/clem-onojeghuo-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/clem-onojeghuo-3.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/clem-onojeghuo-4.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/erik-lucatero-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/erik-lucatero-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/erik-lucatero-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/erik-lucatero-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/joe-gardner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/joe-gardner-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/joe-gardner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/joe-gardner-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/kaci-baum-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/kaci-baum-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/kaci-baum-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/faces/kaci-baum-2.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/header.jpg -------------------------------------------------------------------------------- /src/assets/img/jan-sendereks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/jan-sendereks.jpg -------------------------------------------------------------------------------- /src/assets/img/logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/logo-small.png -------------------------------------------------------------------------------- /src/assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-dashboard-react/c2ecf79745fde8ad3270482d371ea12106c0832a/src/assets/img/mike.jpg -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.0 based on Paper Dashboard 2 - v2.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-2 8 | * Copyright 2021 Creative Tim (http://www.creative-tim.com) 9 | 10 | * Designed by www.invisionapp.com Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | 16 | */ 17 | 18 | @import 'paper-dashboard/variables'; 19 | @import 'paper-dashboard/mixins'; 20 | 21 | // Plugins CSS 22 | @import "paper-dashboard/plugins/plugin-animate-bootstrap-notify"; 23 | @import "paper-dashboard/plugins/plugin-perfect-scrollbar"; 24 | 25 | // Core CSS 26 | @import "paper-dashboard/buttons"; 27 | @import "paper-dashboard/inputs"; 28 | @import "paper-dashboard/typography"; 29 | @import "paper-dashboard/misc"; 30 | @import "paper-dashboard/checkboxes-radio"; 31 | 32 | 33 | // components 34 | @import "paper-dashboard/navbar"; 35 | @import "paper-dashboard/page-header"; 36 | @import "paper-dashboard/dropdown"; 37 | @import "paper-dashboard/alerts"; 38 | @import "paper-dashboard/images"; 39 | @import "paper-dashboard/nucleo-outline"; 40 | @import "paper-dashboard/tables"; 41 | @import "paper-dashboard/sidebar-and-main-panel"; 42 | @import "paper-dashboard/footers"; 43 | @import "paper-dashboard/fixed-plugin"; 44 | 45 | // cards 46 | @import "paper-dashboard/cards"; 47 | @import "paper-dashboard/cards/card-plain"; 48 | @import "paper-dashboard/cards/card-chart"; 49 | @import "paper-dashboard/cards/card-user"; 50 | @import "paper-dashboard/cards/card-map"; 51 | @import "paper-dashboard/cards/card-stats"; 52 | 53 | @import "paper-dashboard/responsive"; 54 | 55 | // html to react differences 56 | @import "paper-dashboard/react/react-differences.scss"; 57 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: $border-radius-small; 4 | color: $white-color; 5 | padding-top: .9rem; 6 | padding-bottom: .9rem; 7 | position: relative; 8 | 9 | &.alert-success{ 10 | background-color: lighten($success-color, 5%); 11 | } 12 | 13 | &.alert-danger{ 14 | background-color: lighten($danger-color, 5%); 15 | } 16 | 17 | &.alert-warning{ 18 | background-color: lighten($warning-color, 5%); 19 | } 20 | 21 | &.alert-info{ 22 | background-color: lighten($info-color, 5%); 23 | } 24 | 25 | &.alert-primary{ 26 | background-color: lighten($primary-color, 5%); 27 | } 28 | 29 | .close{ 30 | color: $white-color; 31 | opacity: .9; 32 | text-shadow: none; 33 | line-height: 0; 34 | outline: 0; 35 | 36 | i.fa, 37 | i.nc-icon{ 38 | font-size: 14px !important; 39 | } 40 | 41 | &:hover, 42 | &:focus { 43 | opacity: 1; 44 | } 45 | } 46 | 47 | span[data-notify="icon"]{ 48 | font-size: 27px; 49 | display: block; 50 | left: 19px; 51 | position: absolute; 52 | top: 50%; 53 | margin-top: -11px; 54 | } 55 | 56 | button.close{ 57 | position: absolute; 58 | right: 10px; 59 | top: 50%; 60 | margin-top: -13px; 61 | width: 25px; 62 | height: 25px; 63 | padding: 3px; 64 | } 65 | 66 | .close ~ span{ 67 | display: block; 68 | max-width: 89%; 69 | } 70 | 71 | &.alert-with-icon{ 72 | padding-left: 65px; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_animated-buttons.scss: -------------------------------------------------------------------------------- 1 | //animations 2 | 3 | .icon-property{ 4 | @include transition($slow-transition-time, $transition-bezier); 5 | position: relative; 6 | display: inline-block; 7 | } 8 | 9 | #animated-buttons{ 10 | .btn{ 11 | i{ 12 | position: relative; 13 | top: 3px; 14 | margin-top: -3px; 15 | } 16 | } 17 | } 18 | 19 | .btn-rotate{ 20 | i{ 21 | @extend .icon-property; 22 | } 23 | 24 | &:hover, 25 | &:focus{ 26 | i{ 27 | @include rotate-53(); 28 | } 29 | } 30 | } 31 | 32 | .btn-magnify{ 33 | i{ 34 | @extend .icon-property; 35 | } 36 | 37 | &:hover, 38 | &:focus{ 39 | i{ 40 | @include transform-scale(1.22); 41 | } 42 | } 43 | } 44 | 45 | .btn-move-left{ 46 | i{ 47 | @extend .icon-property; 48 | margin-right: 0; 49 | } 50 | 51 | &:hover, 52 | &:focus{ 53 | i{ 54 | @include transform-translate-x(-5px); 55 | } 56 | } 57 | } 58 | 59 | .btn-move-right{ 60 | i{ 61 | @extend .icon-property; 62 | margin-right: 0; 63 | } 64 | 65 | &:hover, 66 | &:focus{ 67 | i{ 68 | @include transform-translate-x(5px); 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > a.btn{ 3 | border-width: $border-thick; 4 | font-weight: $font-weight-semi; 5 | font-size: $font-size-small; 6 | line-height: $line-height; 7 | text-transform: uppercase; 8 | border: none; 9 | margin: 10px 1px; 10 | border-radius: $border-radius-small; 11 | padding: $padding-btn-vertical $padding-btn-horizontal; 12 | cursor: pointer; 13 | 14 | @include btn-styles($default-color, $default-states-color); 15 | @include transition($fast-transition-time, linear); 16 | 17 | &:hover, 18 | &:focus{ 19 | @include opacity(1); 20 | outline: 0 !important; 21 | } 22 | &:active, 23 | &.active, 24 | .open > &.dropdown-toggle { 25 | @include box-shadow(none); 26 | outline: 0 !important; 27 | } 28 | 29 | .badge{ 30 | margin: 0; 31 | } 32 | 33 | &.btn-icon { 34 | // see above for color variations 35 | height: $btn-icon-size-regular; 36 | min-width: $btn-icon-size-regular; 37 | width: $btn-icon-size-regular; 38 | padding: 0; 39 | font-size: $btn-icon-font-size-regular; 40 | overflow: hidden; 41 | position: relative; 42 | line-height: normal; 43 | 44 | &.btn-simple{ 45 | padding: 0; 46 | } 47 | 48 | &.btn-sm{ 49 | height: $btn-icon-size-small; 50 | min-width: $btn-icon-size-small; 51 | width: $btn-icon-size-small; 52 | 53 | .fa, 54 | .far, 55 | .fas, 56 | .nc-icon{ 57 | font-size: $btn-icon-font-size-small; 58 | } 59 | } 60 | 61 | &.btn-lg{ 62 | height: $btn-icon-size-lg; 63 | min-width: $btn-icon-size-lg; 64 | width: $btn-icon-size-lg; 65 | 66 | .fa, 67 | .far, 68 | .fas, 69 | .nc-icon{ 70 | font-size: $btn-icon-font-size-lg; 71 | } 72 | } 73 | 74 | &:not(.btn-footer) .nc-icon, 75 | &:not(.btn-footer) .fa, 76 | &:not(.btn-footer) .far, 77 | &:not(.btn-footer) .fas{ 78 | position: absolute; 79 | top: 50%; 80 | left: 50%; 81 | transform: translate(-12px, -12px); 82 | line-height: 1.5626rem; 83 | width: 24px; 84 | } 85 | 86 | &.btn-neutral { 87 | font-size: 20px; 88 | } 89 | } 90 | 91 | &:not(.btn-icon) .nc-icon{ 92 | position: relative; 93 | top: 1px; 94 | } 95 | } 96 | 97 | // Apply the mixin to the buttons 98 | // .btn-default { @include btn-styles($default-color, $default-states-color); } 99 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 100 | .btn-success { @include btn-styles($success-color, $success-states-color); } 101 | .btn-info { @include btn-styles($info-color, $info-states-color); } 102 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 103 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 104 | // .btn-neutral { @include btn-styles($white-color, $white-color); } 105 | 106 | .btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); } 107 | .btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); } 108 | .btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); } 109 | .btn-outline-info { @include btn-outline-styles($info-color, $info-states-color); } 110 | .btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); } 111 | .btn-outline-danger { @include btn-outline-styles($danger-color, $danger-states-color); } 112 | .btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color); 113 | &:hover, 114 | &:focus{ 115 | color: $default-states-color; 116 | background-color: $white-color; 117 | } 118 | } 119 | .btn-neutral { 120 | @include btn-styles($white-color, $white-color); 121 | color: $default-color; 122 | &:hover, 123 | &:focus{ 124 | color: $default-states-color; 125 | } 126 | 127 | &.btn-border{ 128 | &:hover, 129 | &:focus{ 130 | color: $default-color; 131 | } 132 | 133 | &:active, 134 | &.active, 135 | .open > &.dropdown-toggle{ 136 | background-color: $white-color; 137 | color: $default-color; 138 | } 139 | } 140 | 141 | &.btn-link:active, 142 | &.btn-link.active{ 143 | background-color: transparent; 144 | } 145 | } 146 | 147 | .btn{ 148 | &:disabled, 149 | &[disabled], 150 | &.disabled{ 151 | @include opacity(.5); 152 | pointer-events: none; 153 | } 154 | } 155 | .btn-simple{ 156 | border: $border; 157 | border-color: $default-color; 158 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 159 | background-color: $transparent-bg; 160 | } 161 | 162 | .btn-simple, 163 | .btn-link{ 164 | &.disabled, 165 | &:disabled, 166 | &[disabled], 167 | fieldset[disabled] & { 168 | &, 169 | &:hover, 170 | &:focus, 171 | &.focus, 172 | &:active, 173 | &.active { 174 | background-color: $transparent-bg; 175 | } 176 | } 177 | } 178 | 179 | .btn-link{ 180 | border: $none; 181 | padding: $padding-base-vertical $padding-base-horizontal; 182 | background-color: $transparent-bg; 183 | } 184 | 185 | .btn-lg{ 186 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 187 | } 188 | .btn-sm{ 189 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 190 | } 191 | 192 | .btn-wd { 193 | min-width: 140px; 194 | } 195 | .btn-group.select{ 196 | width: 100%; 197 | } 198 | .btn-group.select .btn{ 199 | text-align: left; 200 | } 201 | .btn-group.select .caret{ 202 | position: absolute; 203 | top: 50%; 204 | margin-top: -1px; 205 | right: 8px; 206 | } 207 | .btn-group { 208 | .btn + .btn { 209 | margin-left: -3px; 210 | } 211 | .btn { 212 | &:focus { 213 | background-color: $info-color !important; 214 | } 215 | } 216 | } 217 | 218 | 219 | .btn-round{ 220 | border-width: $border-thin; 221 | border-radius: $btn-round-radius; 222 | padding-right: $padding-round-horizontal; 223 | padding-left: $padding-round-horizontal; 224 | 225 | &.btn-simple{ 226 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 227 | } 228 | } 229 | 230 | .no-caret { 231 | &.dropdown-toggle::after { 232 | display: none; 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border-radius: $border-radius-extreme; 3 | box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15); 4 | background-color: #FFFFFF; 5 | color: $card-black-color; 6 | margin-bottom: 20px; 7 | position: relative; 8 | border: 0 none; 9 | 10 | -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; 11 | -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; 12 | -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; 13 | -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; 14 | transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; 15 | 16 | .card-body{ 17 | padding: 15px 15px 10px 15px; 18 | 19 | &.table-full-width{ 20 | padding-left: 0; 21 | padding-right: 0; 22 | } 23 | } 24 | 25 | .card-header{ 26 | &:not([data-background-color]){ 27 | background-color: transparent; 28 | } 29 | padding: 15px 15px 0; 30 | border: 0; 31 | 32 | .card-title{ 33 | margin-top: 10px; 34 | } 35 | } 36 | 37 | .map{ 38 | border-radius: $border-radius-small; 39 | 40 | &.map-big{ 41 | height: 400px; 42 | } 43 | } 44 | 45 | &[data-background-color="orange"]{ 46 | background-color: $primary-color; 47 | 48 | .card-header{ 49 | background-color: $primary-color; 50 | } 51 | 52 | .card-footer{ 53 | .stats{ 54 | color: $white-color; 55 | } 56 | } 57 | } 58 | 59 | &[data-background-color="red"]{ 60 | background-color: $danger-color; 61 | } 62 | 63 | &[data-background-color="yellow"]{ 64 | background-color: $warning-color; 65 | } 66 | 67 | &[data-background-color="blue"]{ 68 | background-color: $info-color; 69 | } 70 | 71 | &[data-background-color="green"]{ 72 | background-color: $success-color; 73 | } 74 | 75 | .image{ 76 | overflow: hidden; 77 | height: 200px; 78 | position: relative; 79 | } 80 | 81 | .avatar{ 82 | width: 30px; 83 | height: 30px; 84 | overflow: hidden; 85 | border-radius: 50%; 86 | margin-bottom: 15px; 87 | } 88 | 89 | .numbers { 90 | font-size: 2em; 91 | } 92 | 93 | .big-title { 94 | font-size: 12px; 95 | text-align: center; 96 | font-weight: 500; 97 | padding-bottom: 15px; 98 | } 99 | 100 | label{ 101 | font-size: $font-size-small; 102 | margin-bottom: 5px; 103 | color: $dark-gray; 104 | } 105 | 106 | .card-footer{ 107 | background-color: transparent; 108 | border: 0; 109 | 110 | 111 | .stats{ 112 | i{ 113 | margin-right: 5px; 114 | position: relative; 115 | top: 0px; 116 | color: $default-color; 117 | } 118 | } 119 | 120 | .btn{ 121 | margin: 0; 122 | } 123 | } 124 | 125 | &.card-plain{ 126 | background-color: transparent; 127 | box-shadow: none; 128 | border-radius: 0; 129 | 130 | 131 | .card-body{ 132 | padding-left: 5px; 133 | padding-right: 5px; 134 | } 135 | 136 | img{ 137 | border-radius: $border-radius-extreme; 138 | } 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .from-check, 2 | .form-check-radio { 3 | margin-bottom: 12px; 4 | position: relative; 5 | } 6 | 7 | .form-check { 8 | padding-left: 0; 9 | margin-bottom: .5rem; 10 | 11 | .form-check-label{ 12 | display: inline-block; 13 | position: relative; 14 | cursor: pointer; 15 | padding-left: 35px; 16 | line-height: 26px; 17 | margin-bottom: 0; 18 | } 19 | 20 | .form-check-sign::before, 21 | .form-check-sign::after { 22 | content: " "; 23 | display: inline-block; 24 | position: absolute; 25 | width: 24px; 26 | height: 24px; 27 | left: 0; 28 | cursor: pointer; 29 | border-radius: 6px; 30 | top: 0; 31 | background-color: #AAA7A4; 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: "\f00c"; 41 | top: -1px; 42 | text-align: center; 43 | font-size: 15px; 44 | opacity: 0; 45 | color: #FFF; 46 | border: 0; 47 | background-color: inherit; 48 | } 49 | &.disabled{ 50 | .form-check-label{ 51 | color: $dark-gray; 52 | opacity: .5; 53 | cursor: not-allowed; 54 | } 55 | } 56 | 57 | } 58 | 59 | .form-check.disabled .form-check-label, 60 | .form-check.disabled .form-check-label { 61 | 62 | } 63 | 64 | .form-check input[type="checkbox"], 65 | .form-check-radio input[type="radio"]{ 66 | opacity: 0; 67 | position: absolute; 68 | visibility: hidden; 69 | } 70 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 71 | opacity: 1; 72 | } 73 | 74 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 75 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 76 | cursor: not-allowed; 77 | } 78 | 79 | .form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign, 80 | .form-check-radio input[type="radio"]:disabled + .form-check-sign{ 81 | pointer-events: none !important; 82 | } 83 | 84 | .form-check-radio{ 85 | margin-left: -3px; 86 | 87 | .form-check-label{ 88 | padding-left: 2rem; 89 | } 90 | &.disabled{ 91 | .form-check-label{ 92 | color: $dark-gray; 93 | opacity: .5; 94 | cursor: not-allowed; 95 | } 96 | } 97 | } 98 | 99 | .form-check-radio .form-check-sign::before{ 100 | font-family: 'FontAwesome'; 101 | content: "\f10c"; 102 | font-size: 22px; 103 | -webkit-font-smoothing: antialiased; 104 | -moz-osx-font-smoothing: grayscale; 105 | display: inline-block; 106 | position: absolute; 107 | opacity: .50; 108 | left: 5px; 109 | top: -5px; 110 | } 111 | 112 | .form-check-label input[type="checkbox"]:checked + .form-check-sign:before{ 113 | background-color: #66615B; 114 | } 115 | 116 | .form-check-radio input[type="radio"] + .form-check-sign:after, 117 | .form-check-radio input[type="radio"] { 118 | opacity: 0; 119 | @include 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/scss/paper-dashboard/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | .fixed-plugin{ 2 | position: fixed; 3 | right: 0; 4 | width: 64px; 5 | background: rgba(0,0,0,.3); 6 | z-index: 1031; 7 | border-radius: 8px 0 0 8px; 8 | text-align: center; 9 | top: 120px; 10 | 11 | li > a, 12 | .badge{ 13 | transition: all .34s; 14 | -webkit-transition: all .34s; 15 | -moz-transition: all .34s; 16 | } 17 | 18 | .fa-cog{ 19 | color: #FFFFFF; 20 | padding: 10px; 21 | border-radius: 0 0 6px 6px; 22 | width: auto; 23 | } 24 | 25 | .dropdown-menu{ 26 | right: 80px; 27 | left: auto !important; 28 | top: -52px !important; 29 | width: 290px; 30 | border-radius: 10px; 31 | padding: 0 10px; 32 | } 33 | 34 | .dropdown .dropdown-menu .nc-icon{ 35 | top: 2px; 36 | right: 10px; 37 | font-size: 14px; 38 | } 39 | 40 | .dropdown-menu:after, 41 | .dropdown-menu:before{ 42 | right: 10px; 43 | margin-left: auto; 44 | left: auto; 45 | } 46 | 47 | .fa-circle-thin{ 48 | color: #FFFFFF; 49 | } 50 | 51 | .active .fa-circle-thin{ 52 | color: #00bbff; 53 | } 54 | 55 | .dropdown-menu > .active > a, 56 | .dropdown-menu > .active > a:hover, 57 | .dropdown-menu > .active > a:focus{ 58 | color: #777777; 59 | text-align: center; 60 | } 61 | 62 | img{ 63 | border-radius: 0; 64 | width: 100%; 65 | height: 100px; 66 | margin: 0 auto; 67 | } 68 | 69 | .dropdown-menu li > a:hover, 70 | .dropdown-menu li > a:focus{ 71 | box-shadow: none; 72 | } 73 | 74 | .badge{ 75 | border: 3px solid #FFFFFF; 76 | border-radius: 50%; 77 | cursor: pointer; 78 | display: inline-block; 79 | height: 23px; 80 | margin-right: 5px; 81 | position: relative; 82 | width: 23px; 83 | 84 | &.badge-light { 85 | border: 1px solid $light-gray; 86 | 87 | &.active, 88 | &:hover { 89 | border: 3px solid #0bf; 90 | } 91 | } 92 | } 93 | 94 | .badge.active, 95 | .badge:hover{ 96 | border-color: #00bbff; 97 | } 98 | 99 | .badge-blue{ 100 | background-color: $brand-info; 101 | } 102 | .badge-green{ 103 | background-color: $brand-success; 104 | } 105 | .badge-orange{ 106 | background-color: $brand-primary; 107 | } 108 | .badge-yellow{ 109 | background-color: $brand-warning; 110 | } 111 | .badge-red{ 112 | background-color: $brand-danger; 113 | } 114 | 115 | h5{ 116 | font-size: 14px; 117 | margin: 10px; 118 | } 119 | 120 | .dropdown-menu li{ 121 | display: block; 122 | padding: 15px 2px; 123 | width: 25%; 124 | float: left; 125 | } 126 | 127 | li.adjustments-line, 128 | li.header-title, 129 | li.button-container{ 130 | width: 100%; 131 | height: 35px; 132 | min-height: inherit; 133 | } 134 | 135 | li.button-container{ 136 | height: auto; 137 | 138 | div{ 139 | margin-bottom: 5px; 140 | } 141 | } 142 | 143 | #sharrreTitle{ 144 | text-align: center; 145 | padding: 10px 0; 146 | height: 50px; 147 | } 148 | 149 | li.header-title{ 150 | height: 30px; 151 | line-height: 25px; 152 | font-size: 12px; 153 | font-weight: 600; 154 | text-align: center; 155 | text-transform: uppercase; 156 | } 157 | 158 | .adjustments-line{ 159 | p{ 160 | float: left; 161 | display: inline-block; 162 | margin-bottom: 0; 163 | font-size: 1em; 164 | color: #3C4858; 165 | } 166 | 167 | a{ 168 | color: transparent; 169 | 170 | .badge-colors{ 171 | position: relative; 172 | top: -2px; 173 | } 174 | 175 | a:hover, 176 | a:focus{ 177 | color: transparent; 178 | } 179 | } 180 | 181 | .togglebutton{ 182 | text-align: center; 183 | 184 | .label-switch{ 185 | position: relative; 186 | left: -10px; 187 | font-size: $font-size-mini; 188 | color: $default-color; 189 | 190 | &.label-right{ 191 | left: 10px; 192 | } 193 | } 194 | 195 | .toggle{ 196 | margin-right: 0; 197 | } 198 | } 199 | 200 | .dropdown-menu > li.adjustments-line > a{ 201 | padding-right: 0; 202 | padding-left: 0; 203 | border-bottom: 1px solid #ddd; 204 | border-radius: 0; 205 | margin: 0; 206 | } 207 | } 208 | 209 | 210 | 211 | .dropdown-menu{ 212 | > li{ 213 | & > a.img-holder{ 214 | font-size: 16px; 215 | text-align: center; 216 | border-radius: 10px; 217 | background-color: #FFF; 218 | border: 3px solid #FFF; 219 | padding-left: 0; 220 | padding-right: 0; 221 | opacity: 1; 222 | cursor: pointer; 223 | display: block; 224 | max-height: 100px; 225 | overflow: hidden; 226 | padding: 0; 227 | 228 | img{ 229 | margin-top: auto; 230 | } 231 | } 232 | 233 | a.switch-trigger:hover, 234 | & > a.switch-trigger:focus{ 235 | background-color: transparent; 236 | } 237 | 238 | &:hover, 239 | &:focus{ 240 | > a.img-holder{ 241 | border-color: rgba(0, 187, 255, 0.53);; 242 | } 243 | } 244 | } 245 | 246 | > .active > a.img-holder, 247 | > .active > a.img-holder{ 248 | border-color: #00bbff; 249 | background-color: #FFFFFF; 250 | } 251 | 252 | } 253 | 254 | .btn-social{ 255 | width: 50%; 256 | display: block; 257 | width: 48%; 258 | float: left; 259 | font-weight: 600; 260 | } 261 | 262 | .btn-social{ 263 | i{ 264 | margin-right: 5px; 265 | } 266 | 267 | &:first-child{ 268 | margin-right: 2%; 269 | } 270 | } 271 | 272 | .dropdown{ 273 | .dropdown-menu{ 274 | transform-origin: 0 0; 275 | 276 | &:before{ 277 | border-bottom: 16px solid rgba(0, 0, 0, 0); 278 | border-left: 16px solid rgba(0,0,0,0.2); 279 | border-top: 16px solid rgba(0,0,0,0); 280 | right: -27px; 281 | bottom: 425px; 282 | } 283 | 284 | &:after{ 285 | border-bottom: 16px solid rgba(0, 0, 0, 0); 286 | border-left: 16px solid #FFFFFF; 287 | border-top: 16px solid rgba(0,0,0,0); 288 | right: -26px; 289 | bottom: 425px; 290 | } 291 | 292 | &:before, 293 | &:after{ 294 | content: ""; 295 | display: inline-block; 296 | position: absolute; 297 | width: 16px; 298 | transform: translateY(-50px); 299 | -webkit-transform: translateY(-50px); 300 | -moz-transform: translateY(-50px); 301 | } 302 | } 303 | 304 | &.show-dropdown .show{ 305 | .dropdown-menu .show{ 306 | transform: translate3d(0, -60px, 0)!important; 307 | bottom: auto!important; 308 | top: 0!important; 309 | } 310 | } 311 | } 312 | 313 | .bootstrap-switch{ 314 | margin:0; 315 | } 316 | } 317 | 318 | .fixed-plugin { 319 | .show-dropdown { 320 | .dropdown-menu[x-placement=bottom-start] { 321 | @include transform-translate-y-fixed-plugin (-100px); 322 | 323 | &:before, 324 | &:after { 325 | top: 100px; 326 | } 327 | } 328 | .dropdown-menu[x-placement=top-start] { 329 | @include transform-translate-y-fixed-plugin (100px); 330 | } 331 | 332 | &.show { 333 | .dropdown-menu.show[x-placement=bottom-start] { 334 | @include transform-translate-y-fixed-plugin (-60px); 335 | } 336 | 337 | .dropdown-menu.show[x-placement=top-start] { 338 | @include transform-translate-y-fixed-plugin (470px); 339 | } 340 | } 341 | } 342 | } 343 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: 24px 0; 3 | 4 | &.footer-default{ 5 | background-color: #f2f2f2; 6 | } 7 | 8 | nav{ 9 | display: inline-block; 10 | float: left; 11 | padding-left: 0; 12 | } 13 | 14 | ul{ 15 | margin-bottom: 0; 16 | padding: 0; 17 | list-style: none; 18 | 19 | li{ 20 | display: inline-block; 21 | 22 | a{ 23 | color: inherit; 24 | padding: $padding-base-vertical; 25 | font-size: $font-size-small; 26 | text-transform: uppercase; 27 | text-decoration: none; 28 | 29 | &:hover{ 30 | text-decoration: none; 31 | } 32 | } 33 | } 34 | } 35 | 36 | .copyright{ 37 | font-size: $font-size-small; 38 | line-height: 1.8; 39 | } 40 | 41 | &:after{ 42 | display: table; 43 | clear: both; 44 | content: " "; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: $border-radius-small; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_misc.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | color: $black-color; 3 | font-size: $font-size-base; 4 | font-family: $sans-serif-family; 5 | -moz-osx-font-smoothing: grayscale; 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | .main{ 10 | position: relative; 11 | background: $white-color; 12 | } 13 | /* Animations */ 14 | .nav-pills .nav-link, 15 | .navbar, 16 | .nav-tabs .nav-link, 17 | .sidebar .nav a, 18 | .sidebar .nav a i, 19 | .animation-transition-general, 20 | .tag, 21 | .tag [data-role="remove"], 22 | .animation-transition-general{ 23 | @include transition($general-transition-time, $transition-ease); 24 | } 25 | 26 | //transition for dropdown caret 27 | .dropdown-toggle:after, 28 | .bootstrap-switch-label:before, 29 | .caret{ 30 | @include transition($fast-transition-time, $transition-ease); 31 | } 32 | 33 | .dropdown-toggle[aria-expanded="true"]:after, 34 | a[data-toggle="collapse"][aria-expanded="true"] .caret, 35 | .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, 36 | .card-collapse .card a[data-toggle="collapse"].expanded i{ 37 | @include rotate-180(); 38 | } 39 | 40 | .button-bar{ 41 | display: block; 42 | position: relative; 43 | width: 22px; 44 | height: 1px; 45 | border-radius: 1px; 46 | background: $white-bg; 47 | 48 | & + .button-bar{ 49 | margin-top: 7px; 50 | } 51 | 52 | &:nth-child(2){ 53 | width: 17px; 54 | } 55 | } 56 | 57 | .caret{ 58 | display: inline-block; 59 | width: 0; 60 | height: 0; 61 | margin-left: 2px; 62 | vertical-align: middle; 63 | border-top: 4px dashed; 64 | border-top: 4px solid\9; 65 | border-right: 4px solid transparent; 66 | border-left: 4px solid transparent; 67 | } 68 | 69 | .pull-left{ 70 | float: left; 71 | } 72 | .pull-right{ 73 | float: right; 74 | } 75 | 76 | 77 | .offline-doc { 78 | .navbar.navbar-transparent{ 79 | padding-top: 25px; 80 | border-bottom: none; 81 | 82 | .navbar-minimize { 83 | display: none; 84 | } 85 | .navbar-brand, 86 | .collapse .navbar-nav .nav-link { 87 | color: $white-color !important; 88 | } 89 | } 90 | .footer { 91 | z-index: 3 !important; 92 | } 93 | .page-header{ 94 | .container { 95 | z-index: 3; 96 | } 97 | &:after { 98 | background-color: rgba(0, 0, 0, 0.5); 99 | content: ""; 100 | display: block; 101 | height: 100%; 102 | left: 0; 103 | position: absolute; 104 | top: 0; 105 | width: 100%; 106 | z-index: 2; 107 | } 108 | } 109 | } 110 | 111 | .fixed-plugin { 112 | .dropdown-menu li { 113 | padding: 2px !important; 114 | } 115 | } 116 | 117 | // badge color 118 | 119 | .badge{ 120 | &.badge-default{ 121 | @include badge-color($default-color); 122 | } 123 | &.badge-primary{ 124 | @include badge-color($primary-color); 125 | } 126 | &.badge-info{ 127 | @include badge-color($info-color); 128 | } 129 | &.badge-success{ 130 | @include badge-color($success-color); 131 | } 132 | &.badge-warning{ 133 | @include badge-color($warning-color); 134 | } 135 | &.badge-danger{ 136 | @include badge-color($danger-color); 137 | } 138 | &.badge-neutral{ 139 | @include badge-color($white-color); 140 | color: inherit; 141 | } 142 | } 143 | 144 | .card-user { 145 | form { 146 | .form-group { 147 | margin-bottom: 20px; 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Components 2 | @import "mixins/buttons"; 3 | @import "mixins/vendor-prefixes"; 4 | @import "mixins/inputs"; 5 | @import "mixins/page-header"; 6 | @import "mixins/dropdown"; 7 | @import "mixins/cards"; 8 | @import "mixins/transparency"; 9 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | padding-top: $navbar-padding-base; 3 | padding-bottom: $navbar-padding-base; 4 | min-height: 53px; 5 | margin-bottom: 20px; 6 | 7 | a{ 8 | vertical-align: middle; 9 | 10 | &:not(.btn):not(.dropdown-item){ 11 | color: $white-color; 12 | } 13 | 14 | &.dropdown-item{ 15 | color: $default-color; 16 | } 17 | } 18 | 19 | 20 | 21 | &.bg-white{ 22 | .input-group .form-control, 23 | .input-group.no-border .form-control{ 24 | color: $default-color; 25 | 26 | @include placeholder(){ 27 | color: $default-color; 28 | }; 29 | } 30 | .input-group-prepend .input-group-text i, 31 | .input-group-append .input-group-text i{ 32 | color: $default-color; 33 | opacity: .5; 34 | } 35 | } 36 | 37 | .form-group, 38 | .input-group{ 39 | margin: 0; 40 | margin-left: -3px; 41 | margin-right: 5px; 42 | 43 | .form-group-addon, 44 | .input-group-prepend .input-group-text, 45 | .input-group-append .input-group-text{ 46 | color: $default-color; 47 | 48 | i { 49 | opacity: 1; 50 | } 51 | } 52 | 53 | &.no-border{ 54 | .form-control{ 55 | color: $default-color; 56 | 57 | @include placeholder(){ 58 | color: $default-color; 59 | }; 60 | } 61 | } 62 | } 63 | 64 | p{ 65 | display: inline-block; 66 | margin: 0; 67 | line-height: 1.8em; 68 | font-size: 1em; 69 | font-weight: 400; 70 | } 71 | 72 | &.navbar-absolute{ 73 | position: absolute; 74 | width: 100%; 75 | padding-top: 10px; 76 | z-index: 1029; 77 | } 78 | 79 | .documentation &{ 80 | &.fixed-top{ 81 | left: 0; 82 | width: initial; 83 | } 84 | } 85 | 86 | .navbar-wrapper{ 87 | display: inline-flex; 88 | align-items: center; 89 | 90 | .navbar-minimize{ 91 | padding-right: 10px; 92 | 93 | .btn{ 94 | margin: 0; 95 | } 96 | } 97 | 98 | .navbar-toggle{ 99 | .navbar-toggler{ 100 | padding-left: 0; 101 | } 102 | 103 | &:hover{ 104 | & .navbar-toggler-bar.bar2{ 105 | width: 22px; 106 | } 107 | } 108 | } 109 | } 110 | 111 | 112 | 113 | .navbar-nav{ 114 | &.navbar-logo{ 115 | position: absolute; 116 | left: 0; 117 | right: 0; 118 | margin: 0 auto; 119 | width: 49px; 120 | top: -4px; 121 | } 122 | 123 | .nav-link.btn{ 124 | padding: $padding-btn-vertical $padding-btn-horizontal; 125 | &.btn-lg{ 126 | padding: $padding-large-vertical $padding-large-horizontal; 127 | } 128 | &.btn-sm{ 129 | padding: $padding-small-vertical $padding-small-horizontal; 130 | } 131 | } 132 | 133 | .nav-link{ 134 | text-transform: uppercase; 135 | font-size: $font-size-mini; 136 | padding: $padding-base-vertical $padding-base-horizontal; 137 | line-height: $line-height-nav-link; 138 | margin-right: 3px; 139 | 140 | i.fa + p, 141 | i.nc-icon + p{ 142 | margin-left: 3px; 143 | } 144 | 145 | i.fa, 146 | i.nc-icon{ 147 | font-size: 18px; 148 | position: relative; 149 | top: 3px; 150 | text-align: center; 151 | width: 21px; 152 | } 153 | 154 | i.nc-icon{ 155 | top: 4px; 156 | font-size: 16px; 157 | } 158 | 159 | &.profile-photo{ 160 | .profile-photo-small{ 161 | width: 27px; 162 | height: 27px; 163 | } 164 | } 165 | 166 | &.disabled{ 167 | opacity: .5; 168 | color: $white-color; 169 | } 170 | } 171 | 172 | .nav-item.active .nav-link:not(.btn), 173 | .nav-item .nav-link:not(.btn):focus, 174 | .nav-item .nav-link:not(.btn):hover, 175 | .nav-item .nav-link:not(.btn):active{ 176 | border-radius: $border-radius-small; 177 | color: $default-color; 178 | } 179 | } 180 | 181 | .logo-container{ 182 | width: 27px; 183 | height: 27px; 184 | overflow: hidden; 185 | margin: 0 auto; 186 | border-radius: 50%; 187 | border: 1px solid transparent; 188 | } 189 | 190 | .navbar-brand{ 191 | text-transform: capitalize; 192 | font-size: $font-size-large-navbar; 193 | padding-top: $padding-base-vertical; 194 | padding-bottom: $padding-base-vertical; 195 | line-height: $line-height-nav-link; 196 | } 197 | 198 | .navbar-toggler{ 199 | width: 37px; 200 | height: 27px; 201 | vertical-align: middle; 202 | outline: 0; 203 | cursor: pointer; 204 | 205 | & .navbar-toggler-bar.navbar-kebab{ 206 | width: 3px; 207 | height: 3px; 208 | border-radius: 50%; 209 | margin: 0 auto; 210 | } 211 | } 212 | 213 | .button-dropdown{ 214 | .navbar-toggler-bar:nth-child(2){ 215 | width: 17px; 216 | } 217 | } 218 | 219 | &.navbar-transparent{ 220 | background-color: $transparent-bg !important; 221 | box-shadow: none; 222 | border-bottom: 1px solid #ddd; 223 | 224 | a:not(.dropdown-item):not(.btn){ 225 | color: $default-color; 226 | 227 | &.disabled{ 228 | opacity: .5; 229 | color: $default-color; 230 | } 231 | } 232 | 233 | .button-bar{ 234 | background: $default-color; 235 | } 236 | 237 | .nav-item .nav-link:not(.btn){ 238 | color: $default-color; 239 | } 240 | .nav-item.active .nav-link:not(.btn), 241 | .nav-item .nav-link:not(.btn):focus, 242 | .nav-item .nav-link:not(.btn):hover, 243 | .nav-item .nav-link:not(.btn):focus:hover, 244 | .nav-item .nav-link:not(.btn):active { 245 | color: $primary-color; 246 | } 247 | } 248 | 249 | &.bg-white { 250 | a:not(.dropdown-item):not(.btn){ 251 | color: $default-color; 252 | 253 | &.disabled{ 254 | opacity: .5; 255 | color: $default-color; 256 | } 257 | } 258 | 259 | .button-bar{ 260 | background: $default-color; 261 | } 262 | 263 | .nav-item.active .nav-link:not(.btn), 264 | .nav-item .nav-link:not(.btn):focus, 265 | .nav-item .nav-link:not(.btn):hover, 266 | .nav-item .nav-link:not(.btn):active{ 267 | color: $info-color; 268 | } 269 | 270 | .logo-container{ 271 | border: 1px solid $default-color; 272 | } 273 | } 274 | 275 | .navbar-collapse { 276 | .nav-item { 277 | a { 278 | font-size: $font-size-base; 279 | } 280 | } 281 | } 282 | } 283 | 284 | .bg-default{ 285 | background-color: $default-color !important; 286 | } 287 | 288 | .bg-primary{ 289 | background-color: $primary-color !important; 290 | } 291 | 292 | .bg-info{ 293 | background-color: $info-color !important; 294 | } 295 | 296 | .bg-success{ 297 | background-color: $success-color !important; 298 | } 299 | 300 | .bg-danger{ 301 | background-color: $danger-color !important; 302 | } 303 | 304 | .bg-warning{ 305 | background-color: $warning-color !important; 306 | } 307 | 308 | .bg-white{ 309 | background-color: $white-color !important; 310 | } 311 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_page-header.scss: -------------------------------------------------------------------------------- 1 | .page-header{ 2 | min-height: 100vh; 3 | max-height: 1000px; 4 | padding: 0; 5 | color: $white-color; 6 | position: relative; 7 | 8 | .page-header-image{ 9 | position: absolute; 10 | background-size: cover; 11 | background-position: center center; 12 | width: 100%; 13 | height: 100%; 14 | z-index: -1; 15 | } 16 | 17 | .content-center{ 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | z-index: 2; 22 | -ms-transform: translate(-50%, -50%); 23 | -webkit-transform: translate(-50%, -50%); 24 | transform: translate(-50%, -50%); 25 | text-align: center; 26 | color: #FFFFFF; 27 | padding: 0 15px; 28 | width: 100%; 29 | max-width: 880px; 30 | 31 | } 32 | 33 | footer{ 34 | position: absolute; 35 | bottom: 0; 36 | width: 100%; 37 | } 38 | 39 | .container{ 40 | height: 100%; 41 | z-index: 1; 42 | } 43 | 44 | .category, 45 | .description{ 46 | color: $opacity-8; 47 | } 48 | 49 | &.page-header-small{ 50 | min-height: 60vh; 51 | max-height: 440px; 52 | } 53 | 54 | &.page-header-mini{ 55 | min-height: 40vh; 56 | max-height: 340px; 57 | } 58 | 59 | .title{ 60 | margin-bottom: 15px; 61 | } 62 | .title + h4{ 63 | margin-top: 10px; 64 | } 65 | 66 | &:after, 67 | &:before{ 68 | position: absolute; 69 | z-index: 0; 70 | width: 100%; 71 | height: 100%; 72 | display: block; 73 | left: 0; 74 | top: 0; 75 | content: ""; 76 | } 77 | 78 | &:before{ 79 | background-color: rgba(0,0,0,.3); 80 | } 81 | 82 | &[filter-color="orange"]{ 83 | @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6)); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .img-wrapper{ 4 | width: 40px; 5 | height: 40px; 6 | border-radius: 50%; 7 | overflow: hidden; 8 | margin: 0 auto; 9 | } 10 | 11 | .img-row{ 12 | max-width: 60px; 13 | width: 60px; 14 | } 15 | 16 | .form-check{ 17 | margin: 0; 18 | 19 | & label .form-check-sign::before, 20 | & label .form-check-sign::after{ 21 | top: -17px; 22 | left: 4px; 23 | } 24 | } 25 | 26 | .btn{ 27 | margin: 0; 28 | } 29 | 30 | small,.small{ 31 | font-weight: 300; 32 | } 33 | 34 | .card-tasks .card-body &{ 35 | margin-bottom: 0; 36 | 37 | > thead > tr > th, 38 | > tbody > tr > th, 39 | > tfoot > tr > th, 40 | > thead > tr > td, 41 | > tbody > tr > td, 42 | > tfoot > tr > td{ 43 | padding-top: 0; 44 | padding-bottom: 0; 45 | } 46 | } 47 | 48 | > thead > tr > th{ 49 | font-size: 14px; 50 | font-weight: $font-weight-bold; 51 | padding-bottom: 0; 52 | text-transform: uppercase; 53 | border: 0; 54 | } 55 | 56 | .radio, 57 | .checkbox{ 58 | margin-top: 0; 59 | margin-bottom: 0; 60 | padding: 0; 61 | width: 15px; 62 | 63 | .icons{ 64 | position: relative; 65 | } 66 | 67 | label{ 68 | &:after, 69 | &:before{ 70 | top: -17px; 71 | left: -3px; 72 | } 73 | } 74 | } 75 | > thead > tr > th, 76 | > tbody > tr > th, 77 | > tfoot > tr > th, 78 | > thead > tr > td, 79 | > tbody > tr > td, 80 | > tfoot > tr > td{ 81 | padding: 12px 7px; 82 | vertical-align: middle; 83 | } 84 | 85 | .th-description{ 86 | max-width: 150px; 87 | } 88 | .td-price{ 89 | font-size: 26px; 90 | font-weight: $font-weight-light; 91 | margin-top: 5px; 92 | position: relative; 93 | top: 4px; 94 | text-align: right; 95 | } 96 | .td-total{ 97 | font-weight: $font-weight-bold; 98 | font-size: $font-size-h5; 99 | padding-top: 20px; 100 | text-align: right; 101 | } 102 | 103 | .td-actions .btn{ 104 | margin: 0px; 105 | } 106 | 107 | > tbody > tr{ 108 | position: relative; 109 | } 110 | } 111 | 112 | .table-shopping{ 113 | > thead > tr > th{ 114 | font-size: $font-size-h6; 115 | text-transform: uppercase; 116 | } 117 | > tbody > tr > td{ 118 | font-size: $font-paragraph; 119 | 120 | b{ 121 | display: block; 122 | margin-bottom: 5px; 123 | } 124 | } 125 | .td-name{ 126 | font-weight: $font-weight-normal; 127 | font-size: 1.5em; 128 | small{ 129 | color: $dark-gray; 130 | font-size: 0.75em; 131 | font-weight: $font-weight-light; 132 | } 133 | } 134 | .td-number{ 135 | font-weight: $font-weight-light; 136 | font-size: $font-size-h4; 137 | } 138 | .td-name{ 139 | min-width: 200px; 140 | } 141 | .td-number{ 142 | text-align: right; 143 | min-width: 170px; 144 | 145 | small{ 146 | margin-right: 3px; 147 | } 148 | } 149 | 150 | .img-container{ 151 | width: 120px; 152 | max-height: 160px; 153 | overflow: hidden; 154 | display: block; 155 | 156 | img{ 157 | width: 100%; 158 | } 159 | } 160 | } 161 | 162 | .table-responsive{ 163 | overflow: scroll; 164 | padding-bottom: 10px; 165 | } 166 | 167 | #tables .table-responsive{ 168 | margin-bottom: 30px; 169 | } 170 | 171 | .table-hover>tbody>tr:hover{ 172 | background-color: #f5f5f5; 173 | } 174 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/_typography.scss: -------------------------------------------------------------------------------- 1 | button, 2 | input, 3 | optgroup, 4 | select, 5 | textarea{ 6 | font-family: $sans-serif-family; 7 | } 8 | h1,h2,h3,h4,h5,h6{ 9 | font-weight: $font-weight-normal; 10 | } 11 | 12 | a{ 13 | color: $primary-color; 14 | &:hover, 15 | &:focus{ 16 | color: $primary-color; 17 | } 18 | } 19 | h1, .h1 { 20 | font-size: $font-size-h1; 21 | line-height: 1.15; 22 | margin-bottom: $margin-base-vertical * 2; 23 | 24 | small{ 25 | font-weight: $font-weight-bold; 26 | text-transform: uppercase; 27 | opacity: .8; 28 | } 29 | } 30 | h2, .h2{ 31 | font-size: $font-size-h2; 32 | margin-bottom: $margin-base-vertical * 2; 33 | } 34 | h3, .h3{ 35 | font-size: $font-size-h3; 36 | margin-bottom: $margin-base-vertical * 2; 37 | line-height: 1.4em; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 1.45em; 42 | margin-top: $margin-base-vertical * 2; 43 | margin-bottom: $margin-base-vertical; 44 | 45 | & + .category, 46 | &.title + .category{ 47 | margin-top: -10px; 48 | } 49 | } 50 | h5, .h5 { 51 | font-size: $font-size-h5; 52 | line-height: 1.4em; 53 | margin-bottom: 15px; 54 | } 55 | h6, .h6{ 56 | font-size: $font-size-h6; 57 | font-weight: $font-weight-bold; 58 | text-transform: uppercase; 59 | } 60 | p{ 61 | &.description{ 62 | font-size: 1.14em; 63 | } 64 | } 65 | 66 | // i.fa{ 67 | // font-size: 18px; 68 | // position: relative; 69 | // top: 1px; 70 | // } 71 | 72 | .title{ 73 | font-weight: $font-weight-bold; 74 | 75 | &.title-up{ 76 | text-transform: uppercase; 77 | 78 | a{ 79 | color: $black-color; 80 | text-decoration: none; 81 | } 82 | } 83 | & + .category{ 84 | margin-top: -10px; 85 | } 86 | } 87 | 88 | .description, 89 | .card-description, 90 | .footer-big p, 91 | .card .footer .stats{ 92 | color: $dark-gray; 93 | font-weight: $font-weight-light; 94 | } 95 | .category, 96 | .card-category{ 97 | text-transform: capitalize; 98 | font-weight: $font-weight-normal; 99 | color: $dark-gray; 100 | font-size: $font-size-mini; 101 | } 102 | 103 | .card-category{ 104 | font-size: $font-size-h6; 105 | } 106 | 107 | .text-primary, 108 | a.text-primary:focus, a.text-primary:hover { 109 | color: $brand-primary !important; 110 | } 111 | .text-info, 112 | a.text-info:focus, a.text-info:hover { 113 | color: $brand-info !important; 114 | } 115 | .text-success, 116 | a.text-success:focus, a.text-success:hover { 117 | color: $brand-success !important; 118 | } 119 | .text-warning, 120 | a.text-warning:focus, a.text-warning:hover { 121 | color: $brand-warning !important; 122 | } 123 | .text-danger, 124 | a.text-danger:focus, a.text-danger:hover { 125 | color: $brand-danger !important; 126 | } 127 | 128 | .text-gray, 129 | a.text-gray:focus, a.text-gray:hover{ 130 | color: $light-gray !important; 131 | } 132 | 133 | 134 | .blockquote{ 135 | border-left: none; 136 | border: 1px solid $default-color; 137 | padding: 20px; 138 | font-size: $font-size-blockquote; 139 | line-height: 1.8; 140 | 141 | small{ 142 | color: $default-color; 143 | font-size: $font-size-small; 144 | text-transform: uppercase; 145 | } 146 | 147 | &.blockquote-primary{ 148 | border-color: $primary-color; 149 | color: $primary-color; 150 | 151 | small{ 152 | color: $primary-color; 153 | } 154 | } 155 | 156 | &.blockquote-danger{ 157 | border-color: $danger-color; 158 | color: $danger-color; 159 | 160 | small{ 161 | color: $danger-color; 162 | } 163 | } 164 | 165 | &.blockquote-white{ 166 | border-color: $opacity-8; 167 | color: $white-color; 168 | 169 | small{ 170 | color: $opacity-8; 171 | } 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/cards/_card-chart.scss: -------------------------------------------------------------------------------- 1 | .card-chart { 2 | .card-header{ 3 | .card-title{ 4 | margin-top: 10px; 5 | margin-bottom: 0; 6 | } 7 | .card-category{ 8 | margin-bottom: 5px; 9 | } 10 | } 11 | 12 | .table{ 13 | margin-bottom: 0; 14 | 15 | td{ 16 | border-top: none; 17 | border-bottom: 1px solid #e9ecef; 18 | } 19 | } 20 | 21 | .card-progress { 22 | margin-top: 30px; 23 | } 24 | 25 | .chart-area { 26 | height: 190px; 27 | width: calc(100% + 30px); 28 | margin-left: -15px; 29 | margin-right: -15px; 30 | } 31 | .card-footer { 32 | margin-top: 15px; 33 | 34 | .stats{ 35 | color: $dark-gray; 36 | } 37 | } 38 | 39 | .dropdown{ 40 | position: absolute; 41 | right: 20px; 42 | top: 20px; 43 | 44 | .btn{ 45 | margin: 0; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/cards/_card-map.scss: -------------------------------------------------------------------------------- 1 | .map{ 2 | height: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | 2 | .card-plain{ 3 | background: transparent; 4 | box-shadow: none; 5 | 6 | .card-header, 7 | .card-footer{ 8 | margin-left: 0; 9 | margin-right: 0; 10 | background-color: transparent; 11 | } 12 | 13 | &:not(.card-subcategories).card-body{ 14 | padding-left: 0; 15 | padding-right: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/cards/_card-stats.scss: -------------------------------------------------------------------------------- 1 | %card-stats{ 2 | hr{ 3 | margin: 5px 15px; 4 | } 5 | } 6 | 7 | 8 | .card-stats{ 9 | .card-body{ 10 | padding: 15px 15px 0px; 11 | 12 | .numbers{ 13 | text-align: right; 14 | font-size: 2em; 15 | 16 | p{ 17 | margin-bottom: 0; 18 | } 19 | .card-category { 20 | color: $dark-gray; 21 | font-size: 16px; 22 | line-height: 1.4em; 23 | } 24 | } 25 | } 26 | .card-footer{ 27 | padding: 0px 15px 15px; 28 | 29 | .stats{ 30 | color: $dark-gray; 31 | } 32 | 33 | hr{ 34 | margin-top: 10px; 35 | margin-bottom: 15px; 36 | } 37 | } 38 | .icon-big { 39 | font-size: 3em; 40 | min-height: 64px; 41 | 42 | i{ 43 | line-height: 59px; 44 | } 45 | } 46 | 47 | 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/cards/_card-user.scss: -------------------------------------------------------------------------------- 1 | .card-user{ 2 | .image{ 3 | height: 130px; 4 | 5 | img { 6 | border-radius: 12px; 7 | } 8 | } 9 | 10 | .author{ 11 | text-align: center; 12 | text-transform: none; 13 | margin-top: -77px; 14 | 15 | a + p.description{ 16 | margin-top: -7px; 17 | } 18 | } 19 | 20 | .avatar{ 21 | width: 124px; 22 | height: 124px; 23 | border: 1px solid $white-color; 24 | position: relative; 25 | } 26 | 27 | .card-body{ 28 | min-height: 240px; 29 | } 30 | 31 | hr{ 32 | margin: 5px 15px 15px; 33 | } 34 | 35 | .card-body + .card-footer { 36 | padding-top: 0; 37 | } 38 | 39 | .card-footer { 40 | h5 { 41 | font-size: 1.25em; 42 | margin-bottom: 0; 43 | } 44 | } 45 | 46 | .button-container{ 47 | margin-bottom: 6px; 48 | text-align: center; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | background-color: $btn-color; 4 | 5 | &:hover, 6 | &:focus, 7 | &:active, 8 | &.active, 9 | &:active:focus, 10 | &:active:hover, 11 | &.active:focus, 12 | &.active:hover, 13 | .show > &.dropdown-toggle, 14 | .show > &.dropdown-toggle:focus, 15 | .show > &.dropdown-toggle:hover { 16 | background-color: $btn-states-color !important; 17 | color: $white-color !important; 18 | box-shadow: none !important; 19 | } 20 | 21 | &:not([data-action]):hover{ 22 | box-shadow: none; 23 | } 24 | 25 | &.disabled, 26 | &:disabled, 27 | &[disabled], 28 | fieldset[disabled] & { 29 | &, 30 | &:hover, 31 | &:focus, 32 | &.focus, 33 | &:active, 34 | &.active { 35 | background-color: $btn-color; 36 | border-color: $btn-color; 37 | } 38 | } 39 | 40 | // btn-neutral style 41 | @if $btn-color == $white-color{ 42 | color: $primary-color; 43 | 44 | &.btn-danger{ 45 | color: $danger-color; 46 | 47 | &:hover, 48 | &:focus, 49 | &:active, 50 | &:active:focus{ 51 | color: $danger-states-color !important; 52 | } 53 | } 54 | 55 | &.btn-info{ 56 | color: $info-color !important; 57 | 58 | &:hover, 59 | &:focus, 60 | &:active, 61 | &:active:focus{ 62 | color: $info-states-color !important; 63 | } 64 | } 65 | 66 | &.btn-warning{ 67 | color: $warning-color !important; 68 | 69 | &:hover, 70 | &:focus, 71 | &:active, 72 | &:active:focus{ 73 | color: $warning-states-color !important; 74 | } 75 | } 76 | 77 | &.btn-success{ 78 | color: $success-color !important; 79 | 80 | &:hover, 81 | &:focus, 82 | &:active, 83 | &:active:focus{ 84 | color: $success-states-color !important; 85 | } 86 | } 87 | 88 | &.btn-default{ 89 | color: $default-color !important; 90 | 91 | &:hover, 92 | &:focus, 93 | &:active, 94 | &:active:focus{ 95 | color: $default-states-color !important; 96 | } 97 | } 98 | 99 | &.active, 100 | &:active, 101 | &:active:focus, 102 | &:active:hover, 103 | &.active:focus, 104 | &.active:hover, 105 | .show > &.dropdown-toggle, 106 | .show > &.dropdown-toggle:focus, 107 | .show > &.dropdown-toggle:hover { 108 | background-color: $white-color !important; 109 | color: $primary-states-color !important; 110 | box-shadow: none !important; 111 | } 112 | 113 | &:hover, 114 | &:focus{ 115 | color: $primary-states-color !important; 116 | 117 | &:not(.nav-link){ 118 | box-shadow: none; 119 | } 120 | 121 | } 122 | 123 | } @else { 124 | color: $white-color; 125 | } 126 | 127 | &.btn-simple{ 128 | color: $btn-color; 129 | border-color: $btn-color; 130 | 131 | &:hover, 132 | &:focus, 133 | &:active{ 134 | background-color: $transparent-bg; 135 | color: $btn-states-color; 136 | border-color: $btn-states-color; 137 | box-shadow: none; 138 | } 139 | } 140 | 141 | &.btn-link{ 142 | color: $btn-color; 143 | 144 | &:hover, 145 | &:focus, 146 | &:active, 147 | &:active:focus { 148 | background-color: $transparent-bg; 149 | color: $btn-states-color; 150 | text-decoration: none; 151 | box-shadow: none; 152 | } 153 | } 154 | } 155 | 156 | @mixin btn-outline-styles($btn-color, $btn-states-color){ 157 | background: $transparent-bg; 158 | border: 2px solid $btn-color !important; 159 | color: $btn-color; 160 | @include opacity(1); 161 | 162 | &:hover, 163 | &:focus, 164 | &:active, 165 | &:focus:active, 166 | &.active, 167 | .open > &.dropdown-toggle { 168 | background-color: $btn-color !important; 169 | color: $fill-font-color !important; 170 | border-color: $btn-color !important; 171 | .caret{ 172 | border-top-color: $fill-font-color !important; 173 | } 174 | } 175 | 176 | .caret{ 177 | border-top-color: $white-color !important; 178 | } 179 | 180 | &.disabled, 181 | &:disabled, 182 | &[disabled], 183 | fieldset[disabled] & { 184 | &, 185 | &:hover, 186 | &:focus, 187 | &.focus, 188 | &:active, 189 | &.active { 190 | background-color: $transparent-bg !important; 191 | border-color: $btn-color !important; 192 | } 193 | } 194 | } 195 | 196 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 197 | font-size: $font-size; 198 | border-radius: $border; 199 | padding: $padding-vertical $padding-horizontal; 200 | 201 | &.btn-simple{ 202 | padding: $padding-vertical - 1 $padding-horizontal - 1; 203 | } 204 | 205 | } 206 | 207 | @mixin rotate-180(){ 208 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 209 | -webkit-transform: rotate(180deg); 210 | -ms-transform: rotate(180deg); 211 | transform: rotate(180deg); 212 | } 213 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-color($color) { 2 | box-shadow: 0px 9px 30px -6px $color; 3 | color: $color; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { 2 | background-color: $brand-color; 3 | 4 | &:before{ 5 | color: $brand-color; 6 | } 7 | 8 | .dropdown-header:not([href]):not([tabindex]){ 9 | color: $dropdown-header-color; 10 | } 11 | 12 | .dropdown-item{ 13 | color: $dropdown-color; 14 | 15 | &:hover, 16 | &:focus{ 17 | background-color: $background-color; 18 | } 19 | } 20 | 21 | .dropdown-divider{ 22 | background-color: $background-color; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal) { 2 | padding: $padding-vertical $padding-horizontal; 3 | } 4 | 5 | @mixin form-control-placeholder($color, $opacity) { 6 | .form-control::-moz-placeholder { 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | .form-control:-moz-placeholder { 11 | color: $color; 12 | @include opacity(1); 13 | } 14 | .form-control::-webkit-input-placeholder { 15 | color: $color; 16 | @include opacity(1); 17 | } 18 | .form-control:-ms-input-placeholder { 19 | color: $color; 20 | @include opacity(1); 21 | } 22 | } 23 | 24 | @mixin placeholder() { 25 | ::-moz-placeholder { 26 | @content; 27 | } // Firefox 28 | :-ms-input-placeholder { 29 | @content; 30 | } // Internet Explorer 10+ 31 | ::-webkit-input-placeholder { 32 | @content; 33 | } // Safari and Chrome 34 | } 35 | 36 | @mixin light-form() { 37 | border-radius: 0; 38 | border: 0; 39 | padding: 0; 40 | background-color: transparent; 41 | } 42 | 43 | @mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { 44 | .form-group.no-border.form-control-lg, 45 | .input-group.no-border.form-control-lg { 46 | .input-group-append .input-group-text { 47 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 48 | } 49 | 50 | .form-control { 51 | padding: $padding-vertical $padding-horizontal; 52 | 53 | & + .input-group-prepend .input-group-text, 54 | & + .input-group-append .input-group-text { 55 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 56 | } 57 | } 58 | } 59 | 60 | .form-group.form-control-lg, 61 | .input-group.form-control-lg { 62 | .form-control { 63 | padding: $padding-vertical - 1 $padding-horizontal - 1; 64 | 65 | & + .input-group-prepend .input-group-text, 66 | & + .input-group-append .input-group-text { 67 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 68 | 1 0; 69 | } 70 | } 71 | 72 | .input-group-prepend .input-group-text, 73 | .input-group-append .input-group-text { 74 | padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; 75 | 76 | & + .form-control { 77 | padding: $padding-vertical $padding-horizontal - 1 $padding-vertical 78 | $padding-horizontal - 3; 79 | } 80 | } 81 | } 82 | } 83 | 84 | @mixin input-base-padding($padding-vertical, $padding-horizontal) { 85 | .form-group.no-border, 86 | .input-group.no-border { 87 | .form-control { 88 | padding: $padding-vertical $padding-horizontal; 89 | 90 | & + .input-group-prepend .input-group-text, 91 | & + .input-group-append .input-group-text { 92 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 93 | } 94 | } 95 | 96 | .input-group-prepend .input-group-text, 97 | .input-group-append .input-group-text { 98 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 99 | } 100 | } 101 | 102 | .form-group, 103 | .input-group { 104 | .form-control { 105 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 106 | 1 $padding-horizontal - 1; 107 | 108 | & + .input-group-prepend .input-group-text, 109 | & + .input-group-append .input-group-text { 110 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 111 | 1 0; 112 | } 113 | } 114 | 115 | .input-group-prepend .input-group-text, 116 | .input-group-append .input-group-text { 117 | padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 118 | 1; 119 | 120 | & + .form-control, 121 | & ~ .form-control { 122 | padding: $padding-vertical - 1 $padding-horizontal $padding-vertical 123 | $padding-horizontal - 3; 124 | } 125 | } 126 | } 127 | } 128 | 129 | //color1 = $opacity-5 130 | //color2 = $opacity-8 131 | //color3 = $white-color 132 | //color4 = $transparent-bg 133 | //color5 = $opacity-1 134 | //color6 = $opacity-2 135 | 136 | @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { 137 | @include form-control-placeholder(darken($color2, 8%), 1); 138 | 139 | .form-control { 140 | border-color: $color1; 141 | color: $color2; 142 | 143 | &:focus { 144 | border-color: $color3; 145 | background-color: $color4; 146 | color: $color3; 147 | } 148 | } 149 | 150 | .has-success, 151 | .has-danger { 152 | &:after { 153 | color: $color3; 154 | } 155 | } 156 | 157 | .has-danger { 158 | .form-control { 159 | background-color: $color4; 160 | } 161 | } 162 | 163 | .input-group-prepend .input-group-text, 164 | .input-group-append .input-group-text { 165 | background-color: $color4; 166 | border-color: $color1; 167 | color: $color2; 168 | } 169 | 170 | .input-group-focus { 171 | .input-group-prepend .input-group-text, 172 | .input-group-append .input-group-text { 173 | background-color: $color4; 174 | border-color: $color3; 175 | color: $color3; 176 | } 177 | } 178 | 179 | .form-group.no-border, 180 | .input-group.no-border { 181 | .form-control { 182 | background-color: $color5; 183 | color: $color2; 184 | 185 | &:focus, 186 | &:active, 187 | &:active { 188 | background-color: $color6; 189 | color: $color3; 190 | } 191 | } 192 | 193 | .form-control + .input-group-prepend .input-group-text, 194 | .form-control + .input-group-append .input-group-text { 195 | background-color: $color5; 196 | 197 | &:focus, 198 | &:active, 199 | &:active { 200 | background-color: $color6; 201 | color: $color3; 202 | } 203 | } 204 | 205 | .form-control { 206 | &:focus { 207 | & + .input-group-prepend .input-group-text, 208 | & + .input-group-append .input-group-text { 209 | background-color: $color6; 210 | color: $color3; 211 | } 212 | } 213 | } 214 | 215 | .input-group-prepend .input-group-text, 216 | .input-group-append .input-group-text { 217 | background-color: $color5; 218 | border: none; 219 | color: $color2; 220 | } 221 | 222 | &.input-group-focus { 223 | .input-group-prepend .input-group-text, 224 | .input-group-append .input-group-text { 225 | background-color: $color6; 226 | color: $color3; 227 | } 228 | } 229 | } 230 | } 231 | 232 | @mixin transition-input-focus-color() { 233 | -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, 234 | background-color 0.3s ease-in-out; 235 | -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, 236 | background-color 0.3s ease-in-out; 237 | -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, 238 | background-color 0.3s ease-in-out; 239 | -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, 240 | background-color 0.3s ease-in-out; 241 | transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, 242 | background-color 0.3s ease-in-out; 243 | } 244 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_page-header.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($color1, $color2){ 2 | background: $color1; /* For browsers that do not support gradients */ 3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/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 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 3 | box-shadow: $shadow; 4 | } 5 | 6 | @mixin transition($time, $type){ 7 | -webkit-transition: all $time $type; 8 | -moz-transition: all $time $type; 9 | -o-transition: all $time $type; 10 | -ms-transition: all $time $type; 11 | transition: all $time $type; 12 | } 13 | 14 | 15 | @mixin sidebar-color($color){ 16 | &:after{ 17 | background: $color; 18 | } 19 | } 20 | 21 | @mixin bar-animation($type){ 22 | -webkit-animation: $type 500ms linear 0s; 23 | -moz-animation: $type 500ms linear 0s; 24 | animation: $type 500ms 0s; 25 | -webkit-animation-fill-mode: forwards; 26 | -moz-animation-fill-mode: forwards; 27 | animation-fill-mode: forwards; 28 | } 29 | 30 | @mixin sidebar-active-color($font-color){ 31 | .nav { 32 | li { 33 | &.active > a, 34 | &.active > a i, 35 | &.active > a[data-toggle="collapse"], 36 | &.active > a[data-toggle="collapse"] i, 37 | &.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon, 38 | &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a { 39 | color: $font-color; 40 | opacity: 1; 41 | } 42 | } 43 | } 44 | } 45 | 46 | @mixin transition-opacity($time, $type){ 47 | -webkit-transition: opacity $time $type; 48 | -moz-transition: opacity $time $type; 49 | -o-transition: opacity $time $type; 50 | -ms-transition: opacity $time $type; 51 | transition: opacity $time $type; 52 | } 53 | 54 | @mixin transform-translate-y-dropdown($value) { 55 | -webkit-transform: translate3d(-20px,$value,0) !important; 56 | -moz-transform: translate3d(-20px,$value,0) !important; 57 | -o-transform: translate3d(-20px,$value,0) !important; 58 | -ms-transform: translate3d(-20px,$value,0) !important; 59 | transform: translate3d(-20px,$value,0) !important; 60 | } 61 | 62 | @mixin transform-translate-x($value){ 63 | -webkit-transform: translate3d($value, 0, 0); 64 | -moz-transform: translate3d($value, 0, 0); 65 | -o-transform: translate3d($value, 0, 0); 66 | -ms-transform: translate3d($value, 0, 0); 67 | transform: translate3d($value, 0, 0); 68 | } 69 | 70 | @mixin transform-translate-y($value){ 71 | -webkit-transform: translate3d(0,$value,0) !important; 72 | -moz-transform: translate3d(0,$value,0) !important; 73 | -o-transform: translate3d(0,$value,0) !important; 74 | -ms-transform: translate3d(0,$value,0) !important; 75 | transform: translate3d(0,$value,0) !important; 76 | } 77 | 78 | @mixin transform-translate-y-fixed-plugin($value){ 79 | -webkit-transform: translate3d(0,$value,0) !important; 80 | -moz-transform: translate3d(0,$value,0) !important; 81 | -o-transform: translate3d(0,$value,0) !important; 82 | -ms-transform: translate3d(0,$value,0) !important; 83 | transform: translate3d(0,$value,0) !important; 84 | } 85 | 86 | @mixin icon-gradient($color, $bottomColor: #000){ 87 | background: $color; 88 | background: -webkit-linear-gradient($color 0%, $bottomColor 80%); 89 | background: -o-linear-gradient($color 0%, $bottomColor 80%); 90 | background: -moz-linear-gradient($color 0%, $bottomColor 80%); 91 | background: linear-gradient($color 0%, $bottomColor 80%); 92 | } 93 | 94 | @mixin topbar-x-rotation(){ 95 | @keyframes topbar-x { 96 | 0% {top: 0px; transform: rotate(0deg); } 97 | 45% {top: 6px; transform: rotate(145deg); } 98 | 75% {transform: rotate(130deg); } 99 | 100% {transform: rotate(135deg); } 100 | } 101 | @-webkit-keyframes topbar-x { 102 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 103 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 104 | 75% {-webkit-transform: rotate(130deg); } 105 | 100% { -webkit-transform: rotate(135deg); } 106 | } 107 | @-moz-keyframes topbar-x { 108 | 0% {top: 0px; -moz-transform: rotate(0deg); } 109 | 45% {top: 6px; -moz-transform: rotate(145deg); } 110 | 75% {-moz-transform: rotate(130deg); } 111 | 100% { -moz-transform: rotate(135deg); } 112 | } 113 | } 114 | 115 | 116 | @mixin topbar-back-rotation(){ 117 | @keyframes topbar-back { 118 | 0% { top: 6px; transform: rotate(135deg); } 119 | 45% { transform: rotate(-10deg); } 120 | 75% { transform: rotate(5deg); } 121 | 100% { top: 0px; transform: rotate(0); } 122 | } 123 | 124 | @-webkit-keyframes topbar-back { 125 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 126 | 45% { -webkit-transform: rotate(-10deg); } 127 | 75% { -webkit-transform: rotate(5deg); } 128 | 100% { top: 0px; -webkit-transform: rotate(0); } 129 | } 130 | 131 | @-moz-keyframes topbar-back { 132 | 0% { top: 6px; -moz-transform: rotate(135deg); } 133 | 45% { -moz-transform: rotate(-10deg); } 134 | 75% { -moz-transform: rotate(5deg); } 135 | 100% { top: 0px; -moz-transform: rotate(0); } 136 | } 137 | } 138 | 139 | @mixin bottombar-x-rotation(){ 140 | @keyframes bottombar-x { 141 | 0% {bottom: 0px; transform: rotate(0deg);} 142 | 45% {bottom: 6px; transform: rotate(-145deg);} 143 | 75% {transform: rotate(-130deg);} 144 | 100% {transform: rotate(-135deg);} 145 | } 146 | @-webkit-keyframes bottombar-x { 147 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 148 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 149 | 75% {-webkit-transform: rotate(-130deg);} 150 | 100% {-webkit-transform: rotate(-135deg);} 151 | } 152 | @-moz-keyframes bottombar-x { 153 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 154 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 155 | 75% {-moz-transform: rotate(-130deg);} 156 | 100% {-moz-transform: rotate(-135deg);} 157 | } 158 | } 159 | 160 | @mixin bottombar-back-rotation{ 161 | @keyframes bottombar-back { 162 | 0% { bottom: 6px;transform: rotate(-135deg);} 163 | 45% { transform: rotate(10deg);} 164 | 75% { transform: rotate(-5deg);} 165 | 100% { bottom: 0px;transform: rotate(0);} 166 | } 167 | @-webkit-keyframes bottombar-back { 168 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 169 | 45% {-webkit-transform: rotate(10deg);} 170 | 75% {-webkit-transform: rotate(-5deg);} 171 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 172 | } 173 | @-moz-keyframes bottombar-back { 174 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 175 | 45% {-moz-transform: rotate(10deg);} 176 | 75% {-moz-transform: rotate(-5deg);} 177 | 100% {bottom: 0px;-moz-transform: rotate(0);} 178 | } 179 | 180 | } 181 | 182 | @mixin sidebar-text-color($text-color){ 183 | .nav { 184 | li { 185 | a, 186 | a i, 187 | a[data-toggle="collapse"], 188 | a[data-toggle="collapse"] i, 189 | a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon, 190 | a[data-toggle="collapse"] ~ div > ul > li > a { 191 | color: $text-color; 192 | opacity: .7; 193 | } 194 | 195 | &:hover:not(.active) > a, 196 | &:focus:not(.active) > a { 197 | opacity: 1; 198 | } 199 | } 200 | } 201 | 202 | .logo { 203 | .simple-text { 204 | color: $text-color; 205 | } 206 | &:after { 207 | background-color: $text-color; 208 | opacity: .4; 209 | } 210 | } 211 | 212 | .user { 213 | .info a span, 214 | .nav .sidebar-mini-icon, 215 | .nav .sidebar-normal { 216 | color: $text-color !important; 217 | } 218 | &:after { 219 | background-color: $text-color; 220 | opacity: .4; 221 | } 222 | } 223 | } 224 | 225 | @mixin badge-color($color) { 226 | border-color: $color; 227 | background-color: $color; 228 | } 229 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/plugins/_plugin-animate-bootstrap-notify.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/scss/paper-dashboard/plugins/_plugin-perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* perfect-scrollbar v0.6.13 */ 2 | .ps-container { 3 | -ms-touch-action: auto; 4 | touch-action: auto; 5 | overflow: hidden !important; 6 | -ms-overflow-style: none; } 7 | @supports (-ms-overflow-style: none) { 8 | .ps-container { 9 | overflow: auto !important; } } 10 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 11 | .ps-container { 12 | overflow: auto !important; } } 13 | .ps-container.ps-active-x > .ps-scrollbar-x-rail, 14 | .ps-container.ps-active-y > .ps-scrollbar-y-rail { 15 | display: block; 16 | background-color: transparent; } 17 | .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { 18 | background-color: #eee; 19 | opacity: 0.9; } 20 | .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { 21 | background-color: #999; 22 | height: 11px; } 23 | .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { 24 | background-color: #eee; 25 | opacity: 0.9; } 26 | .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { 27 | background-color: #999; 28 | width: 11px; } 29 | .ps-container > .ps-scrollbar-x-rail { 30 | display: none; 31 | position: absolute; 32 | /* please don't change 'position' */ 33 | opacity: 0; 34 | -webkit-transition: background-color .2s linear, opacity .2s linear; 35 | -o-transition: background-color .2s linear, opacity .2s linear; 36 | -moz-transition: background-color .2s linear, opacity .2s linear; 37 | transition: background-color .2s linear, opacity .2s linear; 38 | bottom: 0px; 39 | /* there must be 'bottom' for ps-scrollbar-x-rail */ 40 | height: 15px; } 41 | .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { 42 | position: absolute; 43 | /* please don't change 'position' */ 44 | background-color: #aaa; 45 | -webkit-border-radius: 6px; 46 | -moz-border-radius: 6px; 47 | border-radius: 6px; 48 | -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 49 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 50 | -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 51 | -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 52 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 53 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 54 | bottom: 2px; 55 | /* there must be 'bottom' for ps-scrollbar-x */ 56 | height: 6px; } 57 | .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x { 58 | height: 11px; } 59 | .ps-container > .ps-scrollbar-y-rail { 60 | display: none; 61 | position: absolute; 62 | /* please don't change 'position' */ 63 | opacity: 0; 64 | -webkit-transition: background-color .2s linear, opacity .2s linear; 65 | -o-transition: background-color .2s linear, opacity .2s linear; 66 | -moz-transition: background-color .2s linear, opacity .2s linear; 67 | transition: background-color .2s linear, opacity .2s linear; 68 | right: 0; 69 | /* there must be 'right' for ps-scrollbar-y-rail */ 70 | width: 15px; } 71 | .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { 72 | position: absolute; 73 | /* please don't change 'position' */ 74 | background-color: #aaa; 75 | -webkit-border-radius: 6px; 76 | -moz-border-radius: 6px; 77 | border-radius: 6px; 78 | -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 79 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 80 | -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 81 | -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 82 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 83 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 84 | right: 2px; 85 | /* there must be 'right' for ps-scrollbar-y */ 86 | width: 6px; } 87 | .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y { 88 | width: 11px; } 89 | .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { 90 | background-color: #eee; 91 | opacity: 0.9; } 92 | .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { 93 | background-color: #999; 94 | height: 11px; } 95 | .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { 96 | background-color: #eee; 97 | opacity: 0.9; } 98 | .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { 99 | background-color: #999; 100 | width: 11px; } 101 | .ps-container:hover > .ps-scrollbar-x-rail, 102 | .ps-container:hover > .ps-scrollbar-y-rail { 103 | opacity: 0.6; } 104 | .ps-container:hover > .ps-scrollbar-x-rail:hover { 105 | background-color: #eee; 106 | opacity: 0.9; } 107 | .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { 108 | background-color: #999; } 109 | .ps-container:hover > .ps-scrollbar-y-rail:hover { 110 | background-color: #eee; 111 | opacity: 0.9; } 112 | .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { 113 | background-color: #999; } 114 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | .close{ 3 | font-weight: 300; 4 | font-size: 29px; 5 | i.fa, 6 | i.fas, 7 | i.far, 8 | i.fal, 9 | i.fab, 10 | i.nc-icon{ 11 | font-size: 14px !important; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > a.btn{ 3 | &.btn-icon { 4 | &.btn-sm{ 5 | .fa, 6 | .far, 7 | .fas, 8 | .fal, 9 | .fab, 10 | .nc-icon{ 11 | font-size: $btn-icon-font-size-small; 12 | } 13 | } 14 | &.btn-lg{ 15 | .fa, 16 | .far, 17 | .fas, 18 | .fal, 19 | .fab, 20 | .nc-icon{ 21 | font-size: $btn-icon-font-size-lg; 22 | } 23 | } 24 | &:not(.btn-footer) .nc-icon, 25 | &:not(.btn-footer) .fa, 26 | &:not(.btn-footer) .far, 27 | &:not(.btn-footer) .fas, 28 | &:not(.btn-footer) .fal, 29 | &:not(.btn-footer) .fas{ 30 | position: absolute; 31 | top: 50%; 32 | left: 50%; 33 | transform: translate(-12px, -12px); 34 | line-height: 1.5626rem; 35 | width: 24px; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check { 2 | .form-check-sign{ 3 | font-family: "Font Awesome 5 Free"; 4 | font-weight: 900; 5 | -webkit-font-smoothing: antialiased; 6 | display: inline-block; 7 | font-style: normal; 8 | font-variant: normal; 9 | text-rendering: auto; 10 | line-height: 1; 11 | } 12 | } 13 | 14 | .form-check-radio .form-check-sign{ 15 | // font-family: 'FontAwesome'; 16 | font-family: "Font Awesome 5 Free"; 17 | font-weight: 400; 18 | -webkit-font-smoothing: antialiased; 19 | display: inline-block; 20 | font-style: normal; 21 | font-variant: normal; 22 | text-rendering: auto; 23 | line-height: 1; 24 | &::before{ 25 | font-size: 22px; 26 | content: "\f111"; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | display: inline-block; 30 | position: absolute; 31 | opacity: .50; 32 | left: 5px; 33 | top: -5px; 34 | } 35 | } 36 | .form-check .form-check-sign:after{ 37 | font-family: "Font Awesome 5 Free"; 38 | top: 4px; 39 | } 40 | .form-check-radio .form-check-sign::after,.form-check-radio input[type="radio"]:checked + .form-check-sign::after { 41 | font-family: "Font Awesome 5 Free"; 42 | top: -1px; 43 | } 44 | .form-check-radio .form-check-sign::before, .form-check-radio input[type="radio"]:checked + .form-check-sign::before { 45 | font-family: "Font Awesome 5 Free"; 46 | top: -1px; 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropup .dropdown-toggle:after, .dropdown .dropdown-toggle:after { 2 | margin-left: 3px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | .fixed-plugin{ 2 | .dropdown{ 3 | .dropdown-menu{ 4 | 5 | &:before{ 6 | right: -17px; 7 | top: 28%; 8 | } 9 | 10 | &:after{ 11 | right: -16px; 12 | top: 28%; 13 | } 14 | } 15 | } 16 | .gh-btn, 17 | .gh-count, 18 | .gh-ico { 19 | float: left; 20 | } 21 | .gh-btn, 22 | .gh-count { 23 | padding: 2px 5px 2px 4px; 24 | color: #333; 25 | text-decoration: none; 26 | white-space: nowrap; 27 | cursor: pointer; 28 | border-radius: 3px; 29 | } 30 | .gh-btn { 31 | background-color: #eee; 32 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcfc), color-stop(100%, #eee)); 33 | background-image: -webkit-linear-gradient(top, #fcfcfc 0, #eee 100%); 34 | background-image: -moz-linear-gradient(top, #fcfcfc 0, #eee 100%); 35 | background-image: -ms-linear-gradient(top, #fcfcfc 0, #eee 100%); 36 | background-image: -o-linear-gradient(top, #fcfcfc 0, #eee 100%); 37 | background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%); 38 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#eeeeee', GradientType=0); 39 | background-repeat: no-repeat; 40 | border: 1px solid #d5d5d5; 41 | } 42 | .gh-btn:hover, 43 | .gh-btn:focus { 44 | text-decoration: none; 45 | background-color: #ddd; 46 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(100%, #ddd)); 47 | background-image: -webkit-linear-gradient(top, #eee 0, #ddd 100%); 48 | background-image: -moz-linear-gradient(top, #eee 0, #ddd 100%); 49 | background-image: -ms-linear-gradient(top, #eee 0, #ddd 100%); 50 | background-image: -o-linear-gradient(top, #eee 0, #ddd 100%); 51 | background-image: linear-gradient(to bottom, #eee 0, #ddd 100%); 52 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); 53 | border-color: #ccc; 54 | } 55 | .gh-btn:active { 56 | background-image: none; 57 | background-color: #dcdcdc; 58 | border-color: #b5b5b5; 59 | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); 60 | } 61 | .gh-ico { 62 | width: 14px; 63 | height: 14px; 64 | margin-right: 4px; 65 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4='); 66 | background-size: 100% 100%; 67 | background-repeat: no-repeat; 68 | } 69 | .gh-count { 70 | position: relative; 71 | display: none; /* hidden to start */ 72 | margin-left: 4px; 73 | background-color: #fafafa; 74 | border: 1px solid #d4d4d4; 75 | } 76 | .gh-count:hover, 77 | .gh-count:focus { 78 | color: #4183C4; 79 | } 80 | .gh-count:before, 81 | .gh-count:after { 82 | content: ''; 83 | position: absolute; 84 | display: inline-block; 85 | width: 0; 86 | height: 0; 87 | border-color: transparent; 88 | border-style: solid; 89 | } 90 | .gh-count:before { 91 | top: 50%; 92 | left: -3px; 93 | margin-top: -4px; 94 | border-width: 4px 4px 4px 0; 95 | border-right-color: #fafafa; 96 | } 97 | .gh-count:after { 98 | top: 50%; 99 | left: -4px; 100 | z-index: -1; 101 | margin-top: -5px; 102 | border-width: 5px 5px 5px 0; 103 | border-right-color: #d4d4d4; 104 | } 105 | .github-btn-large { 106 | height: 30px; 107 | } 108 | .github-btn-large .gh-btn, 109 | .github-btn-large .gh-count { 110 | padding: 3px 10px 3px 8px; 111 | font-size: 16px; 112 | line-height: 22px; 113 | border-radius: 4px; 114 | } 115 | .github-btn-large .gh-ico { 116 | width: 20px; 117 | height: 20px; 118 | } 119 | .github-btn-large .gh-count { 120 | margin-left: 6px; 121 | } 122 | .github-btn-large .gh-count:before { 123 | left: -5px; 124 | margin-top: -6px; 125 | border-width: 6px 6px 6px 0; 126 | } 127 | .github-btn-large .gh-count:after { 128 | left: -6px; 129 | margin-top: -7px; 130 | border-width: 7px 7px 7px 0; 131 | } 132 | .github-btn{ 133 | display: inline-block; 134 | .gh-btn{ 135 | .gh-ico{ 136 | margin-top: 3px; 137 | } 138 | } 139 | } 140 | .SocialMediaShareButton{ 141 | display: inline-block; 142 | } 143 | } 144 | @media screen and (max-width: 400px){ 145 | .fixed-plugin .dropdown-menu { 146 | width: 250px; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_inputs.scss: -------------------------------------------------------------------------------- 1 | select.form-control:not([size]):not([multiple]) { 2 | height: calc(2.25rem + 4px); 3 | } 4 | 5 | .form-control { 6 | height: unset; 7 | } 8 | // Input files - hide actual input - requires specific markup in the sample. 9 | .form-group input[type=file] { 10 | opacity: 1; 11 | position: unset; 12 | top: 0; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | width: 100%; 17 | height: unset; 18 | z-index: unset; 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | .navbar-nav{ 3 | .nav-link{ 4 | i.fa + p, 5 | i.fal + p, 6 | i.fas + p, 7 | i.fab + p, 8 | i.far + p, 9 | i.nc-icon + p{ 10 | margin-left: 7px; 11 | } 12 | i.fa, 13 | i.fal, 14 | i.fas, 15 | i.fab, 16 | i.far, 17 | i.nc-icon{ 18 | font-size: 18px; 19 | position: relative; 20 | top: 3px; 21 | text-align: center; 22 | width: 21px; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_nucleo-outline.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------- 2 | 3 | nucleo-icons Web Font - built using nucleoapp.com 4 | License - nucleoapp.com/license/ 5 | 6 | -------------------------------- */ 7 | @font-face { 8 | font-family: 'nucleo-icons'; 9 | src: url('~assets/fonts/nucleo-icons.eot'); 10 | src: url('~assets/fonts/nucleo-icons.eot') format('embedded-opentype'), url('~assets/fonts/nucleo-icons.woff2') format('woff2'), url('~assets/fonts/nucleo-icons.woff') format('woff'), url('~assets/fonts/nucleo-icons.ttf'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 991px){ 2 | .navbar-nav{ 3 | .nav-link{ 4 | i.fa, 5 | i.fal, 6 | i.fas, 7 | i.fab, 8 | i.far, 9 | i.nc-icon{ 10 | opacity: .5; 11 | } 12 | } 13 | } 14 | .navbar .dropdown.show .dropdown-menu{ 15 | border: 0; 16 | -webkit-transition: none; 17 | transition: none; 18 | -webkit-box-shadow: none; 19 | width: auto; 20 | margin: 0 1rem; 21 | box-shadow: none; 22 | position: static!important; 23 | padding-left: 10px; 24 | display: block!important; 25 | -webkit-transform: translateZ(0)!important; 26 | transform: translateZ(0)!important; 27 | background: inherit; 28 | &:before,&:after{ 29 | display: none; 30 | } 31 | } 32 | .navbar.bg-dark .dropdown.show .dropdown-menu a{ 33 | color: $white-color; 34 | } 35 | } 36 | 37 | @media screen and (min-width: 992px){ 38 | 39 | .sidebar{ 40 | .sidebar-wrapper{ 41 | li.active{ 42 | > a:not([data-toggle="collapse"]){ 43 | &:before{ 44 | border-right: 18px solid $medium-gray; 45 | border-top: 18px solid transparent; 46 | border-bottom: 18px solid transparent; 47 | right: -15px; 48 | top: 6px; 49 | } 50 | 51 | &:after{ 52 | border-right: 17px solid $default-body-bg; 53 | border-top: 17px solid transparent; 54 | border-bottom: 17px solid transparent; 55 | right: -15px; 56 | top: 7px; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | 63 | } 64 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/custom/_typography.scss: -------------------------------------------------------------------------------- 1 | *,a{ 2 | &,&:focus{ 3 | outline: none; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/scss/paper-dashboard/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | @import "custom/alerts"; 2 | @import "custom/buttons"; 3 | @import "custom/checkboxes-radio"; 4 | @import "custom/dropdown"; 5 | @import "custom/fixed-plugin"; 6 | @import "custom/inputs"; 7 | @import "custom/navbar"; 8 | @import "custom/nucleo-outline"; 9 | @import "custom/responsive"; 10 | @import "custom/typography"; 11 | -------------------------------------------------------------------------------- /src/components/FixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | import { Button } from "reactstrap"; 22 | 23 | function FixedPlugin(props) { 24 | const [classes, setClasses] = React.useState("dropdown show"); 25 | const handleClick = () => { 26 | if (classes === "dropdown") { 27 | setClasses("dropdown show"); 28 | } else { 29 | setClasses("dropdown"); 30 | } 31 | }; 32 | return ( 33 |
34 |
35 |
36 | 37 |
38 |
    39 |
  • SIDEBAR BACKGROUND
    • 40 |
  • 41 |
    42 | { 50 | props.handleBgClick("black"); 51 | }} 52 | /> 53 | { 61 | props.handleBgClick("white"); 62 | }} 63 | /> 64 |
    65 |
    • 66 |
  • SIDEBAR ACTIVE COLOR
    • 67 |
  • 68 |
    69 | { 77 | props.handleActiveClick("primary"); 78 | }} 79 | /> 80 | { 88 | props.handleActiveClick("info"); 89 | }} 90 | /> 91 | { 99 | props.handleActiveClick("success"); 100 | }} 101 | /> 102 | { 110 | props.handleActiveClick("warning"); 111 | }} 112 | /> 113 | { 121 | props.handleActiveClick("danger"); 122 | }} 123 | /> 124 |
    125 |
    • 126 |
  • 127 | 135 |
    • 136 |
  • 137 | 146 |
    • 147 |
  • Want more components?
    • 148 |
  • 149 | 158 |
    • 159 |
160 |
161 |
162 | ); 163 | } 164 | 165 | export default FixedPlugin; 166 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | /*eslint-disable*/ 20 | import React from "react"; 21 | import { Container, Row } from "reactstrap"; 22 | // used for making the prop types of this component 23 | import PropTypes from "prop-types"; 24 | 25 | function Footer(props) { 26 | return ( 27 | 58 | ); 59 | } 60 | 61 | Footer.propTypes = { 62 | default: PropTypes.bool, 63 | fluid: PropTypes.bool, 64 | }; 65 | 66 | export default Footer; 67 | -------------------------------------------------------------------------------- /src/components/Navbars/DemoNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | import { Link, useLocation } from "react-router-dom"; 21 | import { 22 | Collapse, 23 | Navbar, 24 | NavbarToggler, 25 | NavbarBrand, 26 | Nav, 27 | NavItem, 28 | Dropdown, 29 | DropdownToggle, 30 | DropdownMenu, 31 | DropdownItem, 32 | Container, 33 | InputGroup, 34 | InputGroupText, 35 | InputGroupAddon, 36 | Input, 37 | } from "reactstrap"; 38 | 39 | import routes from "routes.js"; 40 | 41 | function Header(props) { 42 | const [isOpen, setIsOpen] = React.useState(false); 43 | const [dropdownOpen, setDropdownOpen] = React.useState(false); 44 | const [color, setColor] = React.useState("transparent"); 45 | const sidebarToggle = React.useRef(); 46 | const location = useLocation(); 47 | const toggle = () => { 48 | if (isOpen) { 49 | setColor("transparent"); 50 | } else { 51 | setColor("dark"); 52 | } 53 | setIsOpen(!isOpen); 54 | }; 55 | const dropdownToggle = (e) => { 56 | setDropdownOpen(!dropdownOpen); 57 | }; 58 | const getBrand = () => { 59 | let brandName = "Default Brand"; 60 | routes.map((prop, key) => { 61 | if (window.location.href.indexOf(prop.layout + prop.path) !== -1) { 62 | brandName = prop.name; 63 | } 64 | return null; 65 | }); 66 | return brandName; 67 | }; 68 | const openSidebar = () => { 69 | document.documentElement.classList.toggle("nav-open"); 70 | sidebarToggle.current.classList.toggle("toggled"); 71 | }; 72 | // function that adds color dark/transparent to the navbar on resize (this is for the collapse) 73 | const updateColor = () => { 74 | if (window.innerWidth < 993 && isOpen) { 75 | setColor("dark"); 76 | } else { 77 | setColor("transparent"); 78 | } 79 | }; 80 | React.useEffect(() => { 81 | window.addEventListener("resize", updateColor.bind(this)); 82 | }); 83 | React.useEffect(() => { 84 | if ( 85 | window.innerWidth < 993 && 86 | document.documentElement.className.indexOf("nav-open") !== -1 87 | ) { 88 | document.documentElement.classList.toggle("nav-open"); 89 | sidebarToggle.current.classList.toggle("toggled"); 90 | } 91 | }, [location]); 92 | return ( 93 | // add or remove classes depending if we are on full-screen-maps page or not 94 | 106 | 107 |
108 |
109 | 119 |
120 | {getBrand()} 121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 |
129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 173 |
174 | 175 | 176 | ); 177 | } 178 | 179 | export default Header; 180 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | import { NavLink, useLocation } from "react-router-dom"; 21 | import { Nav } from "reactstrap"; 22 | // javascript plugin used to create scrollbars on windows 23 | import PerfectScrollbar from "perfect-scrollbar"; 24 | 25 | import logo from "logo.svg"; 26 | 27 | var ps; 28 | 29 | function Sidebar(props) { 30 | const location = useLocation(); 31 | const sidebar = React.useRef(); 32 | // verifies if routeName is the one active (in browser input) 33 | const activeRoute = (routeName) => { 34 | return location.pathname.indexOf(routeName) > -1 ? "active" : ""; 35 | }; 36 | React.useEffect(() => { 37 | if (navigator.platform.indexOf("Win") > -1) { 38 | ps = new PerfectScrollbar(sidebar.current, { 39 | suppressScrollX: true, 40 | suppressScrollY: false, 41 | }); 42 | } 43 | return function cleanup() { 44 | if (navigator.platform.indexOf("Win") > -1) { 45 | ps.destroy(); 46 | } 47 | }; 48 | }); 49 | return ( 50 |
55 | 71 |
72 | 89 |
90 |
91 | ); 92 | } 93 | 94 | export default Sidebar; 95 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | import ReactDOM from "react-dom/client"; 21 | import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; 22 | 23 | import "bootstrap/dist/css/bootstrap.css"; 24 | import "assets/scss/paper-dashboard.scss?v=1.3.0"; 25 | import "assets/demo/demo.css"; 26 | import "perfect-scrollbar/css/perfect-scrollbar.css"; 27 | 28 | import AdminLayout from "layouts/Admin.js"; 29 | 30 | const root = ReactDOM.createRoot(document.getElementById("root")); 31 | 32 | root.render( 33 | 34 | 35 | } /> 36 | } /> 37 | 38 | 39 | ); 40 | -------------------------------------------------------------------------------- /src/layouts/Admin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | // javascript plugin used to create scrollbars on windows 21 | import PerfectScrollbar from "perfect-scrollbar"; 22 | import { Route, Routes, useLocation } from "react-router-dom"; 23 | 24 | import DemoNavbar from "components/Navbars/DemoNavbar.js"; 25 | import Footer from "components/Footer/Footer.js"; 26 | import Sidebar from "components/Sidebar/Sidebar.js"; 27 | import FixedPlugin from "components/FixedPlugin/FixedPlugin.js"; 28 | 29 | import routes from "routes.js"; 30 | 31 | var ps; 32 | 33 | function Dashboard(props) { 34 | const [backgroundColor, setBackgroundColor] = React.useState("black"); 35 | const [activeColor, setActiveColor] = React.useState("info"); 36 | const mainPanel = React.useRef(); 37 | const location = useLocation(); 38 | React.useEffect(() => { 39 | if (navigator.platform.indexOf("Win") > -1) { 40 | ps = new PerfectScrollbar(mainPanel.current); 41 | document.body.classList.toggle("perfect-scrollbar-on"); 42 | } 43 | return function cleanup() { 44 | if (navigator.platform.indexOf("Win") > -1) { 45 | ps.destroy(); 46 | document.body.classList.toggle("perfect-scrollbar-on"); 47 | } 48 | }; 49 | }); 50 | React.useEffect(() => { 51 | mainPanel.current.scrollTop = 0; 52 | document.scrollingElement.scrollTop = 0; 53 | }, [location]); 54 | const handleActiveClick = (color) => { 55 | setActiveColor(color); 56 | }; 57 | const handleBgClick = (color) => { 58 | setBackgroundColor(color); 59 | }; 60 | return ( 61 |
62 | 68 |
69 | 70 | 71 | {routes.map((prop, key) => { 72 | return ( 73 | 79 | ); 80 | })} 81 | 82 |
83 |
84 | 90 |
91 | ); 92 | } 93 | 94 | export default Dashboard; 95 | -------------------------------------------------------------------------------- /src/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import Dashboard from "views/Dashboard.js"; 20 | import Notifications from "views/Notifications.js"; 21 | import Icons from "views/Icons.js"; 22 | import Typography from "views/Typography.js"; 23 | import TableList from "views/Tables.js"; 24 | import Maps from "views/Map.js"; 25 | import UserPage from "views/User.js"; 26 | import UpgradeToPro from "views/Upgrade.js"; 27 | 28 | var routes = [ 29 | { 30 | path: "/dashboard", 31 | name: "Dashboard", 32 | icon: "nc-icon nc-bank", 33 | component: , 34 | layout: "/admin", 35 | }, 36 | { 37 | path: "/icons", 38 | name: "Icons", 39 | icon: "nc-icon nc-diamond", 40 | component: , 41 | layout: "/admin", 42 | }, 43 | { 44 | path: "/maps", 45 | name: "Maps", 46 | icon: "nc-icon nc-pin-3", 47 | component: , 48 | layout: "/admin", 49 | }, 50 | { 51 | path: "/notifications", 52 | name: "Notifications", 53 | icon: "nc-icon nc-bell-55", 54 | component: , 55 | layout: "/admin", 56 | }, 57 | { 58 | path: "/user-page", 59 | name: "User Profile", 60 | icon: "nc-icon nc-single-02", 61 | component: , 62 | layout: "/admin", 63 | }, 64 | { 65 | path: "/tables", 66 | name: "Table List", 67 | icon: "nc-icon nc-tile-56", 68 | component: , 69 | layout: "/admin", 70 | }, 71 | { 72 | path: "/typography", 73 | name: "Typography", 74 | icon: "nc-icon nc-caps-small", 75 | component: , 76 | layout: "/admin", 77 | }, 78 | { 79 | pro: true, 80 | path: "/upgrade", 81 | name: "Upgrade to PRO", 82 | icon: "nc-icon nc-spaceship", 83 | component: , 84 | layout: "/admin", 85 | }, 86 | ]; 87 | export default routes; 88 | -------------------------------------------------------------------------------- /src/variables/charts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | const dashboard24HoursPerformanceChart = { 20 | data: (canvas) => { 21 | return { 22 | labels: [ 23 | "Jan", 24 | "Feb", 25 | "Mar", 26 | "Apr", 27 | "May", 28 | "Jun", 29 | "Jul", 30 | "Aug", 31 | "Sep", 32 | "Oct", 33 | ], 34 | datasets: [ 35 | { 36 | borderColor: "#6bd098", 37 | backgroundColor: "#6bd098", 38 | pointRadius: 0, 39 | pointHoverRadius: 0, 40 | borderWidth: 3, 41 | tension: 0.4, 42 | fill: true, 43 | data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354], 44 | }, 45 | { 46 | borderColor: "#f17e5d", 47 | backgroundColor: "#f17e5d", 48 | pointRadius: 0, 49 | pointHoverRadius: 0, 50 | borderWidth: 3, 51 | tension: 0.4, 52 | fill: true, 53 | data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420], 54 | }, 55 | { 56 | borderColor: "#fcc468", 57 | backgroundColor: "#fcc468", 58 | pointRadius: 0, 59 | pointHoverRadius: 0, 60 | borderWidth: 3, 61 | tension: 0.4, 62 | fill: true, 63 | data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484], 64 | }, 65 | ], 66 | }; 67 | }, 68 | options: { 69 | plugins: { 70 | legend: { display: false }, 71 | tooltip: { enabled: false }, 72 | }, 73 | scales: { 74 | y: { 75 | ticks: { 76 | color: "#9f9f9f", 77 | beginAtZero: false, 78 | maxTicksLimit: 5, 79 | }, 80 | grid: { 81 | drawBorder: false, 82 | display: false, 83 | }, 84 | }, 85 | x: { 86 | barPercentage: 1.6, 87 | grid: { 88 | drawBorder: false, 89 | display: false, 90 | }, 91 | ticks: { 92 | padding: 20, 93 | color: "#9f9f9f", 94 | }, 95 | }, 96 | }, 97 | }, 98 | }; 99 | 100 | const dashboardEmailStatisticsChart = { 101 | data: (canvas) => { 102 | return { 103 | labels: [1, 2, 3], 104 | datasets: [ 105 | { 106 | label: "Emails", 107 | pointRadius: 0, 108 | pointHoverRadius: 0, 109 | backgroundColor: ["#e3e3e3", "#4acccd", "#fcc468", "#ef8157"], 110 | borderWidth: 0, 111 | data: [342, 480, 530, 120], 112 | }, 113 | ], 114 | }; 115 | }, 116 | options: { 117 | plugins: { 118 | legend: { display: false }, 119 | tooltip: { enabled: false }, 120 | }, 121 | maintainAspectRatio: false, 122 | pieceLabel: { 123 | render: "percentage", 124 | fontColor: ["white"], 125 | precision: 2, 126 | }, 127 | scales: { 128 | y: { 129 | ticks: { 130 | display: false, 131 | }, 132 | grid: { 133 | drawBorder: false, 134 | display: false, 135 | }, 136 | }, 137 | x: { 138 | barPercentage: 1.6, 139 | grid: { 140 | drawBorder: false, 141 | display: false, 142 | }, 143 | ticks: { 144 | display: false, 145 | }, 146 | }, 147 | }, 148 | }, 149 | }; 150 | 151 | const dashboardNASDAQChart = { 152 | data: (canvas) => { 153 | return { 154 | labels: [ 155 | "Jan", 156 | "Feb", 157 | "Mar", 158 | "Apr", 159 | "May", 160 | "Jun", 161 | "Jul", 162 | "Aug", 163 | "Sep", 164 | "Oct", 165 | "Nov", 166 | "Dec", 167 | ], 168 | datasets: [ 169 | { 170 | data: [0, 19, 15, 20, 30, 40, 40, 50, 25, 30, 50, 70], 171 | fill: false, 172 | borderColor: "#fbc658", 173 | backgroundColor: "transparent", 174 | pointBorderColor: "#fbc658", 175 | pointRadius: 4, 176 | pointHoverRadius: 4, 177 | pointBorderWidth: 8, 178 | tension: 0.4, 179 | }, 180 | { 181 | data: [0, 5, 10, 12, 20, 27, 30, 34, 42, 45, 55, 63], 182 | fill: false, 183 | borderColor: "#51CACF", 184 | backgroundColor: "transparent", 185 | pointBorderColor: "#51CACF", 186 | pointRadius: 4, 187 | pointHoverRadius: 4, 188 | pointBorderWidth: 8, 189 | tension: 0.4, 190 | }, 191 | ], 192 | }; 193 | }, 194 | options: { 195 | plugins: { 196 | legend: { display: false }, 197 | }, 198 | }, 199 | }; 200 | 201 | module.exports = { 202 | dashboard24HoursPerformanceChart, 203 | dashboardEmailStatisticsChart, 204 | dashboardNASDAQChart, 205 | }; 206 | -------------------------------------------------------------------------------- /src/variables/general.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | // ############################## 20 | // // // table head data and table body data for Tables view 21 | // ############################# 22 | 23 | const thead = ["Name", "Country", "City", "Salary"]; 24 | const tbody = [ 25 | { 26 | className: "table-success", 27 | data: ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738"], 28 | }, 29 | { 30 | className: "", 31 | data: ["Minerva Hooper", "Curaçao", "Sinaai-Waas", "$23,789"], 32 | }, 33 | { 34 | className: "table-info", 35 | data: ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"], 36 | }, 37 | { 38 | className: "", 39 | data: ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"], 40 | }, 41 | { 42 | className: "table-danger", 43 | data: ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"], 44 | }, 45 | { className: "", data: ["Mason Porter", "Chile", "Gloucester", "$78,615"] }, 46 | { 47 | className: "table-warning", 48 | data: ["Jon Porter", "Portugal", "Gloucester", "$98,615"], 49 | }, 50 | ]; 51 | 52 | // data for of table in TableList view 53 | // data for of table in TableList view 54 | export { thead, tbody }; 55 | -------------------------------------------------------------------------------- /src/variables/icons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | const icons = [ 20 | { 21 | name: "nc-air-baloon", 22 | content: "\\ea01", 23 | }, 24 | { 25 | name: "nc-album-2", 26 | content: "\\ea02", 27 | }, 28 | { 29 | name: "nc-alert-circle-i", 30 | content: "\\ea04", 31 | }, 32 | { 33 | name: "nc-align-center", 34 | content: "\\ea03", 35 | }, 36 | { 37 | name: "nc-align-left-2", 38 | content: "\\ea05", 39 | }, 40 | { 41 | name: "nc-ambulance", 42 | content: "\\ea06", 43 | }, 44 | { 45 | name: "nc-app", 46 | content: "\\ea07", 47 | }, 48 | { 49 | name: "nc-atom", 50 | content: "\\ea08", 51 | }, 52 | { 53 | name: "nc-badge", 54 | content: "\\ea09", 55 | }, 56 | { 57 | name: "nc-bag-16", 58 | content: "\\ea0a", 59 | }, 60 | { 61 | name: "nc-bank", 62 | content: "\\ea0b", 63 | }, 64 | { 65 | name: "nc-basket", 66 | content: "\\ea0c", 67 | }, 68 | { 69 | name: "nc-bell-55", 70 | content: "\\ea0d", 71 | }, 72 | { 73 | name: "nc-bold", 74 | content: "\\ea0e", 75 | }, 76 | { 77 | name: "nc-book-bookmark", 78 | content: "\\ea0f", 79 | }, 80 | { 81 | name: "nc-bookmark-2", 82 | content: "\\ea10", 83 | }, 84 | { 85 | name: "nc-box-2", 86 | content: "\\ea11", 87 | }, 88 | { 89 | name: "nc-box", 90 | content: "\\ea12", 91 | }, 92 | { 93 | name: "nc-briefcase-24", 94 | content: "\\ea13", 95 | }, 96 | { 97 | name: "nc-bulb-63", 98 | content: "\\ea14", 99 | }, 100 | { 101 | name: "nc-bullet-list-67", 102 | content: "\\ea15", 103 | }, 104 | { 105 | name: "nc-bus-front-12", 106 | content: "\\ea16", 107 | }, 108 | { 109 | name: "nc-button-pause", 110 | content: "\\ea17", 111 | }, 112 | { 113 | name: "nc-button-play", 114 | content: "\\ea18", 115 | }, 116 | { 117 | name: "nc-button-power", 118 | content: "\\ea19", 119 | }, 120 | { 121 | name: "nc-calendar-60", 122 | content: "\\ea1a", 123 | }, 124 | { 125 | name: "nc-camera-compact", 126 | content: "\\ea1b", 127 | }, 128 | { 129 | name: "nc-caps-small", 130 | content: "\\ea1c", 131 | }, 132 | { 133 | name: "nc-cart-simple", 134 | content: "\\ea1d", 135 | }, 136 | { 137 | name: "nc-chart-bar-32", 138 | content: "\\ea1e", 139 | }, 140 | { 141 | name: "nc-chart-pie-36", 142 | content: "\\ea1f", 143 | }, 144 | { 145 | name: "nc-chat-33", 146 | content: "\\ea20", 147 | }, 148 | { 149 | name: "nc-check-2", 150 | content: "\\ea21", 151 | }, 152 | { 153 | name: "nc-circle-10", 154 | content: "\\ea22", 155 | }, 156 | { 157 | name: "nc-cloud-download-93", 158 | content: "\\ea23", 159 | }, 160 | { 161 | name: "nc-cloud-upload-94", 162 | content: "\\ea24", 163 | }, 164 | { 165 | name: "nc-compass-05", 166 | content: "\\ea25", 167 | }, 168 | { 169 | name: "nc-controller-modern", 170 | content: "\\ea26", 171 | }, 172 | { 173 | name: "nc-credit-card", 174 | content: "\\ea27", 175 | }, 176 | { 177 | name: "nc-delivery-fast", 178 | content: "\\ea28", 179 | }, 180 | { 181 | name: "nc-diamond", 182 | content: "\\ea29", 183 | }, 184 | { 185 | name: "nc-email-85", 186 | content: "\\ea2a", 187 | }, 188 | { 189 | name: "nc-favourite-28", 190 | content: "\\ea2b", 191 | }, 192 | { 193 | name: "nc-glasses-2", 194 | content: "\\ea2c", 195 | }, 196 | { 197 | name: "nc-globe-2", 198 | content: "\\ea2d", 199 | }, 200 | { 201 | name: "nc-globe", 202 | content: "\\ea2e", 203 | }, 204 | { 205 | name: "nc-hat-3", 206 | content: "\\ea2f", 207 | }, 208 | { 209 | name: "nc-headphones", 210 | content: "\\ea30", 211 | }, 212 | { 213 | name: "nc-html5", 214 | content: "\\ea31", 215 | }, 216 | { 217 | name: "nc-image", 218 | content: "\\ea32", 219 | }, 220 | { 221 | name: "nc-istanbul", 222 | content: "\\ea33", 223 | }, 224 | { 225 | name: "nc-key-25", 226 | content: "\\ea34", 227 | }, 228 | { 229 | name: "nc-laptop", 230 | content: "\\ea35", 231 | }, 232 | { 233 | name: "nc-layout-11", 234 | content: "\\ea36", 235 | }, 236 | { 237 | name: "nc-lock-circle-open", 238 | content: "\\ea37", 239 | }, 240 | { 241 | name: "nc-map-big", 242 | content: "\\ea38", 243 | }, 244 | { 245 | name: "nc-minimal-down", 246 | content: "\\ea39", 247 | }, 248 | { 249 | name: "nc-minimal-left", 250 | content: "\\ea3a", 251 | }, 252 | { 253 | name: "nc-minimal-right", 254 | content: "\\ea3b", 255 | }, 256 | { 257 | name: "nc-minimal-up", 258 | content: "\\ea3c", 259 | }, 260 | { 261 | name: "nc-mobile", 262 | content: "\\ea3d", 263 | }, 264 | { 265 | name: "nc-money-coins", 266 | content: "\\ea3e", 267 | }, 268 | { 269 | name: "nc-note-03", 270 | content: "\\ea3f", 271 | }, 272 | { 273 | name: "nc-palette", 274 | content: "\\ea40", 275 | }, 276 | { 277 | name: "nc-paper", 278 | content: "\\ea41", 279 | }, 280 | { 281 | name: "nc-pin-3", 282 | content: "\\ea42", 283 | }, 284 | { 285 | name: "nc-planet", 286 | content: "\\ea43", 287 | }, 288 | { 289 | name: "nc-refresh-69", 290 | content: "\\ea44", 291 | }, 292 | { 293 | name: "nc-ruler-pencil", 294 | content: "\\ea45", 295 | }, 296 | { 297 | name: "nc-satisfied", 298 | content: "\\ea46", 299 | }, 300 | { 301 | name: "nc-scissors", 302 | content: "\\ea47", 303 | }, 304 | { 305 | name: "nc-send", 306 | content: "\\ea48", 307 | }, 308 | { 309 | name: "nc-settings-gear-65", 310 | content: "\\ea49", 311 | }, 312 | { 313 | name: "nc-settings", 314 | content: "\\ea4a", 315 | }, 316 | { 317 | name: "nc-share-66", 318 | content: "\\ea4b", 319 | }, 320 | { 321 | name: "nc-shop", 322 | content: "\\ea4c", 323 | }, 324 | { 325 | name: "nc-simple-add", 326 | content: "\\ea4d", 327 | }, 328 | { 329 | name: "nc-simple-delete", 330 | content: "\\ea4e", 331 | }, 332 | { 333 | name: "nc-simple-remove", 334 | content: "\\ea4f", 335 | }, 336 | { 337 | name: "nc-single-02", 338 | content: "\\ea50", 339 | }, 340 | { 341 | name: "nc-single-copy-04", 342 | content: "\\ea51", 343 | }, 344 | { 345 | name: "nc-sound-wave", 346 | content: "\\ea52", 347 | }, 348 | { 349 | name: "nc-spaceship", 350 | content: "\\ea53", 351 | }, 352 | { 353 | name: "nc-sun-fog-29", 354 | content: "\\ea54", 355 | }, 356 | { 357 | name: "nc-support-17", 358 | content: "\\ea55", 359 | }, 360 | { 361 | name: "nc-tablet-2", 362 | content: "\\ea56", 363 | }, 364 | { 365 | name: "nc-tag-content", 366 | content: "\\ea57", 367 | }, 368 | { 369 | name: "nc-tap-01", 370 | content: "\\ea58", 371 | }, 372 | { 373 | name: "nc-tie-bow", 374 | content: "\\ea59", 375 | }, 376 | { 377 | name: "nc-tile-56", 378 | content: "\\ea5a", 379 | }, 380 | { 381 | name: "nc-time-alarm", 382 | content: "\\ea5b", 383 | }, 384 | { 385 | name: "nc-touch-id", 386 | content: "\\ea5c", 387 | }, 388 | { 389 | name: "nc-trophy", 390 | content: "\\ea5d", 391 | }, 392 | { 393 | name: "nc-tv-2", 394 | content: "\\ea5e", 395 | }, 396 | { 397 | name: "nc-umbrella-13", 398 | content: "\\ea5f", 399 | }, 400 | { 401 | name: "nc-user-run", 402 | content: "\\ea60", 403 | }, 404 | { 405 | name: "nc-vector", 406 | content: "\\ea61", 407 | }, 408 | { 409 | name: "nc-watch-time", 410 | content: "\\ea62", 411 | }, 412 | { 413 | name: "nc-world-2", 414 | content: "\\ea63", 415 | }, 416 | { 417 | name: "nc-zoom-split", 418 | content: "\\ea64", 419 | }, 420 | ]; 421 | 422 | export default icons; 423 | -------------------------------------------------------------------------------- /src/views/Dashboard.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | // react plugin used to create charts 21 | import { Line, Pie } from "react-chartjs-2"; 22 | // reactstrap components 23 | import { 24 | Card, 25 | CardHeader, 26 | CardBody, 27 | CardFooter, 28 | CardTitle, 29 | Row, 30 | Col, 31 | } from "reactstrap"; 32 | // core components 33 | import { 34 | dashboard24HoursPerformanceChart, 35 | dashboardEmailStatisticsChart, 36 | dashboardNASDAQChart, 37 | } from "variables/charts.js"; 38 | 39 | function Dashboard() { 40 | return ( 41 | <> 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 |

Capacity

56 | 150GB 57 |

58 |

59 | 60 | 61 | 62 | 63 |
64 |
65 | Update Now 66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 |
78 | 79 | 80 |
81 |

Revenue

82 | $ 1,345 83 |

84 |

85 | 86 | 87 | 88 | 89 |
90 |
91 | Last day 92 |
93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |
102 | 103 |
104 | 105 | 106 |
107 |

Errors

108 | 23 109 |

110 |

111 | 112 | 113 | 114 | 115 |
116 |
117 | In the last hour 118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
128 | 129 |
130 | 131 | 132 |
133 |

Followers

134 | +45K 135 |

136 |

137 | 138 | 139 | 140 | 141 |
142 |
143 | Update now 144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | Users Behavior 154 |

24 Hours performance

155 | 156 | 157 | 163 | 164 | 165 |
166 |
167 | Updated 3 minutes ago 168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | Email Statistics 178 |

Last Campaign Performance

179 | 180 | 181 | 185 | 186 | 187 |
188 | Opened{" "} 189 | Read{" "} 190 | Deleted{" "} 191 | Unopened 192 |
193 |
194 |
195 | Number of emails sent 196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | NASDAQ: AAPL 204 |

Line Chart with Points

205 | 206 | 207 | 213 | 214 | 215 |
216 | Tesla Model S{" "} 217 | BMW 5 Series 218 |
219 |
220 |
221 | Data information certified 222 |
223 | 224 | 225 | 226 | 227 |
228 | 229 | ); 230 | } 231 | 232 | export default Dashboard; 233 | -------------------------------------------------------------------------------- /src/views/Map.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | // reactstrap components 21 | import { Card, CardHeader, CardBody, Row, Col } from "reactstrap"; 22 | 23 | const MapWrapper = () => { 24 | const mapRef = React.useRef(null); 25 | React.useEffect(() => { 26 | let google = window.google; 27 | let map = mapRef.current; 28 | let lat = "40.748817"; 29 | let lng = "-73.985428"; 30 | const myLatlng = new google.maps.LatLng(lat, lng); 31 | const mapOptions = { 32 | zoom: 13, 33 | center: myLatlng, 34 | scrollwheel: false, 35 | zoomControl: true, 36 | styles: [ 37 | { 38 | featureType: "water", 39 | stylers: [ 40 | { 41 | saturation: 43, 42 | }, 43 | { 44 | lightness: -11, 45 | }, 46 | { 47 | hue: "#0088ff", 48 | }, 49 | ], 50 | }, 51 | { 52 | featureType: "road", 53 | elementType: "geometry.fill", 54 | stylers: [ 55 | { 56 | hue: "#ff0000", 57 | }, 58 | { 59 | saturation: -100, 60 | }, 61 | { 62 | lightness: 99, 63 | }, 64 | ], 65 | }, 66 | { 67 | featureType: "road", 68 | elementType: "geometry.stroke", 69 | stylers: [ 70 | { 71 | color: "#808080", 72 | }, 73 | { 74 | lightness: 54, 75 | }, 76 | ], 77 | }, 78 | { 79 | featureType: "landscape.man_made", 80 | elementType: "geometry.fill", 81 | stylers: [ 82 | { 83 | color: "#ece2d9", 84 | }, 85 | ], 86 | }, 87 | { 88 | featureType: "poi.park", 89 | elementType: "geometry.fill", 90 | stylers: [ 91 | { 92 | color: "#ccdca1", 93 | }, 94 | ], 95 | }, 96 | { 97 | featureType: "road", 98 | elementType: "labels.text.fill", 99 | stylers: [ 100 | { 101 | color: "#767676", 102 | }, 103 | ], 104 | }, 105 | { 106 | featureType: "road", 107 | elementType: "labels.text.stroke", 108 | stylers: [ 109 | { 110 | color: "#ffffff", 111 | }, 112 | ], 113 | }, 114 | { 115 | featureType: "poi", 116 | stylers: [ 117 | { 118 | visibility: "off", 119 | }, 120 | ], 121 | }, 122 | { 123 | featureType: "landscape.natural", 124 | elementType: "geometry.fill", 125 | stylers: [ 126 | { 127 | visibility: "on", 128 | }, 129 | { 130 | color: "#b8cb93", 131 | }, 132 | ], 133 | }, 134 | { 135 | featureType: "poi.park", 136 | stylers: [ 137 | { 138 | visibility: "on", 139 | }, 140 | ], 141 | }, 142 | { 143 | featureType: "poi.sports_complex", 144 | stylers: [ 145 | { 146 | visibility: "on", 147 | }, 148 | ], 149 | }, 150 | { 151 | featureType: "poi.medical", 152 | stylers: [ 153 | { 154 | visibility: "on", 155 | }, 156 | ], 157 | }, 158 | { 159 | featureType: "poi.business", 160 | stylers: [ 161 | { 162 | visibility: "simplified", 163 | }, 164 | ], 165 | }, 166 | ], 167 | }; 168 | 169 | map = new google.maps.Map(map, mapOptions); 170 | 171 | const marker = new google.maps.Marker({ 172 | position: myLatlng, 173 | map: map, 174 | animation: google.maps.Animation.DROP, 175 | title: "Paper Dashboard React!", 176 | }); 177 | 178 | const contentString = 179 | '

Paper Dashboard React

' + 180 | "

A free Admin for React, Reactstrap, and React Hooks.

"; 181 | 182 | const infowindow = new google.maps.InfoWindow({ 183 | content: contentString, 184 | }); 185 | 186 | google.maps.event.addListener(marker, "click", function () { 187 | infowindow.open(map, marker); 188 | }); 189 | }); 190 | return ( 191 | <> 192 |
193 | 194 | ); 195 | }; 196 | 197 | function Map() { 198 | return ( 199 | <> 200 |
201 | 202 | 203 | 204 | Google Maps 205 | 206 |
211 | 212 |
213 | 214 | 215 | 216 | 217 |
218 | 219 | ); 220 | } 221 | 222 | export default Map; 223 | -------------------------------------------------------------------------------- /src/views/Tables.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { 23 | Card, 24 | CardHeader, 25 | CardBody, 26 | CardTitle, 27 | Table, 28 | Row, 29 | Col, 30 | } from "reactstrap"; 31 | 32 | function Tables() { 33 | return ( 34 | <> 35 |
36 | 37 | 38 | 39 | 40 | Simple Table 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
NameCountryCitySalary
Dakota RiceNigerOud-Turnhout$36,738
Minerva HooperCuraçaoSinaai-Waas$23,789
Sage RodriguezNetherlandsBaileux$56,142
Philip ChaneyKorea, SouthOverland Park$38,735
Doris GreeneMalawiFeldkirchen in Kärnten$63,542
Mason PorterChileGloucester$78,615
Jon PorterPortugalGloucester$98,615
97 | 98 | 99 | 100 | 101 | 102 | 103 | Table on Plain Background 104 |

105 | Here is a subtitle for this table 106 |

107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
NameCountryCitySalary
Dakota RiceNigerOud-Turnhout$36,738
Minerva HooperCuraçaoSinaai-Waas$23,789
Sage RodriguezNetherlandsBaileux$56,142
Philip ChaneyKorea, SouthOverland Park$38,735
Doris GreeneMalawiFeldkirchen in Kärnten$63,542
Mason PorterChileGloucester$78,615
Jon PorterPortugalGloucester$98,615
163 | 164 | 165 | 166 | 167 |
168 | 169 | ); 170 | } 171 | 172 | export default Tables; 173 | -------------------------------------------------------------------------------- /src/views/Typography.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Card, CardHeader, CardBody, Row, Col } from "reactstrap"; 23 | 24 | function Typography() { 25 | return ( 26 | <> 27 |
28 | 29 | 30 | 31 | 32 |
Paper Table Heading
33 |

Created using Montserrat Font Family

34 | 35 | 36 |
37 |

38 | Header 1 39 | The Life of Paper Dashboard 40 |

41 |
42 |
43 |

44 | Header 2 45 | The Life of Paper Dashboard 46 |

47 |
48 |
49 |

50 | Header 3 51 | The Life of Paper Dashboard 52 |

53 |
54 |
55 |

56 | Header 4 57 | The Life of Paper Dashboard 58 |

59 |
60 |
61 |
62 | Header 5 63 | The Life of Paper Dashboard 64 |
65 |
66 |
67 |
68 | Header 6 69 | The Life of Paper Dashboard 70 |
71 |
72 |
73 |

74 | ParagraphI will be the leader of a company that 75 | ends up being worth billions of dollars, because I got the 76 | answers. I understand culture. I am the nucleus. I think 77 | that’s a responsibility that I have, to push possibilities, 78 | to show people, this is the level that things could be at. 79 |

80 |
81 |
82 | Quote 83 |
84 |

85 | "I will be the leader of a company that ends up being 86 | worth billions of dollars, because I got the answers. I 87 | understand culture. I am the nucleus. I think that’s a 88 | responsibility that I have, to push possibilities, to show 89 | people, this is the level that things could be at."
90 |
91 | - Noaa 92 |

93 |
94 |
95 |
96 | Muted Text 97 |

98 | I will be the leader of a company that ends up being worth 99 | billions of dollars, because I got the answers... 100 |

101 |
102 |
103 | Primary Text 104 |

105 | I will be the leader of a company that ends up being worth 106 | billions of dollars, because I got the answers... 107 |

108 |
109 |
110 | Info Text 111 |

112 | I will be the leader of a company that ends up being worth 113 | billions of dollars, because I got the answers... 114 |

115 |
116 |
117 | Success Text 118 |

119 | I will be the leader of a company that ends up being worth 120 | billions of dollars, because I got the answers... 121 |

122 |
123 |
124 | Warning Text 125 |

126 | I will be the leader of a company that ends up being worth 127 | billions of dollars, because I got the answers... 128 |

129 |
130 |
131 | Danger Text 132 |

133 | I will be the leader of a company that ends up being worth 134 | billions of dollars, because I got the answers... 135 |

136 |
137 |
138 |

139 | Small Tag 140 | Header with small subtitle
141 | Use "small" tag for the headers 142 |

143 |
144 | 145 | 146 | 147 | 148 |
149 | 150 | ); 151 | } 152 | 153 | export default Typography; 154 | -------------------------------------------------------------------------------- /src/views/Upgrade.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { 23 | Button, 24 | Card, 25 | CardHeader, 26 | CardBody, 27 | CardTitle, 28 | Table, 29 | Row, 30 | Col, 31 | } from "reactstrap"; 32 | 33 | function Upgrade() { 34 | return ( 35 | <> 36 |
37 | 38 | 39 | 40 | 41 | Paper Dashboard PRO 42 |

43 | Are you looking for more components? Please check our Premium 44 | Version of Paper Dashboard PRO. 45 |

46 | 47 | 48 | 49 | 50 | 51 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 77 | 80 | 81 | 82 | 86 | 89 | 92 | 93 | 94 | 95 | 98 | 101 | 102 | 103 | 104 | 107 | 110 | 111 | 112 | 114 | 115 | 116 | 117 | 128 | 139 | 140 | 141 |
52 | FreePRO
Components16160
Plugins413
Example Pages727
Login, Register, Pricing, Lock Pages 75 | 76 | 78 | 79 |
83 | DataTables, VectorMap, SweetAlert, Wizard, 84 | jQueryValidation, FullCalendar etc... 85 | 87 | 88 | 90 | 91 |
Mini Sidebar 96 | 97 | 99 | 100 |
Premium Support 105 | 106 | 108 | 109 |
113 | FreeFrom $49
118 | 119 | 127 | 129 | 138 |
142 | 143 | 144 | 145 | 146 |
147 | 148 | ); 149 | } 150 | 151 | export default Upgrade; 152 | --------------------------------------------------------------------------------