├── .env ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── Documentation └── tutorial-components.html ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── genezio.yaml ├── jsconfig.json ├── now-ui-dashboard-react.gif ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html └── manifest.json └── src ├── assets ├── css │ ├── demo.css │ ├── now-ui-dashboard.css │ ├── now-ui-dashboard.css.map │ └── now-ui-dashboard.min.css ├── fonts │ ├── nucleo-outline.eot │ ├── nucleo-outline.ttf │ ├── nucleo-outline.woff │ └── nucleo-outline.woff2 ├── github │ ├── dashboard.jpg │ ├── maps.jpg │ ├── notification.jpg │ ├── tables.jpg │ └── user_profile.jpg ├── img │ ├── bg1.jpg │ ├── bg11.jpg │ ├── bg3.jpg │ ├── bg4.jpg │ ├── bg5.jpg │ ├── bg6.jpg │ ├── bg7.jpg │ ├── bg8.jpg │ ├── creative-tim-white-slim2.png │ ├── default-avatar.png │ ├── favicon.png │ ├── header.jpg │ ├── image_placeholder.jpg │ ├── james.jpg │ ├── logo.png │ ├── mike.jpg │ └── ryan.jpg └── scss │ ├── now-ui-dashboard.scss │ └── now-ui-dashboard │ ├── _alerts.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _fixed-plugin.scss │ ├── _footers.scss │ ├── _images.scss │ ├── _inputs.scss │ ├── _misc.scss │ ├── _mixins.scss │ ├── _navbar.scss │ ├── _nucleo-outline.scss │ ├── _page-header.scss │ ├── _responsive.scss │ ├── _sidebar-and-main-panel.scss │ ├── _tables.scss │ ├── _typography.scss │ ├── _variables.scss │ ├── cards │ ├── _card-chart.scss │ ├── _card-map.scss │ ├── _card-plain.scss │ └── _card-user.scss │ ├── mixins │ ├── _buttons.scss │ ├── _cards.scss │ ├── _dropdown.scss │ ├── _inputs.scss │ ├── _page-header.scss │ ├── _sidebar.scss │ ├── _transparency.scss │ └── _vendor-prefixes.scss │ ├── plugins │ ├── _plugin-animate-bootstrap-notify.scss │ └── _plugin-perfect-scrollbar.scss │ └── react │ ├── custom │ ├── _alerts.scss │ ├── _mixins.scss │ ├── _navbar.scss │ ├── _sidebar-and-main-panel.scss │ └── _tables.scss │ ├── mixins │ └── _vendor-prefixes.scss │ └── react-differences.scss ├── components ├── FixedPlugin │ └── FixedPlugin.js ├── Footer │ └── Footer.js ├── Navbars │ └── DemoNavbar.js ├── PanelHeader │ └── PanelHeader.js └── Sidebar │ └── Sidebar.js ├── index.js ├── layouts └── Admin.js ├── logo-white.svg ├── logo.svg ├── routes.js ├── variables ├── charts.js ├── general.js └── icons.js └── views ├── Dashboard.js ├── Icons.js ├── Maps.js ├── Notifications.js ├── TableList.js ├── Typography.js ├── Upgrade.js └── UserPage.js /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/now-ui-dashboard-react\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | /dist 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | package-lock.json 25 | /src/assets/sass/now-ui-dashboard.css 26 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /Documentation/tutorial-components.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | Components Documentation - Now UI Dashboard by Creative Tim 33 | 34 | 38 | 39 | 40 | 44 | 48 | 49 | 50 | 56 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 137 | 138 | 139 | 140 | 141 | 186 | 187 | 188 |
189 |
190 |
195 | 196 |
197 |
198 |

Components Documentation

199 |

v1.5.0

200 |

201 | We are constantly doing updates for you. Please check the online 202 | documentation. 203 |

