├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── Documentation └── documentation.html ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── genezio.yaml ├── github-assets ├── angular.png ├── black-dashboard-react.gif ├── chrome.png ├── dashboard-page.png ├── edge.png ├── firefox.png ├── html.png ├── maps-page.png ├── notifications-page.png ├── opera.png ├── react.svg ├── safari.png ├── table-page.png ├── user-page.png └── vuejs.png ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.png ├── index.html └── manifest.json └── src ├── assets ├── css │ ├── black-dashboard-react.css │ ├── black-dashboard-react.css.map │ ├── black-dashboard-react.min.css │ └── nucleo-icons.css ├── demo │ └── demo.css ├── fonts │ ├── nucleo.eot │ ├── nucleo.ttf │ ├── nucleo.woff │ └── nucleo.woff2 ├── img │ ├── anime3.png │ ├── anime6.png │ ├── apple-icon.png │ ├── bg5.jpg │ ├── default-avatar.png │ ├── emilyz.jpg │ ├── favicon.png │ ├── header.jpg │ ├── img_3115.jpg │ ├── james.jpg │ ├── mike.jpg │ └── react-logo.png └── scss │ ├── black-dashboard-react.scss │ └── black-dashboard-react │ ├── custom │ ├── _alerts.scss │ ├── _badges.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _fixed-plugin.scss │ ├── _footer.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _images.scss │ ├── _input-group.scss │ ├── _misc.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _navbar.scss │ ├── _rtl.scss │ ├── _sidebar-and-main-panel.scss │ ├── _tables.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── _white-content.scss │ ├── cards │ │ ├── _card-chart.scss │ │ ├── _card-map.scss │ │ ├── _card-plain.scss │ │ ├── _card-task.scss │ │ └── _card-user.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _background-variant.scss │ │ ├── _badges.scss │ │ ├── _buttons.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _icon.scss │ │ ├── _inputs.scss │ │ ├── _modals.scss │ │ ├── _page-header.scss │ │ ├── _popovers.scss │ │ ├── _vendor-prefixes.scss │ │ ├── _wizard.scss │ │ └── opacity.scss │ ├── utilities │ │ ├── _backgrounds.scss │ │ ├── _floating.scss │ │ ├── _helper.scss │ │ ├── _position.scss │ │ ├── _shadows.scss │ │ ├── _sizing.scss │ │ ├── _spacing.scss │ │ ├── _text.scss │ │ └── _transform.scss │ └── vendor │ │ ├── _plugin-perfect-scrollbar.scss │ │ └── _plugin-react-notification-alert.scss │ └── react-differences │ ├── _inputs.scss │ └── react-differences.scss ├── components ├── BackgroundColorWrapper │ └── BackgroundColorWrapper.js ├── FixedPlugin │ └── FixedPlugin.js ├── Footer │ └── Footer.js ├── Navbars │ ├── AdminNavbar.js │ └── RTLNavbar.js ├── Sidebar │ └── Sidebar.js └── ThemeWrapper │ └── ThemeWrapper.js ├── contexts ├── BackgroundColorContext.js └── ThemeContext.js ├── index.js ├── layouts ├── Admin │ └── Admin.js └── RTL │ └── RTL.js ├── logo.svg ├── routes.js ├── variables └── charts.js └── views ├── Dashboard.js ├── Icons.js ├── Map.js ├── Notifications.js ├── Rtl.js ├── TableList.js ├── Typography.js └── UserProfile.js /.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/black-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 | /build 2 | /node_modules 3 | package-lock.json 4 | /build 5 | .vscode 6 | .eslintcache 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | ## [1.2.2] 2023-05-22 4 | 5 | - Fix issues 6 | - Update dependencies 7 | - Fix installation issues 8 | 9 | ## [1.2.1] 2022-06-29 10 | 11 | - Update dependencies 12 | - Migrate from node-sass to sass 13 | 14 | ## [1.2.0] 2020-12-11 15 | 16 | ### Bug fixing 17 | 18 | - Added hooks support 19 | - https://github.com/creativetimofficial/black-dashboard-react/issues/19 20 | - https://github.com/creativetimofficial/black-dashboard-react/issues/17 21 | 22 | ### Major style changes 23 | 24 | - All Bootstrap imports from `src/assets/scss/black-dashboard-react/bootstrap` have been changed with imports from `node_modules` from `Bootstrap` 25 | 26 | ### Deleted components 27 | 28 | ### Added components 29 | 30 | ### Deleted dependencies 31 | 32 | - history (instead of using `history`, we'll be using `BrowserRouter` from `react-router-dom`) 33 | - @types/googlemaps 34 | - @types/react 35 | - @types/markerclustererplus 36 | - react-google-maps (Instead of it, we're going to use simple plain JS Google maps) 37 | 38 | ### Added dependencies 39 | 40 | - node-sass-package-importer@5.3.2 (for importing `Bootstrap` from `node_modules`) 41 | - bootstrap@4.5.3 (instead of using downloaded zip of `Bootstrap`, we'll use it from `node_modules`) 42 | - jquery@3.5.1 (to stop `Bootstrap` warning on a clean install) 43 | 44 | ### Updated dependencies 45 | 46 | ``` 47 | @fortawesome/fontawesome-free 5.13.0 → 5.15.1 48 | chart.js 2.9.3 → 2.9.4 49 | node-sass 4.13.1 → 4.14.1 50 | react 16.13.1 → 17.0.1 51 | react-chartjs-2 2.9.0 → 2.11.1 52 | react-dom 16.13.1 → 17.0.1 53 | react-notification-alert 0.0.12 → 0.0.13 54 | react-router-dom 5.1.2 → 5.2.0 55 | react-scripts 3.4.1 → 4.0.1 56 | reactstrap 8.4.1 → 8.7.1 57 | eslint-plugin-flowtype 3.13.0 → 5.2.0 58 | typescript 3.8.3 → 4.1.2 59 | ``` 60 | 61 | ### Important Notes 62 | 63 | **The jQuery and TypeScript dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on jQuery, and it is not based on TypeScript!** 64 | 65 | ### Warning 66 | 67 | _Some warnings may appear when running the installation command, but they do not affect the UI or the functionality of the product._ 68 | _The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update - they come from the plugins that we are using, and they haven't yet upgraded to the latest React version):_ 69 | 70 | ``` 71 | npm WARN react-popper@1.3.7 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. 72 | npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. 73 | ``` 74 | 75 | Happy Hacking! 76 | 77 | ## [1.1.0] 2020-03-13 78 | 79 | ### Bug fixing 80 | 81 | - Github issues: 82 | - https://github.com/creativetimofficial/black-dashboard-react/issues/8 83 | - https://github.com/creativetimofficial/black-dashboard-react/issues/7 84 | - https://github.com/creativetimofficial/black-dashboard-react/issues/6 (not really an issue, but was old and needed to close it) 85 | - https://github.com/creativetimofficial/black-dashboard-react/issues/4 86 | 87 | ### Major style changes 88 | 89 | ### Deleted components 90 | 91 | ### Added components 92 | 93 | ### Deleted dependencies 94 | 95 | - bootstrap (styles are already added inside the scss folder) 96 | 97 | ### Added dependencies 98 | 99 | - To stop consolde warnings on installation: 100 | - eslint-plugin-flowtype@3.13.0 101 | - @types/markerclustererplus@2.1.33 102 | - @types/googlemaps@3.39.3 103 | - typescript@3.8.3 104 | - For Creative Tim copyrights 105 | - gulp@4.0.2 106 | - gulp-append-prepend@1.0.8 107 | 108 | ### Updated dependencies 109 | 110 | ``` 111 | @types/react 16.4.16 → 16.9.23 112 | chart.js ^2.7.2 → 2.9.3 113 | history 4.7.2 → 4.10.1 114 | node-sass 4.9.3 → 4.13.1 115 | perfect-scrollbar 1.4.0 → 1.5.0 116 | prop-types ^15.6.2 → 15.7.2 117 | react 16.5.2 → 16.13.0 118 | react-chartjs-2 ^2.7.4 → 2.9.0 119 | react-dom 16.5.2 → 16.13.0 120 | react-notification-alert 0.0.8 → 0.0.12 121 | react-router-dom 4.3.1 → 5.1.2 122 | react-scripts 2.0.4 → 3.4.0 123 | reactstrap 6.5.0 → 8.4.1 124 | ``` 125 | 126 | ### Warning 127 | 128 | **There are some errors that come from the react-google-maps components, since they are using old React v16 syntax, this, at the moment does not affect the UI or the functionality of the product. If the issue will perssit in React v17, we will drop the usage of these components and replace them with other maps components. The following warnings on installation could not be solved, due to some of our dependencies, however, they do not affect the functionality or the UI of the product:** 129 | 130 | ``` 131 | npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 132 | npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 133 | npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core 134 | ``` 135 | 136 | **Also, the above, are only present in development, and not in production.** 137 | 138 | ## [1.0.0] 2018-11-29 139 | 140 | ### Original Release 141 | 142 | - Added Reactstrap as base framework 143 | - Added design from PRODUCT NAME by Creative Tim 144 | -------------------------------------------------------------------------------- /Documentation/documentation.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 28 | 33 | 34 | 35 | Components Documentation - Black Dashboard React by Creative Tim 36 | 37 | 38 | 42 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 100 | 129 | 130 |
131 |
135 |
136 |
137 |
138 |

Black Dashboard React

139 |

Documentation v1.2.0

140 |
141 | View documentation 146 |
147 |
148 |
149 |
150 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 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 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: black-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 -------------------------------------------------------------------------------- /github-assets/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/angular.png -------------------------------------------------------------------------------- /github-assets/black-dashboard-react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/black-dashboard-react.gif -------------------------------------------------------------------------------- /github-assets/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/chrome.png -------------------------------------------------------------------------------- /github-assets/dashboard-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/dashboard-page.png -------------------------------------------------------------------------------- /github-assets/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/edge.png -------------------------------------------------------------------------------- /github-assets/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/firefox.png -------------------------------------------------------------------------------- /github-assets/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/html.png -------------------------------------------------------------------------------- /github-assets/maps-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/maps-page.png -------------------------------------------------------------------------------- /github-assets/notifications-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/notifications-page.png -------------------------------------------------------------------------------- /github-assets/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/opera.png -------------------------------------------------------------------------------- /github-assets/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /github-assets/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/safari.png -------------------------------------------------------------------------------- /github-assets/table-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/table-page.png -------------------------------------------------------------------------------- /github-assets/user-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/user-page.png -------------------------------------------------------------------------------- /github-assets/vuejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/github-assets/vuejs.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "black-dashboard-react", 3 | "version": "1.2.2", 4 | "private": true, 5 | "homepage": "https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard", 6 | "dependencies": { 7 | "@fortawesome/fontawesome-free": "6.4.0", 8 | "ajv": "^8.16.0", 9 | "bootstrap": "4.6.2", 10 | "chart.js": "3.9.1", 11 | "classnames": "2.3.2", 12 | "perfect-scrollbar": "1.5.5", 13 | "prop-types": "15.8.1", 14 | "react": ">=16.8.0", 15 | "react-chartjs-2": "3.3.0", 16 | "react-dom": ">=16.8.0", 17 | "react-notification-alert": "0.0.13", 18 | "react-router-dom": "6.11.1", 19 | "react-scripts": "5.0.1", 20 | "sass": "1.62.1" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "cross-env PUBLIC_URL=/ cross-env CI=false react-scripts build", 25 | "test": "react-scripts test --env=jsdom", 26 | "eject": "react-scripts eject", 27 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 28 | "compile-scss": "sass src/assets/scss/black-dashboard-react.scss src/assets/css/black-dashboard-react.css", 29 | "minify-scss": "sass src/assets/scss/black-dashboard-react.scss src/assets/css/black-dashboard-react.min.css --style compressed" 30 | }, 31 | "eslintConfig": { 32 | "extends": "react-app" 33 | }, 34 | "peerDependencies": { 35 | "react": ">=16.8.0", 36 | "react-dom": ">=16.8.0" 37 | }, 38 | "browserslist": [ 39 | ">0.2%", 40 | "not dead", 41 | "not ie <= 11", 42 | "not op_mini all" 43 | ], 44 | "optionalDependencies": { 45 | "eslint-plugin-flowtype": "8.0.3", 46 | "reactstrap": "8.10.1" 47 | }, 48 | "devDependencies": { 49 | "cross-env": "^7.0.3", 50 | "typescript": "5.0.4" 51 | }, 52 | "overrides": { 53 | "svgo": "3.0.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 | 40 | 45 | 54 | 55 | 59 | Black Dashboard React by Creative Tim 60 | 61 | 62 | 63 | 64 |
65 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /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": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/demo/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | .tim-row { 19 | margin-bottom: 20px; 20 | } 21 | 22 | .tim-white-buttons { 23 | background-color: #777777; 24 | } 25 | 26 | .typography-line { 27 | padding-left: 25%; 28 | margin-bottom: 35px; 29 | position: relative; 30 | display: block; 31 | width: 100%; 32 | } 33 | 34 | .typography-line span { 35 | bottom: 10px; 36 | color: #c0c1c2; 37 | display: block; 38 | font-weight: 400; 39 | font-size: 13px; 40 | line-height: 13px; 41 | left: 0; 42 | position: absolute; 43 | width: 260px; 44 | text-transform: none; 45 | } 46 | 47 | .tim-row { 48 | padding-top: 60px; 49 | } 50 | 51 | .tim-row h3 { 52 | margin-top: 0; 53 | } 54 | 55 | .offline-doc .page-header { 56 | display: flex; 57 | align-items: center; 58 | } 59 | 60 | .offline-doc .footer { 61 | position: absolute; 62 | width: 100%; 63 | background: transparent; 64 | bottom: 0; 65 | color: #fff; 66 | z-index: 1; 67 | padding-left: 0; 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 | .offline-doc .page-header { 84 | min-height: 100vh; 85 | max-height: 999px; 86 | padding: 0; 87 | color: #ffffff; 88 | position: relative; 89 | } 90 | .offline-doc .page-header .page-header-image { 91 | position: absolute; 92 | background-size: cover; 93 | background-position: center center; 94 | width: 100%; 95 | height: 100%; 96 | z-index: -1; 97 | } 98 | .offline-doc .page-header .content-center { 99 | position: absolute; 100 | top: 50%; 101 | left: 50%; 102 | z-index: 2; 103 | -ms-transform: translate(-50%, -50%); 104 | -webkit-transform: translate(-50%, -50%); 105 | transform: translate(-50%, -50%); 106 | text-align: center; 107 | color: #ffffff; 108 | padding: 0 15px; 109 | width: 100%; 110 | max-width: 880px; 111 | } 112 | .offline-doc .page-header footer { 113 | position: absolute; 114 | bottom: 0; 115 | width: 100%; 116 | } 117 | .offline-doc .page-header .container { 118 | height: 100%; 119 | z-index: 1; 120 | } 121 | .offline-doc .page-header .category, 122 | .offline-doc .page-header .description { 123 | color: rgba(255, 255, 255, 0.8); 124 | } 125 | .offline-doc .page-header.page-header-small { 126 | min-height: 60vh; 127 | max-height: 440px; 128 | } 129 | .offline-doc .page-header.page-header-mini { 130 | min-height: 40vh; 131 | max-height: 340px; 132 | } 133 | .offline-doc .page-header .title { 134 | margin-bottom: 15px; 135 | } 136 | .offline-doc .page-header .title + h4 { 137 | margin-top: 10px; 138 | } 139 | .offline-doc .page-header:after, 140 | .offline-doc .page-header:before { 141 | position: absolute; 142 | z-index: 0; 143 | width: 100%; 144 | height: 100%; 145 | display: block; 146 | left: 0; 147 | top: 0; 148 | content: ""; 149 | } 150 | .offline-doc .page-header:before { 151 | background-color: rgba(0, 0, 0, 0.8); 152 | } 153 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/fonts/nucleo.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/fonts/nucleo.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/fonts/nucleo.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/fonts/nucleo.woff2 -------------------------------------------------------------------------------- /src/assets/img/anime3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/anime3.png -------------------------------------------------------------------------------- /src/assets/img/anime6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/anime6.png -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/bg5.jpg -------------------------------------------------------------------------------- /src/assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/default-avatar.png -------------------------------------------------------------------------------- /src/assets/img/emilyz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/emilyz.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/header.jpg -------------------------------------------------------------------------------- /src/assets/img/img_3115.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/img_3115.jpg -------------------------------------------------------------------------------- /src/assets/img/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/james.jpg -------------------------------------------------------------------------------- /src/assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/mike.jpg -------------------------------------------------------------------------------- /src/assets/img/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/black-dashboard-react/26b59be1f1e5e3111f67461ebae393c31f95fa50/src/assets/img/react-logo.png -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Black Dashboard React v1.2.0 based on Black Dashboard - v1.2.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 9 | 10 | * Coded by Creative Tim 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 | // Core 19 | 20 | @import "black-dashboard-react/custom/functions"; 21 | @import "../../../node_modules/bootstrap/scss/functions"; 22 | 23 | @import "black-dashboard-react/custom/variables"; 24 | @import "../../../node_modules/bootstrap/scss/variables"; 25 | 26 | @import "black-dashboard-react/custom/mixins"; 27 | @import "../../../node_modules/bootstrap/scss/mixins"; 28 | 29 | // Bootstrap components 30 | 31 | @import "../../../node_modules/bootstrap/scss/root"; 32 | @import "../../../node_modules/bootstrap/scss/reboot"; 33 | @import "../../../node_modules/bootstrap/scss/type"; 34 | @import "../../../node_modules/bootstrap/scss/images"; 35 | @import "../../../node_modules/bootstrap/scss/code"; 36 | @import "../../../node_modules/bootstrap/scss/grid"; 37 | @import "../../../node_modules/bootstrap/scss/tables"; 38 | @import "../../../node_modules/bootstrap/scss/forms"; 39 | @import "../../../node_modules/bootstrap/scss/buttons"; 40 | @import "../../../node_modules/bootstrap/scss/transitions"; 41 | @import "../../../node_modules/bootstrap/scss/dropdown"; 42 | @import "../../../node_modules/bootstrap/scss/button-group"; 43 | @import "../../../node_modules/bootstrap/scss/input-group"; 44 | @import "../../../node_modules/bootstrap/scss/custom-forms"; 45 | @import "../../../node_modules/bootstrap/scss/nav"; 46 | @import "../../../node_modules/bootstrap/scss/navbar"; 47 | @import "../../../node_modules/bootstrap/scss/card"; 48 | @import "../../../node_modules/bootstrap/scss/breadcrumb"; 49 | @import "../../../node_modules/bootstrap/scss/pagination"; 50 | @import "../../../node_modules/bootstrap/scss/badge"; 51 | @import "../../../node_modules/bootstrap/scss/jumbotron"; 52 | @import "../../../node_modules/bootstrap/scss/alert"; 53 | @import "../../../node_modules/bootstrap/scss/progress"; 54 | @import "../../../node_modules/bootstrap/scss/media"; 55 | @import "../../../node_modules/bootstrap/scss/list-group"; 56 | @import "../../../node_modules/bootstrap/scss/close"; 57 | @import "../../../node_modules/bootstrap/scss/modal"; 58 | @import "../../../node_modules/bootstrap/scss/tooltip"; 59 | @import "../../../node_modules/bootstrap/scss/popover"; 60 | @import "../../../node_modules/bootstrap/scss/carousel"; 61 | @import "../../../node_modules/bootstrap/scss/utilities"; 62 | @import "../../../node_modules/bootstrap/scss/print"; 63 | 64 | // Custom components 65 | 66 | @import "black-dashboard-react/custom/alerts.scss"; 67 | @import "black-dashboard-react/custom/badges.scss"; 68 | @import "black-dashboard-react/custom/buttons.scss"; 69 | @import "black-dashboard-react/custom/dropdown.scss"; 70 | @import "black-dashboard-react/custom/footer.scss"; 71 | @import "black-dashboard-react/custom/forms.scss"; 72 | @import "black-dashboard-react/custom/images.scss"; 73 | @import "black-dashboard-react/custom/modal.scss"; 74 | @import "black-dashboard-react/custom/navbar.scss"; 75 | @import "black-dashboard-react/custom/type.scss"; 76 | @import "black-dashboard-react/custom/tables"; 77 | @import "black-dashboard-react/custom/checkboxes-radio"; 78 | @import "black-dashboard-react/custom/fixed-plugin"; 79 | @import "black-dashboard-react/custom/sidebar-and-main-panel.scss"; 80 | @import "black-dashboard-react/custom/misc.scss"; 81 | @import "black-dashboard-react/custom/rtl.scss"; 82 | @import "black-dashboard-react/custom/input-group.scss"; 83 | 84 | // Vendor / Plugins 85 | 86 | @import "black-dashboard-react/custom/vendor/plugin-perfect-scrollbar.scss"; 87 | @import "black-dashboard-react/custom/vendor/plugin-react-notification-alert.scss"; 88 | 89 | // light mode 90 | 91 | @import "black-dashboard-react/custom/white-content.scss"; 92 | 93 | // Cards 94 | 95 | @import "black-dashboard-react/custom/card"; 96 | @import "black-dashboard-react/custom/cards/card-chart"; 97 | @import "black-dashboard-react/custom/cards/card-map"; 98 | @import "black-dashboard-react/custom/cards/card-user"; 99 | @import "black-dashboard-react/custom/cards/card-task"; 100 | @import "black-dashboard-react/custom/cards/card-plain"; 101 | 102 | // React differences 103 | @import "black-dashboard-react/react-differences/react-differences"; 104 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | color: $white; 4 | 5 | .alert-link{ 6 | color: $white; 7 | } 8 | 9 | &.alert-success{ 10 | background-color: darken($success, 10%); 11 | } 12 | 13 | i.fa, 14 | i.tim-icons{ 15 | font-size: $font-paragraph; 16 | } 17 | 18 | .close{ 19 | color: $white; 20 | opacity: .9; 21 | text-shadow: none; 22 | line-height: 0; 23 | outline: 0; 24 | &::after{ 25 | display: inline-block; 26 | font: normal normal normal 1em/1 'Nucleo'; 27 | vertical-align: middle; 28 | speak: none; 29 | text-transform: none; 30 | -webkit-font-smoothing: antialiased; 31 | font-size: 1rem; 32 | content: "\ea48" 33 | } 34 | span { 35 | display: none !important; 36 | } 37 | } 38 | 39 | span[data-notify="icon"]{ 40 | font-size: 22px; 41 | display: block; 42 | left: 19px; 43 | position: absolute; 44 | top: 50%; 45 | margin-top: -11px; 46 | } 47 | 48 | button.close{ 49 | position: absolute; 50 | right: 15px; 51 | top: 50%; 52 | margin-top: -13px; 53 | width: 25px; 54 | height: 25px; 55 | padding: 3px; 56 | } 57 | 58 | .close ~ span{ 59 | display: block; 60 | max-width: 89%; 61 | } 62 | 63 | &.alert-with-icon{ 64 | padding-left: 65px; 65 | } 66 | } 67 | 68 | .alert-dismissible { 69 | padding-right: 1.25rem; 70 | .close { 71 | 72 | &:hover, 73 | &:focus { 74 | color: rgba($white, .9); 75 | opacity: 1 !important; 76 | } 77 | 78 | @include media-breakpoint-down(xs) { 79 | top: 1rem; 80 | right: .5rem; 81 | } 82 | 83 | &>span:not(.sr-only) { 84 | font-size: 1.5rem; 85 | background-color: transparent; 86 | color: rgba($white, .6); 87 | } 88 | 89 | &:hover, 90 | &:focus { 91 | &>span:not(.sr-only) { 92 | background-color: transparent; 93 | color: rgba($white, .9); 94 | } 95 | } 96 | } 97 | &.animated { 98 | z-index: 9999; 99 | .close { 100 | right: 10px; 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_badges.scss: -------------------------------------------------------------------------------- 1 | .badge + .badge { 2 | margin-left: 5px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > a.btn{ 3 | border-width: $border-thick; 4 | border: none; 5 | position: relative; 6 | overflow: hidden; 7 | margin:4px 1px; 8 | border-radius: $border-radius-lg; 9 | cursor: pointer; 10 | 11 | @include btn-styles($default, $default-states); 12 | 13 | &:hover, 14 | &:focus{ 15 | @include opacity(1); 16 | outline: 0 !important; 17 | } 18 | &:active, 19 | &.active, 20 | .open > &.dropdown-toggle { 21 | @include box-shadow(none); 22 | outline: 0 !important; 23 | } 24 | 25 | .badge{ 26 | margin: 0; 27 | } 28 | 29 | &.btn-icon { 30 | // see above for color variations 31 | height: $icon-size-regular; 32 | min-width: $icon-size-regular; 33 | width: $icon-size-regular; 34 | padding: 0; 35 | font-size: $icon-font-size-regular; 36 | overflow: hidden; 37 | position: relative; 38 | line-height: normal; 39 | 40 | &.btn-simple{ 41 | padding: 0; 42 | } 43 | 44 | &.btn-sm{ 45 | height: $icon-size-sm; 46 | min-width: $icon-size-sm; 47 | width: $icon-size-sm; 48 | 49 | .fa, 50 | .far, 51 | .fas, 52 | .tim-icons{ 53 | font-size: $icon-font-size-sm; 54 | } 55 | } 56 | 57 | &.btn-lg{ 58 | height: $icon-size-lg; 59 | min-width: $icon-size-lg; 60 | width: $icon-size-lg; 61 | 62 | .fa, 63 | .far, 64 | .fas, 65 | .tim-icons{ 66 | font-size: $icon-font-size-lg; 67 | } 68 | } 69 | 70 | &:not(.btn-footer) .tim-icons, 71 | &:not(.btn-footer) .fa, 72 | &:not(.btn-footer) .far, 73 | &:not(.btn-footer) .fas{ 74 | position: absolute; 75 | font-size: 1em; 76 | top: 50%; 77 | left: 50%; 78 | transform: translate(-12px, -12px); 79 | line-height: 1.5626rem; 80 | width: 24px; 81 | } 82 | 83 | } 84 | 85 | &:not(.btn-icon) .tim-icons{ 86 | position: relative; 87 | top: 1px; 88 | } 89 | 90 | span{ 91 | position: relative; 92 | display: block; 93 | } 94 | 95 | &.btn-link.dropdown-toggle { 96 | color: $dark-gray; 97 | } 98 | 99 | &.dropdown-toggle:after { 100 | margin-left: 30px !important; 101 | } 102 | } 103 | 104 | // Apply the mixin to the buttons 105 | // .btn-default { @include btn-styles($default-color, $default-states-color); } 106 | .btn-primary { @include btn-styles($primary, $primary-states); 107 | 108 | } 109 | .btn-success { @include btn-styles($success, $success-states); 110 | 111 | } 112 | .btn-info { @include btn-styles($info, $info-states); 113 | 114 | } 115 | .btn-warning { @include btn-styles($warning, $warning-states); 116 | &:not(:disabled):not(.disabled):active{ 117 | color: $white; 118 | } 119 | } 120 | .btn-danger { @include btn-styles($danger, $danger-states); 121 | 122 | } 123 | .btn-neutral { @include btn-styles($white, $white); } 124 | 125 | .btn{ 126 | &:disabled, 127 | &[disabled], 128 | &.disabled{ 129 | @include opacity(.5); 130 | pointer-events: none; 131 | } 132 | } 133 | .btn-simple{ 134 | border: $border; 135 | border-color: $default; 136 | box-shadow: none; 137 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 138 | background-color: $transparent-bg; 139 | } 140 | 141 | .btn-simple, 142 | .btn-link{ 143 | &.disabled, 144 | &:disabled, 145 | &[disabled], 146 | fieldset[disabled] & { 147 | &, 148 | &:hover, 149 | &:focus, 150 | &.focus, 151 | &:active, 152 | &.active { 153 | background: $transparent-bg; 154 | } 155 | } 156 | } 157 | 158 | .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{ 159 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 160 | } 161 | .btn-link{ 162 | border: $none; 163 | box-shadow: none; 164 | padding: $padding-base-vertical $padding-base-horizontal; 165 | background: $transparent-bg; 166 | color: $gray-300; 167 | font-weight: $font-weight-bold; 168 | 169 | &:hover { 170 | box-shadow: none !important; 171 | transform: none !important; 172 | } 173 | } 174 | 175 | .btn-lg{ 176 | @include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg); 177 | } 178 | .btn-sm{ 179 | @include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm); 180 | } 181 | 182 | .btn-wd { 183 | min-width: 140px; 184 | } 185 | .btn-group.select{ 186 | width: 100%; 187 | } 188 | 189 | .btn-group { 190 | .btn.active { 191 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 192 | transform: translateY(-1px); 193 | -webkit-transform: translateY(-1px); 194 | } 195 | } 196 | 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 | 208 | .btn-group .btn.active { 209 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 210 | transform: translateY(-1px); 211 | -webkit-transform: translateY(-1px); 212 | } 213 | 214 | .btn-round{ 215 | border-width: $border-thin; 216 | border-radius: $btn-round-radius; 217 | 218 | &.btn-simple{ 219 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 220 | } 221 | } 222 | 223 | .no-caret { 224 | &.dropdown-toggle::after { 225 | display: none; 226 | } 227 | } 228 | 229 | .btn-secondary:not(:disabled):not(.disabled):active, 230 | .btn-secondary:not(:disabled):not(.disabled).active, 231 | .show > .btn-secondary.dropdown-toggle { 232 | color: $white; 233 | } 234 | 235 | .btn-group label.btn.active { 236 | transform: translateY(0); 237 | -webkit-transform: translateY(0); 238 | } 239 | 240 | .btn + .btn { 241 | margin-left: 5px; 242 | } 243 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_card.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | background: $card-black-background; 3 | border: 0; 4 | position: relative; 5 | width: 100%; 6 | margin-bottom: 30px; 7 | box-shadow: $box-shadow; 8 | 9 | 10 | label{ 11 | color: rgba($white, 0.6); 12 | } 13 | 14 | .card-title { 15 | margin-bottom: .75rem; 16 | } 17 | 18 | .card-body{ 19 | padding: 15px; 20 | 21 | &.table-full-width{ 22 | padding-left: 0; 23 | padding-right: 0; 24 | } 25 | 26 | .card-title{ 27 | color: $white; 28 | text-transform: inherit; 29 | font-weight: $font-weight-light; 30 | margin-bottom: .75rem; 31 | } 32 | 33 | .card-description, .card-category{ 34 | color: rgba($white, 0.6); 35 | } 36 | 37 | } 38 | 39 | .card-header{ 40 | &:not([data-background-color]){ 41 | background-color: transparent; 42 | } 43 | padding: 15px 15px 0; 44 | border: 0; 45 | color: rgba($white,0.8); 46 | 47 | .card-title{ 48 | color: $white; 49 | font-weight: 100; 50 | } 51 | 52 | .card-category{ 53 | color: $dark-gray; 54 | margin-bottom: 5px; 55 | font-weight: 300; 56 | } 57 | } 58 | 59 | .map{ 60 | border-radius: $border-radius-sm; 61 | 62 | &.map-big{ 63 | height: 420px; 64 | } 65 | } 66 | 67 | &.card-white{ 68 | background: $white; 69 | 70 | .card-title{ 71 | color: $black; 72 | } 73 | .card-category, .stats{ 74 | color: $card-stats-gray; 75 | } 76 | 77 | //style for inputs 78 | 79 | @include form-control-placeholder(rgba($black,0.4), 1); 80 | .has-danger{ 81 | .form-control, .input-group-prepend .input-group-text{ 82 | border-color: $danger-states; 83 | } 84 | } 85 | 86 | .input-group-prepend .input-group-text{ 87 | border-color: rgba($black-states,0.2); 88 | color: $black-states; 89 | } 90 | 91 | .form-control{ 92 | color: $black; 93 | border-color: rgba($black-states,0.2); 94 | &:focus{ 95 | border-color: $primary; 96 | } 97 | } 98 | label:not(.btn){ 99 | color: $default; 100 | } 101 | 102 | .form-group.no-border, 103 | .input-group.no-border { 104 | .form-control, 105 | .form-control + .input-group-prepend .input-group-text, 106 | .form-control + .input-group-append .input-group-text, 107 | .input-group-prepend .input-group-text, 108 | .input-group-append .input-group-text{ 109 | background-color: $opacity-gray-3; 110 | &:focus, 111 | &:active, 112 | &:active{ 113 | background-color: $opacity-gray-5; 114 | } 115 | } 116 | 117 | .form-control { 118 | &:focus { 119 | & + .input-group-prepend .input-group-text, 120 | & + .input-group-append .input-group-text{ 121 | background-color: $transparent-bg; 122 | } 123 | } 124 | } 125 | 126 | 127 | } 128 | 129 | .input-group[disabled]{ 130 | .input-group-prepend .input-group-text, 131 | .input-group-append .input-group-text{ 132 | background-color: $black; 133 | } 134 | } 135 | 136 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ 137 | background: $light-gray; 138 | border-color: rgba($black-states,0.3); 139 | } 140 | 141 | .input-group-focus{ 142 | .input-group-prepend .input-group-text, 143 | .input-group-append .input-group-text, 144 | .form-control{ 145 | background-color: $white; 146 | border-color: $primary; 147 | } 148 | 149 | &.no-border{ 150 | .input-group-prepend .input-group-text, 151 | .input-group-append .input-group-text{ 152 | 153 | background-color: $opacity-gray-5; 154 | } 155 | } 156 | } 157 | .input-group-prepend .input-group-text { 158 | border-right: none; 159 | } 160 | 161 | .input-group-append .input-group-text { 162 | border-left: none; 163 | } 164 | 165 | .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { 166 | border-color: $danger-states; 167 | } 168 | 169 | .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { 170 | border-color: darken($success, 10%); 171 | } 172 | } 173 | 174 | 175 | &.card-plain { 176 | background: transparent; 177 | box-shadow: none; 178 | } 179 | 180 | .image{ 181 | overflow: hidden; 182 | height: 200px; 183 | position: relative; 184 | } 185 | 186 | .avatar{ 187 | width: 30px; 188 | height: 30px; 189 | overflow: hidden; 190 | border-radius: 50%; 191 | margin-bottom: 15px; 192 | } 193 | 194 | label{ 195 | font-size: $font-size-sm; 196 | margin-bottom: 5px; 197 | 198 | } 199 | 200 | .card-footer{ 201 | background-color: transparent; 202 | border: 0; 203 | padding: 15px; 204 | 205 | 206 | .stats{ 207 | i{ 208 | margin-right: 5px; 209 | position: relative; 210 | 211 | } 212 | } 213 | 214 | h6{ 215 | margin-bottom: 0; 216 | padding: 7px 0; 217 | } 218 | } 219 | } 220 | 221 | .card-body{ 222 | padding: $card-spacer-y; 223 | } 224 | 225 | @include media-breakpoint-down(sm) { 226 | .card.card-chart .card-header { 227 | .btn-group-toggle .tim-icons { 228 | font-size: .875rem; 229 | top: -1px; 230 | } 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check{ 2 | margin-top: .5rem; 3 | padding-left: 0; 4 | } 5 | 6 | .form-check .form-check-label{ 7 | display: inline-block; 8 | position: relative; 9 | cursor: pointer; 10 | padding-left: 25px; 11 | line-height: 18px; 12 | margin-bottom: 0; 13 | -webkit-transition: color 0.3s linear; 14 | -moz-transition: color 0.3s linear; 15 | -o-transition: color 0.3s linear; 16 | -ms-transition: color 0.3s linear; 17 | transition: color 0.3s linear; 18 | } 19 | .radio .form-check-sign{ 20 | padding-left: 28px; 21 | } 22 | 23 | .form-check-radio.form-check-inline .form-check-label { 24 | padding-left: 5px; 25 | margin-right: 10px; 26 | } 27 | 28 | .form-check .form-check-sign::before, 29 | .form-check .form-check-sign::after{ 30 | content: " "; 31 | display: inline-block; 32 | position: absolute; 33 | width: 17px; 34 | height: 17px; 35 | left: 0; 36 | cursor: pointer; 37 | border-radius: 3px; 38 | top: 0; 39 | border: 1px solid darken($dark-gray,10%); 40 | -webkit-transition: opacity 0.3s linear; 41 | -moz-transition: opacity 0.3s linear; 42 | -o-transition: opacity 0.3s linear; 43 | -ms-transition: opacity 0.3s linear; 44 | transition: opacity 0.3s linear; 45 | } 46 | 47 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 48 | .form-check input[type="checkbox"]:checked + .form-check-sign::before{ 49 | border: none; 50 | background-color: $primary; 51 | } 52 | 53 | .form-check .form-check-sign::after{ 54 | font-family: 'nucleo'; 55 | content: "\ea1b"; 56 | top: 0px; 57 | text-align: center; 58 | font-size: 14px; 59 | opacity: 0; 60 | color: $white; 61 | font-weight: $font-weight-bold; 62 | border: 0; 63 | background-color: inherit; 64 | } 65 | 66 | .form-check.disabled .form-check-label, 67 | .form-check.disabled .form-check-label { 68 | color: $dark-gray; 69 | opacity: .5; 70 | cursor: not-allowed; 71 | } 72 | 73 | .form-check input[type="checkbox"], 74 | .radio input[type="radio"]{ 75 | opacity: 0; 76 | position: absolute; 77 | visibility: hidden; 78 | } 79 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 80 | opacity: 1; 81 | font-size: 10px; 82 | margin-top: 0; 83 | } 84 | 85 | 86 | .form-check input[type="checkbox"]+ .form-check-sign::after{ 87 | opacity: 0; 88 | font-size: 10px; 89 | margin-top: 0; 90 | } 91 | 92 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 93 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 94 | cursor: not-allowed; 95 | } 96 | 97 | .form-check input[type="checkbox"]:disabled + .form-check-sign, 98 | .form-check input[type="radio"]:disabled + .form-check-sign{ 99 | pointer-events: none; 100 | } 101 | 102 | .form-check-radio .form-check-label{ 103 | padding-top: 3px; 104 | } 105 | .form-check-radio .form-check-sign::before, 106 | .form-check-radio .form-check-sign::after{ 107 | content: " "; 108 | width: 18px; 109 | height: 18px; 110 | border-radius: 50%; 111 | border: 1px solid darken($dark-gray,10%); 112 | display: inline-block; 113 | position: absolute; 114 | left: 0px; 115 | top: 3px; 116 | padding: 1px; 117 | -webkit-transition: opacity 0.3s linear; 118 | -moz-transition: opacity 0.3s linear; 119 | -o-transition: opacity 0.3s linear; 120 | -ms-transition: opacity 0.3s linear; 121 | transition: opacity 0.3s linear; 122 | } 123 | 124 | .form-check-radio input[type="radio"] + .form-check-sign:after, 125 | .form-check-radio input[type="radio"] { 126 | opacity: 0; 127 | } 128 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 129 | width: 6px; 130 | height: 6px; 131 | background-color: $primary; 132 | border-color: $primary; 133 | top: 9px; 134 | left: 6px; 135 | opacity: 1; 136 | } 137 | 138 | .form-check-radio input[type="radio"]:checked + .form-check-sign::before { 139 | border-color: $primary; 140 | } 141 | 142 | 143 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 144 | opacity: 1; 145 | } 146 | 147 | .form-check-radio input[type="radio"]:disabled + .form-check-sign { 148 | color: $dark-gray; 149 | } 150 | 151 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 152 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 153 | color: $dark-gray; 154 | } 155 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_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: 130px; 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: $white; 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: 0.1875rem; 31 | padding: 0 10px; 32 | background: linear-gradient($black, $black-states); 33 | } 34 | 35 | .dropdown .dropdown-menu .tim-icons{ 36 | top: 5px; 37 | } 38 | 39 | .dropdown-menu:after, 40 | .dropdown-menu:before{ 41 | right: 10px; 42 | margin-left: auto; 43 | left: auto; 44 | } 45 | 46 | .fa-circle-thin{ 47 | color: $white; 48 | } 49 | 50 | .active .fa-circle-thin{ 51 | color: $active-blue; 52 | } 53 | 54 | .dropdown-menu > .active > a, 55 | .dropdown-menu > .active > a:hover, 56 | .dropdown-menu > .active > a:focus{ 57 | color: $active-gray; 58 | text-align: center; 59 | } 60 | 61 | img{ 62 | border-radius: 0; 63 | width: 100%; 64 | height: 100px; 65 | margin: 0 auto; 66 | } 67 | 68 | .dropdown-menu li > a:hover, 69 | .dropdown-menu li > a:focus{ 70 | box-shadow: none; 71 | } 72 | 73 | .badge{ 74 | border: 2px solid $white; 75 | border-radius: 50%; 76 | cursor: pointer; 77 | display: inline-block; 78 | height: 23px; 79 | margin-right: 5px; 80 | position: relative; 81 | width: 23px; 82 | } 83 | 84 | .badge.active, 85 | .badge:hover{ 86 | border-color: $black-states; 87 | } 88 | 89 | .light-badge, .dark-badge{ 90 | margin:0; 91 | border: 1px solid $info; 92 | &:hover{ 93 | border: 1px solid $info; 94 | } 95 | } 96 | 97 | .light-badge{ 98 | background: $white; 99 | &:hover{ 100 | background: $white; 101 | } 102 | } 103 | 104 | .dark-badge{ 105 | background: $black; 106 | &:hover{ 107 | background: $black; 108 | } 109 | } 110 | 111 | h5{ 112 | margin: 10px; 113 | } 114 | 115 | .dropdown-menu li{ 116 | display: block; 117 | padding: 18px 2px; 118 | width: 25%; 119 | float: left; 120 | } 121 | 122 | li.adjustments-line, 123 | li.header-title, 124 | li.button-container{ 125 | width: 100%; 126 | height: 50px; 127 | min-height: inherit; 128 | } 129 | 130 | li.button-container{ 131 | height: auto; 132 | 133 | div{ 134 | margin-bottom: 5px; 135 | } 136 | } 137 | 138 | #sharrreTitle{ 139 | text-align: center; 140 | padding: 10px 0; 141 | height: 50px; 142 | } 143 | 144 | li.header-title{ 145 | color: $white; 146 | height: 30px; 147 | line-height: 25px; 148 | font-size: 12px; 149 | font-weight: 600; 150 | text-align: center; 151 | text-transform: uppercase; 152 | } 153 | 154 | .adjustments-line{ 155 | 156 | a{ 157 | color: transparent; 158 | 159 | .badge-colors{ 160 | position: relative; 161 | top: -2px; 162 | } 163 | 164 | a:hover, 165 | a:focus{ 166 | color: transparent; 167 | } 168 | } 169 | 170 | .togglebutton{ 171 | text-align: center; 172 | 173 | .label-switch{ 174 | position: relative; 175 | left: -10px; 176 | font-size: $font-size-xs; 177 | color: $white; 178 | 179 | &.label-right{ 180 | left: 10px; 181 | } 182 | } 183 | 184 | .toggle{ 185 | margin-right: 0; 186 | } 187 | } 188 | 189 | .color-label{ 190 | position: relative; 191 | top: -7px; 192 | font-size: $font-size-xs; 193 | color: $white; 194 | } 195 | 196 | .dropdown-menu > li.adjustments-line > a{ 197 | padding-right: 0; 198 | padding-left: 0; 199 | border-bottom: 1px solid #ddd; 200 | border-radius: 0; 201 | margin: 0; 202 | } 203 | } 204 | 205 | 206 | 207 | .dropdown-menu{ 208 | > li{ 209 | & > a.img-holder{ 210 | font-size: $font-paragraph; 211 | text-align: center; 212 | border-radius: 10px; 213 | background-color: $white; 214 | border: 3px solid $white; 215 | padding-left: 0; 216 | padding-right: 0; 217 | opacity: 1; 218 | cursor: pointer; 219 | display: block; 220 | max-height: 100px; 221 | overflow: hidden; 222 | padding: 0; 223 | 224 | img{ 225 | margin-top: auto; 226 | } 227 | } 228 | 229 | a.switch-trigger:hover, 230 | & > a.switch-trigger:focus{ 231 | background-color: transparent; 232 | } 233 | 234 | &:hover, 235 | &:focus{ 236 | > a.img-holder{ 237 | border-color: rgba(0, 187, 255, 0.53);; 238 | } 239 | } 240 | } 241 | 242 | > .active > a.img-holder, 243 | > .active > a.img-holder{ 244 | border-color: $active-blue; 245 | background-color: $white; 246 | } 247 | 248 | } 249 | 250 | .btn-social{ 251 | width: 50%; 252 | display: block; 253 | width: 48%; 254 | float: left; 255 | font-weight: 600; 256 | } 257 | 258 | .btn-social{ 259 | i{ 260 | margin-right: 5px; 261 | } 262 | 263 | &:first-child{ 264 | margin-right: 2%; 265 | } 266 | } 267 | 268 | .dropdown{ 269 | .dropdown-menu{ 270 | -webkit-transform: translateY(-15%); 271 | -moz-transform: translateY(-15%); 272 | -o-transform: translateY(-15%); 273 | -ms-transform: translateY(-15%); 274 | transform: translateY(-15%); 275 | top: 27px; 276 | opacity: 0; 277 | 278 | transform-origin: 0 0; 279 | 280 | &:before{ 281 | border-bottom: .4em solid rgba(0, 0, 0, 0); 282 | border-left: .4em solid rgba(0,0,0,0.2); 283 | border-top: .4em solid rgba(0,0,0,0); 284 | right: -16px; 285 | top: 46px; 286 | } 287 | 288 | &:after{ 289 | border-bottom: .4em solid rgba(0, 0, 0, 0); 290 | border-left: .4em solid $black; 291 | border-top: .4em solid rgba(0,0,0,0); 292 | right: -16px; 293 | } 294 | 295 | &:before, 296 | &:after{ 297 | content: ""; 298 | display: inline-block; 299 | position: absolute; 300 | top: 74px; 301 | width: 16px; 302 | transform: translateY(-50%); 303 | -webkit-transform: translateY(-50%); 304 | -moz-transform: translateY(-50%); 305 | } 306 | } 307 | 308 | &.show .dropdown-menu{ 309 | opacity: 1; 310 | 311 | -webkit-transform: translateY(-13%); 312 | -moz-transform: translateY(-13%); 313 | -o-transform: translateY(-13%); 314 | -ms-transform: translateY(-13%); 315 | transform: translateY(-13%); 316 | 317 | transform-origin: 0 0; 318 | } 319 | } 320 | 321 | .bootstrap-switch{ 322 | margin:0; 323 | } 324 | } 325 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: 24px 0 24px 250px; 3 | 4 | [class*="container-"] { 5 | padding: 0; 6 | } 7 | 8 | .nav{ 9 | display: inline-block; 10 | float: left; 11 | margin-bottom: 0; 12 | padding-left: 30px; 13 | list-style: none; 14 | } 15 | 16 | .nav-item{ 17 | display: inline-block; 18 | 19 | &:first-child a { 20 | padding-left: 0; 21 | } 22 | } 23 | 24 | .nav-link { 25 | color: $white; 26 | padding: 0 $padding-base-vertical; 27 | font-size: $font-size-sm; 28 | text-transform: uppercase; 29 | text-decoration: none; 30 | 31 | &:hover{ 32 | text-decoration: none; 33 | } 34 | } 35 | 36 | 37 | 38 | .copyright{ 39 | font-size: $font-size-sm; 40 | line-height: 1.8; 41 | color: $white; 42 | } 43 | 44 | &:after{ 45 | display: table; 46 | clear: both; 47 | content: " "; 48 | } 49 | } 50 | 51 | 52 | @media screen and (max-width: 991px){ 53 | .footer { 54 | padding-left: 0px; 55 | 56 | .copyright { 57 | text-align: right; 58 | margin-right: 15px; 59 | } 60 | } 61 | } 62 | 63 | @media screen and (min-width: 992px){ 64 | .footer { 65 | .copyright { 66 | float: right; 67 | padding-right: 30px; 68 | } 69 | } 70 | } 71 | 72 | @media screen and (max-width: 768px){ 73 | .footer { 74 | nav { 75 | display: block; 76 | margin-bottom: 5px; 77 | float: none; 78 | } 79 | } 80 | } 81 | 82 | @media screen and (max-width: 576px){ 83 | .footer { 84 | text-align: center; 85 | .copyright { 86 | text-align: center; 87 | } 88 | 89 | .nav{ 90 | float: none; 91 | padding-left: 0; 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_forms.scss: -------------------------------------------------------------------------------- 1 | /* Form controls */ 2 | @include form-control-placeholder(#6c757c, 1); 3 | 4 | .form-control{ 5 | border-color: lighten($black,5%); 6 | border-radius: $border-radius-lg; 7 | font-size: $font-size-sm; 8 | @include transition-input-focus-color(); 9 | 10 | 11 | &:focus{ 12 | border-color: $primary; 13 | background-color: $input-bg; 14 | @include box-shadow(none); 15 | 16 | & + .input-group-append .input-group-text, 17 | & ~ .input-group-append .input-group-text, 18 | & + .input-group-prepend .input-group-text, 19 | & ~ .input-group-prepend .input-group-text{ 20 | border: 1px solid $primary; 21 | border-left: none; 22 | background-color: $transparent-bg; 23 | } 24 | } 25 | 26 | .has-success &, 27 | .has-error &, 28 | .has-success &:focus, 29 | .has-error &:focus{ 30 | @include box-shadow(none); 31 | } 32 | 33 | .has-danger &, 34 | .has-success &{ 35 | &.form-control-success, 36 | &.form-control-danger{ 37 | background-image: none; 38 | } 39 | } 40 | 41 | & + .form-control-feedback{ 42 | border-radius: $border-radius-lg; 43 | margin-top: -7px; 44 | position: absolute; 45 | right: 10px; 46 | top: 50%; 47 | vertical-align: middle; 48 | } 49 | 50 | .open &{ 51 | border-radius: $border-radius-lg $border-radius-lg 0 0; 52 | border-bottom-color: $transparent-bg; 53 | } 54 | 55 | & + .input-group-append .input-group-text, 56 | & + .input-group-prepend .input-group-text{ 57 | background-color: $white; 58 | } 59 | 60 | } 61 | 62 | .has-success .input-group-append .input-group-text, 63 | .has-success .input-group-prepend .input-group-text, 64 | .has-success .form-control{ 65 | border-color: lighten($black,5%); 66 | } 67 | 68 | .has-success .form-control:focus, 69 | .has-success.input-group-focus .input-group-append .input-group-text, 70 | .has-success.input-group-focus .input-group-prepend .input-group-text{ 71 | border-color: darken($success, 10%); 72 | } 73 | 74 | .has-danger .form-control, 75 | .has-danger .input-group-append .input-group-text, 76 | .has-danger .input-group-prepend .input-group-text, 77 | .has-danger.input-group-focus .input-group-prepend .input-group-text, 78 | .has-danger.input-group-focus .input-group-append .input-group-text{ 79 | border-color: lighten($danger-states,5%); 80 | color: $danger-states; 81 | background-color: rgba(222,222,222, .1); 82 | 83 | &:focus{ 84 | background-color: $transparent-bg; 85 | } 86 | } 87 | 88 | .has-success, 89 | .has-danger{ 90 | &:after{ 91 | font-family: 'nucleo'; 92 | content: "\ea1b"; 93 | display: inline-block; 94 | position: absolute; 95 | right: 20px; 96 | top: 13px; 97 | color: $success; 98 | font-size: 11px; 99 | } 100 | 101 | &.form-control-lg{ 102 | &:after{ 103 | font-size: 13px; 104 | top: 24px; 105 | } 106 | } 107 | 108 | &.has-label{ 109 | &:after{ 110 | top: 37px; 111 | } 112 | } 113 | 114 | 115 | &.form-check:after{ 116 | display: none !important; 117 | } 118 | 119 | &.form-check .form-check-label{ 120 | color: $success; 121 | } 122 | } 123 | 124 | .has-danger{ 125 | &:after{ 126 | content: "\ea48"; 127 | color: $danger-states; 128 | } 129 | 130 | &.form-check .form-check-label{ 131 | color: $danger-states; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_functions.scss: -------------------------------------------------------------------------------- 1 | // Retrieve color Sass maps 2 | 3 | @function section-color($key: "primary") { 4 | @return map-get($section-colors, $key); 5 | } 6 | 7 | // Lines colors 8 | 9 | @function shapes-primary-color($key: "step-1-gradient-bg") { 10 | @return map-get($shapes-primary-colors, $key); 11 | } 12 | 13 | @function shapes-default-color($key: "step-1-gradient-bg") { 14 | @return map-get($shapes-default-colors, $key); 15 | } 16 | 17 | @function lines-light-color($key: "step-1-gradient-bg") { 18 | @return map-get($shapes-light-colors, $key); 19 | } 20 | 21 | @function shapes-dark-color($key: "step-1-gradient-bg") { 22 | @return map-get($shapes-dark-colors, $key); 23 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: $border-radius-sm; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_input-group.scss: -------------------------------------------------------------------------------- 1 | .form-group.has-danger .error, 2 | .input-group.has-danger .error { 3 | color: $danger-states; 4 | } 5 | 6 | 7 | .form-group.has-success .error, 8 | .input-group.has-success .error { 9 | color: $success; 10 | } 11 | 12 | @include form-control-lg-padding($padding-lg-vertical, $padding-input-horizontal); 13 | @include input-base-padding($padding-input-vertical, $padding-input-horizontal); 14 | 15 | .form-group.no-border, 16 | .input-group.no-border{ 17 | .form-control, 18 | .form-control + .input-group-prepend .input-group-text, 19 | .form-control + .input-group-append .input-group-text{ 20 | 21 | background-color: lighten($black,1%); 22 | border: medium none; 23 | &:focus, 24 | &:active, 25 | &:active{ 26 | border: medium none; 27 | background-color: lighten($black,2%); 28 | } 29 | } 30 | 31 | .form-control{ 32 | &:focus{ 33 | & + .input-group-prepend .input-group-text, 34 | & + .input-group-append .input-group-text{ 35 | background-color: lighten($black,2%); 36 | } 37 | } 38 | } 39 | 40 | .input-group-prepend .input-group-text, 41 | .input-group-append .input-group-text{ 42 | background-color: lighten($black,1%);; 43 | border: none; 44 | } 45 | } 46 | 47 | .has-error{ 48 | .form-control-feedback, .control-label{ 49 | color: $danger-states; 50 | } 51 | } 52 | .has-success{ 53 | .form-control-feedback, .control-label{ 54 | color: $success; 55 | } 56 | } 57 | 58 | .input-group-append .input-group-text, 59 | .input-group-prepend .input-group-text { 60 | background-color: transparent; 61 | border: 1px solid lighten($black,5%); 62 | border-radius: $border-radius-lg; 63 | color: $white; 64 | 65 | & i{ 66 | opacity: .5; 67 | } 68 | 69 | @include transition-input-focus-color(); 70 | 71 | .has-danger.input-group-focus &{ 72 | background-color: $transparent-bg; 73 | } 74 | 75 | .has-success &{ 76 | background-color: $transparent-bg; 77 | } 78 | .has-danger .form-control:focus + &{ 79 | color: $danger-states; 80 | } 81 | .has-success .form-control:focus + &{ 82 | color: $success; 83 | } 84 | 85 | & + .form-control, 86 | & ~ .form-control{ 87 | @include input-size($padding-base-vertical - 1, $padding-base-horizontal); 88 | padding-left: 18px; 89 | } 90 | 91 | i{ 92 | width: 17px; 93 | } 94 | } 95 | 96 | .input-group-append, 97 | .input-group-prepend .input-group-text, 98 | .input-group-prepend .input-group-text { 99 | background-color: transparent; 100 | border: 1px solid lighten($black,5%); 101 | border-radius: $border-radius-lg; 102 | color: $white; 103 | margin: 0; 104 | } 105 | 106 | .input-group-append .input-group-text{ 107 | border-left: none; 108 | } 109 | .input-group-prepend .input-group-text{ 110 | border-right: none; 111 | } 112 | 113 | .input-group-focus{ 114 | .input-group-prepend .input-group-text, 115 | .input-group-append .input-group-text{ 116 | background-color: $white; 117 | border-color: $primary; 118 | background-color: $transparent-bg; 119 | border-color: $primary; 120 | } 121 | 122 | &.no-border{ 123 | .input-group-prepend .input-group-text, 124 | .input-group-append .input-group-text{ 125 | background-color: lighten($black,2%); 126 | } 127 | } 128 | } 129 | 130 | .input-group, 131 | .form-group{ 132 | margin-bottom: 10px; 133 | position: relative; 134 | 135 | .form-control-static{ 136 | margin-top: 9px; 137 | } 138 | } 139 | 140 | .input-group[disabled]{ 141 | .input-group-prepend .input-group-text, 142 | .input-group-append .input-group-text{ 143 | background-color: $light-gray; 144 | } 145 | } 146 | 147 | .input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){ 148 | border-radius: $border-radius-lg; 149 | border-top-left-radius: 0; 150 | border-bottom-left-radius: 0; 151 | border-left: 0 none; 152 | } 153 | 154 | .input-group .form-control:first-child, 155 | .input-group-btn:first-child > .dropdown-toggle, 156 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 157 | border-right: 0 none; 158 | } 159 | .input-group .form-control:last-child, 160 | .input-group-btn:last-child > .dropdown-toggle, 161 | .input-group-btn:first-child > .btn:not(:first-child) { 162 | border-left: 0 none; 163 | } 164 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 165 | background-color: $black-states; 166 | color: $default; 167 | cursor: not-allowed; 168 | } 169 | 170 | .input-group-btn .btn{ 171 | border-width: $border-thin; 172 | padding: $padding-btn-vertical $padding-base-horizontal; 173 | } 174 | .input-group-btn .btn-default:not(.btn-fill){ 175 | border-color: $medium-gray; 176 | } 177 | 178 | .input-group-btn:last-child > .btn{ 179 | margin-left: 0; 180 | } 181 | 182 | textarea.form-control{ 183 | max-width: 100%; 184 | max-height: 80px; 185 | padding: 10px 10px 0 0; 186 | resize: none; 187 | line-height: 2; 188 | } 189 | 190 | .has-success, 191 | .has-danger{ 192 | 193 | &.form-group .form-control, 194 | &.form-group.no-border .form-control{ 195 | padding-right: $input-padding-horizontal + 21; 196 | } 197 | } 198 | 199 | .form.form-newsletter .form-group{ 200 | float: left; 201 | width: 78%; 202 | margin-right: 2%; 203 | margin-top: 9px; 204 | } 205 | 206 | .input-group .input-group-btn{ 207 | padding: 0 12px; 208 | } 209 | 210 | // Input files - hide actual input - requires specific markup in the sample. 211 | .form-group input[type=file] { 212 | opacity: 0; 213 | position: absolute; 214 | top: 0; 215 | right: 0; 216 | bottom: 0; 217 | left: 0; 218 | width: 100%; 219 | height: 100%; 220 | z-index: 100; 221 | } 222 | 223 | .form-text{ 224 | font-size: $font-size-sm; 225 | color: rgba($white,0.8); 226 | } 227 | 228 | .form-control-lg{ 229 | padding: 0; 230 | font-size: inherit; 231 | line-height: 0; 232 | border-radius: 0; 233 | 234 | .form-control { 235 | height: calc(2.875rem + 2px); 236 | } 237 | } 238 | 239 | .form-horizontal{ 240 | .col-form-label, 241 | .label-on-right{ 242 | padding: 10px 5px 0 15px; 243 | text-align: right; 244 | max-width: 180px; 245 | } 246 | 247 | .checkbox-radios{ 248 | margin-bottom: 15px; 249 | 250 | .form-check:first-child{ 251 | margin-top: 8px; 252 | } 253 | } 254 | 255 | .label-on-right{ 256 | text-align: left; 257 | padding: 10px 15px 0 5px; 258 | } 259 | 260 | .form-check-inline{ 261 | margin-top: 6px; 262 | .form-check-label{ 263 | margin-right: 1.5rem; 264 | } 265 | } 266 | } 267 | 268 | .search-bar{ 269 | margin-left: $margin-lg-vertical; 270 | .btn{ 271 | margin: 0; 272 | } 273 | &.input-group{ 274 | border-radius: 25px; 275 | z-index: 4; 276 | margin-bottom: 0; 277 | height: 43px; 278 | padding-right: 5px; 279 | .input-group-addon{ 280 | padding: 10px; 281 | background: transparent; 282 | border: none; 283 | color: rgba(255, 255, 255, 0.7); 284 | 285 | } 286 | 287 | i{ 288 | font-size: 20px; 289 | color: $white; 290 | margin-top: 0 !important; 291 | } 292 | input{ 293 | background: transparent; 294 | border:none !important; 295 | border-radius: 0; 296 | padding: 12px !important; 297 | font-size: 12px; 298 | opacity: 0.5; 299 | &:focus{ 300 | background: transparent; 301 | } 302 | } 303 | .form-control{ 304 | opacity: 1; 305 | color: $white; 306 | &::placeholder{ 307 | color: white; 308 | } 309 | } 310 | } 311 | } 312 | 313 | .modal-search .modal-dialog{ 314 | max-width: 1000px; 315 | margin: 20px auto; 316 | .form-control{ 317 | border: none; 318 | color: $black; 319 | &::placeholder{ 320 | color: $black; 321 | } 322 | } 323 | } 324 | 325 | .input-group-prepend{ 326 | margin-right: 0; 327 | } 328 | .input-group-prepend, 329 | .input-group-append { 330 | .tim-icons { 331 | font-size: $font-paragraph; 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_misc.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Animations */ 3 | .nav-pills .nav-link, 4 | .navbar, 5 | .nav-tabs .nav-link, 6 | .sidebar .nav a, 7 | .sidebar .nav a i, 8 | .sidebar .nav p, 9 | .navbar-collapse .navbar-nav .nav-link, 10 | .animation-transition-general, 11 | .tag, 12 | .tag [data-role="remove"], 13 | .animation-transition-general{ 14 | @include transitions($general-transition-time, $transition-ease); 15 | } 16 | 17 | //transition for dropdown caret 18 | .bootstrap-switch-label:before, 19 | .caret{ 20 | @include transitions($fast-transition-time, $transition-ease); 21 | } 22 | 23 | .dropdown-toggle[aria-expanded="true"]:after, 24 | a[data-toggle="collapse"][aria-expanded="true"] .caret, 25 | .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, 26 | .card-collapse .card a[data-toggle="collapse"].expanded i{ 27 | @include rotate-180(); 28 | } 29 | 30 | .caret{ 31 | width: 0; 32 | height: 0; 33 | vertical-align: middle; 34 | border-top: 4px dashed; 35 | border-right: 4px solid transparent; 36 | border-left: 4px solid transparent; 37 | margin-top: -5px; 38 | position: absolute; 39 | top: 30px; 40 | margin-left: 5px; 41 | } 42 | 43 | .pull-left{ 44 | float: left; 45 | } 46 | .pull-right{ 47 | float: right; 48 | } 49 | 50 | 51 | // card user profile page 52 | 53 | .card { 54 | form { 55 | label + .form-control { 56 | margin-bottom: 20px; 57 | } 58 | } 59 | } 60 | 61 | .card { 62 | .map-title { 63 | color: $white; 64 | } 65 | 66 | &.card-chart { 67 | .gmnoprint, 68 | .gm-style-cc { 69 | display: none !important; 70 | } 71 | } 72 | } 73 | 74 | // documentation 75 | 76 | .bd-docs { 77 | 78 | h1,h2,h3,h4,h5,h6,p,ul li,ol li{ 79 | color:#2c2c2c; 80 | } 81 | 82 | 83 | .bd-content>table>thead>tr>th { 84 | color: $black; 85 | 86 | } 87 | 88 | .blockquote, .blockquote p, .card p{ 89 | color: rgba($white,0.8); 90 | } 91 | .bd-example { 92 | background: linear-gradient(#1e1e2f,#1e1e24); 93 | 94 | } 95 | 96 | .navbar { 97 | border-top: none; 98 | 99 | .navbar-nav .nav-link { 100 | color: rgba(255,255,255,.8) !important; 101 | } 102 | } 103 | 104 | .bd-example { 105 | 106 | .btn{ 107 | margin: 4px 0; 108 | } 109 | .btn .badge { 110 | display: inline-block; 111 | } 112 | 113 | .tim-icons{ 114 | color: $white; 115 | } 116 | 117 | .popover .popover-header { 118 | color: hsla(0,0%,71%,.6); 119 | } 120 | 121 | 122 | .popover-body { 123 | p { 124 | color: $gray-900; 125 | } 126 | } 127 | 128 | &.tooltip-demo p{ 129 | color: rgba($white,.8); 130 | } 131 | } 132 | 133 | .card.card-body, 134 | .card .card-body { 135 | color: hsla(0,0%,100%,.8); 136 | } 137 | 138 | label, 139 | .form-check { 140 | color: hsla(0,0%,100%,.8); 141 | } 142 | 143 | .form-check + .btn { 144 | margin-top: 20px; 145 | } 146 | 147 | .bd-example, 148 | table { 149 | thead th { 150 | color: hsla(0,0%,100%,.8); 151 | } 152 | 153 | h1, h2, h3, h4, h5, h6, 154 | .h1, .h2, .h3, .h4, .h5, .h6 { 155 | color: hsla(0,0%,100%,.8); 156 | } 157 | 158 | .datepicker{ 159 | thead th, table thead th,.tim-icons{ 160 | color: $primary; 161 | } 162 | 163 | } 164 | 165 | .picker-switch .tim-icons{ 166 | color: $primary; 167 | } 168 | } 169 | 170 | .footer { 171 | .container-fluid > nav { 172 | display: inline-block; 173 | } 174 | } 175 | } 176 | .modal.show .modal-dialog { 177 | -webkit-transform: translate(0,30%); 178 | transform: translate(0,30%); 179 | } 180 | 181 | code { 182 | color: $pink; 183 | } 184 | 185 | @media screen and (max-width: 991px){ 186 | .profile-photo .profile-photo-small{ 187 | margin-left: -2px; 188 | } 189 | 190 | .button-dropdown{ 191 | display: none; 192 | } 193 | 194 | #searchModal .modal-dialog{ 195 | margin: 20px; 196 | } 197 | 198 | #minimizeSidebar{ 199 | display: none; 200 | } 201 | 202 | } 203 | 204 | 205 | @media screen and (max-width: 768px){ 206 | 207 | .landing-page .section-story-overview .image-container:nth-child(2){ 208 | margin-left: 0; 209 | margin-bottom: 30px; 210 | } 211 | 212 | } 213 | 214 | @media screen and (max-width: 576px){ 215 | .page-header{ 216 | .container h6.category-absolute{ 217 | width: 90%; 218 | } 219 | } 220 | 221 | .form-horizontal .col-form-label, .form-horizontal .label-on-right{ 222 | text-align: inherit; 223 | padding-top: 0; 224 | code{ 225 | padding: 0 10px; 226 | } 227 | } 228 | 229 | } 230 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/alert.scss"; 2 | @import "mixins/badges.scss"; 3 | @import "mixins/background-variant.scss"; 4 | @import "mixins/buttons.scss"; 5 | @import "mixins/forms.scss"; 6 | @import "mixins/icon.scss"; 7 | @import "mixins/modals.scss"; 8 | @import "mixins/popovers.scss"; 9 | @import "mixins/page-header.scss"; 10 | @import "mixins/vendor-prefixes.scss"; 11 | @import "mixins/opacity.scss"; 12 | @import "mixins/modals.scss"; 13 | @import "mixins/inputs.scss"; 14 | @import "mixins/dropdown.scss"; 15 | @import "mixins/wizard.scss"; 16 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_modal.scss: -------------------------------------------------------------------------------- 1 | // Modals 2 | // Design element Dialogs 3 | // -------------------------------------------------- 4 | .modal-content { 5 | border: 0; 6 | 7 | // Modal header 8 | // Top section of the modal w/ title and dismiss 9 | 10 | .modal-header { 11 | border-bottom: none; 12 | 13 | & button { 14 | position: absolute; 15 | right: 27px; 16 | top: 24px; 17 | outline: 0; 18 | padding: 1rem; 19 | margin: -1rem -1rem -1rem auto; 20 | } 21 | .title{ 22 | color: $black; 23 | margin-top: 5px; 24 | margin-bottom: 0; 25 | } 26 | 27 | .modal-title{ 28 | color: $black; 29 | } 30 | 31 | i.tim-icons { 32 | font-size: 16px; 33 | } 34 | } 35 | 36 | 37 | // Modal body 38 | // Where all modal content resides (sibling of .modal-header and .modal-footer) 39 | .modal-body { 40 | line-height: 1.9; 41 | 42 | p{ 43 | color: $black; 44 | } 45 | } 46 | // Footer (for actions) 47 | .modal-footer { 48 | border-top: 0; 49 | -webkit-justify-content: space-between; /* Safari 6.1+ */ 50 | justify-content: space-between; 51 | 52 | button { 53 | margin: 0; 54 | padding-left: 16px; 55 | padding-right: 16px; 56 | width: auto; 57 | 58 | &.pull-left { 59 | padding-left: 5px; 60 | padding-right: 5px; 61 | position: relative; 62 | left: -5px; 63 | } 64 | } 65 | 66 | } 67 | .modal-body + .modal-footer { 68 | padding-top: 0; 69 | } 70 | } 71 | .modal-backdrop { 72 | background: rgba(0,0,0,0.3); 73 | } 74 | 75 | .modal{ 76 | 77 | &.modal-default{ 78 | @include modal-colors($white, $black); 79 | } 80 | 81 | &.modal-primary{ 82 | @include modal-colors($primary, $white); 83 | } 84 | 85 | &.modal-danger{ 86 | @include modal-colors($danger, $white); 87 | } 88 | 89 | &.modal-warning{ 90 | @include modal-colors($warning, $white); 91 | } 92 | 93 | &.modal-success{ 94 | @include modal-colors($success, $white); 95 | } 96 | 97 | &.modal-info{ 98 | @include modal-colors($info, $white); 99 | } 100 | 101 | .modal-header .close{ 102 | color: $danger; 103 | text-shadow: none; 104 | 105 | &:hover, 106 | &:focus{ 107 | opacity: 1; 108 | } 109 | } 110 | 111 | &.modal-black{ 112 | .modal-content{ 113 | background: linear-gradient(to bottom, $black 0%, $black-states 100%); 114 | color: rgba($white, 0.8); 115 | .modal-header{ 116 | .modal-title, .title{ 117 | color: rgba($white, 0.9); 118 | } 119 | } 120 | .modal-body{ 121 | p{ 122 | color: rgba($white, 0.8); 123 | } 124 | } 125 | } 126 | h1, h2, h3, h4, h5, h6, p{ 127 | color: $white; 128 | } 129 | } 130 | } 131 | 132 | .modal-search{ 133 | .modal-dialog{ 134 | margin: 20px auto; 135 | max-width: 650px; 136 | input{ 137 | border: none; 138 | font-size: 17px; 139 | font-weight: 100; 140 | } 141 | span{ 142 | font-size: 35px; 143 | color: $search-gray; 144 | } 145 | } 146 | .modal-content{ 147 | .modal-header{ 148 | padding: 24px; 149 | } 150 | } 151 | 152 | .modal-header .close{ 153 | color: $dark-background; 154 | top: 30px !important; 155 | } 156 | 157 | .modal-footer{ 158 | border-top: 2px solid #f9f9f9; 159 | margin: 0px 25px 20px; 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_rtl.scss: -------------------------------------------------------------------------------- 1 | .rtl { 2 | .sidebar, 3 | .bootstrap-navbar{ 4 | right: 0; 5 | left: auto; 6 | margin-right: 20px; 7 | margin-left: 0; 8 | 9 | .nav{ 10 | i{ 11 | float: right; 12 | margin-left: 15px; 13 | margin-right: 0; 14 | } 15 | 16 | p{ 17 | margin-right: 45px; 18 | text-align: right; 19 | } 20 | 21 | .caret{ 22 | left: 11px; 23 | right: auto; 24 | } 25 | } 26 | 27 | .logo{ 28 | a.logo-mini{ 29 | float: right; 30 | margin-right: 20px; 31 | margin-left: 10px; 32 | } 33 | 34 | .simple-text{ 35 | text-align: right; 36 | } 37 | } 38 | 39 | .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, 40 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ 41 | float: right; 42 | margin-left: 15px; 43 | margin-right: 0; 44 | } 45 | 46 | .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, 47 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{ 48 | text-align: right; 49 | } 50 | 51 | &:before{ 52 | right: 30px; 53 | left: auto; 54 | } 55 | } 56 | 57 | .main-panel .content{ 58 | padding: 80px 280px 30px 30px; 59 | } 60 | 61 | .footer{ 62 | padding: 24px 300px 24px 0; 63 | } 64 | 65 | .dropdown-toggle:after{ 66 | margin-right: .255em; 67 | margin-left: 0; 68 | } 69 | 70 | .dropdown-menu.dropdown-menu-right.dropdown-navbar{ 71 | right: -220px !important; 72 | left: auto; 73 | 74 | &:before{ 75 | right: auto; 76 | left: 35px; 77 | } 78 | } 79 | 80 | .notification{ 81 | left: 40px; 82 | right: auto; 83 | } 84 | 85 | .dropdown-menu{ 86 | right: auto; 87 | left: 0; 88 | } 89 | 90 | 91 | .minimize-sidebar{ 92 | float: right; 93 | } 94 | 95 | .alert{ 96 | left: 0; 97 | margin-left: 0; 98 | margin-right: 0; 99 | button.close{ 100 | left: 10px !important; 101 | right: auto !important; 102 | } 103 | 104 | span[data-notify="icon"]{ 105 | right: 15px; 106 | left: auto; 107 | } 108 | 109 | 110 | 111 | &.alert-with-icon{ 112 | padding-right: 65px; 113 | padding-left: 15px; 114 | } 115 | 116 | &.alert-with-icon i[data-notify="icon"]{ 117 | right: 15px; 118 | left: auto; 119 | } 120 | } 121 | 122 | .search-bar{ 123 | margin-left: 0; 124 | } 125 | 126 | .modal-search .modal-header .close{ 127 | margin-right: auto; 128 | left: 10px; 129 | } 130 | 131 | 132 | @media (min-width: 991px){ 133 | &.sidebar-mini .main-panel .content { 134 | padding-right: 130px; 135 | padding-left: 50px; 136 | } 137 | 138 | &.sidebar-mini footer{ 139 | padding-right: 130px; 140 | padding-left: 50px; 141 | } 142 | 143 | .navbar-minimize button{ 144 | margin-right: -5px; 145 | } 146 | } 147 | 148 | 149 | 150 | @media screen and (max-width: 991px){ 151 | 152 | .sidebar{ 153 | margin-right: 0; 154 | } 155 | .main-panel .content{ 156 | padding-right: 50px; 157 | } 158 | 159 | #bodyClick{ 160 | right: 260px; 161 | left: auto; 162 | } 163 | 164 | .footer{ 165 | padding-right: 15px; 166 | } 167 | } 168 | 169 | .navbar { 170 | .navbar-nav { 171 | padding-right: 0; 172 | a.nav-link { 173 | text-align: right; 174 | p{ 175 | margin-right: 7px; 176 | } 177 | } 178 | 179 | .btn { 180 | margin-right: 0; 181 | padding: 0; 182 | i{ 183 | margin-left: 4px; 184 | margin-right: 5px; 185 | } 186 | } 187 | 188 | .search-bar span{ 189 | margin-right: 10px; 190 | } 191 | } 192 | } 193 | 194 | .ps__rail-y { 195 | right: auto !important; 196 | left: 0; 197 | } 198 | 199 | .main-panel { 200 | position: fixed; 201 | height: 100%; 202 | overflow-y: scroll; 203 | overflow-x: hidden; 204 | } 205 | .fixed-plugin { 206 | border-radius: 0 8px 8px 0; 207 | left: 0; 208 | right: unset; 209 | .dropdown-menu { 210 | left: 80px !important; 211 | right: auto !important; 212 | &:before,&:after { 213 | left: 10px; 214 | margin-right: auto; 215 | right: auto; 216 | } 217 | &:before { 218 | right: unset; 219 | left: -16px; 220 | border-left: unset; 221 | border-right: .4em solid rgba(0,0,0,.2); 222 | } 223 | &:after { 224 | right: unset; 225 | left: -16px; 226 | border-left: unset; 227 | border-right: .4em solid $black; 228 | } 229 | } 230 | } 231 | .sidebar .nav li.active > a:not([data-toggle="collapse"]):before, .off-canvas-sidebar .nav li.active > a:not([data-toggle="collapse"]):before{ 232 | left: unset; 233 | right: -4px; 234 | } 235 | } 236 | 237 | 238 | @media screen and (max-width: 768px){ 239 | 240 | .rtl .main-panel .content{ 241 | padding-left: 15px; 242 | padding-right: 15px; 243 | } 244 | 245 | } 246 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | > tbody > tr > td { 3 | color: rgba(255, 255, 255, 0.7) !important; 4 | 5 | .photo { 6 | height: 30px; 7 | width: 30px; 8 | border-radius: 50%; 9 | overflow: hidden; 10 | margin: 0 auto; 11 | 12 | img { 13 | width: 100%; 14 | } 15 | } 16 | } 17 | 18 | > tbody > tr.table-success > td{ 19 | background-color: darken($success,10%); 20 | } 21 | 22 | > tbody > tr.table-info > td{ 23 | background-color: $info; 24 | } 25 | 26 | > tbody > tr.table-primary > td{ 27 | background-color: $primary; 28 | } 29 | 30 | > tbody > tr.table-warning > td{ 31 | background-color: $warning; 32 | } 33 | > tbody > tr.table-danger > td{ 34 | background-color: $danger; 35 | } 36 | 37 | .img-wrapper{ 38 | width: 40px; 39 | height: 40px; 40 | border-radius: 50%; 41 | overflow: hidden; 42 | margin: 0 auto; 43 | } 44 | 45 | .img-row{ 46 | max-width: 60px; 47 | width: 60px; 48 | } 49 | 50 | .form-check{ 51 | margin: 0; 52 | margin-top: 5px; 53 | 54 | & label .form-check-sign::before, 55 | & label .form-check-sign::after{ 56 | top: -17px; 57 | left: 4px; 58 | } 59 | } 60 | 61 | .btn{ 62 | margin: 0; 63 | } 64 | 65 | small,.small{ 66 | font-weight: 300; 67 | } 68 | 69 | .card-tasks .card-body &{ 70 | margin-bottom: 0; 71 | 72 | > thead > tr > th, 73 | > tbody > tr > th, 74 | > tfoot > tr > th, 75 | > thead > tr > td, 76 | > tbody > tr > td, 77 | > tfoot > tr > td{ 78 | padding-top: 5px; 79 | padding-bottom: 5px; 80 | } 81 | } 82 | 83 | > thead > tr > th{ 84 | border-bottom-width: 1px; 85 | font-size: 12px; 86 | text-transform: uppercase; 87 | font-weight: $font-weight-extra-bold; 88 | border: 0; 89 | color: rgba($white, 0.7); 90 | } 91 | 92 | .radio, 93 | .checkbox{ 94 | margin-top: 0; 95 | margin-bottom: 0; 96 | padding: 0; 97 | width: 15px; 98 | 99 | .icons{ 100 | position: relative; 101 | } 102 | 103 | label{ 104 | &:after, 105 | &:before{ 106 | top: -17px; 107 | left: -3px; 108 | } 109 | } 110 | } 111 | > thead > tr > th, 112 | > tbody > tr > th, 113 | > tfoot > tr > th, 114 | > thead > tr > td, 115 | > tbody > tr > td, 116 | > tfoot > tr > td{ 117 | border-color: rgba(255, 255, 255, 0.1); 118 | padding: 12px 7px; 119 | vertical-align: middle; 120 | } 121 | 122 | &.table-shopping tbody tr:last-child td{ 123 | border: none; 124 | } 125 | 126 | .th-description{ 127 | max-width: 150px; 128 | } 129 | .td-price{ 130 | font-size: 26px; 131 | font-weight: $font-weight-light; 132 | margin-top: 5px; 133 | position: relative; 134 | top: 4px; 135 | text-align: right; 136 | } 137 | .td-total{ 138 | font-weight: $font-weight-bold; 139 | font-size: $h5-font-size; 140 | padding-top: 20px; 141 | text-align: right; 142 | } 143 | 144 | .td-actions .btn{ 145 | margin: 0px; 146 | } 147 | 148 | > tbody > tr{ 149 | position: relative; 150 | } 151 | 152 | > tfoot > tr { 153 | color: hsla(0,0%,100%,.7); 154 | text-transform: uppercase; 155 | } 156 | } 157 | 158 | .table-responsive{ 159 | overflow: scroll; 160 | padding-bottom: 10px; 161 | } 162 | 163 | #tables .table-responsive{ 164 | margin-bottom: 30px; 165 | } 166 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_type.scss: -------------------------------------------------------------------------------- 1 | body { 2 | -moz-osx-font-smoothing: grayscale; 3 | -webkit-font-smoothing: antialiased; 4 | } 5 | 6 | h1, h2, h3, h4, h5, h6, 7 | .h1, .h2, .h3, .h4, .h5, .h6 { 8 | line-height: $headings-line-height; 9 | 10 | } 11 | p{ 12 | font-weight: $font-weight-light; 13 | } 14 | 15 | button, 16 | input, 17 | optgroup, 18 | select, 19 | textarea{ 20 | font-family: $font-family-base; 21 | } 22 | .card{ 23 | h1,h2,h3,h4,h5,h6,p{ 24 | color: $opacity-8; 25 | } 26 | } 27 | h1,h2,h3,h4,h5,h6{ 28 | font-weight: $font-weight-normal; 29 | color: $opacity-8; 30 | } 31 | 32 | a{ 33 | color: $primary-states; 34 | font-weight: $font-weight-light; 35 | &:hover, 36 | &:focus{ 37 | color: $primary; 38 | } 39 | } 40 | h1, .h1 { 41 | line-height: 1.05; 42 | margin-bottom: $margin-base-vertical * 2; 43 | 44 | small{ 45 | font-weight: $font-weight-bold; 46 | text-transform: uppercase; 47 | opacity: .8; 48 | } 49 | 50 | } 51 | h2, .h2{ 52 | margin-bottom: $margin-base-vertical * 2; 53 | line-height: 1.2; 54 | 55 | } 56 | h3, .h3{ 57 | margin-bottom: $margin-base-vertical * 2; 58 | line-height: 1.4em; 59 | } 60 | h4, .h4{ 61 | line-height: 1.45em; 62 | margin-bottom: $margin-base-vertical; 63 | 64 | & + .category, 65 | &.title + .category{ 66 | margin-top: -10px; 67 | } 68 | } 69 | h5, .h5 { 70 | line-height: 1.4em; 71 | margin-bottom: 15px; 72 | } 73 | h6, .h6{ 74 | text-transform: uppercase; 75 | font-weight: $font-weight-bold; 76 | } 77 | p{ 78 | color: $opacity-8; 79 | margin-bottom: 5px; 80 | 81 | &.description{ 82 | font-size: 1.14em; 83 | } 84 | } 85 | 86 | 87 | .title{ 88 | font-weight: $font-weight-bold; 89 | &.title-up{ 90 | text-transform: uppercase; 91 | 92 | a{ 93 | color: $black; 94 | text-decoration: none; 95 | } 96 | } 97 | & + .category{ 98 | margin-top: -10px; 99 | } 100 | } 101 | 102 | .description, 103 | .card-description, 104 | .footer-big p, 105 | .card .footer .stats{ 106 | color: $dark-gray; 107 | font-weight: $font-weight-light; 108 | } 109 | .category, 110 | .card-category{ 111 | text-transform: capitalize; 112 | font-weight: $font-weight-normal; 113 | color: rgba($white, 0.6); 114 | font-size: $font-size-sm; 115 | } 116 | 117 | .card-category{ 118 | font-size: $font-size-sm; 119 | } 120 | 121 | .blockquote{ 122 | border-left: none; 123 | border: 1px solid $default; 124 | padding: 20px; 125 | font-size: $blockquote-font-size; 126 | line-height: 1.8; 127 | 128 | small{ 129 | color: $default; 130 | font-size: $font-size-sm; 131 | text-transform: uppercase; 132 | } 133 | 134 | &.blockquote-primary{ 135 | border-color: $primary; 136 | color: $primary; 137 | 138 | small{ 139 | color: $primary; 140 | } 141 | } 142 | 143 | &.blockquote-danger{ 144 | border-color: $danger; 145 | color: $danger; 146 | 147 | small{ 148 | color: $danger; 149 | } 150 | } 151 | 152 | &.blockquote-white{ 153 | border-color: $opacity-8; 154 | color: $white; 155 | 156 | small{ 157 | color: $opacity-8; 158 | } 159 | } 160 | } 161 | 162 | ul li, ol li{ 163 | color: $white; 164 | } 165 | 166 | pre{ 167 | color: $opacity-8; 168 | } 169 | 170 | hr{ 171 | border-top: 1px solid rgba(0,0,0,0.1); 172 | margin-top: $spacer; 173 | margin-bottom: $spacer; 174 | } 175 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/backgrounds.scss"; 2 | @import "utilities/floating.scss"; 3 | @import "utilities/helper.scss"; 4 | @import "utilities/position.scss"; 5 | @import "utilities/sizing.scss"; 6 | @import "utilities/spacing.scss"; 7 | @import "utilities/shadows.scss"; 8 | @import "utilities/text.scss"; 9 | @import "utilities/transform.scss"; 10 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/_white-content.scss: -------------------------------------------------------------------------------- 1 | .white-content{ 2 | 3 | background: $light-bg; 4 | 5 | .navbar.navbar-transparent .navbar-brand{ 6 | color: $black-states; 7 | } 8 | 9 | .navbar.navbar-transparent .navbar-toggler-bar{ 10 | background: $black-states; 11 | } 12 | .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){ 13 | color: $black-states; 14 | & i{ 15 | color: $black-states; 16 | } 17 | } 18 | 19 | .navbar.navbar-transparent .navbar-minimize button i{ 20 | color: $black-states; 21 | } 22 | 23 | .navbar.navbar-transparent .search-bar.input-group i{ 24 | color: $black-states; 25 | } 26 | .navbar.navbar-transparent .search-bar.input-group .form-control{ 27 | color: $default; 28 | &::placeholder{ 29 | color: $dark-gray; 30 | } 31 | } 32 | 33 | .sidebar{ 34 | box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15); 35 | p{ 36 | color: $opacity-8; 37 | } 38 | } 39 | 40 | .main-panel{ 41 | background: $light-bg; 42 | } 43 | 44 | h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre { 45 | color: $black-states; 46 | } 47 | 48 | .font-icon-detail i{ 49 | color: $black; 50 | } 51 | 52 | .btn:not([data-action]):hover{ 53 | box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); 54 | } 55 | 56 | .btn-neutral.btn-link{ 57 | color: rgba($black, 0.7); 58 | } 59 | 60 | //style for inputs 61 | 62 | @include form-control-placeholder(rgba($black,0.4), 1); 63 | .has-danger{ 64 | .form-control, .input-group-prepend .input-group-text{ 65 | border-color: $danger-states; 66 | } 67 | } 68 | 69 | .input-group-prepend .input-group-text{ 70 | border-color: rgba($black-states,0.5); 71 | color: $black-states; 72 | } 73 | 74 | .form-control{ 75 | color: $black; 76 | border-color: rgba($black-states,0.5); 77 | &:focus{ 78 | border-color: $primary; 79 | } 80 | } 81 | 82 | .form-group.no-border, 83 | .input-group.no-border{ 84 | .form-control, 85 | .form-control + .input-group-prepend .input-group-text, 86 | .form-control + .input-group-append .input-group-text, 87 | .input-group-prepend .input-group-text, 88 | .input-group-append .input-group-text{ 89 | background-color: $opacity-gray-3; 90 | &:focus, 91 | &:active, 92 | &:active{ 93 | background-color: $opacity-gray-5; 94 | } 95 | } 96 | 97 | .form-control{ 98 | &:focus{ 99 | & + .input-group-prepend .input-group-text, 100 | & + .input-group-append .input-group-text{ 101 | 102 | background-color: $transparent-bg; 103 | } 104 | } 105 | } 106 | 107 | 108 | } 109 | 110 | .input-group[disabled]{ 111 | .input-group-prepend .input-group-text, 112 | .input-group-append .input-group-text{ 113 | background-color: $black; 114 | } 115 | } 116 | 117 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ 118 | background: $light-gray; 119 | border-color: rgba($black-states,0.3); 120 | } 121 | 122 | .input-group-focus{ 123 | .input-group-prepend .input-group-text, 124 | .input-group-append .input-group-text, 125 | .form-control{ 126 | border-color: $primary; 127 | } 128 | 129 | &.no-border{ 130 | .input-group-prepend .input-group-text, 131 | .input-group-append .input-group-text{ 132 | 133 | background-color: $opacity-gray-5; 134 | } 135 | } 136 | } 137 | .input-group-prepend .input-group-text { 138 | border-right: none; 139 | } 140 | 141 | .input-group-append .input-group-text { 142 | border-left: none; 143 | } 144 | 145 | .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { 146 | border-color: $danger-states; 147 | } 148 | 149 | .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { 150 | border-color: darken($success, 10%); 151 | } 152 | 153 | .btn.btn-link{ 154 | &:hover,&:active, &:focus{ 155 | color: $dark-gray !important; 156 | } 157 | } 158 | 159 | .btn-group .btn.active{ 160 | box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); 161 | } 162 | 163 | .card:not(.card-white){ 164 | background: $white; 165 | box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05); 166 | .card-header{ 167 | color: $black; 168 | a[data-toggle="collapse"]{ 169 | color: $black; 170 | } 171 | } 172 | .card-header .card-title, .card-body .card-title{ 173 | color: $black-states; 174 | } 175 | 176 | .card-body{ 177 | .card-category, .card-description{ 178 | color: $black-states; 179 | } 180 | } 181 | 182 | 183 | label:not(.btn){ 184 | color: $default; 185 | } 186 | 187 | 188 | &.nav-pills .nav-item .nav-link { 189 | color: $nav-gray; 190 | background-color: hsla(0,0%,87%,.3); 191 | &:not(.active):hover{ 192 | background: hsla(0,0%,87%,.5); 193 | } 194 | &.active{ 195 | color: $white; 196 | 197 | } 198 | } 199 | 200 | .tab-content .tab-pane { 201 | color: $nav-gray; 202 | } 203 | 204 | 205 | .card{ 206 | box-shadow: none; 207 | } 208 | 209 | &.card-plain{ 210 | background: $transparent-bg; 211 | box-shadow: none; 212 | } 213 | 214 | &.card-tasks{ 215 | .card-body{ 216 | i{ 217 | color: rgba(34,42,66,0.7); 218 | &:hover{ 219 | color: $black; 220 | } 221 | } 222 | } 223 | } 224 | } 225 | 226 | .table{ 227 | 228 | > tbody > tr > td { 229 | color: rgba($black, 0.7) !important; 230 | 231 | } 232 | 233 | > thead > tr > th, 234 | > tbody > tr > th, 235 | > tfoot > tr > th, 236 | > thead > tr > td, 237 | > tbody > tr > td, 238 | > tfoot > tr > td{ 239 | border-color: rgba($black, 0.2); 240 | padding: 12px 7px; 241 | vertical-align: middle; 242 | } 243 | 244 | > thead > tr > th, button.btn-neutral.btn-link{ 245 | color: rgba($black, 0.7); 246 | } 247 | } 248 | 249 | .footer ul li a{ 250 | color: $black-states; 251 | } 252 | 253 | .footer .copyright{ 254 | color: $black-states; 255 | } 256 | 257 | .progress-container, .progress-container.progress.sm{ 258 | .progress{ 259 | background: rgba($black,0.1); 260 | box-shadow: 0 0 0 3px rgba($black,0.1); 261 | .progress-value{ 262 | color: $default; 263 | } 264 | } 265 | 266 | .progress-badge{ 267 | color: $black-states; 268 | } 269 | } 270 | 271 | .full-page{ 272 | background: $light-bg; 273 | 274 | h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre { 275 | color: $black-states; 276 | } 277 | 278 | .description{ 279 | color: $dark-gray; 280 | } 281 | 282 | .footer ul li a{ 283 | color: $black-states; 284 | } 285 | 286 | .footer .copyright{ 287 | color: $black-states; 288 | } 289 | } 290 | 291 | .nav-pills .nav-item .nav-link:not(.active){ 292 | background: darken($light-bg,10%); 293 | color: $black-states; 294 | &:hover{ 295 | background: darken($white,20%); 296 | 297 | } 298 | } 299 | } 300 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/cards/_card-chart.scss: -------------------------------------------------------------------------------- 1 | .card-chart { 2 | overflow: hidden; 3 | .card-header{ 4 | .card-title{ 5 | i{ 6 | font-size: 16px; 7 | margin-right: 5px; 8 | margin-bottom: 3px; 9 | } 10 | } 11 | .card-category{ 12 | margin-bottom: 5px; 13 | } 14 | } 15 | .card-body{ 16 | padding-left: 5px; 17 | padding-right: 5px; 18 | .tab-space{ 19 | padding: 0; 20 | } 21 | } 22 | .table{ 23 | margin-bottom: 0; 24 | 25 | td{ 26 | border-top: none; 27 | border-bottom: 1px solid rgba($white,0.1); 28 | } 29 | } 30 | 31 | .card-progress { 32 | margin-top: 30px; 33 | padding: 0 10px; 34 | } 35 | 36 | .chart-area { 37 | height: 220px; 38 | width: 100%; 39 | } 40 | .card-footer { 41 | margin-top: 15px; 42 | 43 | .stats{ 44 | color: $dark-gray; 45 | } 46 | } 47 | 48 | .dropdown{ 49 | position: absolute; 50 | right: 20px; 51 | top: 20px; 52 | 53 | .btn{ 54 | margin: 0; 55 | } 56 | } 57 | 58 | &.card-chart-pie{ 59 | .chart-area{ 60 | padding: 10px 0 25px; 61 | height: auto; 62 | } 63 | 64 | .card-title{ 65 | margin-bottom: 10px; 66 | i{ 67 | font-size: 1rem; 68 | } 69 | } 70 | 71 | } 72 | 73 | } 74 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/cards/_card-map.scss: -------------------------------------------------------------------------------- 1 | .map { 2 | height: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | .card-plain { 2 | background: transparent; 3 | box-shadow: none; 4 | 5 | .card-header, 6 | .card-footer { 7 | margin-left: 0; 8 | margin-right: 0; 9 | background-color: transparent; 10 | } 11 | 12 | &:not(.card-subcategories).card-body { 13 | padding-left: 0; 14 | padding-right: 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/cards/_card-task.scss: -------------------------------------------------------------------------------- 1 | .card-tasks { 2 | height: 473px; 3 | 4 | .table-full-width { 5 | max-height: 410px; 6 | position: relative; 7 | } 8 | 9 | .card-header { 10 | .title { 11 | margin-right: 20px; 12 | font-weight: $font-weight-normal; 13 | } 14 | 15 | .dropdown { 16 | float: right; 17 | color: darken($white, 20%); 18 | } 19 | } 20 | 21 | .card-body { 22 | i { 23 | color: $dark-gray; 24 | font-size: 1.4em; 25 | &:hover { 26 | color: $white; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/cards/_card-user.scss: -------------------------------------------------------------------------------- 1 | .card-user { 2 | overflow: hidden; 3 | .image { 4 | height: 120px; 5 | } 6 | 7 | .author { 8 | text-align: center; 9 | text-transform: none; 10 | margin-top: 25px; 11 | 12 | a + p.description { 13 | margin-top: -7px; 14 | } 15 | 16 | .block { 17 | position: absolute; 18 | height: 100px; 19 | width: 250px; 20 | &.block-one { 21 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 22 | @include nc-rotate(150deg,10); 23 | margin-top: -90px; 24 | margin-left: -50px; 25 | } 26 | 27 | &.block-two { 28 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 29 | @include nc-rotate(30deg,10); 30 | margin-top: -40px; 31 | margin-left: -100px; 32 | } 33 | 34 | &.block-three { 35 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 36 | @include nc-rotate(170deg,10); 37 | margin-top: -70px; 38 | right: -45px; 39 | 40 | } 41 | 42 | &.block-four { 43 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 44 | @include nc-rotate(150deg,10); 45 | margin-top: -25px; 46 | right: -45px; 47 | 48 | } 49 | } 50 | } 51 | 52 | .avatar { 53 | width: 124px; 54 | height: 124px; 55 | border: 5px solid lighten($black,5%); 56 | border-bottom-color: $transparent-bg; 57 | background-color: $transparent-bg; 58 | position: relative; 59 | } 60 | 61 | .card-body { 62 | min-height: 240px; 63 | } 64 | 65 | hr { 66 | margin: 5px 15px; 67 | } 68 | 69 | .button-container { 70 | margin-bottom: 6px; 71 | text-align: center; 72 | } 73 | 74 | .card-description { 75 | margin-top: 30px; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: color-yiq($background); 3 | // @include gradient-bg($background); 4 | background-color: lighten($background, 5%); 5 | border-color: $border; 6 | 7 | hr { 8 | border-top-color: darken($border, 5%); 9 | } 10 | 11 | .alert-link { 12 | color: darken($color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | @mixin bg-variant($parent, $color) { 3 | #{$parent} { 4 | background-color: $color !important; 5 | } 6 | a#{$parent}, 7 | button#{$parent} { 8 | @include hover-focus { 9 | background-color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | 14 | @mixin bg-gradient-variant($parent, $color) { 15 | #{$parent} { 16 | background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_badges.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 3%); 10 | } 11 | } 12 | .tagsinput-remove-link{ 13 | color: $white; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/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 | 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | @mixin form-control-focus() { 2 | &:focus { 3 | color: $input-focus-color; 4 | background-color: $input-focus-bg; 5 | border-color: $input-focus-border-color; 6 | outline: 0; 7 | // Avoid using mixin so we can pass custom focus shadow properly 8 | @if $enable-shadows { 9 | box-shadow: $input-box-shadow, $input-focus-box-shadow; 10 | } @else { 11 | box-shadow: $input-focus-box-shadow; 12 | } 13 | } 14 | } 15 | 16 | 17 | @mixin form-validation-state($state, $color) { 18 | .#{$state}-feedback { 19 | display: none; 20 | width: 100%; 21 | margin-top: $form-feedback-margin-top; 22 | font-size: $form-feedback-font-size; 23 | color: $color; 24 | } 25 | 26 | .#{$state}-tooltip { 27 | position: absolute; 28 | top: 100%; 29 | z-index: 5; 30 | display: none; 31 | max-width: 100%; // Contain to parent when possible 32 | padding: .5rem; 33 | margin-top: .1rem; 34 | font-size: .875rem; 35 | line-height: 1; 36 | color: $white; 37 | background-color: rgba($color, .8); 38 | border-radius: .2rem; 39 | } 40 | 41 | .form-control, 42 | .custom-select { 43 | .was-validated &:#{$state}, 44 | &.is-#{$state} { 45 | border-color: $color; 46 | 47 | &:focus { 48 | border-color: $color; 49 | //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75); 50 | } 51 | 52 | ~ .#{$state}-feedback, 53 | ~ .#{$state}-tooltip { 54 | display: block; 55 | } 56 | } 57 | } 58 | 59 | .form-check-input { 60 | .was-validated &:#{$state}, 61 | &.is-#{$state} { 62 | ~ .form-check-label { 63 | color: $color; 64 | } 65 | 66 | ~ .#{$state}-feedback, 67 | ~ .#{$state}-tooltip { 68 | display: block; 69 | } 70 | } 71 | } 72 | 73 | .custom-control-input { 74 | .was-validated &:#{$state}, 75 | &.is-#{$state} { 76 | ~ .custom-control-label { 77 | color: $color; 78 | 79 | &::before { 80 | background-color: lighten($color, 25%); 81 | border-color: lighten($color, 25%); 82 | } 83 | } 84 | 85 | ~ .#{$state}-feedback, 86 | ~ .#{$state}-tooltip { 87 | display: block; 88 | } 89 | 90 | &:checked { 91 | ~ .custom-control-label::before { 92 | @include gradient-bg(lighten($color, 10%)); 93 | border-color: lighten($color, 25%); 94 | } 95 | } 96 | 97 | &:focus { 98 | ~ .custom-control-label::before { 99 | box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); 100 | } 101 | } 102 | } 103 | } 104 | 105 | // custom file 106 | .custom-file-input { 107 | .was-validated &:#{$state}, 108 | &.is-#{$state} { 109 | ~ .custom-file-label { 110 | border-color: $color; 111 | 112 | &::before { border-color: inherit; } 113 | } 114 | 115 | ~ .#{$state}-feedback, 116 | ~ .#{$state}-tooltip { 117 | display: block; 118 | } 119 | 120 | &:focus { 121 | ~ .custom-file-label { 122 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 123 | } 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_icon.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-shape-variant($color) { 2 | color: saturate(darken($color, 10%), 10); 3 | background-color: transparentize(lighten($color, 10%), .5); 4 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/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 {@content; } // Firefox 26 | &:-ms-input-placeholder {@content; } // Internet Explorer 10+ 27 | &::-webkit-input-placeholder {@content; } // Safari and Chrome 28 | } 29 | 30 | @mixin light-form(){ 31 | border-radius: 0; 32 | border:0; 33 | padding: 0; 34 | background-color: transparent; 35 | 36 | } 37 | 38 | 39 | @mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { 40 | .form-group.no-border.form-control-lg, 41 | .input-group.no-border.form-control-lg{ 42 | .input-group-append .input-group-text{ 43 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 44 | } 45 | 46 | .form-control{ 47 | padding: $padding-vertical $padding-horizontal; 48 | 49 | & + .input-group-prepend .input-group-text, 50 | & + .input-group-append .input-group-text{ 51 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 52 | } 53 | 54 | 55 | } 56 | } 57 | 58 | .form-group.form-control-lg, 59 | .input-group.form-control-lg{ 60 | .form-control{ 61 | padding: $padding-vertical - 1 $padding-horizontal - 1; 62 | height: 100%; 63 | 64 | & + .input-group-prepend .input-group-text, 65 | & + .input-group-append .input-group-text{ 66 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 67 | } 68 | } 69 | 70 | .input-group-prepend .input-group-text, 71 | .input-group-append .input-group-text{ 72 | padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; 73 | 74 | & + .form-control{ 75 | padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; 76 | } 77 | } 78 | } 79 | } 80 | 81 | 82 | 83 | @mixin input-base-padding($padding-vertical, $padding-horizontal) { 84 | .form-group.no-border, 85 | .input-group.no-border{ 86 | .form-control{ 87 | padding: $padding-vertical $padding-horizontal; 88 | 89 | & + .input-group-prepend .input-group-text, 90 | & + .input-group-append .input-group-text{ 91 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 92 | } 93 | } 94 | 95 | .input-group-prepend .input-group-text, 96 | .input-group-append .input-group-text{ 97 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 98 | } 99 | } 100 | 101 | .form-group, 102 | .input-group{ 103 | .form-control{ 104 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; 105 | 106 | & + .input-group-prepend .input-group-text, 107 | & + .input-group-append .input-group-text{ 108 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 109 | } 110 | } 111 | 112 | .input-group-prepend .input-group-text, 113 | .input-group-append .input-group-text{ 114 | padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; 115 | 116 | & + .form-control, 117 | & ~ .form-control{ 118 | padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; 119 | } 120 | } 121 | } 122 | } 123 | 124 | 125 | //color1 = $opacity-5 126 | //color2 = $opacity-8 127 | //color3 = $white-color 128 | //color4 = $transparent-bg 129 | //color5 = $opacity-1 130 | //color6 = $opacity-2 131 | 132 | 133 | @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { 134 | @include form-control-placeholder(rgba($white, 0.4), 1); 135 | 136 | .form-control{ 137 | border-color: $color1; 138 | color: $color2; 139 | 140 | &:focus{ 141 | border-color: $color3; 142 | background-color: $color4; 143 | color: $color3; 144 | } 145 | } 146 | 147 | .has-success, 148 | .has-danger{ 149 | &:after{ 150 | color: $color3; 151 | } 152 | } 153 | 154 | .has-danger{ 155 | .form-control{ 156 | background-color: $color4; 157 | } 158 | } 159 | 160 | .input-group-prepend{ 161 | margin-right: 0; 162 | } 163 | 164 | .input-group-prepend .input-group-text, 165 | .input-group-append .input-group-text{ 166 | background-color: rgba($background-black, 0.2); 167 | border-color: $color1; 168 | color: $color2; 169 | 170 | 171 | } 172 | 173 | .input-group-focus{ 174 | .input-group-prepend .input-group-text, 175 | .input-group-append .input-group-text{ 176 | background-color: rgba($background-black, 0.3); 177 | border-color: $color3; 178 | color: $color3; 179 | } 180 | } 181 | 182 | .form-group.no-border, 183 | .input-group.no-border{ 184 | .form-control{ 185 | background-color: rgba($background-black,0.2); 186 | color: $color2; 187 | 188 | &:focus, 189 | &:active, 190 | &:active{ 191 | background-color: rgba($background-black,0.3); 192 | color: $color3; 193 | } 194 | } 195 | 196 | .form-control + .input-group-prepend .input-group-text, 197 | .form-control + .input-group-append .input-group-text{ 198 | background-color: rgba($background-black,0.2);; 199 | 200 | &:focus, 201 | &:active, 202 | &:active{ 203 | background-color: rgba($background-black,0.3); 204 | color: $color3; 205 | } 206 | } 207 | 208 | .form-control{ 209 | &:focus{ 210 | & + .input-group-prepend .input-group-text, 211 | & + .input-group-append .input-group-text{ 212 | background-color: rgba($background-black, 0.3); 213 | color: $color3; 214 | } 215 | } 216 | } 217 | 218 | .input-group-prepend .input-group-text, 219 | .input-group-append .input-group-text{ 220 | background-color: rgba($background-black, 0.2); 221 | border: none; 222 | color: $color2; 223 | } 224 | 225 | &.input-group-focus{ 226 | .input-group-prepend .input-group-text, 227 | .input-group-append .input-group-text{ 228 | background-color: rgba($background-black, 0.3); 229 | color: $color3; 230 | } 231 | } 232 | } 233 | 234 | } 235 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-colors($bg-color, $color) { 2 | .modal-content{ 3 | background-color: $bg-color; 4 | color: $color; 5 | } 6 | 7 | .modal-body p{ 8 | color: rgba($white, 0.8); 9 | } 10 | 11 | //inputs 12 | @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2); 13 | 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/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/black-dashboard-react/custom/mixins/_popovers.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-variant($background) { 2 | background-color: $background; 3 | 4 | .popover-header { 5 | background-color: $background; 6 | color: color-yiq($background); 7 | opacity: .6; 8 | } 9 | 10 | .popover-body { 11 | color: color-yiq($background); 12 | } 13 | 14 | .popover-header{ 15 | border-color: rgba(color-yiq($background), .2); 16 | } 17 | 18 | &.bs-popover-top { 19 | .arrow::after { 20 | border-top-color: $background; 21 | } 22 | } 23 | 24 | &.bs-popover-right { 25 | .arrow::after { 26 | border-right-color: $background; 27 | } 28 | } 29 | 30 | &.bs-popover-bottom { 31 | .arrow::after { 32 | border-bottom-color: $background; 33 | } 34 | } 35 | 36 | &.bs-popover-left { 37 | .arrow::after { 38 | border-left-color: $background; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin transform-translate-x($value){ 3 | -webkit-transform: translate3d($value, 0, 0); 4 | -moz-transform: translate3d($value, 0, 0); 5 | -o-transform: translate3d($value, 0, 0); 6 | -ms-transform: translate3d($value, 0, 0); 7 | transform: translate3d($value, 0, 0); 8 | } 9 | 10 | @mixin transform-translate-y($value){ 11 | -webkit-transform: translate3d(0,$value,0); 12 | -moz-transform: translate3d(0,$value,0); 13 | -o-transform: translate3d(0,$value,0); 14 | -ms-transform: translate3d(0,$value,0); 15 | transform: translate3d(0,$value,0); 16 | } 17 | 18 | @mixin transitions($time, $type){ 19 | -webkit-transition: all $time $type; 20 | -moz-transition: all $time $type; 21 | -o-transition: all $time $type; 22 | -ms-transition: all $time $type; 23 | transition: all $time $type; 24 | } 25 | 26 | @mixin diagonal-gradient($start-color, $end-color){ 27 | background: $start-color; 28 | background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color); 29 | background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color); 30 | background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color); 31 | background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color); 32 | background-size: 210% 210%; 33 | background-position: top right; 34 | } 35 | 36 | @mixin bar-animation($type){ 37 | -webkit-animation: $type 500ms linear 0s; 38 | -moz-animation: $type 500ms linear 0s; 39 | animation: $type 500ms 0s; 40 | -webkit-animation-fill-mode: forwards; 41 | -moz-animation-fill-mode: forwards; 42 | animation-fill-mode: forwards; 43 | } 44 | 45 | @mixin rotate-180(){ 46 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 47 | -webkit-transform: rotate(180deg); 48 | -ms-transform: rotate(180deg); 49 | transform: rotate(180deg); 50 | } 51 | 52 | @mixin transform-translate-y-dropdown($value) { 53 | -webkit-transform: translate3d(0,$value,0) !important; 54 | -moz-transform: translate3d(0,$value,0) !important; 55 | -o-transform: translate3d(0,$value,0) !important; 56 | -ms-transform: translate3d(0,$value,0) !important; 57 | transform: translate3d(0,$value,0) !important; 58 | } 59 | 60 | @mixin linear-gradient($color, $states-color){ 61 | background: $color; 62 | background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%); 63 | background: -o-linear-gradient(0deg, $color 0%, $states-color 100%); 64 | background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%); 65 | background: linear-gradient(0deg, $color 0%, $states-color 100%); 66 | } 67 | 68 | @mixin linear-gradient-right($color, $states-color){ 69 | background: $color; 70 | background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%); 71 | background: -o-linear-gradient(to right, $color 0%, $states-color 100%); 72 | background: -moz-linear-gradient(to right, $color 0%, $states-color 100%); 73 | background: linear-gradient(to right, $color 0%, $states-color 100%); 74 | } 75 | 76 | @mixin sidebar-color($color){ 77 | &:after{ 78 | background: $color; 79 | } 80 | 81 | .nav li.active > a{ 82 | color: $color; 83 | 84 | i{ 85 | color: $color; 86 | } 87 | } 88 | } 89 | 90 | @mixin transition-input-focus-color() { 91 | -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 92 | -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 93 | -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 94 | -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 95 | transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 96 | } 97 | 98 | @mixin topbar-x-rotation(){ 99 | @keyframes topbar-x { 100 | 0% {top: 0px; transform: rotate(0deg); } 101 | 45% {top: 6px; transform: rotate(145deg); } 102 | 75% {transform: rotate(130deg); } 103 | 100% {transform: rotate(135deg); } 104 | } 105 | @-webkit-keyframes topbar-x { 106 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 107 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 108 | 75% {-webkit-transform: rotate(130deg); } 109 | 100% { -webkit-transform: rotate(135deg); } 110 | } 111 | @-moz-keyframes topbar-x { 112 | 0% {top: 0px; -moz-transform: rotate(0deg); } 113 | 45% {top: 6px; -moz-transform: rotate(145deg); } 114 | 75% {-moz-transform: rotate(130deg); } 115 | 100% { -moz-transform: rotate(135deg); } 116 | } 117 | } 118 | 119 | @mixin topbar-back-rotation(){ 120 | @keyframes topbar-back { 121 | 0% { top: 6px; transform: rotate(135deg); } 122 | 45% { transform: rotate(-10deg); } 123 | 75% { transform: rotate(5deg); } 124 | 100% { top: 0px; transform: rotate(0); } 125 | } 126 | 127 | @-webkit-keyframes topbar-back { 128 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 129 | 45% { -webkit-transform: rotate(-10deg); } 130 | 75% { -webkit-transform: rotate(5deg); } 131 | 100% { top: 0px; -webkit-transform: rotate(0); } 132 | } 133 | 134 | @-moz-keyframes topbar-back { 135 | 0% { top: 6px; -moz-transform: rotate(135deg); } 136 | 45% { -moz-transform: rotate(-10deg); } 137 | 75% { -moz-transform: rotate(5deg); } 138 | 100% { top: 0px; -moz-transform: rotate(0); } 139 | } 140 | } 141 | 142 | @mixin bottombar-x-rotation(){ 143 | @keyframes bottombar-x { 144 | 0% {bottom: 0px; transform: rotate(0deg);} 145 | 45% {bottom: 6px; transform: rotate(-145deg);} 146 | 75% {transform: rotate(-130deg);} 147 | 100% {transform: rotate(-135deg);} 148 | } 149 | @-webkit-keyframes bottombar-x { 150 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 151 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 152 | 75% {-webkit-transform: rotate(-130deg);} 153 | 100% {-webkit-transform: rotate(-135deg);} 154 | } 155 | @-moz-keyframes bottombar-x { 156 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 157 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 158 | 75% {-moz-transform: rotate(-130deg);} 159 | 100% {-moz-transform: rotate(-135deg);} 160 | } 161 | } 162 | 163 | @mixin bottombar-back-rotation{ 164 | @keyframes bottombar-back { 165 | 0% { bottom: 6px;transform: rotate(-135deg);} 166 | 45% { transform: rotate(10deg);} 167 | 75% { transform: rotate(-5deg);} 168 | 100% { bottom: 0px;transform: rotate(0);} 169 | } 170 | @-webkit-keyframes bottombar-back { 171 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 172 | 45% {-webkit-transform: rotate(10deg);} 173 | 75% {-webkit-transform: rotate(-5deg);} 174 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 175 | } 176 | @-moz-keyframes bottombar-back { 177 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 178 | 45% {-moz-transform: rotate(10deg);} 179 | 75% {-moz-transform: rotate(-5deg);} 180 | 100% {bottom: 0px;-moz-transform: rotate(0);} 181 | } 182 | 183 | } 184 | 185 | 186 | @mixin nc-rotate($degrees, $rotation) { 187 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 188 | -webkit-transform: rotate($degrees); 189 | -moz-transform: rotate($degrees); 190 | -ms-transform: rotate($degrees); 191 | -o-transform: rotate($degrees); 192 | transform: rotate($degrees); 193 | } 194 | 195 | @mixin nc-flip($horiz, $vert, $rotation) { 196 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 197 | -webkit-transform: scale($horiz, $vert); 198 | -moz-transform: scale($horiz, $vert); 199 | -ms-transform: scale($horiz, $vert); 200 | -o-transform: scale($horiz, $vert); 201 | transform: scale($horiz, $vert); 202 | } 203 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/_wizard.scss: -------------------------------------------------------------------------------- 1 | @mixin set-wizard-color($color) { 2 | .progress-with-circle .progress-bar{ 3 | background: $color; 4 | } 5 | 6 | .nav-pills .nav-item .nav-link{ 7 | color: $color; 8 | 9 | &.checked, &.active{ 10 | background: $color; 11 | color: white; 12 | } 13 | &:hover{ 14 | background: $white; 15 | } 16 | } 17 | 18 | .nav-pills .nav-item .nav-link.active, 19 | .nav-pills .nav-item .nav-link.checked:focus, 20 | .nav-pills .nav-item .nav-link.checked:hover, 21 | .nav-pills .nav-item .nav-link.active:focus, 22 | .nav-pills .nav-item .nav-link.active:hover{ 23 | background: $color; 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/mixins/opacity.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/black-dashboard-react/custom/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | @each $color, $value in $colors { 2 | @include bg-variant(".bg-#{$color}", $value); 3 | } 4 | 5 | @each $color, $value in $theme-colors { 6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 7 | } 8 | 9 | @each $color, $value in $colors { 10 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 11 | } 12 | 13 | 14 | // Sections 15 | 16 | section { 17 | //background-color: section-color("primary"); 18 | } 19 | 20 | @each $color, $value in $section-colors { 21 | @include bg-variant(".section-#{$color}", $value); 22 | } 23 | 24 | @each $color, $value in $theme-colors { 25 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 26 | } 27 | 28 | 29 | // Shape (svg) fill colors 30 | @each $color, $value in $theme-colors { 31 | .fill-#{$color} { 32 | fill: $value; 33 | } 34 | 35 | .stroke-#{$color} { 36 | stroke: $value; 37 | } 38 | } 39 | 40 | .fill-opacity-8 { 41 | fill-opacity: .8; 42 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_floating.scss: -------------------------------------------------------------------------------- 1 | .floating { 2 | animation: floating 3s ease infinite; 3 | will-change: transform; 4 | 5 | &:hover { 6 | animation-play-state: paused; 7 | } 8 | } 9 | 10 | .floating-lg { 11 | animation: floating-lg 3s ease infinite; 12 | } 13 | 14 | .floating-sm { 15 | animation: floating-sm 3s ease infinite; 16 | } 17 | 18 | // Keyframes 19 | 20 | @keyframes floating-lg { 21 | 0% { 22 | transform: translateY(0px) 23 | } 24 | 50% { 25 | transform: translateY(15px) 26 | } 27 | 100% { 28 | transform: translateY(0px) 29 | } 30 | } 31 | 32 | @keyframes floating { 33 | 0% { 34 | transform: translateY(0px) 35 | } 36 | 50% { 37 | transform: translateY(10px) 38 | } 39 | 100% { 40 | transform: translateY(0px) 41 | } 42 | } 43 | 44 | @keyframes floating-sm { 45 | 0% { 46 | transform: translateY(0px) 47 | } 48 | 50% { 49 | transform: translateY(5px) 50 | } 51 | 100% { 52 | transform: translateY(0px) 53 | } 54 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_helper.scss: -------------------------------------------------------------------------------- 1 | // Image 2 | 3 | .img-center { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | 9 | // Clearfix 10 | 11 | .floatfix { 12 | &:before, 13 | &:after { 14 | content: ''; 15 | display: table; 16 | } 17 | &:after { 18 | clear: both; 19 | } 20 | } 21 | 22 | // Overflows 23 | 24 | .overflow-visible { 25 | overflow: visible !important; 26 | } 27 | .overflow-hidden { 28 | overflow: hidden !important; 29 | } 30 | 31 | // Opacity classes 32 | 33 | .opacity-1 { 34 | opacity: .1 !important; 35 | } 36 | .opacity-2 { 37 | opacity: .2 !important; 38 | } 39 | .opacity-3 { 40 | opacity: .3 !important; 41 | } 42 | .opacity-4 { 43 | opacity: .4 !important; 44 | } 45 | .opacity-5 { 46 | opacity: .5 !important; 47 | } 48 | .opacity-6 { 49 | opacity: .6 !important; 50 | } 51 | .opacity-7 { 52 | opacity: .7 !important; 53 | } 54 | .opacity-8 { 55 | opacity: .8 !important; 56 | } 57 | .opacity-8 { 58 | opacity: .9 !important; 59 | } 60 | .opacity-10 { 61 | opacity: 1 !important; 62 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | @each $size, $value in $spacers { 2 | .top-#{$size} { 3 | top: $value; 4 | } 5 | .right-#{$size} { 6 | right: $value; 7 | } 8 | .bottom-#{$size} { 9 | bottom: $value; 10 | } 11 | .left-#{$size} { 12 | left: $value; 13 | } 14 | } 15 | 16 | .center { 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | [class*="shadow"] { 2 | @if $enable-transitions { 3 | transition: $transition-base; 4 | } 5 | } 6 | 7 | .shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } 8 | .shadow--hover:hover { box-shadow: $box-shadow !important; } 9 | .shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } 10 | .shadow-none--hover:hover { box-shadow: none !important; } 11 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Height values in vh 2 | 3 | .h-100vh { 4 | height: 100vh !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | // Spacing columns vertically 2 | 3 | .row.row-grid > [class*="col-"] + [class*="col-"] { 4 | margin-top: 3rem; 5 | } 6 | 7 | @include media-breakpoint-up(lg) { 8 | .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { 9 | margin-top: 0; 10 | } 11 | } 12 | @include media-breakpoint-up(md) { 13 | .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { 14 | margin-top: 0; 15 | } 16 | } 17 | @include media-breakpoint-up(sm) { 18 | .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { 19 | margin-top: 0; 20 | } 21 | } 22 | 23 | .row-grid + .row-grid { 24 | margin-top: 3rem; 25 | } 26 | 27 | // Negative margins and paddings 28 | 29 | @media(min-width: 992px) { 30 | [class*="mt--"], 31 | [class*="mr--"], 32 | [class*="mb--"], 33 | [class*="ml--"] { 34 | position: relative; 35 | z-index: 5; 36 | } 37 | 38 | 39 | // Large negative margins in pixels 40 | 41 | .mt--100 { 42 | margin-top: -100px !important; 43 | } 44 | .mr--100 { 45 | margin-right: -100px !important; 46 | } 47 | .mb--100 { 48 | margin-bottom: -100px !important; 49 | } 50 | .ml--100 { 51 | margin-left: -100px !important; 52 | } 53 | .mt--150 { 54 | margin-top: -150px !important; 55 | } 56 | .mb--150 { 57 | margin-bottom: -150px !important; 58 | } 59 | .mt--200 { 60 | margin-top: -200px !important; 61 | } 62 | .mb--200 { 63 | margin-bottom: -200px !important; 64 | } 65 | .mt--300 { 66 | margin-top: -300px !important; 67 | } 68 | .mb--300 { 69 | margin-bottom: -300px !important; 70 | } 71 | 72 | 73 | // Large margins in pixels 74 | 75 | .pt-100 { 76 | padding-top: 100px !important; 77 | } 78 | .pb-100 { 79 | padding-bottom: 100px !important; 80 | } 81 | .pt-150 { 82 | padding-top: 150px !important; 83 | } 84 | .pb-150 { 85 | padding-bottom: 150px !important; 86 | } 87 | .pt-200 { 88 | padding-top: 200px !important; 89 | } 90 | .pb-200 { 91 | padding-bottom: 200px !important; 92 | } 93 | .pt-250 { 94 | padding-top: 250px !important; 95 | } 96 | .pb-250 { 97 | padding-bottom: 250px !important; 98 | } 99 | .pt-300 { 100 | padding-top: 300px!important; 101 | } 102 | .pb-300 { 103 | padding-bottom: 300px!important; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | // Weight and italics 2 | 3 | .font-weight-300 { font-weight: 300 !important; } 4 | .font-weight-400 { font-weight: 400 !important; } 5 | .font-weight-500 { font-weight: 500 !important; } 6 | .font-weight-600 { font-weight: 600 !important; } 7 | .font-weight-700 { font-weight: 700 !important; } 8 | .font-weight-800 { font-weight: 800 !important; } 9 | .font-weight-900 { font-weight: 900 !important; } 10 | 11 | 12 | // Text decorations 13 | 14 | .text-underline { text-decoration: underline; } 15 | .text-through { text-decoration: line-through; } 16 | 17 | 18 | // Line heights 19 | 20 | .lh-100 { line-height: 1; } 21 | .lh-110 { line-height: 1.1; } 22 | .lh-120 { line-height: 1.2; } 23 | .lh-130 { line-height: 1.3; } 24 | .lh-140 { line-height: 1.4; } 25 | .lh-150 { line-height: 1.5; } 26 | .lh-160 { line-height: 1.6; } 27 | .lh-170 { line-height: 1.7; } 28 | .lh-180 { line-height: 1.8; } 29 | 30 | //Contextual colors 31 | 32 | .text-muted { color: $text-muted !important; } 33 | 34 | 35 | 36 | // Letter spacings 37 | 38 | .ls-1 { letter-spacing: .0625rem; } 39 | .ls-15 { letter-spacing: .09375rem; } 40 | .ls-2 { letter-spacing: 0.125rem; } 41 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/utilities/_transform.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-up(lg) { 2 | .transform-perspective-right { 3 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); 4 | } 5 | .transform-perspective-left{ 6 | transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/vendor/_plugin-perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Container style 3 | */ 4 | .ps { 5 | overflow: hidden !important; 6 | overflow-anchor: none; 7 | -ms-overflow-style: none; 8 | touch-action: auto; 9 | -ms-touch-action: auto; 10 | } 11 | 12 | /* 13 | * Scrollbar rail styles 14 | */ 15 | .ps__rail-x { 16 | display: none; 17 | opacity: 0; 18 | transition: background-color .2s linear, opacity .2s linear; 19 | -webkit-transition: background-color .2s linear, opacity .2s linear; 20 | height: 15px; 21 | /* there must be 'bottom' or 'top' for ps__rail-x */ 22 | bottom: 0px; 23 | /* please don't change 'position' */ 24 | position: absolute; 25 | } 26 | 27 | .ps__rail-y { 28 | display: none; 29 | opacity: 0; 30 | transition: background-color .2s linear, opacity .2s linear; 31 | -webkit-transition: background-color .2s linear, opacity .2s linear; 32 | width: 15px; 33 | /* there must be 'right' or 'left' for ps__rail-y */ 34 | right: 0; 35 | /* please don't change 'position' */ 36 | position: absolute; 37 | } 38 | 39 | .ps--active-x > .ps__rail-x, 40 | .ps--active-y > .ps__rail-y { 41 | display: block; 42 | background-color: transparent; 43 | } 44 | 45 | .ps:hover > .ps__rail-x, 46 | .ps:hover > .ps__rail-y, 47 | .ps--focus > .ps__rail-x, 48 | .ps--focus > .ps__rail-y, 49 | .ps--scrolling-x > .ps__rail-x, 50 | .ps--scrolling-y > .ps__rail-y { 51 | opacity: 0.6; 52 | } 53 | 54 | .ps .ps__rail-x:hover, 55 | .ps .ps__rail-y:hover, 56 | .ps .ps__rail-x:focus, 57 | .ps .ps__rail-y:focus, 58 | .ps .ps__rail-x.ps--clicking, 59 | .ps .ps__rail-y.ps--clicking { 60 | background-color: #eee; 61 | opacity: 0.9; 62 | } 63 | 64 | /* 65 | * Scrollbar thumb styles 66 | */ 67 | .ps__thumb-x { 68 | background-color: #aaa; 69 | border-radius: 6px; 70 | transition: background-color .2s linear, height .2s ease-in-out; 71 | -webkit-transition: background-color .2s linear, height .2s ease-in-out; 72 | height: 6px; 73 | /* there must be 'bottom' for ps__thumb-x */ 74 | bottom: 2px; 75 | /* please don't change 'position' */ 76 | position: absolute; 77 | } 78 | 79 | .ps__thumb-y { 80 | background-color: #aaa; 81 | border-radius: 6px; 82 | transition: background-color .2s linear, width .2s ease-in-out; 83 | -webkit-transition: background-color .2s linear, width .2s ease-in-out; 84 | width: 6px; 85 | /* there must be 'right' for ps__thumb-y */ 86 | right: 2px; 87 | /* please don't change 'position' */ 88 | position: absolute; 89 | } 90 | 91 | .ps__rail-x:hover > .ps__thumb-x, 92 | .ps__rail-x:focus > .ps__thumb-x, 93 | .ps__rail-x.ps--clicking .ps__thumb-x { 94 | background-color: #999; 95 | height: 11px; 96 | } 97 | 98 | .ps__rail-y:hover > .ps__thumb-y, 99 | .ps__rail-y:focus > .ps__thumb-y, 100 | .ps__rail-y.ps--clicking .ps__thumb-y { 101 | background-color: #999; 102 | width: 11px; 103 | } 104 | 105 | /* MS supports */ 106 | @supports (-ms-overflow-style: none) { 107 | .ps { 108 | overflow: auto !important; 109 | } 110 | } 111 | 112 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 113 | .ps { 114 | overflow: auto !important; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/custom/vendor/_plugin-react-notification-alert.scss: -------------------------------------------------------------------------------- 1 | .react-notification-alert-container{ 2 | z-index: 1051; 3 | position: fixed; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/react-differences/_inputs.scss: -------------------------------------------------------------------------------- 1 | select.form-control option { 2 | color: #888; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/black-dashboard-react/react-differences/react-differences.scss: -------------------------------------------------------------------------------- 1 | @import "inputs"; 2 | -------------------------------------------------------------------------------- /src/components/BackgroundColorWrapper/BackgroundColorWrapper.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | BackgroundColorContext, 4 | backgroundColors, 5 | } from "contexts/BackgroundColorContext"; 6 | 7 | export default function BackgroundColorWrapper(props) { 8 | const [color, setColor] = useState(backgroundColors.blue); 9 | 10 | function changeColor(color) { 11 | setColor(color); 12 | } 13 | 14 | return ( 15 | 18 | {props.children} 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/FixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Dropdown, DropdownToggle, Badge } from "reactstrap"; 22 | import { ThemeContext, themes } from "contexts/ThemeContext"; 23 | import { backgroundColors } from "contexts/BackgroundColorContext"; 24 | 25 | function FixedPlugin(props) { 26 | const [dropDownIsOpen, setdropDownIsOpen] = React.useState(false); 27 | const handleClick = () => { 28 | setdropDownIsOpen(!dropDownIsOpen); 29 | }; 30 | return ( 31 |
32 | 33 | 34 | 35 | 36 |
    37 |
  • SIDEBAR BACKGROUND
    • 38 |
  • 39 |
    40 | { 46 | props.handleBgClick(backgroundColors.primary); 47 | }} 48 | />{" "} 49 | { 55 | props.handleBgClick(backgroundColors.blue); 56 | }} 57 | />{" "} 58 | { 64 | props.handleBgClick(backgroundColors.green); 65 | }} 66 | />{" "} 67 |
    68 |
    • 69 |
  • 70 | 71 | {({ changeTheme }) => ( 72 | <> 73 | LIGHT MODE{" "} 74 | changeTheme(themes.light)} 77 | />{" "} 78 | changeTheme(themes.dark)} 81 | />{" "} 82 | DARK MODE{" "} 83 | 84 | )} 85 | 86 |
    • 87 |
  • 88 | 96 | 105 |
    • 106 |
  • Want more components?
    • 107 |
  • 108 | 117 |
    • 118 |