204 | View Documentation 209 |
210 |
211 | 257 |
258 |
259 | 260 | 261 | 262 | 267 | 272 | 277 | 278 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: now-ui-dashboard-react 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"], 6 | "assets": ["src/assets"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /now-ui-dashboard-react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/now-ui-dashboard-react.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "now-ui-dashboard-react", 3 | "version": "1.5.2", 4 | "main": "dist/index.js", 5 | "private": true, 6 | "homepage": "https://demos.creative-tim.com/now-ui-dashboard-react/#/", 7 | "dependencies": { 8 | "ajv": "^8.17.1", 9 | "bootstrap": "4.6.2", 10 | "chart.js": "3.9.1", 11 | "cross-env": "^7.0.3", 12 | "perfect-scrollbar": "1.5.5", 13 | "react": ">=16.8.0", 14 | "react-chartjs-2": "3.3.0", 15 | "react-dom": ">=16.8.0", 16 | "react-notification-alert": "0.0.13", 17 | "react-router-dom": "6.11.1", 18 | "react-scripts": "5.0.1", 19 | "reactstrap": "8.10.0", 20 | "sass": "1.62.1" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "cross-env PUBLIC_URL=/ react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject", 27 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 28 | "compile-sass": "sass src/assets/scss/paper-dashboard.scss src/assets/css/paper-dashboard.css", 29 | "minify-sass": "sass src/assets/scss/paper-dashboard.scss src/assets/css/paper-dashboard.min.css --style compressed" 30 | }, 31 | "optionalDependencies": { 32 | "@babel/core": "7.21.8", 33 | "typescript": "5.0.4" 34 | }, 35 | "peerDependencies": { 36 | "react": ">=16.8.0", 37 | "react-dom": ">=16.8.0" 38 | }, 39 | "overrides": { 40 | "svgo": "3.0.2", 41 | "fsevents": "2.3.2", 42 | "chokidar": "3.5.3" 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 36 | 37 | 46 | 47 | 51 | 55 | 56 | Now UI Dashboard React by Creative Tim 57 | 58 | 59 | 60 |
61 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/css/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | .typography-line { 26 | padding-left: 25%; 27 | margin-bottom: 35px; 28 | position: relative; 29 | display: block; 30 | width: 100%; 31 | } 32 | .typography-line span { 33 | bottom: 10px; 34 | color: #c0c1c2; 35 | display: block; 36 | font-weight: 400; 37 | font-size: 13px; 38 | line-height: 13px; 39 | left: 0; 40 | position: absolute; 41 | width: 260px; 42 | text-transform: none; 43 | } 44 | .tim-row { 45 | padding-top: 60px; 46 | } 47 | .tim-row h3 { 48 | margin-top: 0; 49 | } 50 | 51 | .offline-doc .page-header { 52 | display: flex; 53 | align-items: center; 54 | } 55 | 56 | .offline-doc .footer { 57 | position: absolute; 58 | width: 100%; 59 | background: transparent; 60 | bottom: 0; 61 | color: #fff; 62 | z-index: 1; 63 | } 64 | .sidebar .nav > li.active-pro { 65 | position: absolute; 66 | width: 100%; 67 | bottom: 10px; 68 | } 69 | .sidebar .nav > li.active-pro a { 70 | background: rgba(255, 255, 255, 0.14); 71 | opacity: 1; 72 | color: #ffffff; 73 | } 74 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-outline.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/fonts/nucleo-outline.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-outline.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/fonts/nucleo-outline.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-outline.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/fonts/nucleo-outline.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-outline.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/fonts/nucleo-outline.woff2 -------------------------------------------------------------------------------- /src/assets/github/dashboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/github/dashboard.jpg -------------------------------------------------------------------------------- /src/assets/github/maps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/github/maps.jpg -------------------------------------------------------------------------------- /src/assets/github/notification.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/github/notification.jpg -------------------------------------------------------------------------------- /src/assets/github/tables.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/github/tables.jpg -------------------------------------------------------------------------------- /src/assets/github/user_profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/github/user_profile.jpg -------------------------------------------------------------------------------- /src/assets/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg1.jpg -------------------------------------------------------------------------------- /src/assets/img/bg11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg11.jpg -------------------------------------------------------------------------------- /src/assets/img/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg3.jpg -------------------------------------------------------------------------------- /src/assets/img/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg4.jpg -------------------------------------------------------------------------------- /src/assets/img/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg5.jpg -------------------------------------------------------------------------------- /src/assets/img/bg6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg6.jpg -------------------------------------------------------------------------------- /src/assets/img/bg7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg7.jpg -------------------------------------------------------------------------------- /src/assets/img/bg8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/bg8.jpg -------------------------------------------------------------------------------- /src/assets/img/creative-tim-white-slim2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/creative-tim-white-slim2.png -------------------------------------------------------------------------------- /src/assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/default-avatar.png -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/header.jpg -------------------------------------------------------------------------------- /src/assets/img/image_placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/image_placeholder.jpg -------------------------------------------------------------------------------- /src/assets/img/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/james.jpg -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/mike.jpg -------------------------------------------------------------------------------- /src/assets/img/ryan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/now-ui-dashboard-react/882f872ad8745333cfa721798c48edd9cd834150/src/assets/img/ryan.jpg -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.0 based on Now UI Dashboard - v1.3.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2021 Creative Tim (http://www.creative-tim.com) 9 | 10 | * Designed by www.invisionapp.com Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | 16 | */ 17 | 18 | @import 'now-ui-dashboard/variables'; 19 | @import 'now-ui-dashboard/mixins'; 20 | 21 | // Plugins CSS 22 | @import "now-ui-dashboard/plugins/plugin-animate-bootstrap-notify"; 23 | @import "now-ui-dashboard/plugins/plugin-perfect-scrollbar"; 24 | 25 | // Core CSS 26 | @import "now-ui-dashboard/buttons"; 27 | @import "now-ui-dashboard/inputs"; 28 | @import "now-ui-dashboard/typography"; 29 | @import "now-ui-dashboard/misc"; 30 | @import "now-ui-dashboard/checkboxes-radio"; 31 | 32 | // components 33 | @import "now-ui-dashboard/navbar"; 34 | @import "now-ui-dashboard/page-header"; 35 | @import "now-ui-dashboard/dropdown"; 36 | @import "now-ui-dashboard/alerts"; 37 | @import "now-ui-dashboard/images"; 38 | @import "now-ui-dashboard/nucleo-outline"; 39 | @import "now-ui-dashboard/tables"; 40 | @import "now-ui-dashboard/sidebar-and-main-panel"; 41 | @import "now-ui-dashboard/footers"; 42 | @import "now-ui-dashboard/fixed-plugin"; 43 | 44 | // cards 45 | @import "now-ui-dashboard/cards"; 46 | @import "now-ui-dashboard/cards/card-plain"; 47 | @import "now-ui-dashboard/cards/card-chart"; 48 | @import "now-ui-dashboard/cards/card-user"; 49 | @import "now-ui-dashboard/cards/card-map"; 50 | 51 | @import "now-ui-dashboard/responsive"; 52 | 53 | // react 54 | @import "now-ui-dashboard/react/react-differences"; 55 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: $border-radius-small; 4 | color: $white-color; 5 | padding-top: .9rem; 6 | padding-bottom: .9rem; 7 | position: relative; 8 | 9 | &.alert-success{ 10 | background-color: lighten($success-color, 5%); 11 | } 12 | 13 | &.alert-danger{ 14 | background-color: lighten($danger-color, 5%); 15 | } 16 | 17 | &.alert-warning{ 18 | background-color: lighten($warning-color, 5%); 19 | } 20 | 21 | &.alert-info{ 22 | background-color: lighten($info-color, 5%); 23 | } 24 | 25 | &.alert-primary{ 26 | background-color: lighten($primary-color, 5%); 27 | } 28 | 29 | 30 | i.fa, 31 | i.now-ui-icons{ 32 | font-size: 20px; 33 | } 34 | 35 | .close{ 36 | color: $white-color !important; 37 | opacity: .9; 38 | text-shadow: none; 39 | line-height: 0; 40 | outline: 0; 41 | } 42 | 43 | span[data-notify="icon"]{ 44 | font-size: 22px; 45 | display: block; 46 | left: 19px; 47 | position: absolute; 48 | top: 50%; 49 | margin-top: -11px; 50 | } 51 | 52 | button.close{ 53 | position: absolute; 54 | right: 10px; 55 | top: 50%; 56 | margin-top: -13px; 57 | width: 25px; 58 | height: 25px; 59 | padding: 3px; 60 | } 61 | 62 | .close ~ span{ 63 | display: block; 64 | max-width: 89%; 65 | } 66 | 67 | &.alert-with-icon{ 68 | padding-left: 65px; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > a.btn{ 3 | border-width: $border-thick; 4 | font-weight: $font-weight-normal; 5 | font-size: $font-size-small; 6 | line-height: $line-height; 7 | border: none; 8 | margin:10px 1px; 9 | border-radius: $border-radius-small; 10 | padding: $padding-btn-vertical $padding-btn-horizontal; 11 | cursor: pointer; 12 | 13 | @include btn-styles($default-color, $default-states-color); 14 | 15 | &:hover, 16 | &:focus{ 17 | @include opacity(1); 18 | outline: 0 !important; 19 | } 20 | &:active, 21 | &.active, 22 | .open > &.dropdown-toggle { 23 | @include box-shadow(none); 24 | outline: 0 !important; 25 | } 26 | 27 | .badge{ 28 | margin: 0; 29 | } 30 | 31 | &.btn-icon { 32 | // see above for color variations 33 | height: $btn-icon-size-regular; 34 | min-width: $btn-icon-size-regular; 35 | width: $btn-icon-size-regular; 36 | padding: 0; 37 | font-size: $btn-icon-font-size-regular; 38 | overflow: hidden; 39 | position: relative; 40 | line-height: normal; 41 | 42 | &[class*="btn-outline-"]{ 43 | padding: 0 !important; 44 | } 45 | 46 | &.btn-sm{ 47 | height: $btn-icon-size-small; 48 | min-width: $btn-icon-size-small; 49 | width: $btn-icon-size-small; 50 | 51 | .fa, 52 | .far, 53 | .fas, 54 | .now-ui-icons{ 55 | font-size: $btn-icon-font-size-small; 56 | } 57 | } 58 | 59 | &.btn-lg{ 60 | height: $btn-icon-size-lg; 61 | min-width: $btn-icon-size-lg; 62 | width: $btn-icon-size-lg; 63 | 64 | .fa, 65 | .far, 66 | .fas, 67 | .now-ui-icons{ 68 | font-size: $btn-icon-font-size-lg; 69 | } 70 | } 71 | 72 | &:not(.btn-footer) .now-ui-icons, 73 | &:not(.btn-footer) .fa, 74 | &:not(.btn-footer) .far, 75 | &:not(.btn-footer) .fas{ 76 | position: absolute; 77 | top: 50%; 78 | left: 50%; 79 | transform: translate(-12px, -12px); 80 | line-height: 1.5626rem; 81 | width: 24px; 82 | } 83 | 84 | } 85 | 86 | &:not(.btn-icon) .now-ui-icons{ 87 | position: relative; 88 | top: 1px; 89 | } 90 | } 91 | 92 | // Apply the mixin to the buttons 93 | // .btn-default { @include btn-styles($default-color, $default-states-color); } 94 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 95 | .btn-success { @include btn-styles($success-color, $success-states-color); } 96 | .btn-info { @include btn-styles($info-color, $info-states-color); } 97 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 98 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 99 | .btn-neutral { @include btn-styles($white-color, $white-color); } 100 | 101 | .btn-outline-primary { @include outline-buttons($primary-color, $primary-states-color); } 102 | .btn-outline-success { @include outline-buttons($success-color, $success-states-color); } 103 | .btn-outline-info { @include outline-buttons($info-color, $info-states-color); } 104 | .btn-outline-warning { @include outline-buttons($warning-color, $warning-states-color); } 105 | .btn-outline-danger { @include outline-buttons($danger-color, $danger-states-color); } 106 | .btn-outline-default { @include outline-buttons($default-color, $default-states-color); } 107 | 108 | .btn{ 109 | &:disabled, 110 | &[disabled], 111 | &.disabled{ 112 | @include opacity(.5); 113 | pointer-events: none; 114 | } 115 | } 116 | [class*="btn-outline-"]{ 117 | border: $border; 118 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 119 | background-color: $transparent-bg; 120 | } 121 | 122 | [class*="btn-outline-"], 123 | .btn-link{ 124 | &.disabled, 125 | &:disabled, 126 | &[disabled], 127 | fieldset[disabled] & { 128 | &, 129 | &:hover, 130 | &:focus, 131 | &.focus, 132 | &:active, 133 | &.active { 134 | background-color: $transparent-bg; 135 | } 136 | } 137 | } 138 | 139 | .btn-link{ 140 | border: $none; 141 | padding: $padding-base-vertical $padding-base-horizontal; 142 | background-color: $transparent-bg; 143 | } 144 | 145 | .btn-lg{ 146 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 147 | } 148 | .btn-sm{ 149 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small); 150 | } 151 | 152 | .btn-wd { 153 | min-width: 140px; 154 | } 155 | .btn-group.select{ 156 | width: 100%; 157 | } 158 | .btn-group.select .btn{ 159 | text-align: left; 160 | } 161 | .btn-group.select .caret{ 162 | position: absolute; 163 | top: 50%; 164 | margin-top: -1px; 165 | right: 8px; 166 | } 167 | 168 | .btn-round{ 169 | border-width: $border-thin; 170 | border-radius: $btn-round-radius; 171 | padding-right: $padding-round-horizontal; 172 | padding-left: $padding-round-horizontal; 173 | 174 | &.btn-simple:not(.btn-sm):not(.btn-lg){ 175 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 176 | } 177 | } 178 | 179 | .no-caret { 180 | &.dropdown-toggle::after { 181 | display: none; 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 0; 3 | border-radius: $border-radius-small; 4 | display: inline-block; 5 | position: relative; 6 | width: 100%; 7 | margin-bottom: 20px; 8 | box-shadow: $box-shadow; 9 | 10 | [data-notify="container"].alert { 11 | min-width: auto; 12 | left: unset !important; 13 | right: unset !important; 14 | } 15 | 16 | .card-body{ 17 | padding: 15px 15px 10px 15px; 18 | 19 | &.table-full-width{ 20 | padding-left: 0; 21 | padding-right: 0; 22 | } 23 | } 24 | 25 | .card-header{ 26 | &:not([data-background-color]){ 27 | background-color: transparent; 28 | } 29 | padding: 15px 15px 0; 30 | border: 0; 31 | 32 | .card-title{ 33 | margin-top: 10px; 34 | } 35 | } 36 | 37 | .map{ 38 | border-radius: $border-radius-small; 39 | 40 | &.map-big{ 41 | height: 400px; 42 | } 43 | } 44 | 45 | &[data-background-color="orange"]{ 46 | background-color: $primary-color; 47 | 48 | .card-header{ 49 | background-color: $primary-color; 50 | } 51 | 52 | .card-footer{ 53 | .stats{ 54 | color: $white-color; 55 | } 56 | } 57 | } 58 | 59 | &[data-background-color="red"]{ 60 | background-color: $danger-color; 61 | } 62 | 63 | &[data-background-color="yellow"]{ 64 | background-color: $warning-color; 65 | } 66 | 67 | &[data-background-color="blue"]{ 68 | background-color: $info-color; 69 | } 70 | 71 | &[data-background-color="green"]{ 72 | background-color: $success-color; 73 | } 74 | 75 | .image{ 76 | overflow: hidden; 77 | height: 200px; 78 | position: relative; 79 | } 80 | 81 | .avatar{ 82 | width: 30px; 83 | height: 30px; 84 | overflow: hidden; 85 | border-radius: 50%; 86 | margin-bottom: 15px; 87 | } 88 | 89 | label{ 90 | font-size: $font-size-small; 91 | margin-bottom: 5px; 92 | color: $dark-gray; 93 | } 94 | 95 | .card-footer{ 96 | background-color: transparent; 97 | border: 0; 98 | 99 | 100 | .stats{ 101 | i{ 102 | margin-right: 5px; 103 | position: relative; 104 | top: 2px; 105 | } 106 | } 107 | 108 | .btn{ 109 | margin: 0; 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check{ 2 | margin-top: .5rem; 3 | } 4 | 5 | .form-check .form-check-label{ 6 | display: inline-block; 7 | position: relative; 8 | cursor: pointer; 9 | padding-left: 35px; 10 | line-height: 26px; 11 | margin-bottom: 0; 12 | -webkit-transition: color 0.3s linear; 13 | -moz-transition: color 0.3s linear; 14 | -o-transition: color 0.3s linear; 15 | -ms-transition: color 0.3s linear; 16 | transition: color 0.3s linear; 17 | } 18 | .radio .form-check-sign{ 19 | padding-left: 28px; 20 | } 21 | 22 | .form-check .form-check-sign::before, 23 | .form-check .form-check-sign::after{ 24 | content: " "; 25 | display: inline-block; 26 | position: absolute; 27 | width: 26px; 28 | height: 26px; 29 | left: 0; 30 | cursor: pointer; 31 | border-radius: 3px; 32 | top: 0; 33 | background-color: transparent; 34 | border: 1px solid $light-gray; 35 | -webkit-transition: opacity 0.3s linear; 36 | -moz-transition: opacity 0.3s linear; 37 | -o-transition: opacity 0.3s linear; 38 | -ms-transition: opacity 0.3s linear; 39 | transition: opacity 0.3s linear; 40 | } 41 | 42 | .form-check .form-check-sign::after{ 43 | font-family: 'Nucleo Outline'; 44 | content: "\ea22"; 45 | top: 0px; 46 | text-align: center; 47 | font-size: 14px; 48 | opacity: 0; 49 | color: $dark-background; 50 | border: 0; 51 | background-color: inherit; 52 | } 53 | 54 | .form-check.disabled .form-check-label, 55 | .form-check.disabled .form-check-label { 56 | color: $dark-gray; 57 | opacity: .5; 58 | cursor: not-allowed; 59 | } 60 | 61 | .form-check input[type="checkbox"], 62 | .radio input[type="radio"]{ 63 | opacity: 0; 64 | position: absolute; 65 | visibility: hidden; 66 | } 67 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 68 | opacity: 1; 69 | } 70 | 71 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 72 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 73 | cursor: not-allowed; 74 | } 75 | 76 | .form-check input[type="checkbox"]:disabled + .form-check-sign, 77 | .form-check input[type="radio"]:disabled + .form-check-sign{ 78 | pointer-events: none; 79 | } 80 | 81 | .form-check-radio .form-check-sign::before, 82 | .form-check-radio .form-check-sign::after{ 83 | content: " "; 84 | width: 20px; 85 | height: 20px; 86 | border-radius: 50%; 87 | border: 1px solid $light-gray; 88 | display: inline-block; 89 | position: absolute; 90 | left: 3px; 91 | top: 3px; 92 | padding: 1px; 93 | -webkit-transition: opacity 0.3s linear; 94 | -moz-transition: opacity 0.3s linear; 95 | -o-transition: opacity 0.3s linear; 96 | -ms-transition: opacity 0.3s linear; 97 | transition: opacity 0.3s linear; 98 | } 99 | 100 | .form-check-radio input[type="radio"] + .form-check-sign:after, 101 | .form-check-radio input[type="radio"] { 102 | opacity: 0; 103 | } 104 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 105 | width: 4px; 106 | height: 4px; 107 | background-color: $dark-background; 108 | border-color: $dark-background; 109 | top: 11px; 110 | left: 11px; 111 | opacity: 1; 112 | } 113 | 114 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 115 | opacity: 1; 116 | } 117 | 118 | .form-check-radio input[type="radio"]:disabled + .form-check-sign { 119 | color: $dark-gray; 120 | } 121 | 122 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 123 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 124 | color: $dark-gray; 125 | } 126 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu{ 2 | border: 0; 3 | box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); 4 | border-radius: $border-radius-extra-small; 5 | @include transition($fast-transition-time, $transition-linear); 6 | font-size: $font-size-base; 7 | 8 | &.dropdown-menu-right{ 9 | &:before{ 10 | left:auto; 11 | right: 10px; 12 | } 13 | } 14 | 15 | i{ 16 | margin-right: 5px; 17 | position: relative; 18 | top: 1px; 19 | } 20 | 21 | .now-ui-icons{ 22 | margin-right: 10px; 23 | position: relative; 24 | top: 4px; 25 | font-size: 18px; 26 | margin-top: -5px; 27 | opacity: .5; 28 | } 29 | 30 | .dropdown-item{ 31 | &.active, 32 | &:active{ 33 | color: inherit; 34 | } 35 | } 36 | 37 | .dropup &{ 38 | &:before{ 39 | display: none; 40 | } 41 | 42 | &:after{ 43 | display: inline-block; 44 | position: absolute; 45 | width: 0; 46 | height: 0; 47 | vertical-align: middle; 48 | content: ""; 49 | top: auto; 50 | bottom: -5px; 51 | right: auto; 52 | left: 10px; 53 | color: $white-color; 54 | border-top: .4em solid; 55 | border-right: .4em solid transparent; 56 | border-left: .4em solid transparent; 57 | } 58 | 59 | &.dropdown-menu-right{ 60 | &:after{ 61 | right: 10px; 62 | left: auto; 63 | } 64 | } 65 | 66 | } 67 | 68 | &:before{ 69 | display: inline-block; 70 | position: absolute; 71 | width: 0; 72 | height: 0; 73 | vertical-align: middle; 74 | content: ""; 75 | top: -5px; 76 | left: 10px; 77 | right: auto; 78 | color: $white-color; 79 | border-bottom: .4em solid; 80 | border-right: .4em solid transparent; 81 | border-left: .4em solid transparent; 82 | } 83 | 84 | &.dropdown-menu-right{ 85 | right: 0 !important; 86 | left: auto !important; 87 | } 88 | 89 | .dropdown-item, 90 | .bootstrap-select &.inner li a{ 91 | font-size: $font-size-small; 92 | padding-top: .6rem; 93 | padding-bottom: .6rem; 94 | margin-top: 5px; 95 | @include transition($fast-transition-time, $transition-linear); 96 | 97 | &:hover, 98 | &:focus{ 99 | background-color: $opacity-gray-3; 100 | outline: 0; 101 | } 102 | 103 | &.disabled, 104 | &:disabled{ 105 | color: $default-color-opacity; 106 | 107 | &:hover, 108 | &:focus{ 109 | background-color: transparent; 110 | } 111 | } 112 | } 113 | 114 | 115 | .dropdown-divider{ 116 | background-color: $opacity-gray-5; 117 | } 118 | 119 | .dropdown-header:not([href]):not([tabindex]){ 120 | color: $default-color-opacity; 121 | font-size: $font-size-mini; 122 | text-transform: uppercase; 123 | font-weight: $font-weight-bold; 124 | } 125 | 126 | &.dropdown-primary{ 127 | @include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2); 128 | } 129 | 130 | &.dropdown-info{ 131 | @include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2); 132 | } 133 | 134 | &.dropdown-danger{ 135 | @include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2); 136 | } 137 | 138 | &.dropdown-success{ 139 | @include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2); 140 | } 141 | 142 | &.dropdown-warning{ 143 | @include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2); 144 | } 145 | 146 | .dropdown &:not(.inner), 147 | .dropup:not(.bootstrap-select) &, 148 | &.bootstrap-datetimepicker-widget.top, 149 | &.bootstrap-datetimepicker-widget.bottom{ 150 | visibility: hidden; 151 | display: block; 152 | @include opacity(0); 153 | top: 100% !important; 154 | } 155 | 156 | .dropdown &:not(.inner), 157 | &.bootstrap-datetimepicker-widget.bottom{ 158 | @include transform-translate-y-dropdown(-20px); 159 | } 160 | 161 | .bootstrap-select.dropup &:not(.inner){ 162 | @include transform-translate-y-dropdown(25px); 163 | } 164 | 165 | .dropup:not(.bootstrap-select) &, 166 | &.bootstrap-datetimepicker-widget.top{ 167 | @include transform-translate-y-dropdown(20px); 168 | top: auto !important; 169 | bottom: 100%; 170 | } 171 | 172 | .dropdown.show &:not(.inner), 173 | &.bootstrap-datetimepicker-widget.top.open, 174 | &.bootstrap-datetimepicker-widget.bottom.open, 175 | .dropup.show:not(.bootstrap-select) &, 176 | .navbar .dropdown.show &{ 177 | @include opacity(1); 178 | visibility: visible; 179 | } 180 | 181 | .dropdown.show &:not(.inner), 182 | &.bootstrap-datetimepicker-widget.bottom.open, 183 | .navbar .dropdown.show &{ 184 | @include transform-translate-y-dropdown(1px); 185 | } 186 | 187 | .dropup.show:not(.bootstrap-select) &, 188 | &.bootstrap-datetimepicker-widget.top.open{ 189 | @include transform-translate-y-dropdown(-2px); 190 | } 191 | } 192 | 193 | .button-dropdown{ 194 | padding-right: $padding-base-horizontal; 195 | cursor: pointer; 196 | 197 | & .dropdown-toggle{ 198 | padding-top: $padding-base-vertical; 199 | padding-bottom: $padding-base-vertical; 200 | display: block; 201 | 202 | &:after{ 203 | display: none; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | .fixed-plugin{ 2 | position: fixed; 3 | right: 0; 4 | width: 64px; 5 | background: rgba(0,0,0,.3); 6 | z-index: 1031; 7 | border-radius: 8px 0 0 8px; 8 | text-align: center; 9 | top: 120px; 10 | 11 | li > a, 12 | .badge{ 13 | transition: all .34s; 14 | -webkit-transition: all .34s; 15 | -moz-transition: all .34s; 16 | } 17 | 18 | .fa-cog{ 19 | color: #FFFFFF; 20 | padding: 10px; 21 | border-radius: 0 0 6px 6px; 22 | width: auto; 23 | } 24 | 25 | .dropdown .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 | } 33 | 34 | .dropdown .dropdown-menu .now-ui-icons{ 35 | top: 5px; 36 | } 37 | 38 | .dropdown-menu:after, 39 | .dropdown-menu:before{ 40 | right: 10px; 41 | margin-left: auto; 42 | left: auto; 43 | } 44 | 45 | .fa-circle-thin{ 46 | color: #FFFFFF; 47 | } 48 | 49 | .active .fa-circle-thin{ 50 | color: #00bbff; 51 | } 52 | 53 | .dropdown-menu > .active > a, 54 | .dropdown-menu > .active > a:hover, 55 | .dropdown-menu > .active > a:focus{ 56 | color: #777777; 57 | text-align: center; 58 | } 59 | 60 | img{ 61 | border-radius: 0; 62 | width: 100%; 63 | height: 100px; 64 | margin: 0 auto; 65 | } 66 | 67 | .dropdown-menu li > a:hover, 68 | .dropdown-menu li > a:focus{ 69 | box-shadow: none; 70 | } 71 | 72 | .badge{ 73 | border: 3px solid #FFFFFF; 74 | border-radius: 50%; 75 | cursor: pointer; 76 | display: inline-block; 77 | height: 23px; 78 | margin-right: 5px; 79 | position: relative; 80 | width: 23px; 81 | } 82 | 83 | .badge.active, 84 | .badge:hover{ 85 | border-color: #00bbff; 86 | } 87 | 88 | .badge-blue{ 89 | background-color: $brand-info; 90 | } 91 | .badge-green{ 92 | background-color: $brand-success; 93 | } 94 | .badge-orange{ 95 | background-color: $brand-primary; 96 | } 97 | .badge-yellow{ 98 | background-color: $brand-warning; 99 | } 100 | .badge-red{ 101 | background-color: $brand-danger; 102 | } 103 | 104 | h5{ 105 | font-size: 14px; 106 | margin: 10px; 107 | } 108 | 109 | .dropdown-menu li{ 110 | display: block; 111 | padding: 18px 2px; 112 | width: 25%; 113 | float: left; 114 | } 115 | 116 | li.adjustments-line, 117 | li.header-title, 118 | li.button-container{ 119 | width: 100%; 120 | height: 50px; 121 | min-height: inherit; 122 | } 123 | 124 | li.button-container{ 125 | height: auto; 126 | 127 | div{ 128 | margin-bottom: 5px; 129 | } 130 | } 131 | 132 | #sharrreTitle{ 133 | text-align: center; 134 | padding: 10px 0; 135 | height: 50px; 136 | } 137 | 138 | li.header-title{ 139 | height: 30px; 140 | line-height: 25px; 141 | font-size: 12px; 142 | font-weight: 600; 143 | text-align: center; 144 | text-transform: uppercase; 145 | } 146 | 147 | .adjustments-line{ 148 | p{ 149 | float: left; 150 | display: inline-block; 151 | margin-bottom: 0; 152 | font-size: 1em; 153 | color: #3C4858; 154 | } 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-mini; 177 | color: $default-color; 178 | 179 | &.label-right{ 180 | left: 10px; 181 | } 182 | } 183 | 184 | .toggle{ 185 | margin-right: 0; 186 | } 187 | } 188 | 189 | .dropdown-menu > li.adjustments-line > a{ 190 | padding-right: 0; 191 | padding-left: 0; 192 | border-bottom: 1px solid #ddd; 193 | border-radius: 0; 194 | margin: 0; 195 | } 196 | } 197 | 198 | 199 | 200 | .dropdown-menu{ 201 | > li{ 202 | & > a.img-holder{ 203 | font-size: 16px; 204 | text-align: center; 205 | border-radius: 10px; 206 | background-color: #FFF; 207 | border: 3px solid #FFF; 208 | padding-left: 0; 209 | padding-right: 0; 210 | opacity: 1; 211 | cursor: pointer; 212 | display: block; 213 | max-height: 100px; 214 | overflow: hidden; 215 | padding: 0; 216 | 217 | img{ 218 | margin-top: auto; 219 | } 220 | } 221 | 222 | a.switch-trigger:hover, 223 | & > a.switch-trigger:focus{ 224 | background-color: transparent; 225 | } 226 | 227 | &:hover, 228 | &:focus{ 229 | > a.img-holder{ 230 | border-color: rgba(0, 187, 255, 0.53);; 231 | } 232 | } 233 | } 234 | 235 | > .active > a.img-holder, 236 | > .active > a.img-holder{ 237 | border-color: #00bbff; 238 | background-color: #FFFFFF; 239 | } 240 | 241 | } 242 | 243 | .btn-social{ 244 | width: 50%; 245 | display: block; 246 | width: 48%; 247 | float: left; 248 | font-weight: 600; 249 | } 250 | 251 | .btn-social{ 252 | i{ 253 | margin-right: 5px; 254 | } 255 | 256 | &:first-child{ 257 | margin-right: 2%; 258 | } 259 | } 260 | 261 | .dropdown{ 262 | .dropdown-menu{ 263 | -webkit-transform: translateY(-15%); 264 | -moz-transform: translateY(-15%); 265 | -o-transform: translateY(-15%); 266 | -ms-transform: translateY(-15%); 267 | transform: translateY(-15%); 268 | top: 27px; 269 | opacity: 0; 270 | 271 | transform-origin: 0 0; 272 | 273 | &:before{ 274 | border-bottom: .4em solid rgba(0, 0, 0, 0); 275 | border-left: .4em solid rgba(0,0,0,0.2); 276 | border-top: .4em solid rgba(0,0,0,0); 277 | right: -16px; 278 | top: 46px; 279 | } 280 | 281 | &:after{ 282 | border-bottom: .4em solid rgba(0, 0, 0, 0); 283 | border-left: .4em solid #FFFFFF; 284 | border-top: .4em solid rgba(0,0,0,0); 285 | right: -16px; 286 | } 287 | 288 | &:before, 289 | &:after{ 290 | content: ""; 291 | display: inline-block; 292 | position: absolute; 293 | top: 74px; 294 | width: 16px; 295 | transform: translateY(-50%); 296 | -webkit-transform: translateY(-50%); 297 | -moz-transform: translateY(-50%); 298 | } 299 | } 300 | 301 | &.show .dropdown-menu{ 302 | opacity: 1; 303 | 304 | -webkit-transform: translateY(-13%); 305 | -moz-transform: translateY(-13%); 306 | -o-transform: translateY(-13%); 307 | -ms-transform: translateY(-13%); 308 | transform: translateY(-13%); 309 | 310 | transform-origin: 0 0; 311 | } 312 | } 313 | 314 | .bootstrap-switch{ 315 | margin:0; 316 | } 317 | } 318 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: 24px 0; 3 | 4 | &.footer-default{ 5 | background-color: #f2f2f2; 6 | } 7 | 8 | nav{ 9 | display: inline-block; 10 | float: left; 11 | padding-left: 7px; 12 | } 13 | 14 | ul{ 15 | margin-bottom: 0; 16 | padding: 0; 17 | list-style: none; 18 | 19 | li{ 20 | display: inline-block; 21 | 22 | a{ 23 | color: inherit; 24 | padding: $padding-base-vertical; 25 | font-size: $font-size-small; 26 | text-transform: uppercase; 27 | text-decoration: none; 28 | 29 | &:hover{ 30 | text-decoration: none; 31 | } 32 | } 33 | } 34 | } 35 | 36 | &.fixed-bottom{ 37 | width: calc(100% - 80px); 38 | margin-left: auto; 39 | } 40 | 41 | .copyright{ 42 | font-size: $font-size-small; 43 | line-height: 1.8; 44 | } 45 | 46 | &:after{ 47 | display: table; 48 | clear: both; 49 | content: " "; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: $border-radius-small; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_misc.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | color: $black-color; 3 | font-size: $font-size-base; 4 | font-family: $sans-serif-family; 5 | -moz-osx-font-smoothing: grayscale; 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | .main{ 10 | position: relative; 11 | background: $white-color; 12 | } 13 | /* Animations */ 14 | .nav-pills .nav-link, 15 | .navbar, 16 | .nav-tabs .nav-link, 17 | .sidebar .nav a, 18 | .sidebar .nav a i, 19 | .navbar-collapse .navbar-nav .nav-link, 20 | .animation-transition-general, 21 | .tag, 22 | .tag [data-role="remove"], 23 | .animation-transition-general{ 24 | @include transition($general-transition-time, $transition-ease); 25 | } 26 | 27 | //transition for dropdown caret 28 | .dropdown-toggle:after, 29 | .bootstrap-switch-label:before, 30 | .caret{ 31 | @include transition($fast-transition-time, $transition-ease); 32 | } 33 | 34 | .dropdown-toggle[aria-expanded="true"]:after, 35 | a[data-toggle="collapse"][aria-expanded="true"] .caret, 36 | .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, 37 | .card-collapse .card a[data-toggle="collapse"].expanded i{ 38 | @include rotate-180(); 39 | } 40 | 41 | .button-bar{ 42 | display: block; 43 | position: relative; 44 | width: 22px; 45 | height: 1px; 46 | border-radius: 1px; 47 | background: $white-bg; 48 | 49 | & + .button-bar{ 50 | margin-top: 7px; 51 | } 52 | 53 | &:nth-child(2){ 54 | width: 17px; 55 | } 56 | } 57 | 58 | .caret{ 59 | display: inline-block; 60 | width: 0; 61 | height: 0; 62 | margin-left: 2px; 63 | vertical-align: middle; 64 | border-top: 4px dashed; 65 | border-top: 4px solid\9; 66 | border-right: 4px solid transparent; 67 | border-left: 4px solid transparent; 68 | } 69 | 70 | .pull-left{ 71 | float: left; 72 | } 73 | .pull-right{ 74 | float: right; 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Components 2 | @import "mixins/buttons"; 3 | @import "mixins/vendor-prefixes"; 4 | @import "mixins/inputs"; 5 | @import "mixins/page-header"; 6 | @import "mixins/dropdown"; 7 | @import "mixins/sidebar"; 8 | @import "mixins/cards"; 9 | @import "mixins/transparency"; 10 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | padding-top: $navbar-padding-base; 3 | padding-bottom: $navbar-padding-base; 4 | min-height: 53px; 5 | margin-bottom: 20px; 6 | box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); 7 | 8 | a{ 9 | vertical-align: middle; 10 | 11 | &:not(.btn):not(.dropdown-item){ 12 | color: $white-color; 13 | } 14 | 15 | &.dropdown-item{ 16 | color: $default-color; 17 | } 18 | } 19 | 20 | 21 | 22 | &.bg-white{ 23 | .input-group .form-control, 24 | .input-group.no-border .form-control{ 25 | color: $default-color; 26 | 27 | @include placeholder(){ 28 | color: $default-color; 29 | }; 30 | } 31 | .input-group-prepend .input-group-text i, 32 | .input-group-append .input-group-text i{ 33 | color: $default-color; 34 | opacity: .5; 35 | } 36 | } 37 | 38 | .form-group, 39 | .input-group{ 40 | margin: 0; 41 | margin-left: -3px; 42 | margin-right: 5px; 43 | 44 | .form-group-addon, 45 | .input-group-prepend .input-group-text, 46 | .input-group-append .input-group-text{ 47 | color: $white-color; 48 | 49 | i { 50 | opacity: 1; 51 | } 52 | } 53 | 54 | &.no-border{ 55 | .form-control{ 56 | color: $white-color; 57 | 58 | @include placeholder(){ 59 | color: $white-color; 60 | }; 61 | } 62 | } 63 | } 64 | 65 | p{ 66 | display: inline-block; 67 | margin: 0; 68 | line-height: 1.8em; 69 | font-size: 1em; 70 | font-weight: 400; 71 | } 72 | 73 | &.navbar-absolute{ 74 | position: absolute; 75 | width: 100%; 76 | padding-top: 10px; 77 | z-index: 1029; 78 | } 79 | 80 | .documentation &{ 81 | &.fixed-top{ 82 | left: 0; 83 | width: initial; 84 | } 85 | } 86 | 87 | .navbar-wrapper{ 88 | display: inline-flex; 89 | align-items: center; 90 | 91 | .navbar-minimize{ 92 | padding-right: 10px; 93 | 94 | .btn{ 95 | margin: 0; 96 | } 97 | } 98 | 99 | .navbar-toggle{ 100 | .navbar-toggler{ 101 | padding-left: 0; 102 | } 103 | 104 | &:hover{ 105 | & .navbar-toggler-bar.bar2{ 106 | width: 22px; 107 | } 108 | } 109 | } 110 | } 111 | 112 | 113 | 114 | .navbar-nav{ 115 | &.navbar-logo{ 116 | position: absolute; 117 | left: 0; 118 | right: 0; 119 | margin: 0 auto; 120 | width: 49px; 121 | top: -4px; 122 | } 123 | 124 | .nav-link.btn{ 125 | padding: $padding-btn-vertical $padding-btn-horizontal; 126 | &.btn-lg{ 127 | padding: $padding-large-vertical $padding-large-horizontal; 128 | } 129 | &.btn-sm{ 130 | padding: $padding-small-vertical $padding-small-horizontal; 131 | } 132 | } 133 | 134 | .nav-link{ 135 | text-transform: uppercase; 136 | font-size: $font-size-mini; 137 | padding: $padding-base-vertical $padding-base-horizontal; 138 | line-height: $line-height-nav-link; 139 | margin-right: 3px; 140 | 141 | i.fa + p, 142 | i.now-ui-icons + p{ 143 | margin-left: 3px; 144 | } 145 | 146 | i.fa, 147 | i.now-ui-icons{ 148 | font-size: 18px; 149 | position: relative; 150 | top: 3px; 151 | text-align: center; 152 | width: 21px; 153 | } 154 | 155 | i.now-ui-icons{ 156 | top: 4px; 157 | font-size: 16px; 158 | } 159 | 160 | &.profile-photo{ 161 | .profile-photo-small{ 162 | width: 27px; 163 | height: 27px; 164 | } 165 | } 166 | 167 | &.disabled{ 168 | opacity: .5; 169 | color: $white-color; 170 | } 171 | } 172 | 173 | .nav-item.active .nav-link:not(.btn), 174 | .nav-item .nav-link:not(.btn):focus, 175 | .nav-item .nav-link:not(.btn):hover, 176 | .nav-item .nav-link:not(.btn):active{ 177 | background-color: $opacity-2; 178 | border-radius: $border-radius-small; 179 | color: $white-color; 180 | } 181 | } 182 | 183 | .logo-container{ 184 | width: 27px; 185 | height: 27px; 186 | overflow: hidden; 187 | margin: 0 auto; 188 | border-radius: 50%; 189 | border: 1px solid transparent; 190 | } 191 | 192 | .navbar-brand{ 193 | text-transform: uppercase; 194 | font-size: $font-size-small; 195 | padding-top: $padding-base-vertical; 196 | padding-bottom: $padding-base-vertical; 197 | line-height: $line-height-nav-link; 198 | } 199 | 200 | .navbar-toggler{ 201 | width: 37px; 202 | height: 27px; 203 | vertical-align: middle; 204 | outline: 0; 205 | cursor: pointer; 206 | 207 | & .navbar-toggler-bar.navbar-kebab{ 208 | width: 3px; 209 | height: 3px; 210 | border-radius: 50%; 211 | margin: 0 auto; 212 | } 213 | } 214 | 215 | .button-dropdown{ 216 | .navbar-toggler-bar:nth-child(2){ 217 | width: 17px; 218 | } 219 | } 220 | 221 | &.navbar-transparent{ 222 | background-color: $transparent-bg !important; 223 | box-shadow: none; 224 | color: $white-color; 225 | } 226 | 227 | &.bg-white:not(.navbar-transparent){ 228 | a:not(.dropdown-item):not(.btn){ 229 | color: $default-color; 230 | 231 | &.disabled{ 232 | opacity: .5; 233 | color: $default-color; 234 | } 235 | } 236 | 237 | .button-bar{ 238 | background: $default-color; 239 | } 240 | 241 | .nav-item.active .nav-link:not(.btn), 242 | .nav-item .nav-link:not(.btn):focus, 243 | .nav-item .nav-link:not(.btn):hover, 244 | .nav-item .nav-link:not(.btn):active{ 245 | background-color: $opacity-gray-8; 246 | color: $default-color; 247 | } 248 | 249 | .logo-container{ 250 | border: 1px solid $default-color; 251 | } 252 | } 253 | } 254 | 255 | .bg-default{ 256 | background-color: $default-color !important; 257 | } 258 | 259 | .bg-primary{ 260 | background-color: $primary-color !important; 261 | } 262 | 263 | .bg-info{ 264 | background-color: $info-color !important; 265 | } 266 | 267 | .bg-success{ 268 | background-color: $success-color !important; 269 | } 270 | 271 | .bg-danger{ 272 | background-color: $danger-color !important; 273 | } 274 | 275 | .bg-warning{ 276 | background-color: $warning-color !important; 277 | } 278 | 279 | .bg-white{ 280 | background-color: $white-color !important; 281 | } 282 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_page-header.scss: -------------------------------------------------------------------------------- 1 | .page-header{ 2 | min-height: 100vh; 3 | max-height: 999px; 4 | padding: 0; 5 | color: $white-color; 6 | position: relative; 7 | 8 | .page-header-image{ 9 | position: absolute; 10 | background-size: cover; 11 | background-position: center center; 12 | width: 100%; 13 | height: 100%; 14 | z-index: -1; 15 | } 16 | 17 | .content-center{ 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | z-index: 2; 22 | -ms-transform: translate(-50%, -50%); 23 | -webkit-transform: translate(-50%, -50%); 24 | transform: translate(-50%, -50%); 25 | text-align: center; 26 | color: #FFFFFF; 27 | padding: 0 15px; 28 | width: 100%; 29 | max-width: 880px; 30 | 31 | } 32 | 33 | footer{ 34 | position: absolute; 35 | bottom: 0; 36 | width: 100%; 37 | } 38 | 39 | .container{ 40 | height: 100%; 41 | z-index: 1; 42 | } 43 | 44 | .category, 45 | .description{ 46 | color: $opacity-8; 47 | } 48 | 49 | &.page-header-small{ 50 | min-height: 60vh; 51 | max-height: 440px; 52 | } 53 | 54 | &.page-header-mini{ 55 | min-height: 40vh; 56 | max-height: 340px; 57 | } 58 | 59 | .title{ 60 | margin-bottom: 15px; 61 | } 62 | .title + h4{ 63 | margin-top: 10px; 64 | } 65 | 66 | &:after, 67 | &:before{ 68 | position: absolute; 69 | z-index: 0; 70 | width: 100%; 71 | height: 100%; 72 | display: block; 73 | left: 0; 74 | top: 0; 75 | content: ""; 76 | } 77 | 78 | &:before{ 79 | background-color: rgba(0,0,0,.3); 80 | } 81 | 82 | &[filter-color="orange"]{ 83 | @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6)); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 991px){ 2 | .profile-photo .profile-photo-small{ 3 | margin-left: -2px; 4 | } 5 | 6 | .button-dropdown{ 7 | display: none; 8 | } 9 | 10 | [data-notify="container"].alert{ 11 | min-width: 400px; 12 | } 13 | 14 | #minimizeSidebar{ 15 | display: none; 16 | } 17 | 18 | .timeline>li>.timeline-panel { 19 | width: 86% !important; 20 | float: right !important; 21 | } 22 | 23 | 24 | 25 | .timeline:before, 26 | .timeline>li>.timeline-badge { 27 | left: 5% !important; 28 | } 29 | 30 | .timeline>li>.timeline-panel:before { 31 | border-left-width: 0; 32 | border-right-width: 15px; 33 | left: -15px; 34 | right: auto !important; 35 | } 36 | 37 | .timeline>li>.timeline-panel:after { 38 | border-left-width: 0; 39 | border-right-width: 14px; 40 | left: -14px; 41 | right: auto !important; 42 | } 43 | 44 | .timeline>li:not(.timeline-inverted)>.timeline-panel:after, 45 | .timeline>li:not(.timeline-inverted)>.timeline-panel:before { 46 | @include rotate-180(); 47 | } 48 | 49 | 50 | 51 | .navbar{ 52 | .container-fluid{ 53 | padding-right: 15px; 54 | padding-left: 15px; 55 | } 56 | 57 | .navbar-collapse{ 58 | .input-group{ 59 | margin: 0; 60 | margin-top: 5px; 61 | } 62 | } 63 | 64 | .navbar-nav{ 65 | .nav-item:first-child{ 66 | margin-top: 10px; 67 | } 68 | .nav-item:not(:last-child){ 69 | margin-bottom: 10px; 70 | } 71 | } 72 | 73 | .dropdown.show .dropdown-menu{ 74 | display: block; 75 | } 76 | 77 | .dropdown .dropdown-menu{ 78 | display: none; 79 | } 80 | 81 | .dropdown.show .dropdown-menu, 82 | .dropdown .dropdown-menu{ 83 | background-color: transparent; 84 | border: 0; 85 | transition: none; 86 | -webkit-box-shadow: none; 87 | box-shadow: none; 88 | width: auto; 89 | margin: 0px 1rem; 90 | margin-top: 0px; 91 | 92 | &:before{ 93 | display: none; 94 | } 95 | } 96 | 97 | .dropdown-menu .dropdown-item:focus, 98 | .dropdown-menu .dropdown-item:hover{ 99 | color: $white-color; 100 | } 101 | 102 | &.bg-white .dropdown-menu .dropdown-item:focus, 103 | &.bg-white .dropdown-menu .dropdown-item:hover{ 104 | color: $default-color; 105 | } 106 | 107 | &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{ 108 | background-color: $default-color; 109 | } 110 | } 111 | 112 | .wrapper{ 113 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 114 | } 115 | 116 | .sidebar{ 117 | box-shadow: none; 118 | } 119 | 120 | #bodyClick{ 121 | height: 100%; 122 | width: 100%; 123 | position: fixed; 124 | opacity: 1; 125 | top: 0; 126 | right: 0; 127 | left: 260px; 128 | content: ""; 129 | z-index: 9999; 130 | overflow-x: hidden; 131 | background-color: transparent; 132 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 133 | } 134 | 135 | .footer{ 136 | .copyright{ 137 | text-align: right; 138 | } 139 | } 140 | 141 | .section-nucleo-icons .icons-container{ 142 | margin-top: 65px; 143 | } 144 | 145 | .navbar-nav{ 146 | .nav-link{ 147 | i.fa, 148 | i.now-ui-icons{ 149 | opacity: .5; 150 | } 151 | } 152 | } 153 | 154 | 155 | @include sidebar(); 156 | } 157 | 158 | @media screen and (min-width: 992px){ 159 | .navbar-collapse{ 160 | background: none !important; 161 | } 162 | 163 | .navbar .navbar-toggle{ 164 | display: none; 165 | } 166 | 167 | // .navbar.fixed-top{ 168 | // width: $sidebar-width; 169 | // right: 0; 170 | // left: auto; 171 | // } 172 | 173 | .navbar-nav{ 174 | .nav-link{ 175 | &.profile-photo{ 176 | padding: 0; 177 | margin: 7px $padding-base-horizontal; 178 | } 179 | } 180 | } 181 | 182 | .section-nucleo-icons .icons-container{ 183 | margin: 0 0 0 auto; 184 | } 185 | 186 | .dropdown-menu .dropdown-item{ 187 | color: inherit; 188 | } 189 | 190 | .footer{ 191 | .copyright{ 192 | float: right; 193 | padding-right: 15px; 194 | } 195 | } 196 | } 197 | 198 | @media screen and (max-width: 768px){ 199 | .nav-tabs{ 200 | display: inline-block; 201 | width: 100%; 202 | padding-left: 100px; 203 | padding-right: 100px; 204 | text-align: center; 205 | 206 | .nav-item > .nav-link{ 207 | margin-bottom: 5px; 208 | } 209 | } 210 | 211 | .user-profile [class*="col-"] { 212 | padding-left: 15px !important; 213 | padding-right: 15px !important; 214 | } 215 | 216 | .card-stats [class*="col-"] .statistics::after { 217 | display: none; 218 | } 219 | 220 | .main-panel .content { 221 | padding-left: 15px; 222 | padding-right: 15px; 223 | } 224 | 225 | .footer{ 226 | nav{ 227 | display: block; 228 | margin-bottom: 5px; 229 | float: none; 230 | } 231 | } 232 | 233 | .landing-page .section-story-overview .image-container:nth-child(2){ 234 | margin-left: 0; 235 | margin-bottom: 30px; 236 | } 237 | } 238 | 239 | @media screen and (max-width: 576px){ 240 | .navbar[class*='navbar-toggleable-'] .container{ 241 | margin-left: 0; 242 | margin-right: 0; 243 | } 244 | 245 | [data-notify="container"].alert{ 246 | left: 10px !important; 247 | right: 10px !important; 248 | width: auto; 249 | } 250 | 251 | .card-contributions .card-stats{ 252 | flex-direction: column; 253 | 254 | .bootstrap-switch{ 255 | margin-bottom: 15px; 256 | } 257 | } 258 | 259 | .footer{ 260 | .copyright{ 261 | text-align: center; 262 | } 263 | } 264 | 265 | .section-nucleo-icons{ 266 | .icons-container{ 267 | i{ 268 | font-size: 30px; 269 | 270 | &:nth-child(6){ 271 | font-size: 48px; 272 | } 273 | } 274 | } 275 | } 276 | 277 | .page-header{ 278 | .container h6.category-absolute{ 279 | width: 90%; 280 | } 281 | } 282 | } 283 | 284 | @media only screen 285 | and (min-device-width : 768px) 286 | and (max-device-width : 1024px) 287 | and (orientation : landscape) { 288 | @include sidebar(); 289 | 290 | .navbar-minimize{ 291 | display: none; 292 | } 293 | 294 | .sidebar{ 295 | box-shadow: none; 296 | 297 | .nav-open &{ 298 | box-shadow: $sidebar-box-shadow; 299 | } 300 | } 301 | 302 | .sidebar, 303 | .main-panel, 304 | .sidebar-wrapper{ 305 | -webkit-transition-property: all; 306 | transition-property: all; 307 | -webkit-transition-duration: 0.5s; 308 | transition-duration: 0.5s; 309 | -webkit-transition-timing-function: cubic-bezier(0.685, 0.0473, 0.346, 1); 310 | transition-timing-function: cubic-bezier(0.685, 0.0473, 0.346, 1); 311 | -webkit-overflow-scrolling: touch; 312 | } 313 | 314 | } 315 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_sidebar-and-main-panel.scss: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | position: relative; 3 | top: 0; 4 | height: 100vh; 5 | 6 | &.wrapper-full-page{ 7 | min-height: 100vh; 8 | height: auto; 9 | } 10 | } 11 | 12 | .sidebar, 13 | .off-canvas-sidebar{ 14 | position: fixed; 15 | top: 0; 16 | height: 100%; 17 | bottom: 0; 18 | width: 260px; 19 | left: 0; 20 | z-index: 1030; 21 | 22 | .sidebar-wrapper{ 23 | position: relative; 24 | height: calc(100vh - 75px); 25 | overflow: auto; 26 | width: 260px; 27 | z-index: 4; 28 | padding-bottom: 100px; 29 | 30 | .dropdown .dropdown-backdrop{ 31 | display: none !important; 32 | } 33 | 34 | .navbar-form{ 35 | border: none; 36 | } 37 | } 38 | 39 | .navbar-minimize{ 40 | position: absolute; 41 | right: 20px; 42 | top: 2px; 43 | opacity: 1; 44 | 45 | @extend .animation-transition-general; 46 | } 47 | .logo-tim{ 48 | border-radius: 50%; 49 | border: 1px solid #333; 50 | display: block; 51 | height: 61px; 52 | width: 61px; 53 | float: left; 54 | overflow: hidden; 55 | 56 | img{ 57 | width: 60px; 58 | height: 60px; 59 | } 60 | } 61 | 62 | .nav{ 63 | margin-top: 20px; 64 | display: block; 65 | 66 | .caret{ 67 | top: 14px; 68 | position: absolute; 69 | right: 10px; 70 | } 71 | 72 | li{ 73 | > a + div .nav li > a{ 74 | margin-top: 7px; 75 | } 76 | 77 | > a{ 78 | margin: 10px 15px 0; 79 | border-radius: $btn-round-radius; 80 | color: $white-color; 81 | display: block; 82 | text-decoration: none; 83 | position: relative; 84 | text-transform: uppercase; 85 | cursor: pointer; 86 | font-size: $font-size-mini; 87 | padding: 10px 8px; 88 | line-height: $line-height-nav-link; 89 | } 90 | 91 | &:first-child > a{ 92 | margin: 0 15px; 93 | } 94 | 95 | &:hover:not(.active) > a, 96 | &:focus:not(.active) > a{ 97 | background-color: $opacity-1; 98 | 99 | i{ 100 | color: $white-color; 101 | } 102 | } 103 | 104 | &.active > a{ 105 | background-color: $white-color; 106 | box-shadow: $box-shadow; 107 | } 108 | } 109 | 110 | p{ 111 | margin: 0; 112 | line-height: 30px; 113 | position: relative; 114 | display: block; 115 | height: auto; 116 | white-space: nowrap; 117 | @extend .animation-transition-general; 118 | } 119 | 120 | i{ 121 | font-size: 20px; 122 | float: left; 123 | margin-right: 12px; 124 | line-height: 30px; 125 | width: 34px; 126 | text-align: center; 127 | color: $opacity-5; 128 | position: relative; 129 | } 130 | } 131 | 132 | .sidebar-background{ 133 | position: absolute; 134 | z-index: 1; 135 | height: 100%; 136 | width: 100%; 137 | display: block; 138 | top: 0; 139 | left: 0; 140 | background-size: cover; 141 | background-position: center center; 142 | 143 | &:after{ 144 | position: absolute; 145 | z-index: 3; 146 | width: 100%; 147 | height: 100%; 148 | content: ""; 149 | display: block; 150 | background: #FFFFFF; 151 | opacity: 1; 152 | } 153 | } 154 | 155 | .logo{ 156 | position: relative; 157 | padding: $padding-base-vertical $padding-base-horizontal; 158 | z-index: 4; 159 | 160 | a.logo-mini, 161 | a.logo-normal{ 162 | @extend .animation-transition-general; 163 | } 164 | 165 | a.logo-mini{ 166 | opacity: 1; 167 | float: left; 168 | width: 34px; 169 | text-align: center; 170 | margin-left: 10px; 171 | margin-right: 12px; 172 | } 173 | 174 | a.logo-normal{ 175 | display: block; 176 | opacity: 1; 177 | @include transform-translate-x(0px); 178 | } 179 | 180 | &:after{ 181 | content: ''; 182 | position: absolute; 183 | bottom: 0; 184 | right: 15px; 185 | height: 1px; 186 | width: calc(100% - 30px); 187 | background-color: $opacity-5; 188 | 189 | } 190 | 191 | p{ 192 | float: left; 193 | font-size: 20px; 194 | margin: 10px 10px; 195 | color: $white-color; 196 | line-height: 20px; 197 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 198 | } 199 | 200 | .simple-text{ 201 | text-transform: uppercase; 202 | padding: $padding-base-vertical 0; 203 | display: block; 204 | white-space: nowrap; 205 | font-size: $font-size-large; 206 | color: $white-color; 207 | text-decoration: none; 208 | font-weight: $font-weight-normal; 209 | line-height: 30px; 210 | overflow: hidden; 211 | } 212 | } 213 | 214 | .logo-tim{ 215 | border-radius: 50%; 216 | border: 1px solid #333; 217 | display: block; 218 | height: 61px; 219 | width: 61px; 220 | float: left; 221 | overflow: hidden; 222 | 223 | img{ 224 | width: 60px; 225 | height: 60px; 226 | } 227 | } 228 | 229 | &:before, 230 | &:after{ 231 | display: block; 232 | content: ""; 233 | opacity: 1; 234 | position: absolute; 235 | width: 100%; 236 | height: 100%; 237 | top: 0; 238 | left: 0; 239 | } 240 | 241 | &:after{ 242 | @include icon-gradient($default-color); 243 | z-index: 3; 244 | } 245 | 246 | &[data-color="blue"]{ 247 | @include sidebar-color($info-color); 248 | } 249 | &[data-color="green"]{ 250 | @include sidebar-color($success-color); 251 | } 252 | &[data-color="orange"]{ 253 | @include sidebar-color($orange-color); 254 | } 255 | &[data-color="red"]{ 256 | @include sidebar-color($danger-color); 257 | } 258 | &[data-color="yellow"]{ 259 | @include sidebar-color($warning-color); 260 | } 261 | } 262 | 263 | .visible-on-sidebar-regular{ 264 | display: inline-block !important; 265 | } 266 | .visible-on-sidebar-mini{ 267 | display: none !important; 268 | } 269 | 270 | .off-canvas-sidebar{ 271 | .nav { 272 | > li > a, 273 | > li > a:hover{ 274 | color: $white-color; 275 | } 276 | 277 | > li > a:focus{ 278 | background: rgba(200, 200, 200, 0.2); 279 | } 280 | } 281 | } 282 | 283 | 284 | .main-panel{ 285 | position: relative; 286 | float: right; 287 | width: $sidebar-width; 288 | // width: 100%; 289 | background-color: $light-gray; 290 | background-color: #ebecf1; 291 | 292 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 293 | 294 | > .content{ 295 | padding: 0 30px 30px; 296 | min-height: calc(100vh - 123px); 297 | margin-top: -30px; 298 | } 299 | 300 | > .navbar{ 301 | margin-bottom: 0; 302 | } 303 | 304 | 305 | .header{ 306 | margin-bottom: 50px; 307 | } 308 | } 309 | 310 | 311 | .perfect-scrollbar-on{ 312 | .sidebar, 313 | .main-panel{ 314 | height: 100%; 315 | max-height: 100%; 316 | } 317 | } 318 | 319 | 320 | @media (min-width: 991px) { 321 | .sidebar{ 322 | display: block; 323 | box-shadow: $sidebar-box-shadow; 324 | } 325 | } 326 | 327 | .panel-header { 328 | height: 260px; 329 | padding-top: 80px; 330 | padding-bottom: 45px; 331 | background: #141E30; /* fallback for old browsers */ 332 | background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788)); 333 | background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%); 334 | position: relative; 335 | overflow: hidden; 336 | 337 | .header{ 338 | .title{ 339 | color: $white-color; 340 | } 341 | .category{ 342 | max-width: 600px; 343 | color: $opacity-5; 344 | margin: 0 auto; 345 | font-size: 13px; 346 | 347 | a{ 348 | color: $white-color; 349 | } 350 | } 351 | } 352 | } 353 | 354 | .panel-header-sm{ 355 | height: 135px; 356 | } 357 | 358 | .panel-header-lg{ 359 | height: 380px 360 | } 361 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .img-wrapper{ 4 | width: 40px; 5 | height: 40px; 6 | border-radius: 50%; 7 | overflow: hidden; 8 | margin: 0 auto; 9 | } 10 | 11 | .img-row{ 12 | max-width: 60px; 13 | width: 60px; 14 | } 15 | 16 | .form-check{ 17 | margin: 0; 18 | 19 | & label .form-check-sign::before, 20 | & label .form-check-sign::after{ 21 | top: -17px; 22 | left: 4px; 23 | } 24 | } 25 | 26 | .btn{ 27 | margin: 0; 28 | } 29 | 30 | small,.small{ 31 | font-weight: 300; 32 | } 33 | 34 | .card-tasks .card-body &{ 35 | margin-bottom: 0; 36 | 37 | > thead > tr > th, 38 | > tbody > tr > th, 39 | > tfoot > tr > th, 40 | > thead > tr > td, 41 | > tbody > tr > td, 42 | > tfoot > tr > td{ 43 | padding-top: 0; 44 | padding-bottom: 0; 45 | } 46 | } 47 | 48 | > thead > tr > th{ 49 | border-bottom-width: 1px; 50 | font-size: 1.45em; 51 | font-weight: $font-weight-light; 52 | border: 0; 53 | } 54 | 55 | .radio, 56 | .checkbox{ 57 | margin-top: 0; 58 | margin-bottom: 0; 59 | padding: 0; 60 | width: 15px; 61 | 62 | .icons{ 63 | position: relative; 64 | } 65 | 66 | label{ 67 | &:after, 68 | &:before{ 69 | top: -17px; 70 | left: -3px; 71 | } 72 | } 73 | } 74 | > thead > tr > th, 75 | > tbody > tr > th, 76 | > tfoot > tr > th, 77 | > thead > tr > td, 78 | > tbody > tr > td, 79 | > tfoot > tr > td{ 80 | padding: 12px 7px; 81 | vertical-align: middle; 82 | } 83 | 84 | .th-description{ 85 | max-width: 150px; 86 | } 87 | .td-price{ 88 | font-size: 26px; 89 | font-weight: $font-weight-light; 90 | margin-top: 5px; 91 | position: relative; 92 | top: 4px; 93 | text-align: right; 94 | } 95 | .td-total{ 96 | font-weight: $font-weight-bold; 97 | font-size: $font-size-h5; 98 | padding-top: 20px; 99 | text-align: right; 100 | } 101 | 102 | .td-actions .btn{ 103 | margin: 0px; 104 | } 105 | 106 | > tbody > tr{ 107 | position: relative; 108 | } 109 | } 110 | 111 | .table-shopping{ 112 | > thead > tr > th{ 113 | font-size: $font-size-h6; 114 | text-transform: uppercase; 115 | } 116 | > tbody > tr > td{ 117 | font-size: $font-paragraph; 118 | 119 | b{ 120 | display: block; 121 | margin-bottom: 5px; 122 | } 123 | } 124 | .td-name{ 125 | font-weight: $font-weight-normal; 126 | font-size: 1.5em; 127 | small{ 128 | color: $dark-gray; 129 | font-size: 0.75em; 130 | font-weight: $font-weight-light; 131 | } 132 | } 133 | .td-number{ 134 | font-weight: $font-weight-light; 135 | font-size: $font-size-h4; 136 | } 137 | .td-name{ 138 | min-width: 200px; 139 | } 140 | .td-number{ 141 | text-align: right; 142 | min-width: 170px; 143 | 144 | small{ 145 | margin-right: 3px; 146 | } 147 | } 148 | 149 | .img-container{ 150 | width: 120px; 151 | max-height: 160px; 152 | overflow: hidden; 153 | display: block; 154 | 155 | img{ 156 | width: 100%; 157 | } 158 | } 159 | } 160 | 161 | .table-responsive{ 162 | overflow: auto; 163 | padding-bottom: 10px; 164 | } 165 | 166 | #tables .table-responsive{ 167 | margin-bottom: 30px; 168 | } 169 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/_typography.scss: -------------------------------------------------------------------------------- 1 | button, 2 | input, 3 | optgroup, 4 | select, 5 | textarea{ 6 | font-family: $sans-serif-family; 7 | } 8 | h1,h2,h3,h4,h5,h6{ 9 | font-weight: $font-weight-normal; 10 | } 11 | 12 | a{ 13 | color: $primary-color; 14 | &:hover, 15 | &:focus{ 16 | color: $primary-color; 17 | } 18 | } 19 | h1, .h1 { 20 | font-size: $font-size-h1; 21 | line-height: 1.15; 22 | margin-bottom: $margin-base-vertical * 2; 23 | 24 | small{ 25 | font-weight: $font-weight-bold; 26 | text-transform: uppercase; 27 | opacity: .8; 28 | } 29 | } 30 | h2, .h2{ 31 | font-size: $font-size-h2; 32 | margin-bottom: $margin-base-vertical * 2; 33 | } 34 | h3, .h3{ 35 | font-size: $font-size-h3; 36 | margin-bottom: $margin-base-vertical * 2; 37 | line-height: 1.4em; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 1.45em; 42 | margin-top: $margin-base-vertical * 2; 43 | margin-bottom: $margin-base-vertical; 44 | 45 | & + .category, 46 | &.title + .category{ 47 | margin-top: -10px; 48 | } 49 | } 50 | h5, .h5 { 51 | font-size: $font-size-h5; 52 | line-height: 1.4em; 53 | margin-bottom: 15px; 54 | } 55 | h6, .h6{ 56 | font-size: $font-size-h6; 57 | font-weight: $font-weight-bold; 58 | text-transform: uppercase; 59 | } 60 | p{ 61 | &.description{ 62 | font-size: 1.14em; 63 | } 64 | } 65 | 66 | // i.fa{ 67 | // font-size: 18px; 68 | // position: relative; 69 | // top: 1px; 70 | // } 71 | 72 | .title{ 73 | font-weight: $font-weight-bold; 74 | 75 | &.title-up{ 76 | text-transform: uppercase; 77 | 78 | a{ 79 | color: $black-color; 80 | text-decoration: none; 81 | } 82 | } 83 | & + .category{ 84 | margin-top: -10px; 85 | } 86 | } 87 | 88 | .description, 89 | .card-description, 90 | .footer-big p, 91 | .card .footer .stats{ 92 | color: $dark-gray; 93 | font-weight: $font-weight-light; 94 | } 95 | .category, 96 | .card-category{ 97 | text-transform: capitalize; 98 | font-weight: $font-weight-normal; 99 | color: $dark-gray; 100 | font-size: $font-size-mini; 101 | } 102 | 103 | .card-category{ 104 | font-size: $font-size-h6; 105 | } 106 | 107 | .text-primary, 108 | a.text-primary:focus, a.text-primary:hover { 109 | color: $brand-primary !important; 110 | } 111 | .text-info, 112 | a.text-info:focus, a.text-info:hover { 113 | color: $brand-info !important; 114 | } 115 | .text-success, 116 | a.text-success:focus, a.text-success:hover { 117 | color: $brand-success !important; 118 | } 119 | .text-warning, 120 | a.text-warning:focus, a.text-warning:hover { 121 | color: $brand-warning !important; 122 | } 123 | .text-danger, 124 | a.text-danger:focus, a.text-danger:hover { 125 | color: $brand-danger !important; 126 | } 127 | 128 | .text-gray, 129 | a.text-gray:focus, a.text-gray:hover{ 130 | color: $light-gray !important; 131 | } 132 | 133 | 134 | .blockquote{ 135 | border-left: none; 136 | border: 1px solid $default-color; 137 | padding: 20px; 138 | font-size: $font-size-blockquote; 139 | line-height: 1.8; 140 | 141 | small{ 142 | color: $default-color; 143 | font-size: $font-size-small; 144 | text-transform: uppercase; 145 | } 146 | 147 | &.blockquote-primary{ 148 | border-color: $primary-color; 149 | color: $primary-color; 150 | 151 | small{ 152 | color: $primary-color; 153 | } 154 | } 155 | 156 | &.blockquote-danger{ 157 | border-color: $danger-color; 158 | color: $danger-color; 159 | 160 | small{ 161 | color: $danger-color; 162 | } 163 | } 164 | 165 | &.blockquote-white{ 166 | border-color: $opacity-8; 167 | color: $white-color; 168 | 169 | small{ 170 | color: $opacity-8; 171 | } 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/cards/_card-chart.scss: -------------------------------------------------------------------------------- 1 | .card-chart { 2 | .card-header{ 3 | .card-title{ 4 | margin-top: 10px; 5 | margin-bottom: 0; 6 | } 7 | .card-category{ 8 | margin-bottom: 5px; 9 | } 10 | } 11 | 12 | .table{ 13 | margin-bottom: 0; 14 | 15 | td{ 16 | border-top: none; 17 | border-bottom: 1px solid #e9ecef; 18 | } 19 | } 20 | 21 | .card-progress { 22 | margin-top: 30px; 23 | } 24 | 25 | .chart-area { 26 | height: 190px; 27 | width: calc(100% + 30px); 28 | margin-left: -15px; 29 | margin-right: -15px; 30 | } 31 | .card-footer { 32 | margin-top: 15px; 33 | 34 | .stats{ 35 | color: $dark-gray; 36 | } 37 | } 38 | 39 | .dropdown{ 40 | position: absolute; 41 | right: 20px; 42 | top: 20px; 43 | 44 | .btn{ 45 | margin: 0; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/cards/_card-map.scss: -------------------------------------------------------------------------------- 1 | .map{ 2 | height: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | 2 | .card-plain{ 3 | background: transparent; 4 | box-shadow: none; 5 | 6 | .card-header, 7 | .card-footer{ 8 | margin-left: 0; 9 | margin-right: 0; 10 | background-color: transparent; 11 | } 12 | 13 | &:not(.card-subcategories).card-body{ 14 | padding-left: 0; 15 | padding-right: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/cards/_card-user.scss: -------------------------------------------------------------------------------- 1 | .card-user{ 2 | .image{ 3 | height: 120px; 4 | } 5 | 6 | .author{ 7 | text-align: center; 8 | text-transform: none; 9 | margin-top: -77px; 10 | 11 | a + p.description{ 12 | margin-top: -7px; 13 | } 14 | } 15 | 16 | .avatar{ 17 | width: 124px; 18 | height: 124px; 19 | border: 1px solid $white-color; 20 | position: relative; 21 | } 22 | 23 | .card-body{ 24 | min-height: 240px; 25 | } 26 | 27 | hr{ 28 | margin: 5px 15px; 29 | } 30 | 31 | .button-container{ 32 | margin-bottom: 6px; 33 | text-align: center; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | background-color: $btn-color; 4 | 5 | &:hover, 6 | &:focus, 7 | &:not(:disabled):not(.disabled):active, 8 | &:not(:disabled):not(.disabled).active, 9 | &:not(:disabled):not(.disabled):active:focus, 10 | &:not(:disabled):not(.disabled).active:focus, 11 | &:active:hover, 12 | &.active:hover, 13 | .show > &.dropdown-toggle, 14 | .show > &.dropdown-toggle:focus, 15 | .show > &.dropdown-toggle:hover { 16 | background-color: $btn-states-color; 17 | color: $white-color; 18 | box-shadow: none; 19 | border-color: $btn-states-color; 20 | } 21 | 22 | &:not([data-action]):not([class*="btn-outline-"]):hover{ 23 | box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.17); 24 | } 25 | 26 | &.disabled, 27 | &:disabled, 28 | &[disabled], 29 | fieldset[disabled] & { 30 | &, 31 | &:hover, 32 | &:focus, 33 | &.focus, 34 | &:active, 35 | &.active { 36 | background-color: $btn-color; 37 | border-color: $btn-color; 38 | } 39 | } 40 | 41 | // btn-neutral style 42 | @if $btn-color == $white-color{ 43 | color: $primary-color; 44 | 45 | &.btn-danger{ 46 | color: $danger-color; 47 | 48 | &:hover, 49 | &:focus, 50 | &:active, 51 | &:active:focus{ 52 | color: $danger-states-color !important; 53 | } 54 | } 55 | 56 | &.btn-info{ 57 | color: $info-color; 58 | 59 | &:hover, 60 | &:focus, 61 | &:active, 62 | &:active:focus{ 63 | color: $info-states-color !important; 64 | } 65 | } 66 | 67 | &.btn-warning{ 68 | color: $warning-color; 69 | 70 | &:hover, 71 | &:focus, 72 | &:active, 73 | &:active:focus{ 74 | color: $warning-states-color !important; 75 | } 76 | } 77 | 78 | &.btn-success{ 79 | color: $success-color; 80 | 81 | &:hover, 82 | &:focus, 83 | &:active, 84 | &:active:focus{ 85 | color: $success-states-color !important; 86 | } 87 | } 88 | 89 | &.btn-default{ 90 | color: $default-color; 91 | 92 | &:hover, 93 | &:focus, 94 | &:active, 95 | &:active:focus{ 96 | color: $default-states-color !important; 97 | } 98 | } 99 | 100 | &.active, 101 | &:active, 102 | &:active:focus, 103 | &:active:hover, 104 | &.active:focus, 105 | &.active:hover, 106 | .show > &.dropdown-toggle, 107 | .show > &.dropdown-toggle:focus, 108 | .show > &.dropdown-toggle:hover { 109 | background-color: $white-color; 110 | color: $primary-states-color !important; 111 | box-shadow: none; 112 | } 113 | 114 | &:hover, 115 | &:focus{ 116 | color: $primary-states-color; 117 | 118 | &:not(.nav-link){ 119 | box-shadow: none !important; 120 | } 121 | 122 | } 123 | 124 | } @else { 125 | color: $white-color; 126 | } 127 | 128 | &.btn-link{ 129 | color: $btn-color; 130 | 131 | &:hover, 132 | &:focus, 133 | &:active{ 134 | background-color: $transparent-bg; 135 | color: $btn-states-color; 136 | text-decoration: none; 137 | box-shadow: none; 138 | } 139 | } 140 | } 141 | 142 | @mixin outline-buttons($btn-color, $btn-states-color) { 143 | color: $btn-color; 144 | border-color: $btn-color; 145 | 146 | &:hover, 147 | &:focus, 148 | &:not(:disabled):not(.disabled):active, 149 | &:not(:disabled):not(.disabled).active, 150 | &:not(:disabled):not(.disabled):active:focus, 151 | &:not(:disabled):not(.disabled).active:focus, 152 | &:active:hover, 153 | &.active:hover, 154 | .show > &.dropdown-toggle, 155 | .show > &.dropdown-toggle:focus, 156 | .show > &.dropdown-toggle:hover { 157 | background-color: $transparent-bg; 158 | color: $btn-states-color; 159 | border-color: $btn-states-color; 160 | box-shadow: none; 161 | } 162 | } 163 | 164 | 165 | 166 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 167 | font-size: $font-size; 168 | border-radius: $border; 169 | padding: $padding-vertical $padding-horizontal; 170 | 171 | &[class*="btn-outline-"]{ 172 | padding: $padding-vertical - 1 $padding-horizontal - 1; 173 | } 174 | 175 | } 176 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-color($color) { 2 | box-shadow: 0px 9px 30px -6px $color; 3 | color: $color; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { 2 | background-color: $brand-color; 3 | 4 | &:before{ 5 | color: $brand-color; 6 | } 7 | 8 | .dropdown-header:not([href]):not([tabindex]){ 9 | color: $dropdown-header-color; 10 | } 11 | 12 | .dropdown-item{ 13 | color: $dropdown-color; 14 | 15 | &:hover, 16 | &:focus{ 17 | background-color: $background-color; 18 | } 19 | } 20 | 21 | .dropdown-divider{ 22 | background-color: $background-color; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal){ 2 | padding: $padding-vertical $padding-horizontal; 3 | } 4 | 5 | @mixin form-control-placeholder($color, $opacity){ 6 | .form-control::-moz-placeholder{ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | .form-control:-moz-placeholder{ 11 | color: $color; 12 | @include opacity(1); 13 | } 14 | .form-control::-webkit-input-placeholder{ 15 | color: $color; 16 | @include opacity(1); 17 | } 18 | .form-control:-ms-input-placeholder{ 19 | color: $color; 20 | @include opacity(1); 21 | } 22 | } 23 | 24 | @mixin placeholder() { 25 | &::-moz-placeholder {@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 | .form-group.form-control-lg, 57 | .input-group.form-control-lg{ 58 | .form-control{ 59 | padding: $padding-vertical - 1 $padding-horizontal - 1; 60 | 61 | & + .input-group-prepend .input-group-text, 62 | & + .input-group-append .input-group-text{ 63 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 64 | } 65 | } 66 | 67 | .input-group-prepend .input-group-text, 68 | .input-group-append .input-group-text{ 69 | padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; 70 | 71 | & + .form-control{ 72 | padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; 73 | } 74 | } 75 | } 76 | } 77 | 78 | 79 | 80 | @mixin input-base-padding($padding-vertical, $padding-horizontal) { 81 | .form-group.no-border, 82 | .input-group.no-border{ 83 | .form-control{ 84 | padding: $padding-vertical $padding-horizontal; 85 | 86 | & + .input-group-prepend .input-group-text, 87 | & + .input-group-append .input-group-text{ 88 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 89 | } 90 | } 91 | 92 | .input-group-prepend .input-group-text, 93 | .input-group-append .input-group-text{ 94 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 95 | } 96 | } 97 | 98 | .form-group, 99 | .input-group{ 100 | .form-control{ 101 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; 102 | 103 | & + .input-group-prepend .input-group-text, 104 | & + .input-group-append .input-group-text{ 105 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 106 | } 107 | } 108 | 109 | .input-group-prepend .input-group-text, 110 | .input-group-append .input-group-text{ 111 | padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; 112 | 113 | & + .form-control, 114 | & ~ .form-control{ 115 | padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; 116 | } 117 | } 118 | } 119 | } 120 | 121 | 122 | //color1 = $opacity-5 123 | //color2 = $opacity-8 124 | //color3 = $white-color 125 | //color4 = $transparent-bg 126 | //color5 = $opacity-1 127 | //color6 = $opacity-2 128 | 129 | 130 | @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { 131 | @include form-control-placeholder(darken($color2, 8%), 1); 132 | 133 | .form-control{ 134 | border-color: $color1; 135 | color: $color2; 136 | 137 | &:focus{ 138 | border-color: $color3; 139 | background-color: $color4; 140 | color: $color3; 141 | } 142 | } 143 | 144 | .has-success, 145 | .has-danger{ 146 | &:after{ 147 | color: $color3; 148 | } 149 | } 150 | 151 | .has-danger{ 152 | .form-control{ 153 | background-color: $color4; 154 | } 155 | } 156 | 157 | .input-group-prepend .input-group-text, 158 | .input-group-append .input-group-text{ 159 | background-color: $color4; 160 | border-color: $color1; 161 | color: $color2; 162 | } 163 | 164 | .input-group-focus{ 165 | .input-group-prepend .input-group-text, 166 | .input-group-append .input-group-text{ 167 | background-color: $color4; 168 | border-color: $color3; 169 | color: $color3; 170 | } 171 | } 172 | 173 | .form-group.no-border, 174 | .input-group.no-border{ 175 | .form-control{ 176 | background-color: $color5; 177 | color: $color2; 178 | 179 | &:focus, 180 | &:active, 181 | &:active{ 182 | background-color: $color6; 183 | color: $color3; 184 | } 185 | } 186 | 187 | .form-control + .input-group-prepend .input-group-text, 188 | .form-control + .input-group-append .input-group-text{ 189 | background-color: $color5; 190 | 191 | &:focus, 192 | &:active, 193 | &:active{ 194 | background-color: $color6; 195 | color: $color3; 196 | } 197 | } 198 | 199 | .form-control{ 200 | &:focus{ 201 | & + .input-group-prepend .input-group-text, 202 | & + .input-group-append .input-group-text{ 203 | background-color: $color6; 204 | color: $color3; 205 | } 206 | } 207 | } 208 | 209 | .input-group-prepend .input-group-text, 210 | .input-group-append .input-group-text{ 211 | background-color: $color5; 212 | border: none; 213 | color: $color2; 214 | } 215 | 216 | &.input-group-focus{ 217 | .input-group-prepend .input-group-text, 218 | .input-group-append .input-group-text{ 219 | background-color: $color6; 220 | color: $color3; 221 | } 222 | } 223 | } 224 | } 225 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_page-header.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($color1, $color2){ 2 | background: $color1; /* For browsers that do not support gradients */ 3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar() { 2 | .sidebar, 3 | .bootstrap-navbar { 4 | position: fixed; 5 | display: block; 6 | top: 0; 7 | height: 100%; 8 | width: 260px; 9 | right: auto; 10 | left: 0; 11 | z-index: 1032; 12 | visibility: visible; 13 | overflow-y: visible; 14 | padding: 0; 15 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 16 | 17 | @include transform-translate-x(-260px); 18 | } 19 | 20 | .bar1, 21 | .bar2, 22 | .bar3 { 23 | outline: 1px solid transparent; 24 | } 25 | .bar1 { 26 | top: 0px; 27 | @include bar-animation($topbar-back); 28 | } 29 | .bar2 { 30 | opacity: 1; 31 | } 32 | .bar3 { 33 | bottom: 0px; 34 | @include bar-animation($bottombar-back); 35 | } 36 | .toggled .bar1 { 37 | top: 6px; 38 | @include bar-animation($topbar-x); 39 | } 40 | .toggled .bar2 { 41 | opacity: 0; 42 | } 43 | .toggled .bar3 { 44 | bottom: 6px; 45 | @include bar-animation($bottombar-x); 46 | } 47 | 48 | @include topbar-x-rotation(); 49 | @include topbar-back-rotation(); 50 | @include bottombar-x-rotation(); 51 | @include bottombar-back-rotation(); 52 | 53 | @-webkit-keyframes fadeIn { 54 | 0% {opacity: 0;} 55 | 100% {opacity: 1;} 56 | } 57 | @-moz-keyframes fadeIn { 58 | 0% {opacity: 0;} 59 | 100% {opacity: 1;} 60 | } 61 | @keyframes fadeIn { 62 | 0% {opacity: 0;} 63 | 100% {opacity: 1;} 64 | } 65 | 66 | .navbar-toggler-bar{ 67 | display: block; 68 | position: relative; 69 | width: 22px; 70 | height: 1px; 71 | border-radius: 1px; 72 | background: $white-bg; 73 | 74 | & + .navbar-toggler-bar{ 75 | margin-top: 7px; 76 | } 77 | 78 | & + .navbar-toggler-bar.navbar-kebab{ 79 | margin-top: 3px !important; 80 | } 81 | 82 | &.bar2{ 83 | width: 17px; 84 | transition: width .2s linear; 85 | } 86 | } 87 | 88 | .main-panel{ 89 | width: 100%; 90 | } 91 | 92 | .navbar-toggle .navbar-toggler, 93 | .navbar-toggle{ 94 | display: block !important; 95 | } 96 | 97 | .navbar{ 98 | & .toggled .navbar-toggler-bar{ 99 | width: 24px; 100 | 101 | & + .navbar-toggler-bar{ 102 | margin-top: 5px; 103 | } 104 | } 105 | } 106 | 107 | .nav-open{ 108 | .main-panel{ 109 | right: 0; 110 | @include transform-translate-x(260px); 111 | } 112 | 113 | .sidebar{ 114 | @include transform-translate-x(0px); 115 | box-shadow: $sidebar-box-shadow; 116 | } 117 | 118 | body{ 119 | position: relative; 120 | overflow-x: hidden; 121 | } 122 | 123 | .menu-on-right{ 124 | .main-panel{ 125 | @include transform-translate-x(-260px); 126 | } 127 | 128 | .navbar-collapse, 129 | .sidebar{ 130 | @include transform-translate-x(0px); 131 | } 132 | 133 | .navbar-translate{ 134 | @include transform-translate-x(-300px); 135 | } 136 | 137 | #bodyClick{ 138 | right: 260px; 139 | left: auto; 140 | } 141 | } 142 | } 143 | 144 | .menu-on-right{ 145 | .sidebar{ 146 | left: auto; 147 | right:0; 148 | @include transform-translate-x(260px); 149 | } 150 | } 151 | 152 | } 153 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 3 | box-shadow: $shadow; 4 | } 5 | 6 | @mixin transition-input-focus-color() { 7 | -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 8 | -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 9 | -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 10 | -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 11 | transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 12 | } 13 | 14 | 15 | @mixin transition($time, $type){ 16 | -webkit-transition: all $time $type; 17 | -moz-transition: all $time $type; 18 | -o-transition: all $time $type; 19 | -ms-transition: all $time $type; 20 | transition: all $time $type; 21 | } 22 | 23 | @mixin rotate-180(){ 24 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 25 | -webkit-transform: rotate(180deg); 26 | -ms-transform: rotate(180deg); 27 | transform: rotate(180deg); 28 | } 29 | 30 | 31 | @mixin transform-translate-x($value){ 32 | -webkit-transform: translate3d($value, 0, 0); 33 | -moz-transform: translate3d($value, 0, 0); 34 | -o-transform: translate3d($value, 0, 0); 35 | -ms-transform: translate3d($value, 0, 0); 36 | transform: translate3d($value, 0, 0); 37 | } 38 | 39 | @mixin transform-translate-y($value){ 40 | -webkit-transform: translate3d(0,$value,0); 41 | -moz-transform: translate3d(0,$value,0); 42 | -o-transform: translate3d(0,$value,0); 43 | -ms-transform: translate3d(0,$value,0); 44 | transform: translate3d(0,$value,0); 45 | } 46 | 47 | @mixin transform-translate-y-dropdown($value) { 48 | -webkit-transform: translate3d(0,$value,0) !important; 49 | -moz-transform: translate3d(0,$value,0) !important; 50 | -o-transform: translate3d(0,$value,0) !important; 51 | -ms-transform: translate3d(0,$value,0) !important; 52 | transform: translate3d(0,$value,0) !important; 53 | } 54 | 55 | @mixin icon-gradient($color, $bottomColor: #000){ 56 | background: $color; 57 | background: -webkit-linear-gradient($color 0%, $bottomColor 80%); 58 | background: -o-linear-gradient($color 0%, $bottomColor 80%); 59 | background: -moz-linear-gradient($color 0%, $bottomColor 80%); 60 | background: linear-gradient($color 0%, $bottomColor 80%); 61 | } 62 | 63 | @mixin sidebar-color($color){ 64 | &:after{ 65 | background: $color; 66 | } 67 | 68 | .nav li.active > a:not([data-toggle="collapse"]){ 69 | color: $color; 70 | 71 | i{ 72 | color: $color; 73 | } 74 | } 75 | } 76 | 77 | @mixin bar-animation($type){ 78 | -webkit-animation: $type 500ms linear 0s; 79 | -moz-animation: $type 500ms linear 0s; 80 | animation: $type 500ms 0s; 81 | -webkit-animation-fill-mode: forwards; 82 | -moz-animation-fill-mode: forwards; 83 | animation-fill-mode: forwards; 84 | } 85 | 86 | @mixin topbar-x-rotation(){ 87 | @keyframes topbar-x { 88 | 0% {top: 0px; transform: rotate(0deg); } 89 | 45% {top: 6px; transform: rotate(145deg); } 90 | 75% {transform: rotate(130deg); } 91 | 100% {transform: rotate(135deg); } 92 | } 93 | @-webkit-keyframes topbar-x { 94 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 95 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 96 | 75% {-webkit-transform: rotate(130deg); } 97 | 100% { -webkit-transform: rotate(135deg); } 98 | } 99 | @-moz-keyframes topbar-x { 100 | 0% {top: 0px; -moz-transform: rotate(0deg); } 101 | 45% {top: 6px; -moz-transform: rotate(145deg); } 102 | 75% {-moz-transform: rotate(130deg); } 103 | 100% { -moz-transform: rotate(135deg); } 104 | } 105 | } 106 | 107 | @mixin topbar-back-rotation(){ 108 | @keyframes topbar-back { 109 | 0% { top: 6px; transform: rotate(135deg); } 110 | 45% { transform: rotate(-10deg); } 111 | 75% { transform: rotate(5deg); } 112 | 100% { top: 0px; transform: rotate(0); } 113 | } 114 | 115 | @-webkit-keyframes topbar-back { 116 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 117 | 45% { -webkit-transform: rotate(-10deg); } 118 | 75% { -webkit-transform: rotate(5deg); } 119 | 100% { top: 0px; -webkit-transform: rotate(0); } 120 | } 121 | 122 | @-moz-keyframes topbar-back { 123 | 0% { top: 6px; -moz-transform: rotate(135deg); } 124 | 45% { -moz-transform: rotate(-10deg); } 125 | 75% { -moz-transform: rotate(5deg); } 126 | 100% { top: 0px; -moz-transform: rotate(0); } 127 | } 128 | } 129 | 130 | @mixin bottombar-x-rotation(){ 131 | @keyframes bottombar-x { 132 | 0% {bottom: 0px; transform: rotate(0deg);} 133 | 45% {bottom: 6px; transform: rotate(-145deg);} 134 | 75% {transform: rotate(-130deg);} 135 | 100% {transform: rotate(-135deg);} 136 | } 137 | @-webkit-keyframes bottombar-x { 138 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 139 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 140 | 75% {-webkit-transform: rotate(-130deg);} 141 | 100% {-webkit-transform: rotate(-135deg);} 142 | } 143 | @-moz-keyframes bottombar-x { 144 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 145 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 146 | 75% {-moz-transform: rotate(-130deg);} 147 | 100% {-moz-transform: rotate(-135deg);} 148 | } 149 | } 150 | 151 | @mixin bottombar-back-rotation{ 152 | @keyframes bottombar-back { 153 | 0% { bottom: 6px;transform: rotate(-135deg);} 154 | 45% { transform: rotate(10deg);} 155 | 75% { transform: rotate(-5deg);} 156 | 100% { bottom: 0px;transform: rotate(0);} 157 | } 158 | @-webkit-keyframes bottombar-back { 159 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 160 | 45% {-webkit-transform: rotate(10deg);} 161 | 75% {-webkit-transform: rotate(-5deg);} 162 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 163 | } 164 | @-moz-keyframes bottombar-back { 165 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 166 | 45% {-moz-transform: rotate(10deg);} 167 | 75% {-moz-transform: rotate(-5deg);} 168 | 100% {bottom: 0px;-moz-transform: rotate(0);} 169 | } 170 | 171 | } 172 | 173 | 174 | @mixin nc-rotate($degrees, $rotation) { 175 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 176 | -webkit-transform: rotate($degrees); 177 | -moz-transform: rotate($degrees); 178 | -ms-transform: rotate($degrees); 179 | -o-transform: rotate($degrees); 180 | transform: rotate($degrees); 181 | } 182 | 183 | @mixin nc-flip($horiz, $vert, $rotation) { 184 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 185 | -webkit-transform: scale($horiz, $vert); 186 | -moz-transform: scale($horiz, $vert); 187 | -ms-transform: scale($horiz, $vert); 188 | -o-transform: scale($horiz, $vert); 189 | transform: scale($horiz, $vert); 190 | } 191 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/plugins/_plugin-animate-bootstrap-notify.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | @charset "UTF-8"; 34 | 35 | /*! 36 | Animate.css - http://daneden.me/animate 37 | Licensed under the MIT license - http://opensource.org/licenses/MIT 38 | 39 | Copyright (c) 2015 Daniel Eden 40 | */ 41 | 42 | .animated { 43 | -webkit-animation-duration: 1s; 44 | animation-duration: 1s; 45 | -webkit-animation-fill-mode: both; 46 | animation-fill-mode: both; 47 | } 48 | 49 | .animated.infinite { 50 | -webkit-animation-iteration-count: infinite; 51 | animation-iteration-count: infinite; 52 | } 53 | 54 | .animated.hinge { 55 | -webkit-animation-duration: 2s; 56 | animation-duration: 2s; 57 | } 58 | 59 | .animated.bounceIn, 60 | .animated.bounceOut { 61 | -webkit-animation-duration: .75s; 62 | animation-duration: .75s; 63 | } 64 | 65 | .animated.flipOutX, 66 | .animated.flipOutY { 67 | -webkit-animation-duration: .75s; 68 | animation-duration: .75s; 69 | } 70 | 71 | @-webkit-keyframes shake { 72 | from, to { 73 | -webkit-transform: translate3d(0, 0, 0); 74 | transform: translate3d(0, 0, 0); 75 | } 76 | 77 | 10%, 30%, 50%, 70%, 90% { 78 | -webkit-transform: translate3d(-10px, 0, 0); 79 | transform: translate3d(-10px, 0, 0); 80 | } 81 | 82 | 20%, 40%, 60%, 80% { 83 | -webkit-transform: translate3d(10px, 0, 0); 84 | transform: translate3d(10px, 0, 0); 85 | } 86 | } 87 | 88 | @keyframes shake { 89 | from, to { 90 | -webkit-transform: translate3d(0, 0, 0); 91 | transform: translate3d(0, 0, 0); 92 | } 93 | 94 | 10%, 30%, 50%, 70%, 90% { 95 | -webkit-transform: translate3d(-10px, 0, 0); 96 | transform: translate3d(-10px, 0, 0); 97 | } 98 | 99 | 20%, 40%, 60%, 80% { 100 | -webkit-transform: translate3d(10px, 0, 0); 101 | transform: translate3d(10px, 0, 0); 102 | } 103 | } 104 | 105 | .shake { 106 | -webkit-animation-name: shake; 107 | animation-name: shake; 108 | } 109 | 110 | 111 | 112 | @-webkit-keyframes fadeInDown { 113 | from { 114 | opacity: 0; 115 | -webkit-transform: translate3d(0, -100%, 0); 116 | transform: translate3d(0, -100%, 0); 117 | } 118 | 119 | to { 120 | opacity: 1; 121 | -webkit-transform: none; 122 | transform: none; 123 | } 124 | } 125 | 126 | @keyframes fadeInDown { 127 | from { 128 | opacity: 0; 129 | -webkit-transform: translate3d(0, -100%, 0); 130 | transform: translate3d(0, -100%, 0); 131 | } 132 | 133 | to { 134 | opacity: 1; 135 | -webkit-transform: none; 136 | transform: none; 137 | } 138 | } 139 | 140 | .fadeInDown { 141 | -webkit-animation-name: fadeInDown; 142 | animation-name: fadeInDown; 143 | } 144 | 145 | 146 | @-webkit-keyframes fadeOut { 147 | from { 148 | opacity: 1; 149 | } 150 | 151 | to { 152 | opacity: 0; 153 | } 154 | } 155 | 156 | @keyframes fadeOut { 157 | from { 158 | opacity: 1; 159 | } 160 | 161 | to { 162 | opacity: 0; 163 | } 164 | } 165 | 166 | .fadeOut { 167 | -webkit-animation-name: fadeOut; 168 | animation-name: fadeOut; 169 | } 170 | 171 | @-webkit-keyframes fadeOutDown { 172 | from { 173 | opacity: 1; 174 | } 175 | 176 | to { 177 | opacity: 0; 178 | -webkit-transform: translate3d(0, 100%, 0); 179 | transform: translate3d(0, 100%, 0); 180 | } 181 | } 182 | 183 | @keyframes fadeOutDown { 184 | from { 185 | opacity: 1; 186 | } 187 | 188 | to { 189 | opacity: 0; 190 | -webkit-transform: translate3d(0, 100%, 0); 191 | transform: translate3d(0, 100%, 0); 192 | } 193 | } 194 | 195 | .fadeOutDown { 196 | -webkit-animation-name: fadeOutDown; 197 | animation-name: fadeOutDown; 198 | } 199 | 200 | @-webkit-keyframes fadeOutUp { 201 | from { 202 | opacity: 1; 203 | } 204 | 205 | to { 206 | opacity: 0; 207 | -webkit-transform: translate3d(0, -100%, 0); 208 | transform: translate3d(0, -100%, 0); 209 | } 210 | } 211 | 212 | @keyframes fadeOutUp { 213 | from { 214 | opacity: 1; 215 | } 216 | 217 | to { 218 | opacity: 0; 219 | -webkit-transform: translate3d(0, -100%, 0); 220 | transform: translate3d(0, -100%, 0); 221 | } 222 | } 223 | 224 | .fadeOutUp { 225 | -webkit-animation-name: fadeOutUp; 226 | animation-name: fadeOutUp; 227 | } 228 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/plugins/_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/now-ui-dashboard/react/custom/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: $border-radius-small; 4 | color: $white-color; 5 | padding: .75rem 1.25rem; 6 | padding-top: .9rem; 7 | padding-bottom: .9rem; 8 | position: relative; 9 | margin-bottom: 1rem; 10 | 11 | &.alert-success{ 12 | background-color: lighten($success-color, 5%); 13 | } 14 | 15 | &.alert-danger{ 16 | background-color: lighten($danger-color, 5%); 17 | } 18 | 19 | &.alert-warning{ 20 | background-color: lighten($warning-color, 5%); 21 | } 22 | 23 | &.alert-info{ 24 | background-color: lighten($info-color, 5%); 25 | } 26 | 27 | &.alert-primary{ 28 | background-color: lighten($primary-color, 5%); 29 | } 30 | 31 | 32 | i.fa, 33 | i.now-ui-icons{ 34 | font-size: 20px; 35 | } 36 | 37 | .close{ 38 | &, 39 | &:not(:disabled):not(.disabled):hover, 40 | &:not(:disabled):not(.disabled):focus{ 41 | color: $white-color; 42 | } 43 | opacity: .9; 44 | text-shadow: none; 45 | line-height: 0; 46 | outline: 0; 47 | 48 | span { 49 | font-weight: 100; 50 | font-size: 46px; 51 | top: 50%; 52 | left: 0; 53 | position: absolute; 54 | } 55 | 56 | } 57 | 58 | span[data-notify="icon"]{ 59 | font-size: 22px; 60 | display: block; 61 | left: 19px; 62 | position: absolute; 63 | top: 50%; 64 | margin-top: -11px; 65 | } 66 | 67 | button.close{ 68 | position: absolute; 69 | right: 10px; 70 | top: 50%; 71 | margin-top: -13px; 72 | width: 25px; 73 | height: 25px; 74 | padding: 3px; 75 | } 76 | 77 | .close ~ span{ 78 | display: block; 79 | max-width: 89%; 80 | } 81 | 82 | &.alert-with-icon{ 83 | padding-left: 65px; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/react/custom/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Components 2 | @import "../mixins/vendor-prefixes"; 3 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/react/custom/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | .navbar-nav{ 3 | .nav-link{ 4 | i.fa + p, 5 | i.now-ui-icons + p{ 6 | margin-left: 6px; 7 | } 8 | } 9 | } 10 | } 11 | @media screen and (max-width: 991px){ 12 | .navbar .dropdown.show .dropdown-menu, .navbar .dropdown .dropdown-menu{ 13 | position: static !important; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/react/custom/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .img-wrapper{ 4 | width: 40px; 5 | height: 40px; 6 | border-radius: 50%; 7 | overflow: hidden; 8 | margin: 0 auto; 9 | } 10 | 11 | .img-row{ 12 | max-width: 60px; 13 | width: 60px; 14 | } 15 | 16 | .form-check{ 17 | margin: 0; 18 | 19 | & label .form-check-sign::before, 20 | & label .form-check-sign::after{ 21 | top: -17px; 22 | left: 4px; 23 | } 24 | } 25 | 26 | .btn{ 27 | margin: 0; 28 | } 29 | 30 | small,.small{ 31 | font-weight: 300; 32 | } 33 | 34 | .card-tasks .card-body &{ 35 | margin-bottom: 0; 36 | 37 | > thead > tr > th, 38 | > tbody > tr > th, 39 | > tfoot > tr > th, 40 | > thead > tr > td, 41 | > tbody > tr > td, 42 | > tfoot > tr > td{ 43 | padding-top: 0; 44 | padding-bottom: 0; 45 | } 46 | } 47 | 48 | > thead > tr > th{ 49 | border-bottom-width: 1px; 50 | font-size: 1.45em; 51 | font-weight: $font-weight-light; 52 | border: 0; 53 | } 54 | 55 | .radio, 56 | .checkbox{ 57 | margin-top: 0; 58 | margin-bottom: 0; 59 | padding: 0; 60 | width: 15px; 61 | 62 | .icons{ 63 | position: relative; 64 | } 65 | 66 | label{ 67 | &:after, 68 | &:before{ 69 | top: -17px; 70 | left: -3px; 71 | } 72 | } 73 | } 74 | > thead > tr > th, 75 | > tbody > tr > th, 76 | > tfoot > tr > th, 77 | > thead > tr > td, 78 | > tbody > tr > td, 79 | > tfoot > tr > td{ 80 | padding: 12px 7px; 81 | vertical-align: middle; 82 | } 83 | 84 | .th-description{ 85 | max-width: 150px; 86 | } 87 | .td-price{ 88 | font-size: 26px; 89 | font-weight: $font-weight-light; 90 | margin-top: 5px; 91 | position: relative; 92 | top: 4px; 93 | text-align: right; 94 | } 95 | .td-total{ 96 | font-weight: $font-weight-bold; 97 | font-size: $font-size-h5; 98 | padding-top: 20px; 99 | text-align: right; 100 | } 101 | 102 | .td-actions .btn{ 103 | margin: 0px; 104 | } 105 | 106 | > tbody > tr{ 107 | position: relative; 108 | } 109 | } 110 | 111 | .table-shopping{ 112 | > thead > tr > th{ 113 | font-size: $font-size-h6; 114 | text-transform: uppercase; 115 | } 116 | > tbody > tr > td{ 117 | font-size: $font-paragraph; 118 | 119 | b{ 120 | display: block; 121 | margin-bottom: 5px; 122 | } 123 | } 124 | .td-name{ 125 | font-weight: $font-weight-normal; 126 | font-size: 1.5em; 127 | small{ 128 | color: $dark-gray; 129 | font-size: 0.75em; 130 | font-weight: $font-weight-light; 131 | } 132 | } 133 | .td-number{ 134 | font-weight: $font-weight-light; 135 | font-size: $font-size-h4; 136 | } 137 | .td-name{ 138 | min-width: 200px; 139 | } 140 | .td-number{ 141 | text-align: right; 142 | min-width: 170px; 143 | 144 | small{ 145 | margin-right: 3px; 146 | } 147 | } 148 | 149 | .img-container{ 150 | width: 120px; 151 | max-height: 160px; 152 | overflow: hidden; 153 | display: block; 154 | 155 | img{ 156 | width: 100%; 157 | } 158 | } 159 | } 160 | 161 | .table-responsive{ 162 | overflow: auto; 163 | padding-bottom: 10px; 164 | } 165 | 166 | #tables .table-responsive{ 167 | margin-bottom: 30px; 168 | } 169 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/react/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 3 | box-shadow: $shadow; 4 | } 5 | 6 | @mixin transition-input-focus-color() { 7 | -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 8 | -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 9 | -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 10 | -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 11 | transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 12 | } 13 | 14 | 15 | @mixin transition($time, $type){ 16 | -webkit-transition: all $time $type; 17 | -moz-transition: all $time $type; 18 | -o-transition: all $time $type; 19 | -ms-transition: all $time $type; 20 | transition: all $time $type; 21 | } 22 | 23 | @mixin rotate-180(){ 24 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 25 | -webkit-transform: rotate(180deg); 26 | -ms-transform: rotate(180deg); 27 | transform: rotate(180deg); 28 | } 29 | 30 | 31 | @mixin transform-translate-x($value){ 32 | -webkit-transform: translate3d($value, 0, 0); 33 | -moz-transform: translate3d($value, 0, 0); 34 | -o-transform: translate3d($value, 0, 0); 35 | -ms-transform: translate3d($value, 0, 0); 36 | transform: translate3d($value, 0, 0); 37 | } 38 | 39 | @mixin transform-translate-y($value){ 40 | -webkit-transform: translate3d(0,$value,0); 41 | -moz-transform: translate3d(0,$value,0); 42 | -o-transform: translate3d(0,$value,0); 43 | -ms-transform: translate3d(0,$value,0); 44 | transform: translate3d(0,$value,0); 45 | } 46 | 47 | @mixin transform-translate-y-dropdown($value) { 48 | -webkit-transform: translate3d(0,$value,0) !important; 49 | -moz-transform: translate3d(0,$value,0) !important; 50 | -o-transform: translate3d(0,$value,0) !important; 51 | -ms-transform: translate3d(0,$value,0) !important; 52 | transform: translate3d(0,$value,0) !important; 53 | } 54 | 55 | @mixin icon-gradient($color, $bottomColor: #000){ 56 | background: $color; 57 | background: -webkit-linear-gradient($color 0%, $bottomColor 80%); 58 | background: -o-linear-gradient($color 0%, $bottomColor 80%); 59 | background: -moz-linear-gradient($color 0%, $bottomColor 80%); 60 | background: linear-gradient($color 0%, $bottomColor 80%); 61 | } 62 | 63 | @mixin sidebar-color($color){ 64 | &:after{ 65 | background: $color; 66 | } 67 | 68 | .nav li.active > a{ 69 | color: $color; 70 | 71 | i{ 72 | color: $color; 73 | } 74 | } 75 | } 76 | 77 | @mixin bar-animation($type){ 78 | -webkit-animation: $type 500ms linear 0s; 79 | -moz-animation: $type 500ms linear 0s; 80 | animation: $type 500ms 0s; 81 | -webkit-animation-fill-mode: forwards; 82 | -moz-animation-fill-mode: forwards; 83 | animation-fill-mode: forwards; 84 | } 85 | 86 | @mixin topbar-x-rotation(){ 87 | @keyframes topbar-x { 88 | 0% {top: 0px; transform: rotate(0deg); } 89 | 45% {top: 6px; transform: rotate(145deg); } 90 | 75% {transform: rotate(130deg); } 91 | 100% {transform: rotate(135deg); } 92 | } 93 | @-webkit-keyframes topbar-x { 94 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 95 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 96 | 75% {-webkit-transform: rotate(130deg); } 97 | 100% { -webkit-transform: rotate(135deg); } 98 | } 99 | @-moz-keyframes topbar-x { 100 | 0% {top: 0px; -moz-transform: rotate(0deg); } 101 | 45% {top: 6px; -moz-transform: rotate(145deg); } 102 | 75% {-moz-transform: rotate(130deg); } 103 | 100% { -moz-transform: rotate(135deg); } 104 | } 105 | } 106 | 107 | @mixin topbar-back-rotation(){ 108 | @keyframes topbar-back { 109 | 0% { top: 6px; transform: rotate(135deg); } 110 | 45% { transform: rotate(-10deg); } 111 | 75% { transform: rotate(5deg); } 112 | 100% { top: 0px; transform: rotate(0); } 113 | } 114 | 115 | @-webkit-keyframes topbar-back { 116 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 117 | 45% { -webkit-transform: rotate(-10deg); } 118 | 75% { -webkit-transform: rotate(5deg); } 119 | 100% { top: 0px; -webkit-transform: rotate(0); } 120 | } 121 | 122 | @-moz-keyframes topbar-back { 123 | 0% { top: 6px; -moz-transform: rotate(135deg); } 124 | 45% { -moz-transform: rotate(-10deg); } 125 | 75% { -moz-transform: rotate(5deg); } 126 | 100% { top: 0px; -moz-transform: rotate(0); } 127 | } 128 | } 129 | 130 | @mixin bottombar-x-rotation(){ 131 | @keyframes bottombar-x { 132 | 0% {bottom: 0px; transform: rotate(0deg);} 133 | 45% {bottom: 6px; transform: rotate(-145deg);} 134 | 75% {transform: rotate(-130deg);} 135 | 100% {transform: rotate(-135deg);} 136 | } 137 | @-webkit-keyframes bottombar-x { 138 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 139 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 140 | 75% {-webkit-transform: rotate(-130deg);} 141 | 100% {-webkit-transform: rotate(-135deg);} 142 | } 143 | @-moz-keyframes bottombar-x { 144 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 145 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 146 | 75% {-moz-transform: rotate(-130deg);} 147 | 100% {-moz-transform: rotate(-135deg);} 148 | } 149 | } 150 | 151 | @mixin bottombar-back-rotation{ 152 | @keyframes bottombar-back { 153 | 0% { bottom: 6px;transform: rotate(-135deg);} 154 | 45% { transform: rotate(10deg);} 155 | 75% { transform: rotate(-5deg);} 156 | 100% { bottom: 0px;transform: rotate(0);} 157 | } 158 | @-webkit-keyframes bottombar-back { 159 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 160 | 45% {-webkit-transform: rotate(10deg);} 161 | 75% {-webkit-transform: rotate(-5deg);} 162 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 163 | } 164 | @-moz-keyframes bottombar-back { 165 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 166 | 45% {-moz-transform: rotate(10deg);} 167 | 75% {-moz-transform: rotate(-5deg);} 168 | 100% {bottom: 0px;-moz-transform: rotate(0);} 169 | } 170 | 171 | } 172 | 173 | 174 | @mixin nc-rotate($degrees, $rotation) { 175 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 176 | -webkit-transform: rotate($degrees); 177 | -moz-transform: rotate($degrees); 178 | -ms-transform: rotate($degrees); 179 | -o-transform: rotate($degrees); 180 | transform: rotate($degrees); 181 | } 182 | 183 | @mixin nc-flip($horiz, $vert, $rotation) { 184 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 185 | -webkit-transform: scale($horiz, $vert); 186 | -moz-transform: scale($horiz, $vert); 187 | -ms-transform: scale($horiz, $vert); 188 | -o-transform: scale($horiz, $vert); 189 | transform: scale($horiz, $vert); 190 | } 191 | 192 | @mixin panel-gradient($color) { 193 | background: $color; /* fallback for old browsers */ 194 | background: linear-gradient(160deg, $color 0%, darken($black-color,5) 100%); 195 | background-size: 105%; 196 | } 197 | -------------------------------------------------------------------------------- /src/assets/scss/now-ui-dashboard/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | // mixins 2 | @import "custom/mixins"; 3 | // custom 4 | @import "custom/alerts"; 5 | @import "custom/navbar"; 6 | @import "custom/sidebar-and-main-panel"; 7 | @import "custom/tables"; 8 | -------------------------------------------------------------------------------- /src/components/FixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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, { Component } from "react"; 20 | 21 | function FixedPlugin(props) { 22 | const [classes, setClasses] = React.useState("dropdown show"); 23 | const handleClick = () => { 24 | if (classes === "dropdown") { 25 | setClasses("dropdown show"); 26 | } else { 27 | setClasses("dropdown"); 28 | } 29 | }; 30 | return ( 31 |
32 |
33 |
34 | 35 |
36 |
    37 |
  • SIDEBAR BACKGROUND
    • 38 |
  • 39 |
    40 | { 48 | props.handleColorClick("yellow"); 49 | }} 50 | /> 51 | { 59 | props.handleColorClick("blue"); 60 | }} 61 | /> 62 | { 70 | props.handleColorClick("green"); 71 | }} 72 | /> 73 | { 81 | props.handleColorClick("orange"); 82 | }} 83 | /> 84 | { 92 | props.handleColorClick("red"); 93 | }} 94 | /> 95 |
    96 |
    • 97 | 98 |
  • 99 | 104 | Buy pro 105 | 106 | 111 | Download free 112 | 113 | 117 | Documentation 118 | 119 |
    • 120 |
121 |
122 |
123 | ); 124 | } 125 | 126 | export default FixedPlugin; 127 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 { Container } from "reactstrap"; 21 | // used for making the prop types of this component 22 | import PropTypes from "prop-types"; 23 | 24 | function Footer(props) { 25 | return ( 26 | 77 | ); 78 | } 79 | 80 | Footer.propTypes = { 81 | default: PropTypes.bool, 82 | fluid: PropTypes.bool, 83 | }; 84 | 85 | export default Footer; 86 | -------------------------------------------------------------------------------- /src/components/Navbars/DemoNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 { Link, useLocation } from "react-router-dom"; 20 | import { 21 | Collapse, 22 | Navbar, 23 | NavbarToggler, 24 | NavbarBrand, 25 | Nav, 26 | NavItem, 27 | Dropdown, 28 | DropdownToggle, 29 | DropdownMenu, 30 | DropdownItem, 31 | Container, 32 | InputGroup, 33 | InputGroupText, 34 | InputGroupAddon, 35 | Input, 36 | } from "reactstrap"; 37 | 38 | import routes from "routes.js"; 39 | 40 | function DemoNavbar(props) { 41 | const location = useLocation(); 42 | const [isOpen, setIsOpen] = React.useState(false); 43 | const [dropdownOpen, setDropdownOpen] = React.useState(false); 44 | const [color, setColor] = React.useState("transparent"); 45 | const sidebarToggle = React.useRef(); 46 | const toggle = () => { 47 | if (isOpen) { 48 | setColor("transparent"); 49 | } else { 50 | setColor("white"); 51 | } 52 | setIsOpen(!isOpen); 53 | }; 54 | const dropdownToggle = (e) => { 55 | setDropdownOpen(!dropdownOpen); 56 | }; 57 | const getBrand = () => { 58 | var name; 59 | routes.map((prop, key) => { 60 | if (prop.collapse) { 61 | prop.views.map((prop, key) => { 62 | if (prop.path === location.pathname) { 63 | name = prop.name; 64 | } 65 | return null; 66 | }); 67 | } else { 68 | if (prop.redirect) { 69 | if (prop.path === location.pathname) { 70 | name = prop.name; 71 | } 72 | } else { 73 | if (prop.path === location.pathname) { 74 | name = prop.name; 75 | } 76 | } 77 | } 78 | return null; 79 | }); 80 | return name; 81 | }; 82 | const openSidebar = () => { 83 | document.documentElement.classList.toggle("nav-open"); 84 | sidebarToggle.current.classList.toggle("toggled"); 85 | }; 86 | // function that adds color white/transparent to the navbar on resize (this is for the collapse) 87 | const updateColor = () => { 88 | if (window.innerWidth < 993 && isOpen) { 89 | setColor("white"); 90 | } else { 91 | setColor("transparent"); 92 | } 93 | }; 94 | React.useEffect(() => { 95 | window.addEventListener("resize", updateColor); 96 | }, []); 97 | React.useEffect(() => { 98 | if ( 99 | window.innerWidth < 993 && 100 | document.documentElement.className.indexOf("nav-open") !== -1 101 | ) { 102 | document.documentElement.classList.toggle("nav-open"); 103 | sidebarToggle.current.classList.toggle("toggled"); 104 | } 105 | }, [location]); 106 | return ( 107 | // add or remove classes depending if we are on full-screen-maps page or not 108 | 120 | 121 |
122 |
123 | 133 |
134 | {getBrand()} 135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 187 |
188 | 189 | 190 | ); 191 | } 192 | 193 | export default DemoNavbar; 194 | -------------------------------------------------------------------------------- /src/components/PanelHeader/PanelHeader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | function PanelHeader(props) { 21 | return ( 22 |
28 | {props.content} 29 |
30 | ); 31 | } 32 | 33 | export default PanelHeader; 34 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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, useLocation } from "react-router-dom"; 21 | import { Nav } from "reactstrap"; 22 | // javascript plugin used to create scrollbars on windows 23 | import PerfectScrollbar from "perfect-scrollbar"; 24 | 25 | import logo from "logo-white.svg"; 26 | 27 | var ps; 28 | 29 | function Sidebar(props) { 30 | const sidebar = React.useRef(); 31 | const location = useLocation(); 32 | // verifies if routeName is the one active (in browser input) 33 | const activeRoute = (routeName) => { 34 | return location.pathname.indexOf(routeName) > -1 ? "active" : ""; 35 | }; 36 | React.useEffect(() => { 37 | if (navigator.platform.indexOf("Win") > -1) { 38 | ps = new PerfectScrollbar(sidebar.current, { 39 | suppressScrollX: true, 40 | suppressScrollY: false, 41 | }); 42 | } 43 | return function cleanup() { 44 | if (navigator.platform.indexOf("Win") > -1) { 45 | ps.destroy(); 46 | } 47 | }; 48 | }); 49 | return ( 50 |
51 | 69 |
70 | 89 |
90 |
91 | ); 92 | } 93 | 94 | export default Sidebar; 95 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 "bootstrap/dist/css/bootstrap.css"; 23 | import "assets/scss/now-ui-dashboard.scss?v1.5.0"; 24 | import "assets/css/demo.css"; 25 | 26 | import AdminLayout from "layouts/Admin.js"; 27 | 28 | const root = ReactDOM.createRoot(document.getElementById("root")); 29 | 30 | root.render( 31 | 32 | 33 | } /> 34 | } /> 35 | 36 | 37 | ); 38 | -------------------------------------------------------------------------------- /src/layouts/Admin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | // javascript plugin used to create scrollbars on windows 20 | import PerfectScrollbar from "perfect-scrollbar"; 21 | 22 | // reactstrap components 23 | import { Route, Routes, Navigate, useLocation } from "react-router-dom"; 24 | 25 | // core components 26 | import DemoNavbar from "components/Navbars/DemoNavbar.js"; 27 | import Footer from "components/Footer/Footer.js"; 28 | import Sidebar from "components/Sidebar/Sidebar.js"; 29 | import FixedPlugin from "components/FixedPlugin/FixedPlugin.js"; 30 | 31 | import routes from "routes.js"; 32 | 33 | var ps; 34 | 35 | function Admin(props) { 36 | const location = useLocation(); 37 | const [backgroundColor, setBackgroundColor] = React.useState("blue"); 38 | const mainPanel = React.useRef(); 39 | React.useEffect(() => { 40 | if (navigator.platform.indexOf("Win") > -1) { 41 | ps = new PerfectScrollbar(mainPanel.current); 42 | document.body.classList.toggle("perfect-scrollbar-on"); 43 | } 44 | return function cleanup() { 45 | if (navigator.platform.indexOf("Win") > -1) { 46 | ps.destroy(); 47 | document.body.classList.toggle("perfect-scrollbar-on"); 48 | } 49 | }; 50 | }); 51 | React.useEffect(() => { 52 | document.documentElement.scrollTop = 0; 53 | document.scrollingElement.scrollTop = 0; 54 | mainPanel.current.scrollTop = 0; 55 | }, [location]); 56 | const handleColorClick = (color) => { 57 | setBackgroundColor(color); 58 | }; 59 | return ( 60 |
61 | 62 |
63 | 64 | 65 | {routes.map((prop, key) => { 66 | return ( 67 | 73 | ); 74 | })} 75 | } 78 | /> 79 | 80 |
81 |
82 | 86 |
87 | ); 88 | } 89 | 90 | export default Admin; 91 | -------------------------------------------------------------------------------- /src/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 Notifications from "views/Notifications.js"; 20 | import Icons from "views/Icons.js"; 21 | import Typography from "views/Typography.js"; 22 | import TableList from "views/TableList.js"; 23 | import Maps from "views/Maps.js"; 24 | import Upgrade from "views/Upgrade.js"; 25 | import UserPage from "views/UserPage.js"; 26 | 27 | var dashRoutes = [ 28 | { 29 | path: "/dashboard", 30 | name: "Dashboard", 31 | icon: "design_app", 32 | component: , 33 | layout: "/admin", 34 | }, 35 | { 36 | path: "/icons", 37 | name: "Icons", 38 | icon: "design_image", 39 | component: , 40 | layout: "/admin", 41 | }, 42 | { 43 | path: "/maps", 44 | name: "Maps", 45 | icon: "location_map-big", 46 | component: , 47 | layout: "/admin", 48 | }, 49 | { 50 | path: "/notifications", 51 | name: "Notifications", 52 | icon: "ui-1_bell-53", 53 | component: , 54 | layout: "/admin", 55 | }, 56 | { 57 | path: "/user-page", 58 | name: "User Profile", 59 | icon: "users_single-02", 60 | component: , 61 | layout: "/admin", 62 | }, 63 | { 64 | path: "/extended-tables", 65 | name: "Table List", 66 | icon: "files_paper", 67 | component: , 68 | layout: "/admin", 69 | }, 70 | { 71 | path: "/typography", 72 | name: "Typography", 73 | icon: "design-2_ruler-pencil", 74 | component: , 75 | layout: "/admin", 76 | }, 77 | { 78 | pro: true, 79 | path: "/upgrade", 80 | name: "Upgrade to PRO", 81 | icon: "objects_spaceship", 82 | component: , 83 | layout: "/admin", 84 | }, 85 | ]; 86 | export default dashRoutes; 87 | -------------------------------------------------------------------------------- /src/variables/general.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | // ############################## 19 | // // // tasks list for Tasks card in Dashboard view 20 | // ############################# 21 | 22 | const tasks = [ 23 | { 24 | checked: true, 25 | text: 'Sign contract for "What are conference organizers afraid of?"', 26 | }, 27 | { 28 | checked: false, 29 | text: "Lines From Great Russian Literature? Or E-mails From My Boss?", 30 | }, 31 | { 32 | checked: true, 33 | text: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit", 34 | }, 35 | ]; 36 | 37 | // ############################## 38 | // // // table head data and table body data for Tables view 39 | // ############################# 40 | 41 | const thead = ["Name", "Country", "City", "Salary"]; 42 | const tbody = [ 43 | { 44 | className: "table-success", 45 | data: ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738"], 46 | }, 47 | { 48 | className: "", 49 | data: ["Minerva Hooper", "Curaçao", "Sinaai-Waas", "$23,789"], 50 | }, 51 | { 52 | className: "table-info", 53 | data: ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"], 54 | }, 55 | { 56 | className: "", 57 | data: ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"], 58 | }, 59 | { 60 | className: "table-danger", 61 | data: ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"], 62 | }, 63 | { className: "", data: ["Mason Porter", "Chile", "Gloucester", "$78,615"] }, 64 | { 65 | className: "table-warning", 66 | data: ["Jon Porter", "Portugal", "Gloucester", "$98,615"], 67 | }, 68 | ]; 69 | 70 | // tasks list for Tasks card in Dashboard view 71 | // data for of table in TableList view 72 | // data for of table in TableList view 73 | export { tasks, thead, tbody }; 74 | -------------------------------------------------------------------------------- /src/variables/icons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | const icons = [ 19 | "arrows-1_cloud-download-93", 20 | "arrows-1_cloud-upload-94", 21 | "arrows-1_minimal-down", 22 | "arrows-1_minimal-left", 23 | "arrows-1_minimal-right", 24 | "arrows-1_minimal-up", 25 | "arrows-1_refresh-69", 26 | "arrows-1_share-66 ", 27 | "business_badge", 28 | "business_bank", 29 | "business_briefcase-24", 30 | "business_bulb-63", 31 | "business_chart-bar-32", 32 | "business_chart-pie-36", 33 | "business_globe", 34 | "business_money-coins", 35 | "clothes_tie-bow", 36 | "design_app", 37 | "design_bullet-list-67", 38 | "design_image", 39 | "design_palette", 40 | "design_scissors", 41 | "design_vector", 42 | "design-2_html5", 43 | "design-2_ruler-pencil", 44 | "emoticons_satisfied", 45 | "files_box", 46 | "files_paper", 47 | "files_single-copy-04", 48 | "health_ambulance", 49 | "loader_gear", 50 | "loader_refresh", 51 | "location_bookmark", 52 | "location_compass-05", 53 | "location_map-big", 54 | "location_pin", 55 | "location_world", 56 | "media-1_album", 57 | "media-1_button-pause", 58 | "media-1_button-play", 59 | "media-1_button-power", 60 | "media-1_camera-compact", 61 | "media-2_note-03", 62 | "media-2_sound-wave", 63 | "objects_diamond", 64 | "objects_globe", 65 | "objects_key-25", 66 | "objects_planet", 67 | "objects_spaceship", 68 | "objects_support-17", 69 | "objects_umbrella-13", 70 | "education_agenda-bookmark", 71 | "education_atom", 72 | "education_glasses", 73 | "education_hat", 74 | "education_paper", 75 | "shopping_bag-16", 76 | "shopping_basket", 77 | "shopping_box", 78 | "shopping_cart-simple", 79 | "shopping_credit-card", 80 | "shopping_delivery-fast", 81 | "shopping_shop", 82 | "shopping_tag-content", 83 | "sport_trophy", 84 | "sport_user-run", 85 | "tech_controller-modern", 86 | "tech_headphones", 87 | "tech_laptop", 88 | "tech_mobile", 89 | "tech_tablet", 90 | "tech_tv", 91 | "tech_watch-time", 92 | "text_align-center", 93 | "text_align-left", 94 | "text_bold", 95 | "text_caps-small", 96 | "gestures_tap-01", 97 | "transportation_air-baloon", 98 | "transportation_bus-front-12", 99 | "travel_info", 100 | "travel_istanbul", 101 | "ui-1_bell-53", 102 | "ui-1_check", 103 | "ui-1_calendar-60", 104 | "ui-1_lock-circle-open", 105 | "ui-1_send", 106 | "ui-1_settings-gear-63", 107 | "ui-1_simple-add", 108 | "ui-1_simple-delete", 109 | "ui-1_simple-remove", 110 | "ui-1_zoom-bold", 111 | "ui-2_chat-round", 112 | "ui-2_favourite-28", 113 | "ui-2_like", 114 | "ui-2_settings-90", 115 | "ui-2_time-alarm", 116 | "ui-1_email-85", 117 | "users_circle-08", 118 | "users_single-02", 119 | ]; 120 | 121 | export default icons; 122 | -------------------------------------------------------------------------------- /src/views/Icons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 { Card, CardHeader, CardBody, Row, Col } from "reactstrap"; 22 | 23 | // core components 24 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 25 | 26 | import icons from "variables/icons"; 27 | 28 | function Icons() { 29 | return ( 30 | <> 31 | 32 |
33 | 34 | 35 | 36 | 37 |
100 Awesome Nucleo Icons
38 |