119 | 120 |
121 | ); 122 | } 123 | 124 | export default FixedPlugin; 125 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | /*eslint-disable*/ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Container, Nav, NavItem, NavLink } from "reactstrap"; 23 | 24 | function Footer() { 25 | return ( 26 | 58 | ); 59 | } 60 | 61 | export default Footer; 62 | -------------------------------------------------------------------------------- /src/components/Navbars/AdminNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // nodejs library that concatenates classes 20 | import classNames from "classnames"; 21 | 22 | // reactstrap components 23 | import { 24 | Button, 25 | Collapse, 26 | DropdownToggle, 27 | DropdownMenu, 28 | DropdownItem, 29 | UncontrolledDropdown, 30 | Input, 31 | InputGroup, 32 | NavbarBrand, 33 | Navbar, 34 | NavLink, 35 | Nav, 36 | Container, 37 | Modal, 38 | NavbarToggler, 39 | ModalHeader, 40 | } from "reactstrap"; 41 | 42 | function AdminNavbar(props) { 43 | const [collapseOpen, setcollapseOpen] = React.useState(false); 44 | const [modalSearch, setmodalSearch] = React.useState(false); 45 | const [color, setcolor] = React.useState("navbar-transparent"); 46 | React.useEffect(() => { 47 | window.addEventListener("resize", updateColor); 48 | // Specify how to clean up after this effect: 49 | return function cleanup() { 50 | window.removeEventListener("resize", updateColor); 51 | }; 52 | }); 53 | // function that adds color white/transparent to the navbar on resize (this is for the collapse) 54 | const updateColor = () => { 55 | if (window.innerWidth < 993 && collapseOpen) { 56 | setcolor("bg-white"); 57 | } else { 58 | setcolor("navbar-transparent"); 59 | } 60 | }; 61 | // this function opens and closes the collapse on small devices 62 | const toggleCollapse = () => { 63 | if (collapseOpen) { 64 | setcolor("navbar-transparent"); 65 | } else { 66 | setcolor("bg-white"); 67 | } 68 | setcollapseOpen(!collapseOpen); 69 | }; 70 | // this function is to open the Search modal 71 | const toggleModalSearch = () => { 72 | setmodalSearch(!modalSearch); 73 | }; 74 | return ( 75 | <> 76 | 77 | 78 |
79 |
84 | 85 | 86 | 87 | 88 | 89 |
90 | e.preventDefault()}> 91 | {props.brandText} 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 174 | 175 | 176 | 177 | 182 | 183 | 184 | 191 | 192 | 193 | 194 | ); 195 | } 196 | 197 | export default AdminNavbar; 198 | -------------------------------------------------------------------------------- /src/components/Navbars/RTLNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // nodejs library that concatenates classes 20 | import classNames from "classnames"; 21 | 22 | // reactstrap components 23 | import { 24 | Button, 25 | Collapse, 26 | DropdownToggle, 27 | DropdownMenu, 28 | DropdownItem, 29 | UncontrolledDropdown, 30 | Input, 31 | InputGroup, 32 | NavbarBrand, 33 | Navbar, 34 | NavLink, 35 | Nav, 36 | Container, 37 | Modal, 38 | ModalHeader, 39 | NavbarToggler, 40 | } from "reactstrap"; 41 | 42 | function AdminNavbar(props) { 43 | const [collapseOpen, setcollapseOpen] = React.useState(false); 44 | const [modalSearch, setmodalSearch] = React.useState(false); 45 | const [color, setcolor] = React.useState("navbar-transparent"); 46 | React.useEffect(() => { 47 | window.addEventListener("resize", updateColor); 48 | // Specify how to clean up after this effect: 49 | return function cleanup() { 50 | window.removeEventListener("resize", updateColor); 51 | }; 52 | }); 53 | // function that adds color white/transparent to the navbar on resize (this is for the collapse) 54 | const updateColor = () => { 55 | if (window.innerWidth < 993 && collapseOpen) { 56 | setcolor("bg-white"); 57 | } else { 58 | setcolor("navbar-transparent"); 59 | } 60 | }; 61 | // this function opens and closes the collapse on small devices 62 | const toggleCollapse = () => { 63 | if (collapseOpen) { 64 | setcolor("navbar-transparent"); 65 | } else { 66 | setcolor("bg-white"); 67 | } 68 | setcollapseOpen(!collapseOpen); 69 | }; 70 | // this function is to open the Search modal 71 | const toggleModalSearch = () => { 72 | setmodalSearch(!modalSearch); 73 | }; 74 | return ( 75 | <> 76 | 77 | 78 |
79 |
84 | 85 | 86 | 87 | 88 | 89 |
90 | e.preventDefault()}> 91 | {props.brandText} 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 174 | 175 | 176 | 177 | 182 | 183 | 184 | 191 | 192 | 193 | 194 | ); 195 | } 196 | 197 | export default AdminNavbar; 198 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | /*eslint-disable*/ 19 | import React from "react"; 20 | import { NavLink, Link, useLocation } from "react-router-dom"; 21 | // nodejs library to set properties for components 22 | import { PropTypes } from "prop-types"; 23 | 24 | // javascript plugin used to create scrollbars on windows 25 | import PerfectScrollbar from "perfect-scrollbar"; 26 | 27 | // reactstrap components 28 | import { Nav, NavLink as ReactstrapNavLink } from "reactstrap"; 29 | import { 30 | BackgroundColorContext, 31 | backgroundColors, 32 | } from "contexts/BackgroundColorContext"; 33 | 34 | var ps; 35 | 36 | function Sidebar(props) { 37 | const location = useLocation(); 38 | const sidebarRef = React.useRef(null); 39 | // verifies if routeName is the one active (in browser input) 40 | const activeRoute = (routeName) => { 41 | return location.pathname === routeName ? "active" : ""; 42 | }; 43 | React.useEffect(() => { 44 | if (navigator.platform.indexOf("Win") > -1) { 45 | ps = new PerfectScrollbar(sidebarRef.current, { 46 | suppressScrollX: true, 47 | suppressScrollY: false, 48 | }); 49 | } 50 | // Specify how to clean up after this effect: 51 | return function cleanup() { 52 | if (navigator.platform.indexOf("Win") > -1) { 53 | ps.destroy(); 54 | } 55 | }; 56 | }); 57 | const linkOnClick = () => { 58 | document.documentElement.classList.remove("nav-open"); 59 | }; 60 | const { routes, rtlActive, logo } = props; 61 | let logoImg = null; 62 | let logoText = null; 63 | if (logo !== undefined) { 64 | if (logo.outterLink !== undefined) { 65 | logoImg = ( 66 | 72 |
73 | react-logo 74 |
75 | 76 | ); 77 | logoText = ( 78 | 84 | {logo.text} 85 | 86 | ); 87 | } else { 88 | logoImg = ( 89 | 94 |
95 | react-logo 96 |
97 | 98 | ); 99 | logoText = ( 100 | 105 | {logo.text} 106 | 107 | ); 108 | } 109 | } 110 | return ( 111 | 112 | {({ color }) => ( 113 |
114 |
115 | {logoImg !== null || logoText !== null ? ( 116 |
117 | {logoImg} 118 | {logoText} 119 |
120 | ) : null} 121 | 149 |
150 |
151 | )} 152 | 153 | ); 154 | } 155 | 156 | Sidebar.propTypes = { 157 | // if true, then instead of the routes[i].name, routes[i].rtlName will be rendered 158 | // insde the links of this component 159 | rtlActive: PropTypes.bool, 160 | routes: PropTypes.arrayOf(PropTypes.object), 161 | logo: PropTypes.shape({ 162 | // innerLink is for links that will direct the user within the app 163 | // it will be rendered as ... tag 164 | innerLink: PropTypes.string, 165 | // outterLink is for links that will direct the user outside the app 166 | // it will be rendered as simple ... tag 167 | outterLink: PropTypes.string, 168 | // the text of the logo 169 | text: PropTypes.node, 170 | // the image src of the logo 171 | imgSrc: PropTypes.string, 172 | }), 173 | }; 174 | 175 | export default Sidebar; 176 | -------------------------------------------------------------------------------- /src/components/ThemeWrapper/ThemeWrapper.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { ThemeContext, themes } from "contexts/ThemeContext"; 3 | 4 | export default function ThemeContextWrapper(props) { 5 | const [theme, setTheme] = useState(themes.dark); 6 | 7 | function changeTheme(theme) { 8 | setTheme(theme); 9 | } 10 | 11 | useEffect(() => { 12 | switch (theme) { 13 | case themes.light: 14 | document.body.classList.add("white-content"); 15 | break; 16 | case themes.dark: 17 | default: 18 | document.body.classList.remove("white-content"); 19 | break; 20 | } 21 | }, [theme]); 22 | 23 | return ( 24 | 25 | {props.children} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/contexts/BackgroundColorContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const backgroundColors = { 4 | primary: "primary", 5 | blue: "blue", 6 | green: "green", 7 | }; 8 | 9 | export const BackgroundColorContext = createContext({ 10 | color: backgroundColors.blue, 11 | changeColor: (color) => {}, 12 | }); 13 | -------------------------------------------------------------------------------- /src/contexts/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const themes = { 4 | dark: "", 5 | light: "white-content", 6 | }; 7 | 8 | export const ThemeContext = createContext({ 9 | theme: themes.dark, 10 | changeTheme: () => {}, 11 | }); 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import ReactDOM from "react-dom/client"; 20 | import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; 21 | 22 | import AdminLayout from "layouts/Admin/Admin.js"; 23 | import RTLLayout from "layouts/RTL/RTL.js"; 24 | 25 | import "assets/scss/black-dashboard-react.scss"; 26 | import "assets/demo/demo.css"; 27 | import "assets/css/nucleo-icons.css"; 28 | import "@fortawesome/fontawesome-free/css/all.min.css"; 29 | 30 | import ThemeContextWrapper from "./components/ThemeWrapper/ThemeWrapper"; 31 | import BackgroundColorWrapper from "./components/BackgroundColorWrapper/BackgroundColorWrapper"; 32 | 33 | const root = ReactDOM.createRoot(document.getElementById("root")); 34 | 35 | root.render( 36 | 37 | 38 | 39 | 40 | } /> 41 | } /> 42 | } 45 | /> 46 | 47 | 48 | 49 | 50 | ); 51 | -------------------------------------------------------------------------------- /src/layouts/Admin/Admin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import { Route, Routes, Navigate, useLocation } from "react-router-dom"; 20 | // javascript plugin used to create scrollbars on windows 21 | import PerfectScrollbar from "perfect-scrollbar"; 22 | 23 | // core components 24 | import AdminNavbar from "components/Navbars/AdminNavbar.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 | import logo from "assets/img/react-logo.png"; 32 | import { BackgroundColorContext } from "contexts/BackgroundColorContext"; 33 | 34 | var ps; 35 | 36 | function Admin(props) { 37 | const location = useLocation(); 38 | const mainPanelRef = React.useRef(null); 39 | const [sidebarOpened, setsidebarOpened] = React.useState( 40 | document.documentElement.className.indexOf("nav-open") !== -1 41 | ); 42 | React.useEffect(() => { 43 | if (navigator.platform.indexOf("Win") > -1) { 44 | document.documentElement.className += " perfect-scrollbar-on"; 45 | document.documentElement.classList.remove("perfect-scrollbar-off"); 46 | ps = new PerfectScrollbar(mainPanelRef.current, { 47 | suppressScrollX: true, 48 | }); 49 | let tables = document.querySelectorAll(".table-responsive"); 50 | for (let i = 0; i < tables.length; i++) { 51 | ps = new PerfectScrollbar(tables[i]); 52 | } 53 | } 54 | // Specify how to clean up after this effect: 55 | return function cleanup() { 56 | if (navigator.platform.indexOf("Win") > -1) { 57 | ps.destroy(); 58 | document.documentElement.classList.add("perfect-scrollbar-off"); 59 | document.documentElement.classList.remove("perfect-scrollbar-on"); 60 | } 61 | }; 62 | }); 63 | React.useEffect(() => { 64 | if (navigator.platform.indexOf("Win") > -1) { 65 | let tables = document.querySelectorAll(".table-responsive"); 66 | for (let i = 0; i < tables.length; i++) { 67 | ps = new PerfectScrollbar(tables[i]); 68 | } 69 | } 70 | document.documentElement.scrollTop = 0; 71 | document.scrollingElement.scrollTop = 0; 72 | if (mainPanelRef.current) { 73 | mainPanelRef.current.scrollTop = 0; 74 | } 75 | }, [location]); 76 | // this function opens and closes the sidebar on small devices 77 | const toggleSidebar = () => { 78 | document.documentElement.classList.toggle("nav-open"); 79 | setsidebarOpened(!sidebarOpened); 80 | }; 81 | const getRoutes = (routes) => { 82 | return routes.map((prop, key) => { 83 | if (prop.layout === "/admin") { 84 | return ( 85 | 86 | ); 87 | } else { 88 | return null; 89 | } 90 | }); 91 | }; 92 | const getBrandText = (path) => { 93 | for (let i = 0; i < routes.length; i++) { 94 | if (location.pathname.indexOf(routes[i].layout + routes[i].path) !== -1) { 95 | return routes[i].name; 96 | } 97 | } 98 | return "Brand"; 99 | }; 100 | return ( 101 | 102 | {({ color, changeColor }) => ( 103 | 104 |
105 | 114 |
115 | 120 | 121 | {getRoutes(routes)} 122 | } 125 | /> 126 | 127 | { 128 | // we don't want the Footer to be rendered on map page 129 | location.pathname === "/admin/maps" ? null :
130 | } 131 |
132 |
133 | 134 | 135 | )} 136 | 137 | ); 138 | } 139 | 140 | export default Admin; 141 | -------------------------------------------------------------------------------- /src/layouts/RTL/RTL.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import { Route, Routes, useLocation } from "react-router-dom"; 20 | // javascript plugin used to create scrollbars on windows 21 | import PerfectScrollbar from "perfect-scrollbar"; 22 | 23 | // core components 24 | import RTLNavbar from "components/Navbars/RTLNavbar.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 | import logo from "assets/img/react-logo.png"; 32 | import { BackgroundColorContext } from "contexts/BackgroundColorContext"; 33 | 34 | var ps; 35 | 36 | function RTL(props) { 37 | const location = useLocation(); 38 | const mainPanelRef = React.useRef(null); 39 | const [sidebarOpened, setsidebarOpened] = React.useState( 40 | document.documentElement.className.indexOf("nav-open") !== -1 41 | ); 42 | React.useEffect(() => { 43 | if (navigator.platform.indexOf("Win") > -1) { 44 | document.documentElement.className += " perfect-scrollbar-on"; 45 | document.documentElement.classList.remove("perfect-scrollbar-off"); 46 | ps = new PerfectScrollbar(mainPanelRef.current, { 47 | suppressScrollX: true, 48 | }); 49 | let tables = document.querySelectorAll(".table-responsive"); 50 | for (let i = 0; i < tables.length; i++) { 51 | ps = new PerfectScrollbar(tables[i]); 52 | } 53 | } 54 | // on this page, we need on the body tag the classes .rtl and .menu-on-right 55 | document.body.classList.add("rtl", "menu-on-right"); 56 | // we also need the rtl bootstrap 57 | // so we add it dynamically to the head 58 | let head = document.head; 59 | let link = document.createElement("link"); 60 | link.type = "text/css"; 61 | link.rel = "stylesheet"; 62 | link.id = "rtl-id"; 63 | link.href = 64 | "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css"; 65 | head.appendChild(link); 66 | // Specify how to clean up after this effect: 67 | return function cleanup() { 68 | if (navigator.platform.indexOf("Win") > -1) { 69 | ps.destroy(); 70 | document.documentElement.classList.add("perfect-scrollbar-off"); 71 | document.documentElement.classList.remove("perfect-scrollbar-on"); 72 | } 73 | // when we exit this page, we need to delete the classes .rtl and .menu-on-right 74 | // from the body tag 75 | document.body.classList.remove("rtl", "menu-on-right"); 76 | // we also need to delete the rtl bootstrap, so it does not break the other pages 77 | // that do not make use of rtl 78 | document.getElementById("rtl-id").remove(); 79 | }; 80 | }); 81 | React.useEffect(() => { 82 | if (navigator.platform.indexOf("Win") > -1) { 83 | let tables = document.querySelectorAll(".table-responsive"); 84 | for (let i = 0; i < tables.length; i++) { 85 | ps = new PerfectScrollbar(tables[i]); 86 | } 87 | } 88 | document.documentElement.scrollTop = 0; 89 | document.scrollingElement.scrollTop = 0; 90 | if (mainPanelRef.current) { 91 | mainPanelRef.current.scrollTop = 0; 92 | } 93 | }, [location]); 94 | // this function opens and closes the sidebar on small devices 95 | const toggleSidebar = () => { 96 | document.documentElement.classList.toggle("nav-open"); 97 | setsidebarOpened(!sidebarOpened); 98 | }; 99 | const getRoutes = (routes) => { 100 | return routes.map((prop, key) => { 101 | if (prop.layout === "/rtl") { 102 | return ( 103 | 104 | ); 105 | } else { 106 | return null; 107 | } 108 | }); 109 | }; 110 | const getBrandText = (path) => { 111 | for (let i = 0; i < routes.length; i++) { 112 | if (location.pathname.indexOf(routes[i].layout + routes[i].path) !== -1) { 113 | return routes[i].name; 114 | } 115 | } 116 | return "Brand"; 117 | }; 118 | return ( 119 | <> 120 | 121 | {({ color, changeColor }) => ( 122 | 123 |
124 | 134 |
135 | 140 | {getRoutes(routes)} 141 | { 142 | // we don't want the Footer to be rendered on map page 143 | location.pathname === "/admin/maps" ? null :
144 | } 145 |
146 |
147 | 148 | 149 | )} 150 | 151 | 152 | ); 153 | } 154 | 155 | export default RTL; 156 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import Dashboard from "views/Dashboard.js"; 19 | import Icons from "views/Icons.js"; 20 | import Map from "views/Map.js"; 21 | import Notifications from "views/Notifications.js"; 22 | import Rtl from "views/Rtl.js"; 23 | import TableList from "views/TableList.js"; 24 | import Typography from "views/Typography.js"; 25 | import UserProfile from "views/UserProfile.js"; 26 | 27 | var routes = [ 28 | { 29 | path: "/dashboard", 30 | name: "Dashboard", 31 | rtlName: "لوحة القيادة", 32 | icon: "tim-icons icon-chart-pie-36", 33 | component: , 34 | layout: "/admin", 35 | }, 36 | { 37 | path: "/icons", 38 | name: "Icons", 39 | rtlName: "الرموز", 40 | icon: "tim-icons icon-atom", 41 | component: , 42 | layout: "/admin", 43 | }, 44 | { 45 | path: "/map", 46 | name: "Map", 47 | rtlName: "خرائط", 48 | icon: "tim-icons icon-pin", 49 | component: , 50 | layout: "/admin", 51 | }, 52 | { 53 | path: "/notifications", 54 | name: "Notifications", 55 | rtlName: "إخطارات", 56 | icon: "tim-icons icon-bell-55", 57 | component: , 58 | layout: "/admin", 59 | }, 60 | { 61 | path: "/user-profile", 62 | name: "User Profile", 63 | rtlName: "ملف تعريفي للمستخدم", 64 | icon: "tim-icons icon-single-02", 65 | component: , 66 | layout: "/admin", 67 | }, 68 | { 69 | path: "/tables", 70 | name: "Table List", 71 | rtlName: "قائمة الجدول", 72 | icon: "tim-icons icon-puzzle-10", 73 | component: , 74 | layout: "/admin", 75 | }, 76 | { 77 | path: "/typography", 78 | name: "Typography", 79 | rtlName: "طباعة", 80 | icon: "tim-icons icon-align-center", 81 | component: , 82 | layout: "/admin", 83 | }, 84 | { 85 | path: "/rtl-support", 86 | name: "RTL Support", 87 | rtlName: "ار تي ال", 88 | icon: "tim-icons icon-world", 89 | component: , 90 | layout: "/rtl", 91 | }, 92 | ]; 93 | export default routes; 94 | -------------------------------------------------------------------------------- /src/views/TableList.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { 22 | Card, 23 | CardHeader, 24 | CardBody, 25 | CardTitle, 26 | Table, 27 | Row, 28 | Col, 29 | } from "reactstrap"; 30 | 31 | function Tables() { 32 | return ( 33 | <> 34 |
35 | 36 | 37 | 38 | 39 | Simple Table 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
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
96 | 97 | 98 | 99 | 100 | 101 | 102 | Table on Plain Background 103 |

Here is a subtitle for this table

104 | 105 | 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 |
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
160 | 161 | 162 | 163 | 164 |
165 | 166 | ); 167 | } 168 | 169 | export default Tables; 170 | -------------------------------------------------------------------------------- /src/views/UserProfile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Black Dashboard React v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/black-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { 22 | Button, 23 | Card, 24 | CardHeader, 25 | CardBody, 26 | CardFooter, 27 | CardText, 28 | FormGroup, 29 | Form, 30 | Input, 31 | Row, 32 | Col, 33 | } from "reactstrap"; 34 | 35 | function UserProfile() { 36 | return ( 37 | <> 38 |
39 | 40 | 41 | 42 | 43 |
Edit Profile
44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 57 | 58 | 59 | 60 | 61 | 62 | 67 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 87 | 88 | 89 | 90 | 91 | 92 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 121 | 122 | 123 | 124 | 125 | 126 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 152 | 153 | 154 | 155 |
156 | 157 | 158 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 |
171 |
172 | 183 |
184 | Do not be scared of the truth because we need to restart the 185 | human foundation in truth And I love you like Kanye loves 186 | Kanye I love Rick Owens’ bed design but the back is... 187 |
188 | 189 | 190 |
191 | 194 | 197 | 200 |
201 | 202 | 203 | 204 | 205 |
206 | 207 | ); 208 | } 209 | 210 | export default UserProfile; 211 | --------------------------------------------------------------------------------