39 | Handcrafted by our friends from{" "} 40 | NucleoApp 41 |

42 | 43 | 44 | 45 | {icons.map((prop, key) => { 46 | return ( 47 | 55 |
56 | 57 |

{prop}

58 |
59 | 60 | ); 61 | })} 62 | 63 | 64 | 65 | 66 | 67 |
68 | 69 | ); 70 | } 71 | 72 | export default Icons; 73 | -------------------------------------------------------------------------------- /src/views/Maps.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 { Row, Col, Card, CardHeader, CardBody } from "reactstrap"; 22 | 23 | // core components 24 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 25 | 26 | const MapWrapper = () => { 27 | const mapRef = React.useRef(null); 28 | React.useEffect(() => { 29 | let google = window.google; 30 | let map = mapRef.current; 31 | let lat = "40.748817"; 32 | let lng = "-73.985428"; 33 | const myLatlng = new google.maps.LatLng(lat, lng); 34 | const mapOptions = { 35 | zoom: 13, 36 | center: myLatlng, 37 | scrollwheel: false, 38 | zoomControl: true, 39 | styles: [ 40 | { 41 | featureType: "water", 42 | elementType: "geometry", 43 | stylers: [{ color: "#e9e9e9" }, { lightness: 17 }], 44 | }, 45 | { 46 | featureType: "landscape", 47 | elementType: "geometry", 48 | stylers: [{ color: "#f5f5f5" }, { lightness: 20 }], 49 | }, 50 | { 51 | featureType: "road.highway", 52 | elementType: "geometry.fill", 53 | stylers: [{ color: "#ffffff" }, { lightness: 17 }], 54 | }, 55 | { 56 | featureType: "road.highway", 57 | elementType: "geometry.stroke", 58 | stylers: [{ color: "#ffffff" }, { lightness: 29 }, { weight: 0.2 }], 59 | }, 60 | { 61 | featureType: "road.arterial", 62 | elementType: "geometry", 63 | stylers: [{ color: "#ffffff" }, { lightness: 18 }], 64 | }, 65 | { 66 | featureType: "road.local", 67 | elementType: "geometry", 68 | stylers: [{ color: "#ffffff" }, { lightness: 16 }], 69 | }, 70 | { 71 | featureType: "poi", 72 | elementType: "geometry", 73 | stylers: [{ color: "#f5f5f5" }, { lightness: 21 }], 74 | }, 75 | { 76 | featureType: "poi.park", 77 | elementType: "geometry", 78 | stylers: [{ color: "#dedede" }, { lightness: 21 }], 79 | }, 80 | { 81 | elementType: "labels.text.stroke", 82 | stylers: [ 83 | { visibility: "on" }, 84 | { color: "#ffffff" }, 85 | { lightness: 16 }, 86 | ], 87 | }, 88 | { 89 | elementType: "labels.text.fill", 90 | stylers: [ 91 | { saturation: 36 }, 92 | { color: "#333333" }, 93 | { lightness: 40 }, 94 | ], 95 | }, 96 | { elementType: "labels.icon", stylers: [{ visibility: "off" }] }, 97 | { 98 | featureType: "transit", 99 | elementType: "geometry", 100 | stylers: [{ color: "#f2f2f2" }, { lightness: 19 }], 101 | }, 102 | { 103 | featureType: "administrative", 104 | elementType: "geometry.fill", 105 | stylers: [{ color: "#fefefe" }, { lightness: 20 }], 106 | }, 107 | { 108 | featureType: "administrative", 109 | elementType: "geometry.stroke", 110 | stylers: [{ color: "#fefefe" }, { lightness: 17 }, { weight: 1.2 }], 111 | }, 112 | ], 113 | }; 114 | 115 | map = new google.maps.Map(map, mapOptions); 116 | 117 | const marker = new google.maps.Marker({ 118 | position: myLatlng, 119 | map: map, 120 | animation: google.maps.Animation.DROP, 121 | title: "Now UI Dashboard React!", 122 | }); 123 | 124 | const contentString = 125 | '

Now UI Dashboard React

' + 126 | "

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

"; 127 | 128 | const infowindow = new google.maps.InfoWindow({ 129 | content: contentString, 130 | }); 131 | 132 | google.maps.event.addListener(marker, "click", function () { 133 | infowindow.open(map, marker); 134 | }); 135 | }); 136 | return ( 137 | <> 138 |
139 | 140 | ); 141 | }; 142 | 143 | function FullScreenMap() { 144 | return ( 145 | <> 146 | 147 |
148 | 149 | 150 | 151 | Google Maps 152 | 153 |
158 | 159 |
160 | 161 | 162 | 163 | 164 |
165 | 166 | ); 167 | } 168 | 169 | export default FullScreenMap; 170 | -------------------------------------------------------------------------------- /src/views/Notifications.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | // react plugin for creating notifications over the dashboard 20 | import NotificationAlert from "react-notification-alert"; 21 | 22 | // reactstrap components 23 | import { 24 | Alert, 25 | Card, 26 | CardTitle, 27 | CardBody, 28 | CardHeader, 29 | Row, 30 | Col, 31 | Button, 32 | } from "reactstrap"; 33 | 34 | // core components 35 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 36 | 37 | function Notifications() { 38 | const notificationAlert = React.useRef(); 39 | const notify = (place) => { 40 | var color = Math.floor(Math.random() * 5 + 1); 41 | var type; 42 | switch (color) { 43 | case 1: 44 | type = "primary"; 45 | break; 46 | case 2: 47 | type = "success"; 48 | break; 49 | case 3: 50 | type = "danger"; 51 | break; 52 | case 4: 53 | type = "warning"; 54 | break; 55 | case 5: 56 | type = "info"; 57 | break; 58 | default: 59 | break; 60 | } 61 | var options = {}; 62 | options = { 63 | place: place, 64 | message: ( 65 |
66 |
67 | Welcome to Now UI Dashboard React - a beautiful freebie for 68 | every web developer. 69 |
70 |
71 | ), 72 | type: type, 73 | icon: "now-ui-icons ui-1_bell-53", 74 | autoDismiss: 7, 75 | }; 76 | notificationAlert.current.notificationAlert(options); 77 | }; 78 | return ( 79 | <> 80 | 83 |

Notifications

84 |

85 | Please Checkout{" "} 86 | 91 | The Full Documentation 92 | 93 | . 94 |

95 | 96 | } 97 | /> 98 |
99 | 100 | 101 | 102 | 103 | 104 | Notifications Style 105 | 106 | 107 | 108 | This is a plain notification 109 | 110 | {}}> 111 | This is a notification with close button. 112 | 113 | {}} 118 | > 119 | 123 | 124 | This is a notification with close button and icon. 125 | 126 | 127 | {}} 132 | > 133 | 137 | 138 | This is a notification with close button and icon and have 139 | many lines. You can see that the icon and the close button 140 | are always vertically aligned. This is a beautiful 141 | notification. So you don't have to worry about the style. 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | Notification states 151 | 152 | 153 | {}}> 154 | 155 | Primary - This is a regular notification made with 156 | color="primary" 157 | 158 | 159 | {}}> 160 | 161 | Info - This is a regular notification made with 162 | color="info" 163 | 164 | 165 | {}}> 166 | 167 | Success - This is a regular notification made with 168 | color="success" 169 | 170 | 171 | {}}> 172 | 173 | Warning - This is a regular notification made with 174 | color="warning" 175 | 176 | 177 | {}}> 178 | 179 | Danger - This is a regular notification made with 180 | color="danger" 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 |
190 | 191 | 192 | 193 | Notifications Places 194 |

Click to view notifications

195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 209 | 210 | 211 | 218 | 219 | 220 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 242 | 243 | 244 | 251 | 252 | 253 | 260 | 261 | 262 | 263 | 264 |
265 | 266 | 267 | 268 | 269 |
270 | 271 | ); 272 | } 273 | 274 | export default Notifications; 275 | -------------------------------------------------------------------------------- /src/views/TableList.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | CardBody, 24 | CardHeader, 25 | CardTitle, 26 | Table, 27 | Row, 28 | Col, 29 | } from "reactstrap"; 30 | 31 | // core components 32 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 33 | 34 | import { thead, tbody } from "variables/general"; 35 | 36 | function RegularTables() { 37 | return ( 38 | <> 39 | 40 |
41 | 42 | 43 | 44 | 45 | Simple Table 46 | 47 | 48 | 49 | 50 | 51 | {thead.map((prop, key) => { 52 | if (key === thead.length - 1) 53 | return ( 54 | 57 | ); 58 | return ; 59 | })} 60 | 61 | 62 | 63 | {tbody.map((prop, key) => { 64 | return ( 65 | 66 | {prop.data.map((prop, key) => { 67 | if (key === thead.length - 1) 68 | return ( 69 | 72 | ); 73 | return ; 74 | })} 75 | 76 | ); 77 | })} 78 | 79 |
55 | {prop} 56 | {prop}
70 | {prop} 71 | {prop}
80 | 81 | 82 | 83 | 84 | 85 | 86 | Table on Plain Background 87 |

Here is a subtitle for this table

88 | 89 | 90 | 91 | 92 | 93 | {thead.map((prop, key) => { 94 | if (key === thead.length - 1) 95 | return ( 96 | 99 | ); 100 | return ; 101 | })} 102 | 103 | 104 | 105 | {tbody.map((prop, key) => { 106 | return ( 107 | 108 | {prop.data.map((prop, key) => { 109 | if (key === thead.length - 1) 110 | return ( 111 | 114 | ); 115 | return ; 116 | })} 117 | 118 | ); 119 | })} 120 | 121 |
97 | {prop} 98 | {prop}
112 | {prop} 113 | {prop}
122 | 123 | 124 | 125 | 126 |
127 | 128 | ); 129 | } 130 | 131 | export default RegularTables; 132 | -------------------------------------------------------------------------------- /src/views/Typography.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 { Card, CardHeader, CardBody, Row, Col } from "reactstrap"; 22 | 23 | // core components 24 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 25 | 26 | function Typography() { 27 | return ( 28 | <> 29 | 30 |
31 | 32 | 33 | 34 | 35 |
Now Ui Table Heading
36 |

Created using Montserrat Font Family

37 | 38 | 39 |
40 |

41 | Header 1The Life of Now Ui Dashboard{" "} 42 |

43 |
44 |
45 |

46 | Header 2The Life of Now Ui Dashboard{" "} 47 |

48 |
49 |
50 |

51 | Header 3The Life of Now Ui Dashboard{" "} 52 |

53 |
54 |
55 |

56 | Header 4The Life of Now Ui Dashboard{" "} 57 |

58 |
59 |
60 |
61 | Header 5The Life of Now Ui Dashboard{" "} 62 |
63 |
64 |
65 |
66 | Header 6The Life of Now Ui Dashboard{" "} 67 |
68 |
69 |
70 |

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

77 |
78 |
79 | Quote 80 |
81 |

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

91 |
92 |
93 | 94 |
95 | Muted Text 96 |

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

100 |
101 |
102 | Primary Text 103 |

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

107 |
108 |
109 | Info Text 110 |

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

114 |
115 |
116 | Success Text 117 |

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

121 |
122 |
123 | Warning Text 124 |

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

128 |
129 |
130 | Danger Text 131 |

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

135 |
136 |
137 |

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

142 |
143 | 144 | 145 | 146 | 147 |
148 | 149 | ); 150 | } 151 | 152 | export default Typography; 153 | -------------------------------------------------------------------------------- /src/views/Upgrade.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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, { Component } from "react"; 19 | 20 | // reactstrap components 21 | import { 22 | Table, 23 | Row, 24 | Col, 25 | Card, 26 | CardBody, 27 | CardHeader, 28 | CardTitle, 29 | Button, 30 | } from "reactstrap"; 31 | 32 | // core components 33 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 34 | 35 | function Upgrade() { 36 | return ( 37 | <> 38 | 39 |
40 | 41 | 42 | 43 | 44 | Now UI Dashboard PRO React 45 |

46 | Are you looking for more components? Please check our Premium 47 | Version of Now UI Dashboard React. 48 |

49 | 50 | 51 | 52 | 53 | 54 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 80 | 83 | 84 | 85 | 86 | 89 | 92 | 93 | 94 | 95 | 98 | 101 | 102 | 103 | 104 | 107 | 110 | 111 | 112 | 114 | 115 | 116 | 117 | 123 | 133 | 134 | 135 |
55 | FreePRO
Components16160
Plugins513
Example Pages727
Documentation 78 | 79 | 81 | 82 |
SASS Files 87 | 88 | 90 | 91 |
Login/Register/Lock Pages 96 | 97 | 99 | 100 |
Premium Support 105 | 106 | 108 | 109 |
113 | FreeFrom $59
118 | 119 | 122 | 124 | 132 |
136 | 137 | 138 | 139 | 140 |
141 | 142 | ); 143 | } 144 | 145 | export default Upgrade; 146 | -------------------------------------------------------------------------------- /src/views/UserPage.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now UI Dashboard React - v1.5.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/now-ui-dashboard-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-dashboard-react/blob/main/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 | FormGroup, 27 | Form, 28 | Input, 29 | Row, 30 | Col, 31 | } from "reactstrap"; 32 | 33 | // core components 34 | import PanelHeader from "components/PanelHeader/PanelHeader.js"; 35 | 36 | function User() { 37 | return ( 38 | <> 39 | 40 |
41 | 42 | 43 | 44 | 45 |
Edit Profile
46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 59 | 60 | 61 | 62 | 63 | 64 | 69 | 70 | 71 | 72 | 73 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 89 | 90 | 91 | 92 | 93 | 94 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 123 | 124 | 125 | 126 | 127 | 128 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 154 | 155 | 156 | 157 |
158 | 159 | 160 | 161 | 162 | 163 |
164 | ... 165 |
166 | 167 | 178 |

179 | "Lamborghini Mercy
180 | Your chick she so thirsty
181 | I'm in that two seat Lambo" 182 |

183 | 184 |
185 |
186 | 195 | 204 | 213 |
214 | 215 | 216 | 217 |
218 | 219 | ); 220 | } 221 | 222 | export default User; 223 | --------------------------------------------------------------------------------