├── .env
├── .github
    └── workflows
    │   └── main.yml
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── Documentation
    └── documentation.html
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── genezio.yaml
├── jsconfig.json
├── package.json
├── public
    ├── apple-icon.png
    ├── favicon.ico
    ├── index.html
    └── manifest.json
└── src
    ├── assets
        ├── css
        │   ├── argon-dashboard-react.css
        │   ├── argon-dashboard-react.css.map
        │   └── argon-dashboard-react.min.css
        ├── fonts
        │   ├── nucleo.eot
        │   ├── nucleo.ttf
        │   ├── nucleo.woff
        │   └── nucleo.woff2
        ├── img
        │   ├── brand
        │   │   ├── argon-react-white.png
        │   │   ├── argon-react.png
        │   │   ├── blue.png
        │   │   ├── favicon.png
        │   │   └── white.png
        │   ├── icons
        │   │   └── common
        │   │   │   ├── github.svg
        │   │   │   └── google.svg
        │   └── theme
        │   │   ├── angular.jpg
        │   │   ├── bootstrap.jpg
        │   │   ├── profile-cover.jpg
        │   │   ├── react.jpg
        │   │   ├── sketch.jpg
        │   │   ├── team-1-800x800.jpg
        │   │   ├── team-2-800x800.jpg
        │   │   ├── team-3-800x800.jpg
        │   │   ├── team-4-800x800.jpg
        │   │   └── vue.jpg
        ├── plugins
        │   └── nucleo
        │   │   ├── css
        │   │       ├── nucleo-svg.css
        │   │       └── nucleo.css
        │   │   └── fonts
        │   │       ├── nucleo-icons.eot
        │   │       ├── nucleo-icons.svg
        │   │       ├── nucleo-icons.ttf
        │   │       ├── nucleo-icons.woff
        │   │       └── nucleo-icons.woff2
        └── scss
        │   ├── argon-dashboard-react.scss
        │   ├── argon-dashboard
        │       ├── custom
        │       │   ├── _alert.scss
        │       │   ├── _avatar.scss
        │       │   ├── _badge.scss
        │       │   ├── _buttons.scss
        │       │   ├── _card.scss
        │       │   ├── _chart.scss
        │       │   ├── _close.scss
        │       │   ├── _components.scss
        │       │   ├── _content.scss
        │       │   ├── _custom-forms.scss
        │       │   ├── _dropdown.scss
        │       │   ├── _footer.scss
        │       │   ├── _forms.scss
        │       │   ├── _functions.scss
        │       │   ├── _header.scss
        │       │   ├── _icons.scss
        │       │   ├── _input-group.scss
        │       │   ├── _list-group.scss
        │       │   ├── _map.scss
        │       │   ├── _mask.scss
        │       │   ├── _mixins.scss
        │       │   ├── _modal.scss
        │       │   ├── _nav.scss
        │       │   ├── _navbar.scss
        │       │   ├── _pagination.scss
        │       │   ├── _popover.scss
        │       │   ├── _progress.scss
        │       │   ├── _reboot.scss
        │       │   ├── _section.scss
        │       │   ├── _separator.scss
        │       │   ├── _tables.scss
        │       │   ├── _type.scss
        │       │   ├── _utilities.scss
        │       │   ├── _variables.scss
        │       │   ├── _vendors.scss
        │       │   ├── alerts
        │       │   │   ├── _alert-dismissible.scss
        │       │   │   └── _alert.scss
        │       │   ├── avatars
        │       │   │   ├── _avatar-group.scss
        │       │   │   └── _avatar.scss
        │       │   ├── badges
        │       │   │   ├── _badge-circle.scss
        │       │   │   ├── _badge-dot.scss
        │       │   │   └── _badge.scss
        │       │   ├── buttons
        │       │   │   ├── _button-brand.scss
        │       │   │   ├── _button-icon.scss
        │       │   │   └── _button.scss
        │       │   ├── cards
        │       │   │   ├── _card-animations.scss
        │       │   │   ├── _card-blockquote.scss
        │       │   │   ├── _card-profile.scss
        │       │   │   ├── _card-stats.scss
        │       │   │   └── _card.scss
        │       │   ├── charts
        │       │   │   └── _chart.scss
        │       │   ├── close
        │       │   │   └── _close.scss
        │       │   ├── custom-forms
        │       │   │   ├── _custom-checkbox.scss
        │       │   │   ├── _custom-control.scss
        │       │   │   ├── _custom-form.scss
        │       │   │   ├── _custom-radio.scss
        │       │   │   └── _custom-toggle.scss
        │       │   ├── dropdowns
        │       │   │   └── _dropdown.scss
        │       │   ├── footers
        │       │   │   └── _footer.scss
        │       │   ├── forms
        │       │   │   ├── _form-validation.scss
        │       │   │   ├── _form.scss
        │       │   │   └── _input-group.scss
        │       │   ├── headers
        │       │   │   └── _header.scss
        │       │   ├── icons
        │       │   │   ├── _icon-shape.scss
        │       │   │   └── _icon.scss
        │       │   ├── list-groups
        │       │   │   └── _list-group.scss
        │       │   ├── maps
        │       │   │   └── _map.scss
        │       │   ├── masks
        │       │   │   └── _mask.scss
        │       │   ├── mixins
        │       │   │   ├── _alert.scss
        │       │   │   ├── _background-variant.scss
        │       │   │   ├── _badge.scss
        │       │   │   ├── _buttons.scss
        │       │   │   ├── _forms.scss
        │       │   │   ├── _icon.scss
        │       │   │   ├── _modals.scss
        │       │   │   └── _popover.scss
        │       │   ├── modals
        │       │   │   └── _modal.scss
        │       │   ├── navbars
        │       │   │   ├── _navbar-collapse.scss
        │       │   │   ├── _navbar-dropdown.scss
        │       │   │   ├── _navbar-search.scss
        │       │   │   ├── _navbar-vertical.scss
        │       │   │   └── _navbar.scss
        │       │   ├── navs
        │       │   │   ├── _nav-pills.scss
        │       │   │   └── _nav.scss
        │       │   ├── paginations
        │       │   │   └── _pagination.scss
        │       │   ├── popovers
        │       │   │   └── _popover.scss
        │       │   ├── progresses
        │       │   │   └── _progress.scss
        │       │   ├── separators
        │       │   │   └── _separator.scss
        │       │   ├── tables
        │       │   │   └── _table.scss
        │       │   ├── type
        │       │   │   ├── _article.scss
        │       │   │   ├── _display.scss
        │       │   │   ├── _heading.scss
        │       │   │   └── _type.scss
        │       │   ├── utilities
        │       │   │   ├── _backgrounds.scss
        │       │   │   ├── _blurable.scss
        │       │   │   ├── _floating.scss
        │       │   │   ├── _helper.scss
        │       │   │   ├── _image.scss
        │       │   │   ├── _opacity.scss
        │       │   │   ├── _overflow.scss
        │       │   │   ├── _position.scss
        │       │   │   ├── _shadows.scss
        │       │   │   ├── _sizing.scss
        │       │   │   ├── _spacing.scss
        │       │   │   ├── _text.scss
        │       │   │   └── _transform.scss
        │       │   └── vendors
        │       │   │   ├── _bootstrap-datepicker.scss
        │       │   │   ├── _headroom.scss
        │       │   │   ├── _nouislider.scss
        │       │   │   └── _scrollbar.scss
        │       └── docs
        │       │   ├── _clipboard-js.scss
        │       │   ├── _component-examples.scss
        │       │   ├── _content.scss
        │       │   ├── _footer.scss
        │       │   ├── _nav.scss
        │       │   ├── _prism.scss
        │       │   ├── _sidebar.scss
        │       │   └── _variables.scss
        │   └── react
        │       ├── _buttons.scss
        │       ├── _mixins.scss
        │       ├── _navbar-dropdown.scss
        │       ├── _navbar.scss
        │       ├── _tables.scss
        │       ├── bootstrap
        │           └── _spinners.scss
        │       ├── plugins
        │           └── _plugin-react-datetime.scss
        │       └── react-differences.scss
    ├── components
        ├── Footers
        │   ├── AdminFooter.js
        │   └── AuthFooter.js
        ├── Headers
        │   ├── Header.js
        │   └── UserHeader.js
        ├── Navbars
        │   ├── AdminNavbar.js
        │   └── AuthNavbar.js
        └── Sidebar
        │   └── Sidebar.js
    ├── index.js
    ├── layouts
        ├── Admin.js
        └── Auth.js
    ├── routes.js
    ├── variables
        └── charts.js
    └── views
        ├── Index.js
        └── examples
            ├── Icons.js
            ├── Login.js
            ├── Maps.js
            ├── Profile.js
            ├── Register.js
            └── Tables.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<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/argon-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</pre>\n\n"
12 |         issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 | /node_modules
3 | package-lock.json
4 | /build
5 | .eslintcache
6 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 | auto-install-peers=true
3 | strict-peer-dependencies=false


--------------------------------------------------------------------------------
/Documentation/documentation.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | /*!
  3 | 
  4 | =========================================================
  5 | * Argon Dashboard React - v1.2.4
  6 | =========================================================
  7 | 
  8 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  9 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 10 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 11 | 
 12 | * Coded by Creative Tim
 13 | 
 14 | =========================================================
 15 | 
 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 17 | 
 18 | */
 19 | -->
 20 | <!DOCTYPE html>
 21 | <html>
 22 |   <head>
 23 |     <meta charset="utf-8" />
 24 |     <meta
 25 |       name="viewport"
 26 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 27 |     />
 28 |     <meta
 29 |       name="description"
 30 |       content="Start your development with a Dashboard for Bootstrap 4."
 31 |     />
 32 |     <meta name="author" content="Creative Tim" />
 33 |     <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
 34 |     <!-- Favicon -->
 35 |     <link href="../public/apple-icon.png" rel="icon" type="image/png" />
 36 |     <!-- Fonts -->
 37 |     <link
 38 |       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
 39 |       rel="stylesheet"
 40 |     />
 41 |     <!-- Icons -->
 42 |     <link href="../src/assets/vendor/nucleo/css/nucleo.css" rel="stylesheet" />
 43 |     <link
 44 |       href="../src/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
 45 |       rel="stylesheet"
 46 |     />
 47 |     <!-- Argon CSS -->
 48 |     <link
 49 |       type="text/css"
 50 |       href="../src/assets/css/argon-dashboard-react.css?v=1.2.1"
 51 |       rel="stylesheet"
 52 |     />
 53 |   </head>
 54 | 
 55 |   <body>
 56 |     <!-- Main content -->
 57 |     <div class="main-content">
 58 |       <!-- Top navbar -->
 59 |       <nav
 60 |         class="navbar navbar-top navbar-expand-md navbar-dark"
 61 |         id="navbar-main"
 62 |       >
 63 |         <div class="container-fluid">
 64 |           <!-- Brand -->
 65 |           <a
 66 |             class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block"
 67 |             href="https://demos.creative-tim.com/argon-dashboard-react/#/documentation/overview"
 68 |             >Documentation</a
 69 |           >
 70 |           <!-- Form -->
 71 |           <form
 72 |             class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto"
 73 |           >
 74 |             <div class="form-group mb-0">
 75 |               <div class="input-group input-group-alternative">
 76 |                 <div class="input-group-prepend">
 77 |                   <span class="input-group-text"
 78 |                     ><i class="fas fa-search"></i
 79 |                   ></span>
 80 |                 </div>
 81 |                 <input class="form-control" placeholder="Search" type="text" />
 82 |               </div>
 83 |             </div>
 84 |           </form>
 85 |           <!-- User -->
 86 |           <ul class="navbar-nav align-items-center d-none d-md-flex">
 87 |             <li class="nav-item dropdown">
 88 |               <a
 89 |                 class="nav-link pr-0"
 90 |                 href="#"
 91 |                 role="button"
 92 |                 data-toggle="dropdown"
 93 |                 aria-haspopup="true"
 94 |                 aria-expanded="false"
 95 |               >
 96 |                 <div class="media align-items-center">
 97 |                   <span class="avatar avatar-sm rounded-circle">
 98 |                     <img
 99 |                       alt="Image placeholder"
100 |                       src="../src/assets/img/theme/team-4-800x800.jpg"
101 |                     />
102 |                   </span>
103 |                   <div class="media-body ml-2 d-none d-lg-block">
104 |                     <span class="mb-0 text-sm font-weight-bold"
105 |                       >Jessica Jones</span
106 |                     >
107 |                   </div>
108 |                 </div>
109 |               </a>
110 |               <div
111 |                 class="dropdown-menu dropdown-menu-arrow dropdown-menu-right"
112 |               >
113 |                 <div class="dropdown-header noti-title">
114 |                   <h6 class="text-overflow m-0">Welcome!</h6>
115 |                 </div>
116 |                 <a href="#pablo" class="dropdown-item">
117 |                   <i class="ni ni-single-02"></i> <span>My profile</span>
118 |                 </a>
119 |                 <a href="#pablo" class="dropdown-item">
120 |                   <i class="ni ni-settings-gear-65"></i> <span>Settings</span>
121 |                 </a>
122 |                 <a href="#pablo" class="dropdown-item">
123 |                   <i class="ni ni-calendar-grid-58"></i> <span>Activity</span>
124 |                 </a>
125 |                 <a href="#pablo" class="dropdown-item">
126 |                   <i class="ni ni-support-16"></i> <span>Support</span>
127 |                 </a>
128 |                 <div class="dropdown-divider"></div>
129 |                 <a href="#pablo" class="dropdown-item">
130 |                   <i class="ni ni-user-run"></i> <span>Logout</span>
131 |                 </a>
132 |               </div>
133 |             </li>
134 |           </ul>
135 |         </div>
136 |       </nav>
137 |       <!-- Header -->
138 |       <div
139 |         class="header bg-gradient-primary pb-8 pt-5 pt-lg-8 d-flex align-items-center"
140 |       >
141 |         <!-- Header container -->
142 |         <div class="container-fluid">
143 |           <div class="row justify-content-center">
144 |             <div class="col-lg-6 col-md-10 text-center">
145 |               <h1 class="display-2 text-white">
146 |                 Documentation <small>v1.2.1</small>
147 |               </h1>
148 |               <p class="text-white mt-0 mb-5">
149 |                 We are constatly doing updates on the product and documentation,
150 |                 so please check the online version.
151 |               </p>
152 |             </div>
153 |           </div>
154 |         </div>
155 |       </div>
156 |       <!-- Page content -->
157 |       <div class="container-fluid mt--7">
158 |         <div class="row justify-content-center">
159 |           <div class="col-lg-4">
160 |             <div class="card bg-gradient-default text-center p-5">
161 |               <a
162 |                 href="https://demos.creative-tim.com/argon-dashboard-react/#/documentation/overview"
163 |                 class="btn btn-white btn-icon mb-3 mb-sm-0"
164 |               >
165 |                 <span class="btn-inner--icon"
166 |                   ><i class="ni ni-collection"></i
167 |                 ></span>
168 |                 <span class="btn-inner--text">View Docs Online</span>
169 |               </a>
170 |             </div>
171 |           </div>
172 |         </div>
173 |         <!-- Footer -->
174 |       </div>
175 |     </div>
176 |     <!-- Argon Scripts -->
177 |     <!-- Core -->
178 |     <script
179 |       src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
180 |       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
181 |       crossorigin="anonymous"
182 |     ></script>
183 |     <script
184 |       src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
185 |       integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
186 |       crossorigin="anonymous"
187 |     ></script>
188 |     <script
189 |       src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
190 |       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
191 |       crossorigin="anonymous"
192 |     ></script>
193 |   </body>
194 | </html>
195 | 


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  IMPORTANT: Please use the following link to create a new issue:
 3 | 
 4 |   https://www.creative-tim.com/new-issue/argon-dashboard-react
 5 | 
 6 | **If your issue was not created using the app above, it will be closed immediately.**
 7 | -->
 8 | 
 9 | <!--
10 | Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
11 | 👉  https://www.creative-tim.com/bundles
12 | 👉  https://www.creative-tim.com
13 | -->
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 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: argon-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
17 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": "src",
4 |     "paths": {
5 |       "*": ["src/*"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "argon-dashboard-react",
 3 |   "version": "1.2.4",
 4 |   "description": "React version of Argon Dashboard by Creative Tim",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/creativetimofficial/argon-dashboard-react.git"
 9 |   },
10 |   "keywords": [
11 |     "react",
12 |     "reactjs",
13 |     "argon",
14 |     "argon-react",
15 |     "dashboard",
16 |     "dashboard-react",
17 |     "argon-dashboard",
18 |     "argon-dashboard-react"
19 |   ],
20 |   "author": "Creative Tim",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/creativetimofficial/argon-dashboard-react/issues"
24 |   },
25 |   "homepage": "https://demos.creative-tim.com/argon-dashboard-react/",
26 |   "scripts": {
27 |     "start": "react-scripts start",
28 |     "build": "cross-env PUBLIC_URL=/ react-scripts build",
29 |     "test": "react-scripts test",
30 |     "eject": "react-scripts eject",
31 |     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
32 |     "compile:scss": "sass src/assets/scss/argon-dashboard-react.scss src/assets/css/argon-dashboard-react.css",
33 |     "minify:scss": "sass src/assets/scss/argon-dashboard-react.scss src/assets/css/argon-dashboard-react.min.css --style compressed",
34 |     "build:scss": "npm run compile:scss && npm run minify:scss && npm run map:scss"
35 |   },
36 |   "eslintConfig": {
37 |     "extends": "react-app"
38 |   },
39 |   "browserslist": [
40 |     ">0.2%",
41 |     "not dead",
42 |     "not ie <= 11",
43 |     "not op_mini all"
44 |   ],
45 |   "dependencies": {
46 |     "@fortawesome/fontawesome-free": "6.5.1",
47 |     "ajv": "^8.16.0",
48 |     "bootstrap": "4.6.2",
49 |     "chart.js": "2.9.4",
50 |     "classnames": "2.3.2",
51 |     "moment": "2.29.4",
52 |     "nouislider": "15.4.0",
53 |     "react": "18.2.0",
54 |     "react-chartjs-2": "2.11.2",
55 |     "react-copy-to-clipboard": "5.1.0",
56 |     "react-datetime": "3.2.0",
57 |     "react-dom": "18.2.0",
58 |     "react-router-dom": "6.21.1",
59 |     "react-scripts": "5.0.1",
60 |     "reactstrap": "8.10.0",
61 |     "sass": "1.69.5"
62 |   },
63 |   "devDependencies": {
64 |     "gulp": "4.0.2",
65 |     "gulp-append-prepend": "1.0.9",
66 |     "cross-env": "^7.0.3"
67 |   },
68 |   "optionalDependencies": {
69 |     "eslint-plugin-flowtype": "8.0.3",
70 |     "typescript": "5.3.3"
71 |   },
72 |   "overrides": {
73 |     "svgo": "3.0.2",
74 |     "fsevents": "2.3.2",
75 |     "chokidar": "3.5.3"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/public/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/public/apple-icon.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /*!
 3 | 
 4 | =========================================================
 5 | * Argon Dashboard React - v1.2.4
 6 | =========================================================
 7 | 
 8 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 9 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
10 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
11 | 
12 | * Coded by Creative Tim
13 | 
14 | =========================================================
15 | 
16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
17 | 
18 | */
19 | -->
20 | 
21 | <!DOCTYPE html>
22 | <html lang="en" class="perfect-scrollbar-off nav-open">
23 |   <head>
24 |     <meta charset="utf-8" />
25 |     <meta
26 |       name="viewport"
27 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
28 |     />
29 |     <meta name="theme-color" content="#000000" />
30 |     <!--
31 |       manifest.json provides metadata used when your web app is added to the
32 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
33 |     -->
34 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
35 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
36 |     <link
37 |       rel="apple-touch-icon"
38 |       sizes="76x76"
39 |       href="%PUBLIC_URL%/apple-icon.png"
40 |     />
41 |     <!-- Fonts -->
42 |     <link
43 |       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
44 |       rel="stylesheet"
45 |     />
46 |     <title>Argon Dashboard React by Creative Tim</title>
47 |     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
48 |   </head>
49 |   <body>
50 |     <noscript> You need to enable JavaScript to run this app. </noscript>
51 |     <div id="root"></div>
52 |     <!--
53 |       This HTML file is a template.
54 |       If you open it directly in the browser, you will see an empty page.
55 | 
56 |       You can add webfonts, meta tags, or analytics to this file.
57 |       The build step will place the bundled scripts into the <body> tag.
58 | 
59 |       To begin the development, run `npm start` or `yarn start`.
60 |       To create a production bundle, use `npm run build` or `yarn build`.
61 |     -->
62 |   </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Argon Dashboard React",
 3 |   "name": "Argon Dashboard React by Creative Tim",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/assets/fonts/nucleo.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/fonts/nucleo.eot


--------------------------------------------------------------------------------
/src/assets/fonts/nucleo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/fonts/nucleo.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/nucleo.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/fonts/nucleo.woff


--------------------------------------------------------------------------------
/src/assets/fonts/nucleo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/fonts/nucleo.woff2


--------------------------------------------------------------------------------
/src/assets/img/brand/argon-react-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/brand/argon-react-white.png


--------------------------------------------------------------------------------
/src/assets/img/brand/argon-react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/brand/argon-react.png


--------------------------------------------------------------------------------
/src/assets/img/brand/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/brand/blue.png


--------------------------------------------------------------------------------
/src/assets/img/brand/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/brand/favicon.png


--------------------------------------------------------------------------------
/src/assets/img/brand/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/brand/white.png


--------------------------------------------------------------------------------
/src/assets/img/icons/common/github.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>UI/icons/dark/github</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs/>
 7 |     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="UI/icons/dark/github" fill="#182359">
 9 |             <path d="M17.9985267,2 C9.16436969,2 2,9.16338746 2,18.0004911 C2,25.0695847 6.58405721,31.0660855 12.9420179,33.1818042 C13.7425335,33.3291384 14.0342552,32.8350778 14.0342552,32.4107554 C14.0342552,32.0306332 14.020504,31.0248319 14.0126462,29.6899843 C9.56217195,30.6564965 8.62316216,27.5447988 8.62316216,27.5447988 C7.89533135,25.696246 6.84631204,25.2041499 6.84631204,25.2041499 C5.3935971,24.2120998 6.95632156,24.2317444 6.95632156,24.2317444 C8.56226404,24.3447006 9.40697996,25.8809049 9.40697996,25.8809049 C10.834157,28.3256699 13.1522146,27.6194481 14.063722,27.2098591 C14.2090917,26.1765554 14.6226097,25.4713159 15.0793456,25.0715492 C11.5266276,24.6678535 7.7912152,23.294699 7.7912152,17.163633 C7.7912152,15.417232 8.41492986,13.9880905 9.43841125,12.8703152 C9.27339697,12.4656374 8.72433162,10.8380859 9.5955677,8.63593112 C9.5955677,8.63593112 10.9382731,8.20571534 13.9949661,10.2762516 C15.27088,9.9206851 16.6401056,9.7438841 18.0004911,9.7370085 C19.3598944,9.7438841 20.7281378,9.9206851 22.0060161,10.2762516 C25.0607447,8.20571534 26.4014856,8.63593112 26.4014856,8.63593112 C27.2746861,10.8380859 26.7256208,12.4656374 26.5615888,12.8703152 C27.5870346,13.9880905 28.2058381,15.417232 28.2058381,17.163633 C28.2058381,23.3104147 24.4645324,24.6629424 20.9010099,25.0587802 C21.4746309,25.5528408 21.9863716,26.5291752 21.9863716,28.0211793 C21.9863716,30.1604715 21.966727,31.8862457 21.966727,32.4107554 C21.966727,32.8390067 22.255502,33.3369962 23.0668222,33.180822 C29.4198717,31.0601921 34,25.0676202 34,18.0004911 C34,9.16338746 26.8356303,2 17.9985267,2" id="icons/icon-github"/>
10 |         </g>
11 |     </g>
12 | </svg>


--------------------------------------------------------------------------------
/src/assets/img/icons/common/google.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>UI/icons/color/google</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs/>
 7 |     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="UI/icons/color/google">
 9 |             <g id="Group" transform="translate(2.000000, 2.000000)">
10 |                 <path d="M32.4365525,16.6024012 C32.4365525,15.4515967 32.3313665,14.344128 32.1357206,13.2820585 L16.5492615,13.2820585 L16.5492615,19.5616128 L25.4557094,19.5616128 C25.0721312,21.5908257 23.9059692,23.3098098 22.1535707,24.4613022 L22.1535707,28.5341733 L27.5019274,28.5341733 C30.631561,25.7077204 32.4365525,21.5461142 32.4365525,16.6024012 L32.4365525,16.6024012 Z" id="Shape" fill="#4285F4"/>
11 |                 <path d="M16.5492615,32.4674071 C21.0175621,32.4674071 24.7635856,31.0139403 27.5019274,28.5341733 L22.1535707,24.4613022 C20.6718508,25.4353244 18.7756982,26.0110706 16.5492615,26.0110706 C12.2387399,26.0110706 8.59088994,23.1557272 7.2893887,19.3181072 L1.76011213,19.3181072 L1.76011213,23.5244249 C4.48302664,28.8299569 10.0796222,32.4674071 16.5492615,32.4674071 L16.5492615,32.4674071 Z" id="Shape" fill="#34A853"/>
12 |                 <path d="M7.2893887,19.3181072 C6.95840347,18.344085 6.77047118,17.3033395 6.77047118,16.2337035 C6.77047118,15.1640676 6.95840347,14.1233221 7.2893887,13.1492999 L7.2893887,8.94298219 L1.76011213,8.94298219 C0.639530783,11.1345322 0,13.6142992 0,16.2337035 C0,18.8531079 0.639530783,21.3328749 1.76011213,23.5244249 L7.2893887,19.3181072 L7.2893887,19.3181072 Z" id="Shape" fill="#FBBC05"/>
13 |                 <path d="M16.5492615,6.4563365 C18.9790577,6.4563365 21.160615,7.27558824 22.8758478,8.88382548 L27.6225407,4.22764161 C24.755872,1.60892511 21.0098485,0 16.5492615,0 C10.0803235,0 4.48302664,3.63813805 1.76011213,8.94298219 L7.2893887,13.1492999 C8.59088994,9.31236774 12.2394411,6.4563365 16.5492615,6.4563365 Z" id="Shape" fill="#EA4335"/>
14 |             </g>
15 |         </g>
16 |     </g>
17 | </svg>


--------------------------------------------------------------------------------
/src/assets/img/theme/angular.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/angular.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/bootstrap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/bootstrap.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/profile-cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/profile-cover.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/react.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/react.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/sketch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/sketch.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/team-1-800x800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/team-1-800x800.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/team-2-800x800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/team-2-800x800.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/team-3-800x800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/team-3-800x800.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/team-4-800x800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/team-4-800x800.jpg


--------------------------------------------------------------------------------
/src/assets/img/theme/vue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/img/theme/vue.jpg


--------------------------------------------------------------------------------
/src/assets/plugins/nucleo/css/nucleo-svg.css:
--------------------------------------------------------------------------------
  1 | /* Generated using nucleoapp.com */
  2 | /* --------------------------------
  3 | 
  4 | Icon colors
  5 | 
  6 | -------------------------------- */
  7 | 
  8 | .icon {
  9 |   display: inline-block;
 10 |   /* icon primary color */
 11 |   color: #111111;
 12 |   height: 1em;
 13 |   width: 1em;
 14 | }
 15 | 
 16 | .icon use {
 17 |   /* icon secondary color - fill */
 18 |   fill: #7ea6f6;
 19 | }
 20 | 
 21 | .icon.icon-outline use {
 22 |   /* icon secondary color - stroke */
 23 |   stroke: #7ea6f6;
 24 | }
 25 | 
 26 | /* --------------------------------
 27 | 
 28 | Change icon size
 29 | 
 30 | -------------------------------- */
 31 | 
 32 | .icon-xs {
 33 |   height: 0.5em;
 34 |   width: 0.5em;
 35 | }
 36 | 
 37 | .icon-sm {
 38 |   height: 0.8em;
 39 |   width: 0.8em;
 40 | }
 41 | 
 42 | .icon-lg {
 43 |   height: 1.6em;
 44 |   width: 1.6em;
 45 | }
 46 | 
 47 | .icon-xl {
 48 |   height: 2em;
 49 |   width: 2em;
 50 | }
 51 | 
 52 | /* -------------------------------- 
 53 | 
 54 | Align icon and text 
 55 | 
 56 | -------------------------------- */
 57 | 
 58 | .icon-text-aligner {
 59 |   /* add this class to parent element that contains icon + text */
 60 |   display: flex;
 61 |   align-items: center;
 62 | }
 63 | 
 64 | .icon-text-aligner .icon {
 65 |   color: inherit;
 66 |   margin-right: 0.4em;
 67 | }
 68 | 
 69 | .icon-text-aligner .icon use {
 70 |   color: inherit;
 71 |   fill: currentColor;
 72 | }
 73 | 
 74 | .icon-text-aligner .icon.icon-outline use {
 75 |   stroke: currentColor;
 76 | }
 77 | 
 78 | /* -------------------------------- 
 79 | 
 80 | Icon reset values - used to enable color customizations
 81 | 
 82 | -------------------------------- */
 83 | 
 84 | .icon {
 85 |   fill: currentColor;
 86 |   stroke: none;
 87 | }
 88 | 
 89 | .icon.icon-outline {
 90 |   fill: none;
 91 |   stroke: currentColor;
 92 | }
 93 | 
 94 | .icon use {
 95 |   stroke: none;
 96 | }
 97 | 
 98 | .icon.icon-outline use {
 99 |   fill: none;
100 | }
101 | 
102 | /* -------------------------------- 
103 | 
104 | Stroke effects - Nucleo outline icons
105 | 
106 | - 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
107 | - 24px, 32px icons -> up to 2px stroke
108 | - 48px, 64px icons -> up to 4px stroke
109 | 
110 | -------------------------------- */
111 | 
112 | .icon-outline.icon-stroke-1 {
113 |   stroke-width: 1px;
114 | }
115 | 
116 | .icon-outline.icon-stroke-2 {
117 |   stroke-width: 2px;
118 | }
119 | 
120 | .icon-outline.icon-stroke-3 {
121 |   stroke-width: 3px;
122 | }
123 | 
124 | .icon-outline.icon-stroke-4 {
125 |   stroke-width: 4px;
126 | }
127 | 
128 | .icon-outline.icon-stroke-1 use,
129 | .icon-outline.icon-stroke-3 use {
130 |   -webkit-transform: translateX(0.5px) translateY(0.5px);
131 |   -moz-transform: translateX(0.5px) translateY(0.5px);
132 |   -ms-transform: translateX(0.5px) translateY(0.5px);
133 |   -o-transform: translateX(0.5px) translateY(0.5px);
134 |   transform: translateX(0.5px) translateY(0.5px);
135 | }


--------------------------------------------------------------------------------
/src/assets/plugins/nucleo/fonts/nucleo-icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/plugins/nucleo/fonts/nucleo-icons.eot


--------------------------------------------------------------------------------
/src/assets/plugins/nucleo/fonts/nucleo-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/plugins/nucleo/fonts/nucleo-icons.ttf


--------------------------------------------------------------------------------
/src/assets/plugins/nucleo/fonts/nucleo-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/plugins/nucleo/fonts/nucleo-icons.woff


--------------------------------------------------------------------------------
/src/assets/plugins/nucleo/fonts/nucleo-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/argon-dashboard-react/04b58c36799220d0af4bb8f6e4b1f4a563f17994/src/assets/plugins/nucleo/fonts/nucleo-icons.woff2


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard-react.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | 
19 | // Core
20 | 
21 | @import "argon-dashboard/custom/functions";
22 | @import "argon-dashboard/custom/variables";
23 | @import "argon-dashboard/custom/mixins";
24 | 
25 | // bootstrap (4.6.0) components
26 | 
27 | @import "~bootstrap/scss/root";
28 | @import "~bootstrap/scss/reboot";
29 | @import "~bootstrap/scss/type";
30 | @import "~bootstrap/scss/images";
31 | @import "~bootstrap/scss/code";
32 | @import "~bootstrap/scss/grid";
33 | @import "~bootstrap/scss/tables";
34 | @import "~bootstrap/scss/forms";
35 | @import "~bootstrap/scss/buttons";
36 | @import "~bootstrap/scss/transitions";
37 | @import "~bootstrap/scss/dropdown";
38 | @import "~bootstrap/scss/button-group";
39 | @import "~bootstrap/scss/input-group";
40 | @import "~bootstrap/scss/custom-forms";
41 | @import "~bootstrap/scss/nav";
42 | @import "~bootstrap/scss/navbar";
43 | @import "~bootstrap/scss/card";
44 | @import "~bootstrap/scss/breadcrumb";
45 | @import "~bootstrap/scss/pagination";
46 | @import "~bootstrap/scss/badge";
47 | @import "~bootstrap/scss/jumbotron";
48 | @import "~bootstrap/scss/alert";
49 | @import "~bootstrap/scss/progress";
50 | @import "~bootstrap/scss/media";
51 | @import "~bootstrap/scss/list-group";
52 | @import "~bootstrap/scss/close";
53 | @import "~bootstrap/scss/modal";
54 | @import "~bootstrap/scss/tooltip";
55 | @import "~bootstrap/scss/popover";
56 | @import "~bootstrap/scss/carousel";
57 | @import "~bootstrap/scss/utilities";
58 | @import "~bootstrap/scss/print";
59 | 
60 | // Argon utilities and components
61 | 
62 | @import "argon-dashboard/custom/reboot";
63 | @import "argon-dashboard/custom/utilities";
64 | @import "argon-dashboard/custom/components";
65 | 
66 | // Vendor (Plugins)
67 | 
68 | @import "argon-dashboard/custom/vendors";
69 | 
70 | // Docs components
71 | 
72 | @import "argon-dashboard/docs/variables";
73 | @import "argon-dashboard/docs/nav";
74 | @import "argon-dashboard/docs/clipboard-js";
75 | @import "argon-dashboard/docs/component-examples";
76 | @import "argon-dashboard/docs/prism";
77 | @import "argon-dashboard/docs/content";
78 | @import "argon-dashboard/docs/sidebar";
79 | @import "argon-dashboard/docs/footer";
80 | 
81 | // React Differences
82 | @import "react/react-differences";
83 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_alert.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Alert
3 | //
4 | 
5 | @import "alerts/alert";
6 | @import "alerts/alert-dismissible";
7 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_avatar.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Avatar
3 | //
4 | 
5 | @import "avatars/avatar";
6 | @import "avatars/avatar-group";
7 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_badge.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Badge
3 | //
4 | 
5 | @import "badges/badge";
6 | @import "badges/badge-circle";
7 | @import "badges/badge-dot";
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_buttons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Button
3 | //
4 | 
5 | @import "buttons/button";
6 | @import "buttons/button-icon";
7 | @import "buttons/button-brand";
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_card.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Cards
3 | //
4 | 
5 | @import "cards/card";
6 | @import "cards/card-profile";
7 | @import "cards/card-animations";
8 | @import "cards/card-stats";
9 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_chart.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Chart
3 | //
4 | 
5 | @import "charts/chart";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_close.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Close
3 | //
4 | 
5 | @import "close/close"
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_components.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Components
 3 | //
 4 | 
 5 | @import "alert";
 6 | @import "avatar";
 7 | @import "badge";
 8 | @import "buttons";
 9 | @import "card";
10 | @import "chart";
11 | @import "close";
12 | @import "content";
13 | @import "custom-forms";
14 | @import "dropdown";
15 | @import "footer";
16 | @import "forms";
17 | @import "header";
18 | @import "icons";
19 | @import "input-group";
20 | @import "list-group";
21 | @import "map";
22 | @import "mask";
23 | @import "modal";
24 | @import "nav";
25 | @import "navbar";
26 | @import "pagination";
27 | @import "popover";
28 | @import "progress";
29 | @import "separator";
30 | @import "tables";
31 | @import "type";
32 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_content.scss:
--------------------------------------------------------------------------------
 1 | .main-content {
 2 |     position: relative;
 3 | 
 4 |     // Navbar
 5 |     .navbar-top {
 6 |         position: absolute;
 7 |         left: 0;
 8 |         top: 0;
 9 |         width: 100%;
10 |         z-index: 1;
11 |         background-color: transparent;
12 |         padding-left: 0 !important;
13 |         padding-right: 0 !important;
14 |     }
15 | 
16 |     // Container
17 |     .container-fluid {
18 |         @include media-breakpoint-up(md) {
19 |             padding-left: ($main-content-padding-x + calc($grid-gutter-width / 2)) !important;
20 |             padding-right: ($main-content-padding-x + calc($grid-gutter-width / 2)) !important;
21 |         }
22 |     }
23 | }
24 | 
25 | 
26 | // Offsets the main content depending on the sidebar positioning
27 | 
28 | .navbar-vertical.navbar-expand {
29 | 
30 |     @each $breakpoint,
31 |     $dimension in $grid-breakpoints {
32 | 
33 |         &-#{$breakpoint} {
34 | 
35 |             @include media-breakpoint-up(#{$breakpoint}) {
36 | 
37 |                 // Left
38 |                 &.fixed-left + .main-content {
39 |                     margin-left: $navbar-vertical-width;
40 |                 } // Right
41 |                 &.fixed-right + .main-content {
42 |                     margin-right: $navbar-vertical-width;
43 |                 }
44 |             }
45 |         }
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_custom-forms.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom form
 3 | //
 4 | 
 5 | @import "custom-forms/custom-form";
 6 | @import "custom-forms/custom-control";
 7 | @import "custom-forms/custom-checkbox";
 8 | @import "custom-forms/custom-radio";
 9 | @import "custom-forms/custom-toggle";
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_dropdown.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Dropdown
3 | //
4 | 
5 | @import "dropdowns/dropdown";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_footer.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Footer
3 | //
4 | 
5 | @import "footers/footer";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_forms.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Forms
3 | //
4 | 
5 | @import "forms/form";
6 | @import "forms/form-validation";
7 | @import "forms/input-group";
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_functions.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Functions
 3 | //
 4 | 
 5 | // Bootstrap default functions
 6 | 
 7 | @import "~bootstrap/scss/functions";
 8 | 
 9 | 
10 | // Retrieve color Sass maps
11 | 
12 | @function section-color($key: "primary") {
13 | 	@return map-get($section-colors, $key);
14 | }
15 | 
16 | 
17 | // Lines colors
18 | 
19 | @function shapes-primary-color($key: "step-1-gradient-bg") {
20 | 	@return map-get($shapes-primary-colors, $key);
21 | }
22 | 
23 | @function shapes-default-color($key: "step-1-gradient-bg") {
24 | 	@return map-get($shapes-default-colors, $key);
25 | }
26 | 
27 | @function lines-light-color($key: "step-1-gradient-bg") {
28 | 	@return map-get($shapes-light-colors, $key);
29 | }
30 | 
31 | @function shapes-dark-color($key: "step-1-gradient-bg") {
32 | 	@return map-get($shapes-dark-colors, $key);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_header.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Header
3 | //
4 | 
5 | @import "headers/header";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_icons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Icon
3 | //
4 | 
5 | @import "icons/icon";
6 | @import "icons/icon-shape";
7 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_input-group.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Input group
3 | //
4 | 
5 | @import "forms/input-group";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_list-group.scss:
--------------------------------------------------------------------------------
1 | //
2 | // List group
3 | //
4 | 
5 | @import "list-groups/list-group";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_map.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Maps
3 | //
4 | 
5 | @import "maps/map";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_mask.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Mask
3 | //
4 | 
5 | @import "masks/mask";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_mixins.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Mixins
 3 | //
 4 | 
 5 | // Bootstrap default mixins
 6 | 
 7 | @import "~bootstrap/scss/mixins";
 8 | 
 9 | 
10 | // Custom mixins
11 | 
12 | @import "mixins/alert";
13 | @import "mixins/badge";
14 | @import "mixins/background-variant";
15 | @import "mixins/buttons";
16 | @import "mixins/forms";
17 | @import "mixins/icon";
18 | @import "mixins/modals";
19 | @import "mixins/popover";
20 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_modal.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Modal
3 | //
4 | 
5 | @import "modals/modal";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Nav
3 | //
4 | 
5 | 
6 | @import "navs/nav";
7 | @import "navs/nav-pills";
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_navbar.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Navbar
 3 | //
 4 | 
 5 | @import "navbars/navbar";
 6 | @import "navbars/navbar-vertical";
 7 | @import "navbars/navbar-search";
 8 | @import "navbars/navbar-dropdown";
 9 | @import "navbars/navbar-collapse";
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_pagination.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Pagination
3 | //
4 | 
5 | @import "paginations/pagination";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_popover.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Popover
3 | //
4 | 
5 | 
6 | @import "popovers/popover";
7 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_progress.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Progress
3 | //
4 | 
5 | @import "progresses/progress";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_reboot.scss:
--------------------------------------------------------------------------------
 1 | iframe {
 2 |     border: 0;
 3 | }
 4 | 
 5 | figcaption,
 6 | figure,
 7 | main {
 8 |     display: block;
 9 | }
10 | 
11 | main {
12 |     overflow: hidden;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_section.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Sections
  3 | //
  4 | 
  5 | 
  6 | // Nucleo icons for presentation purpose
  7 | 
  8 | .section-nucleo-icons {
  9 | 
 10 |     --icon-size: 5rem;
 11 |     --icon-sm-size: 3.75rem;
 12 |     --gutter: 7rem;
 13 | 
 14 |     .icons-container {
 15 |         position: relative;
 16 |         max-width: 100%;
 17 |         height: 360px;
 18 |         margin: 0 auto;
 19 |         z-index: 1;
 20 | 
 21 |         i {
 22 |             position: absolute;
 23 |             display: inline-flex;
 24 |             align-items: center;
 25 |             justify-content: center;
 26 |             border-radius: 50%;
 27 |             background: $white;
 28 |             z-index: 1;
 29 |             transform: translate(-50%, -50%);
 30 |             @include box-shadow($box-shadow);
 31 |             transition: all .2s cubic-bezier(.25,.65,.9,.75);
 32 | 
 33 |             &.icon {
 34 |                 width: var(--icon-size);
 35 |                 height: var(--icon-size);
 36 |                 font-size: 1.7em;
 37 |             }
 38 | 
 39 |             &.icon-sm {
 40 |                 width: var(--icon-sm-size);
 41 |                 height: var(--icon-sm-size);
 42 |                 font-size: 1.5em;
 43 |             }
 44 | 
 45 |             &:nth-child(1) {
 46 |                 font-size: 42px;
 47 |                 color: theme-color("warning");
 48 |                 z-index: 2;
 49 |             }
 50 |         }
 51 | 
 52 |         &:not(.on-screen) {
 53 |             i {
 54 |                 transform: translate(-50%, -50%);
 55 |                 left: 50%;
 56 |                 top: 50%;
 57 | 
 58 |                 &:not(:nth-child(1)) {
 59 |                     opacity: 0;
 60 |                 }
 61 |             }
 62 |         }
 63 | 
 64 |         &.on-screen {
 65 | 
 66 |             i {
 67 |                 opacity: 1;
 68 | 
 69 |                 &:nth-child(1) {
 70 |                     left: 50%;
 71 |                     top: 50%;
 72 |                     font-size: 42px;
 73 |                     color: theme-color("warning");
 74 |                 }
 75 | 
 76 |                 &:nth-child(2) {
 77 |                     left: calc(50% + (var(--gutter) * 1.7));
 78 |                     top: 50%;
 79 |                 }
 80 | 
 81 |                 &:nth-child(3) {
 82 |                     left: calc(50% + var(--gutter));
 83 |                     top: calc(50% + var(--gutter));
 84 |                 }
 85 | 
 86 |                 &:nth-child(4) {
 87 |                     left: calc(50% + var(--gutter));
 88 |                     top: calc(50% - var(--gutter));
 89 |                 }
 90 | 
 91 |                 &:nth-child(5) {
 92 |                     left: calc(50% + (var(--gutter) * 4));
 93 |                     top: 50%;
 94 |                 }
 95 | 
 96 |                 &:nth-child(6) {
 97 |                     left: calc(50% + (var(--gutter) * 2.7));
 98 |                     top: calc(50% + (var(--gutter) * 1.5));
 99 |                 }
100 | 
101 |                 &:nth-child(7) {
102 |                     left: calc(50% + (var(--gutter) * 2.7));
103 |                     top: calc(50% - (var(--gutter) * 1.5));
104 |                 }
105 | 
106 |                 &:nth-child(8) {
107 |                     left: calc(50% - (var(--gutter) * 1.7));
108 |                     top: 50%;
109 |                 }
110 | 
111 |                 &:nth-child(9) {
112 |                     left: calc(50% - var(--gutter));
113 |                     top: calc(50% + var(--gutter));
114 |                 }
115 | 
116 |                 &:nth-child(10) {
117 |                     left: calc(50% - var(--gutter));
118 |                     top: calc(50% - var(--gutter));
119 |                 }
120 | 
121 |                 &:nth-child(11) {
122 |                     left: calc(50% - (var(--gutter) * 4));
123 |                     top: 50%;
124 |                 }
125 | 
126 |                 &:nth-child(12) {
127 |                     left: calc(50% - (var(--gutter) * 2.7));
128 |                     top: calc(50% + (var(--gutter) * 1.5));
129 |                 }
130 | 
131 |                 &:nth-child(13) {
132 |                     left: calc(50% - (var(--gutter) * 2.7));
133 |                     top: calc(50% - (var(--gutter) * 1.5));
134 |                 }
135 |             }
136 | 
137 |         }
138 |     }
139 | }
140 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_separator.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Separator
3 | //
4 | 
5 | @import "separators/separator";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_tables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Tables
3 | //
4 | 
5 | @import "tables/table";
6 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_type.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Typography
3 | //
4 | 
5 | @import "type/type";
6 | @import "type/heading";
7 | @import "type/display";
8 | @import "type/article";
9 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_utilities.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Utilities
 3 | //
 4 | 
 5 | @import "utilities/backgrounds";
 6 | @import "utilities/floating";
 7 | @import "utilities/helper";
 8 | @import "utilities/image";
 9 | @import "utilities/opacity";
10 | @import "utilities/overflow";
11 | @import "utilities/position";
12 | @import "utilities/sizing";
13 | @import "utilities/spacing";
14 | @import "utilities/shadows";
15 | @import "utilities/text";
16 | @import "utilities/transform";
17 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/_vendors.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Vendors
 3 | // include plugin styles
 4 | //
 5 | 
 6 | 
 7 | @import "vendors/bootstrap-datepicker";
 8 | @import "vendors/nouislider";
 9 | @import "vendors/scrollbar";
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/alerts/_alert-dismissible.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Dismissible alert
 3 | //
 4 | 
 5 | .alert-dismissible {
 6 |     .close {
 7 |         top: 50%;
 8 |         right: $alert-padding-x;
 9 |         padding: 0;
10 |         transform: translateY(-50%);
11 |         color: rgba($white, .6);
12 |         opacity: 1;
13 | 
14 |         &:hover,
15 |         &:focus {
16 |             color: rgba($white, .9);
17 |             opacity: 1 !important;
18 |         }
19 | 
20 |         @include media-breakpoint-down(xs) {
21 |             top: 1rem;
22 |             right: .5rem;
23 |         }
24 | 
25 |         &>span:not(.sr-only) {
26 |             font-size: 1.5rem;
27 |             background-color: transparent;
28 |             color: rgba($white, .6);
29 |         }
30 | 
31 |         &:hover,
32 |         &:focus {
33 |             &>span:not(.sr-only) {
34 |                 background-color: transparent;
35 |                 color: rgba($white, .9);
36 |             }
37 |         }
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/alerts/_alert.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Alert
 3 | //
 4 | 
 5 | .alert {
 6 |     font-size: $font-size-sm;
 7 | }
 8 | 
 9 | // Alert heading
10 | 
11 | .alert-heading {
12 |     font-weight: $font-weight-bold;
13 |     font-size: $h4-font-size;
14 |     margin-top: .15rem;
15 | }
16 | 
17 | 
18 | // Alert icon
19 | .alert-icon {
20 |     font-size: 1.25rem;
21 |     margin-right: 1.25rem;
22 |     display: inline-block;
23 |     vertical-align: middle;
24 | 
25 |     i.ni {
26 |         position: relative;
27 |         top: 1px;
28 |     }
29 | }
30 | 
31 | 
32 | // Alert text next to an alert icon
33 | .alert-text {
34 |     display: inline-block;
35 |     vertical-align: middle;
36 | }
37 | 
38 | 
39 | // Alert links
40 | 
41 | [class*="alert-"] {
42 |     .alert-link {
43 |         color: $white;
44 |         border-bottom: 1px dotted rgba($white, .5);
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/avatars/_avatar-group.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Avatar group
 3 | //
 4 | 
 5 | // General styles
 6 | 
 7 | .avatar-group {
 8 | 	.avatar {
 9 | 		position: relative;
10 | 		z-index: 2;
11 | 		border: 2px solid $card-bg;
12 | 
13 | 		&:hover {
14 | 			z-index: 3;
15 | 		}
16 | 	}
17 | 
18 | 	.avatar + .avatar {
19 | 		margin-left: -1rem;
20 | 
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/avatars/_avatar.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Avatar
 3 | //
 4 | 
 5 | // General styles
 6 | 
 7 | .avatar {
 8 | 	color: $white;
 9 | 	background-color: $gray-500;
10 | 	display: inline-flex;
11 | 	align-items: center;
12 | 	justify-content: center;
13 | 	font-size: 1rem;
14 | 	border-radius: 50%;
15 | 	height: 48px;
16 | 	width: 48px;
17 | 
18 |     img {
19 |     	width: 100%;
20 |     	border-radius: 50%;
21 |     }
22 | 
23 |     + .avatar-content {
24 |     	display: inline-block;
25 |     	margin-left: .75rem;
26 |     }
27 | }
28 | 
29 | 
30 | // Avatar size variations
31 | 
32 | .avatar-lg {
33 | 	width: 58px;
34 | 	height: 58px;
35 | 	font-size: $font-size-sm;
36 | }
37 | 
38 | .avatar-sm {
39 | 	width: 36px;
40 | 	height: 36px;
41 | 	font-size: $font-size-sm;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/badges/_badge-circle.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Circle badge
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .badge-circle {
 9 |     text-align: center;
10 |     display: inline-flex;
11 |     align-items: center;
12 |     justify-content: center;
13 |     border-radius: 50%;
14 |     width: 2rem;
15 |     height: 2rem;
16 |     font-size: .875rem;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/badges/_badge-dot.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Dot badge
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .badge-dot {
 9 |     padding-left: 0;
10 |     padding-right: 0;
11 |     background: transparent;
12 |     font-weight: $font-weight-normal;
13 |     font-size: $font-size-sm;
14 |     text-transform: none;
15 | 
16 |     strong {
17 |         color: $gray-800;
18 |     }
19 | 
20 |     i {
21 |         display: inline-block;
22 |         vertical-align: middle;
23 |         width: .375rem;
24 |         height: .375rem;
25 |         border-radius: 50%;
26 |         margin-right: .375rem;
27 |     }
28 | 
29 |     &.badge-md {
30 |         i {
31 |             width: .5rem;
32 |             height: .5rem;
33 |         }
34 |     }
35 | 
36 |     &.badge-lg {
37 |         i {
38 |             width: .625rem;
39 |             height: .625rem;
40 |         }
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/badges/_badge.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Badge
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .badge {
 9 |     text-transform: $badge-text-transfom;
10 | 
11 |     a {
12 |         color: $white;
13 |     }
14 | }
15 | 
16 | 
17 | // Size variations
18 | 
19 | .badge-md {
20 |     padding: .65em 1em;
21 | }
22 | 
23 | .badge-lg {
24 |     padding: .85em 1.375em;
25 | }
26 | 
27 | 
28 | // Multiple inline badges
29 | 
30 | .badge-inline {
31 |     margin-right: .625rem;
32 | 
33 |     + span {
34 |         top: 2px;
35 |         position: relative;
36 | 
37 |         > a {
38 |             text-decoration: underline;
39 |         }
40 |     }
41 | }
42 | 
43 | 
44 | // Badge spacing inside a btn with some text
45 | 
46 | .btn {
47 |     .badge {
48 |         &:not(:first-child) {
49 |             margin-left: .5rem;
50 |         }
51 |         &:not(:last-child) {
52 |             margin-right: .5rem;
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/buttons/_button-brand.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Brand buttons
 3 | //
 4 | 
 5 | 
 6 | // Color variations
 7 | 
 8 | @each $color, $value in $brand-colors {
 9 |     .btn-#{$color} {
10 |         @include button-variant($value, $value);
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/buttons/_button-icon.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Icon buttons
 3 | //
 4 | 
 5 | .btn-icon {
 6 |     .btn-inner--icon {
 7 |         img {
 8 |             width: 20px;
 9 |         }
10 |    }
11 | 
12 |    .btn-inner--text:not(:first-child) {
13 |        margin-left: 0.75em;
14 |    }
15 | 
16 |    .btn-inner--text:not(:last-child) {
17 |        margin-right: 0.75em;
18 |    }
19 | }
20 | 
21 | 
22 | // Button only with icon and NO text
23 | 
24 | .btn-icon-only {
25 |     width: 2.375rem;
26 |     height: 2.375rem;
27 |     padding: 0;
28 | }
29 | 
30 | a.btn-icon-only {
31 |     line-height: 2.5;
32 | }
33 | 
34 | .btn-icon-only.btn-sm {
35 |     width: 2rem;
36 |     height: 2rem;
37 | }
38 | 
39 | 
40 | //
41 | // Clipboard button
42 | // dedicated element for copying icons
43 | //
44 | 
45 | .btn-icon-clipboard {
46 |     margin: 0;
47 |     padding: 1.5rem;
48 |     font-size: $font-size-base;
49 |     font-weight: $font-weight-normal;
50 |     line-height: 1.25;
51 |     color: $gray-800;
52 |     background-color: $gray-100;
53 |     border-radius: $border-radius;
54 |     border: 0;
55 |     text-align: left;
56 |     font-family: inherit;
57 |     display: inline-block;
58 |     vertical-align: middle;
59 |     text-decoration: none;
60 |     -moz-appearance: none;
61 |     cursor: pointer;
62 |     width: 100%;
63 |     margin: .5rem 0;
64 | 
65 |     &:hover {
66 |         background-color: $white;
67 |         box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
68 |     }
69 | 
70 |     > div {
71 |         align-items: center;
72 |         display: flex;
73 |     }
74 | 
75 |     i {
76 |         box-sizing: content-box;
77 |         color: theme-color("primary");
78 |         vertical-align: middle;
79 |         font-size: 1.5rem;
80 |     }
81 | 
82 |     span {
83 |         display: inline-block;
84 |         font-size: 0.875rem;
85 |         line-height: 1.5;
86 |         margin-left: 16px;
87 |         overflow: hidden;
88 |         white-space: nowrap;
89 |         text-overflow: ellipsis;
90 |         vertical-align: middle;
91 |     }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/buttons/_button.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Icon buttons
 3 | //
 4 | 
 5 | // General styles
 6 | 
 7 | .btn {
 8 |    position: relative;
 9 |    text-transform: $btn-text-transform;
10 |    transition: $transition-base;
11 |    letter-spacing: $btn-letter-spacing;
12 |    font-size: $input-btn-font-size;
13 |    will-change: transform;
14 | 
15 |    &:hover {
16 |       @include box-shadow($btn-hover-box-shadow);
17 |       transform: translateY($btn-hover-translate-y);
18 |    }
19 | 
20 |    &:not(:last-child) {
21 |       margin-right: .5rem;
22 |    }
23 | 
24 | 
25 |    // Icons
26 | 
27 |    i:not(:first-child),
28 |    svg:not(:first-child) {
29 |       margin-left: .5rem;
30 |    }
31 | 
32 |    i:not(:last-child),
33 |    svg:not(:last-child) {
34 |       margin-right: .5rem;
35 |    }
36 | }
37 | 
38 | 
39 | // Remove translateY and margin animation when btn is included in a btn-group or input-group
40 | 
41 | .btn-group,
42 | .input-group {
43 |    .btn {
44 |       margin-right: 0;
45 |       transform: translateY(0);
46 |    }
47 | }
48 | 
49 | 
50 | // Size variations
51 | 
52 | .btn-sm {
53 |    font-size: $input-btn-font-size-sm;
54 | }
55 | 
56 | .btn-lg {
57 |    font-size: $input-btn-font-size-lg;
58 | }
59 | 
60 | 
61 | // Some quick fixes (to revise)
62 | 
63 | // Fixes
64 | [class*="btn-outline-"] {
65 |    border-width: 1px;
66 | }
67 | 
68 | .btn-outline-secondary {
69 |    color: darken(theme-color("secondary"), 50%);
70 | }
71 | 
72 | .btn-inner--icon {
73 |    i:not(.fa) {
74 |       position: relative;
75 |       top: 2px;
76 |    }
77 | }
78 | 
79 | .btn-link {
80 |    font-weight: $btn-font-weight;
81 |    box-shadow: none;
82 | 
83 |    &:hover {
84 |       box-shadow: none;
85 |       transform: none;
86 |    }
87 | }
88 | 
89 | .btn-neutral {
90 |    color: theme-color("primary");
91 | }
92 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/cards/_card-animations.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Card with hover animations
 3 | //
 4 | 
 5 | .card-lift--hover {
 6 |     &:hover {
 7 |         transform: translateY(-20px);
 8 |         @include transition($transition-base);
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/cards/_card-blockquote.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Card with blockquote
 3 | //
 4 | 
 5 | .card-blockquote {
 6 |     padding: 2rem;
 7 |     position: relative;
 8 | 
 9 |     .svg-bg {
10 |         display: block;
11 |         width: 100%;
12 |         height: 95px;
13 |         position: absolute;
14 |         top: -94px;
15 |         left: 0;
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/cards/_card-profile.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Profile card
 3 | //
 4 | 
 5 | .card-profile-image {
 6 |     position: relative;
 7 | 
 8 |     img {
 9 |         max-width: 180px;
10 |         border-radius: $border-radius;
11 |         @extend .shadow;
12 |         transform: translate(-50%,-30%);
13 |         position: absolute;
14 |         left: 50%;
15 |         transition: $transition-base;
16 | 
17 |         &:hover {
18 |             transform: translate(-50%, -33%);
19 |         }
20 |     }
21 | }
22 | 
23 | .card-profile-stats {
24 |     padding: 1rem 0;
25 | 
26 |     > div {
27 |         text-align: center;
28 |         margin-right: 1rem;
29 |         padding: .875rem;
30 | 
31 |         &:last-child {
32 |             margin-right: 0;
33 |         }
34 | 
35 |         .heading {
36 |             font-size: 1.1rem;
37 |             font-weight: bold;
38 |             display: block;
39 |         }
40 |         .description {
41 |             font-size: .875rem;
42 |             color: $gray-500;
43 |         }
44 |     }
45 | }
46 | 
47 | .card-profile-actions {
48 |     padding: .875rem;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/cards/_card-stats.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Card stats
 3 | //
 4 | 
 5 | .card-stats {
 6 |     .card-body {
 7 |         padding: 1rem 1.5rem;
 8 |     }
 9 | 
10 |     .card-status-bullet {
11 |         position: absolute;
12 |         top: 0;
13 |         right: 0;
14 |         transform: translate(50%, -50%);
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/cards/_card.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Card
3 | //
4 | 
5 | 
6 | .card-translucent {
7 |     background-color: rgba(18, 91, 152, 0.08);
8 | }
9 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/charts/_chart.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Chart
 3 | //
 4 | 
 5 | .chart {
 6 |     position: relative;
 7 |     height: $chart-height;
 8 | }
 9 | 
10 | 
11 | // Size variations
12 | 
13 | .chart-sm {
14 |     height: $chart-height-sm;
15 | }
16 | 
17 | 
18 | // Legend
19 | 
20 | .chart-legend {
21 |     display: flex;
22 |     justify-content: center;
23 |     margin-top: $chart-legend-margin-top;
24 |     font-size: $chart-legend-font-size;
25 |     text-align: center;
26 |     color: $chart-legend-color;
27 | }
28 | 
29 | .chart-legend-item {
30 |     display: inline-flex;
31 |     align-items: center;
32 | 
33 |     + .chart-legend-item {
34 |         margin-left: 1rem;
35 |     }
36 | }
37 | 
38 | .chart-legend-indicator {
39 |     display: inline-block;
40 |     width: 0.5rem;
41 |     height: 0.5rem;
42 |     margin-right: 0.375rem;
43 |     border-radius: 50%;
44 | }
45 | 
46 | 
47 | // Tooltip
48 | 
49 | #chart-tooltip {
50 |     z-index: 0;
51 | 
52 |     .arrow {
53 |         top: 100%;
54 |         left: 50%;
55 |         transform: translateX(-50%) translateX(-.5rem);
56 |     }
57 | }
58 | 
59 | 
60 | // Chart info overlay
61 | 
62 | .chart-info-overlay {
63 |   position: absolute;
64 |   top: 0;
65 |   left: 5%;
66 |   max-width: 350px;
67 |   padding: 20px;
68 |   z-index: 1;
69 | }
70 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/close/_close.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Close
 3 | //
 4 | 
 5 | .close {
 6 |     @if $enable-transitions {
 7 |         transition: $transition-base;
 8 |     }
 9 |     
10 |     &>span:not(.sr-only) {
11 |         background-color: $close-bg;
12 |         color: $close-color;
13 |         line-height: 17px;
14 |         height: 1.25rem;
15 |         width: 1.25rem;
16 |         border-radius: 50%;
17 |         font-size: 1.25rem;
18 |         display: block;
19 |         @if $enable-transitions {
20 |             transition: $transition-base;
21 |         }
22 |     }
23 | 
24 |     &:hover,
25 |     &:focus {
26 |         background-color: $close-hover-bg;
27 |         color: $close-hover-color;
28 |         outline: none;
29 | 
30 |         span:not(.sr-only) {
31 |             background-color: $close-hover-bg;
32 |         }
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-checkbox.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom checkbox
 3 | //
 4 | 
 5 | .custom-checkbox {
 6 |     .custom-control-input ~ .custom-control-label {
 7 |         cursor: pointer;
 8 |         font-size: $font-size-sm;
 9 |     }
10 | 
11 |     .custom-control-input {
12 |         &:checked {
13 |             ~ .custom-control-label {
14 |                 &::before {
15 |                     border-color: $custom-control-indicator-checked-border-color;
16 |                 }
17 |                 &::after {
18 |                     background-image: $custom-checkbox-indicator-icon-checked;
19 |                 }
20 |             }
21 |         }
22 | 
23 |         &:disabled {
24 |             ~ .custom-control-label {
25 |                 &::before {
26 |                     border-color: $custom-control-indicator-disabled-bg;
27 |                 }
28 |             }
29 | 
30 |             &:checked {
31 |                 &::before {
32 |                     border-color: $custom-control-indicator-checked-disabled-bg;
33 |                 }
34 |             }
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-control.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom control
 3 | // additional styles for custom checkboxes, radios and other
 4 | //
 5 | 
 6 | .custom-control-label {
 7 |     // Background-color and (when enabled) gradient
 8 |     &::before {
 9 |         border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
10 |         @if $enable-transitions {
11 |             transition: $input-transition;
12 |         }
13 |     }
14 | 
15 |     span {
16 |         position: relative;
17 |         top: 2px;
18 |     }
19 | }
20 | 
21 | .custom-control-label {
22 |     margin-bottom: 0;
23 | }
24 | 
25 | 
26 | // Alternative style
27 | 
28 | .custom-control-alternative {
29 |     .custom-control-label {
30 |         // Background-color and (when enabled) gradient
31 |         &::before {
32 |             border: 0;
33 |             box-shadow: $input-alternative-box-shadow;
34 |         }
35 |     }
36 | 
37 |     .custom-control-input {
38 |         &:checked {
39 |             ~ .custom-control-label {
40 |                 &::before {
41 |                     box-shadow: $input-focus-alternative-box-shadow;
42 |                 }
43 |             }
44 |         }
45 | 
46 |         &:active~.custom-control-label::before,
47 |         &:focus~.custom-control-label::before {
48 |             box-shadow: $input-alternative-box-shadow;
49 |         }
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-form.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom checkbox
 3 | //
 4 | 
 5 | .custom-checkbox {
 6 |     .custom-control-input ~ .custom-control-label {
 7 |         cursor: pointer;
 8 |         font-size: $font-size-sm;
 9 |     }
10 | 
11 |     .custom-control-input {
12 |         &:checked {
13 |             ~ .custom-control-label {
14 |                 &::before {
15 |                     border-color: $custom-control-indicator-checked-border-color;
16 |                 }
17 |                 &::after {
18 |                     background-image: $custom-checkbox-indicator-icon-checked;
19 |                 }
20 |             }
21 |         }
22 | 
23 |         &:disabled {
24 |             ~ .custom-control-label {
25 |                 &::before {
26 |                     border-color: $custom-control-indicator-disabled-bg;
27 |                 }
28 |             }
29 | 
30 |             &:checked {
31 |                 &::before {
32 |                     border-color: $custom-control-indicator-checked-disabled-bg;
33 |                 }
34 |             }
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-radio.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom radio
 3 | //
 4 | 
 5 | .custom-radio {
 6 |     .custom-control-input ~ .custom-control-label {
 7 |         cursor: pointer;
 8 |         font-size: $font-size-sm;
 9 |     }
10 | 
11 |     .custom-control-input {
12 |         &:checked {
13 |             ~ .custom-control-label {
14 |                 &::before {
15 |                     border-color: $custom-control-indicator-checked-border-color;
16 |                 }
17 |                 &::after {
18 |                     background-image: $custom-radio-indicator-icon-checked;
19 |                 }
20 |             }
21 |         }
22 | 
23 |         &:disabled {
24 |             ~ .custom-control-label {
25 |                 &::before {
26 |                     border-color: $custom-control-indicator-disabled-bg;
27 |                 }
28 |             }
29 | 
30 |             &:checked {
31 |                 &::before {
32 |                     border-color: $custom-control-indicator-checked-disabled-bg;
33 |                 }
34 |             }
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-toggle.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom toggle
 3 | //
 4 | 
 5 | .custom-toggle {
 6 |     position: relative;
 7 |     display: inline-block;
 8 |     width: $custom-toggle-width;
 9 |     height: 1.5rem;
10 | 
11 |     input {
12 |         display: none;
13 | 
14 |         &:checked {
15 |              + .custom-toggle-slider {
16 |                 border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
17 | 
18 |                 &:before {
19 |                     background: $custom-toggle-checked-bg;
20 |                     transform: translateX(1.625rem);
21 |                 }
22 |             }
23 |         }
24 | 
25 |         &:disabled {
26 |             + .custom-toggle-slider {
27 |                 border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
28 |             }
29 | 
30 |             &:checked {
31 |                 + .custom-toggle-slider {
32 |                     border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
33 | 
34 |                     &:before {
35 |                         background-color: lighten($custom-control-indicator-checked-bg, 10%);
36 |                     }
37 |                 }
38 |             }
39 |         }
40 |     }
41 | }
42 | 
43 | .custom-toggle-slider {
44 |     position: absolute;
45 |     cursor: pointer;
46 |     top: 0;
47 |     left: 0;
48 |     right: 0;
49 |     bottom: 0;
50 |     border: $custom-control-indicator-border-width solid $input-border-color;
51 |     border-radius: 34px !important;
52 |     background-color: transparent;
53 | 
54 | 
55 |     &:before {
56 |         position: absolute;
57 |         content: "";
58 |         height: 18px;
59 |         width: 18px;
60 |         left: 2px;
61 |         bottom: 2px;
62 |         border-radius: 50% !important;
63 |         background-color: $custom-toggle-slider-bg;
64 |         transition: $input-transition;
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/dropdowns/_dropdown.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Dropdown
 3 | //
 4 | 
 5 | // General styles
 6 | 
 7 | .dropdown,
 8 | .dropup,
 9 | .dropright,
10 | .dropleft {
11 |     display: inline-block;
12 | }
13 | 
14 | .dropdown-menu {
15 |     min-width: 12rem;
16 | 
17 |     .dropdown-item {
18 |         padding: .5rem 1rem;
19 |         font-size: $font-size-sm;
20 |         > i,
21 |         > svg {
22 |             margin-right: 1rem;
23 |             font-size: 1rem;
24 |             vertical-align: -17%;
25 |         }
26 |     }
27 | }
28 | 
29 | .dropdown-header {
30 |     padding-left: 1rem;
31 |     padding-right: 1rem;
32 |     color: $gray-100;
33 |     font-size: .625rem;
34 |     text-transform: uppercase;
35 |     font-weight: 700;
36 | }
37 | 
38 | 
39 | // Media components inside dropdown link
40 | 
41 | .dropdown-menu {
42 |     a.media {
43 | 
44 |         > div {
45 |             &:first-child {
46 |                 line-height: 1;
47 |             }
48 |         }
49 | 
50 |         p {
51 |             color: $gray-600;
52 |         }
53 | 
54 |         &:hover {
55 |             .heading,
56 |             p {
57 |                 color: theme-color("default") !important;
58 |             }
59 |         }
60 |     }
61 | }
62 | 
63 | 
64 | // Size variations
65 | 
66 | .dropdown-menu-sm {
67 |     min-width: 100px;
68 |     border: $border-radius-lg;
69 | }
70 | 
71 | .dropdown-menu-lg {
72 |     min-width: 260px;
73 |     border-radius: $border-radius-lg;
74 | }
75 | 
76 | .dropdown-menu-xl {
77 |     min-width: 450px;
78 |     border-radius: $border-radius-lg;
79 | }
80 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/footers/_footer.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Footer
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .footer {
 9 |     background: $footer-bg;
10 |     padding: $footer-padding-y $footer-padding-x;
11 | 
12 |     .col-footer {
13 |         .heading {
14 |             color: $footer-heading-color;
15 |             letter-spacing: 0;
16 |             font-size: $footer-heading-font-size;
17 |             text-transform: uppercase;
18 |             font-weight: $font-weight-bold;
19 |             margin-bottom: 1rem;
20 |         }
21 |     }
22 | 
23 |     .nav .nav-item .nav-link,
24 |     .footer-link {
25 |         color: $footer-link-color !important;
26 | 
27 |         &:hover {
28 |             color: $footer-link-hover-color !important;
29 |         }
30 |     }
31 | 
32 |     .list-unstyled li a {
33 |         display: inline-block;
34 |         padding: .125rem 0;
35 |         color: $footer-link-color;
36 |         font-size: $footer-link-font-size;
37 | 
38 |         &:hover {
39 |             color: $footer-link-hover-color;
40 |         }
41 |     }
42 | 
43 |     .copyright {
44 |         font-size: $font-size-sm;
45 |     }
46 | }
47 | 
48 | 
49 | // Dark footer
50 | 
51 | .footer-dark {
52 |     .col-footer .heading {
53 |         color: $white;
54 |     }
55 | }
56 | 
57 | 
58 | // Footer nav used for copyright and some links, but not limited to this
59 | 
60 | .nav-footer {
61 |     .nav-link {
62 |         font-size: $font-size-sm;
63 |     }
64 | 
65 |     .nav-item:last-child {
66 |         .nav-link {
67 |             padding-right: 0;
68 |         }
69 |     }
70 | }
71 | 
72 | 
73 | // Footer with cards over
74 | 
75 | .footer.has-cards {
76 |     overflow: hidden;
77 |     padding-top: 500px;
78 |     margin-top: -420px;
79 |     position: relative;
80 |     background: transparent;
81 |     pointer-events: none;
82 | 
83 |     &:before {
84 |         content: "";
85 |         position: absolute;
86 |         left: 0;
87 |         right: 0;
88 |         top: 600px;
89 |         height: 2000px;
90 |         background: theme-color("secondary");
91 |         transform: skew(0,-8deg);
92 |     }
93 | 
94 |     .container {
95 |         pointer-events: auto;
96 |         position: relative;
97 |     }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/forms/_form-validation.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Form validation
 3 | //
 4 | 
 5 | // Validation
 6 | 
 7 | .has-success,
 8 | .has-danger {
 9 |     position: relative;
10 | 
11 |     &:after, {
12 |         width: 19px;
13 |         height: 19px;
14 |         line-height: 19px;
15 |         text-align: center;
16 |         font-family: 'NucleoIcons';
17 |         display: inline-block;
18 |         position: absolute;
19 |         right: 15px;
20 |         top: 2px;
21 |         transform: translateY(50%);
22 |         border-radius: 50%;
23 |         font-size: 9px;
24 |         opacity: 1;
25 |     }
26 | }
27 | 
28 | .has-success {
29 |     &:after {
30 |         content: "\ea26";
31 |         color: daken($form-feedback-valid-color, 18%);
32 |         background-color: $form-feedback-valid-bg;
33 |     }
34 |     
35 |     .form-control {
36 |         background-color: $input-focus-bg;
37 | 
38 |         &:focus {
39 |             border-color: $input-focus-border-color;
40 |         }
41 | 
42 | 
43 |         // Placeholder
44 | 
45 |         &::placeholder {
46 |             color: $form-feedback-valid-color;
47 |         }
48 |     }
49 | }
50 | 
51 | .has-danger {
52 |     &:after {
53 |         content: "\ea53";
54 |         color: daken($form-feedback-invalid-color, 18%);
55 |         background-color: $form-feedback-invalid-bg;
56 |     }
57 | 
58 |     .form-control {
59 |         background-color: $input-focus-bg;
60 | 
61 |         &:focus {
62 |             border-color: $input-focus-border-color;
63 |         }
64 | 
65 |         // Placeholder
66 | 
67 |         &::placeholder {
68 |             color: $form-feedback-invalid-color;
69 |         }
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/forms/_form.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Forms
 3 | //
 4 | 
 5 | 
 6 | // Labels
 7 | 
 8 | .form-control-label {
 9 |     color: $gray-700;
10 |     font-size: $font-size-sm;
11 |     font-weight: $font-weight-bold;
12 | }
13 | 
14 | 
15 | // Text inputs
16 | 
17 | .form-control {
18 |     font-size: $input-btn-font-size;
19 | 
20 |     &:focus {
21 |         &::placeholder {
22 |             color: $input-focus-placeholder-color;
23 |         }
24 |     }
25 | }
26 | 
27 | 
28 | // Textarea
29 | 
30 | textarea[resize="none"] {
31 |     resize: none!important;
32 | }
33 | 
34 | textarea[resize="both"] {
35 |     resize: both!important;
36 | }
37 | 
38 | textarea[resize="vertical"] {
39 |     resize: vertical!important;
40 | }
41 | 
42 | textarea[resize="horizontal"] {
43 |     resize: horizontal!important;
44 | }
45 | 
46 | 
47 | // Form input variations
48 | 
49 | // Muted input
50 | 
51 | .form-control-muted {
52 |     background-color: $input-muted-bg;
53 |     border-color: $input-muted-bg;
54 |     box-shadow: none;
55 | 
56 |     &:focus {
57 |         background-color: $input-focus-muted-bg;
58 |     }
59 | }
60 | 
61 | 
62 | // Alternative input
63 | 
64 | .form-control-alternative {
65 |     box-shadow: $input-alternative-box-shadow;
66 |     border: 0;
67 |     transition: box-shadow .15s ease;
68 | 
69 |     &:focus {
70 |         box-shadow: $input-focus-alternative-box-shadow;
71 |     }
72 | }
73 | 
74 | // Size variations: Fixes to the bootstrap defaults
75 | 
76 | .form-control-lg {
77 |     font-size: $font-size-base;
78 | }
79 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/forms/_input-group.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Input group
 3 | //
 4 | 
 5 | .input-group {
 6 | 	box-shadow: $input-box-shadow;
 7 | 	border-radius: $input-border-radius;
 8 | 	transition: $transition-base;
 9 | 
10 | 	.form-control {
11 | 		box-shadow: none;
12 | 
13 | 		&:not(:first-child) {
14 | 		    border-left: 0;
15 | 		    padding-left: 0;
16 | 		}
17 | 		&:not(:last-child) {
18 | 			border-right: 0;
19 | 			padding-right: 0;
20 | 		}
21 | 		&:focus {
22 | 			box-shadow: none;
23 | 		}
24 | 	}
25 | }
26 | 
27 | .input-group-text {
28 |     transition: $input-transition;
29 | }
30 | 
31 | 
32 | // Alternative input groups related to .form-control-alternative
33 | 
34 | 
35 | .input-group-alternative {
36 |     box-shadow: $input-alternative-box-shadow;
37 |     border: 0;
38 |     transition: box-shadow .15s ease;
39 | 
40 |     .form-control,
41 |     .input-group-text {
42 |         border: 0;
43 |         box-shadow: none;
44 |     }
45 | }
46 | 
47 | .focused {
48 | 	.input-group-alternative {
49 |         box-shadow: $input-focus-alternative-box-shadow !important;
50 |     }
51 | }
52 | 
53 | 
54 | // .focus class is applied dinamycally from theme.js
55 | 
56 | .focused {
57 | 	.input-group {
58 | 		box-shadow: $input-focus-box-shadow;
59 | 	}
60 | 
61 | 	.input-group-text {
62 | 	    color: $input-group-addon-focus-color;
63 | 	    background-color: $input-group-addon-focus-bg;
64 | 	    border-color: $input-group-addon-focus-border-color;
65 | 	}
66 | 
67 | 	.form-control {
68 | 		border-color: $input-group-addon-focus-border-color;
69 | 	}
70 | }
71 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/headers/_header.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Header
3 | //
4 | 
5 | .header {
6 |     position: relative;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/icons/_icon-shape.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Icon shape
 3 | //
 4 | 
 5 | 
 6 | .icon-shape {
 7 | 	padding: 12px;
 8 | 	text-align: center;
 9 | 	display: inline-flex;
10 | 	align-items: center;
11 | 	justify-content: center;
12 | 	border-radius: 50%;
13 | 
14 | 
15 | 	i, svg {
16 | 		font-size: 1.25rem;
17 | 	}
18 | 
19 | 	&.icon-lg {
20 | 		i, svg {
21 | 			font-size: 1.625rem;
22 | 		}
23 | 	}
24 | 
25 | 	&.icon-sm {
26 | 		i, svg {
27 | 			font-size: .875rem;
28 | 		}
29 | 	}
30 | 
31 | 	svg {
32 | 		width: 30px;
33 | 		height: 30px;
34 | 	}
35 | 
36 | }
37 | 
38 | @each $color, $value in $theme-colors {
39 | 	.icon-shape-#{$color} {
40 | 		@include icon-shape-variant(theme-color($color));
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/icons/_icon.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Icon
 3 | //
 4 | 
 5 | .icon {
 6 | 	width: $icon-size;
 7 | 	height: $icon-size;
 8 | 
 9 | 	i, svg {
10 | 		font-size: $icon-size - .75;
11 | 	}
12 | 
13 |     + .icon-text {
14 |     	padding-left: 1rem;
15 |     	width: calc(100% - #{$icon-size} - 1);
16 |     }
17 | }
18 | 
19 | 
20 | // Extra large icons
21 | 
22 | .icon-xl {
23 | 	width: $icon-size-xl;
24 | 	height: $icon-size-xl;
25 | 
26 | 	i, svg {
27 | 		font-size: $icon-size-xl - .75;
28 | 	}
29 | 
30 |     + .icon-text {
31 |     	width: calc(100% - #{$icon-size-xl} - 1);
32 |     }
33 | }
34 | 
35 | 
36 | // Large icons
37 | 
38 | .icon-lg {
39 | 	width: $icon-size-lg;
40 | 	height: $icon-size-lg;
41 | 
42 | 	i, svg {
43 | 		font-size: $icon-size-lg - .75;
44 | 	}
45 | 
46 |     + .icon-text {
47 |     	width: calc(100% - #{$icon-size-lg} - 1);
48 |     }
49 | }
50 | 
51 | 
52 | // Small icon
53 | 
54 | .icon-sm {
55 | 	width: $icon-size-sm;
56 | 	height: $icon-size-sm;
57 | 
58 | 	i, svg {
59 | 		font-size: $icon-size-sm - .75;
60 | 	}
61 | 
62 |     + .icon-text {
63 |     	width: calc(100% - #{$icon-size-sm} - 1);
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/list-groups/_list-group.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // List group
 3 | //
 4 | 
 5 | 
 6 | // Space list items
 7 | 
 8 | .list-group-space {
 9 |     .list-group-item {
10 |         margin-bottom: 1.5rem;
11 |         @include border-radius($list-group-border-radius);
12 |     }
13 | }
14 | 
15 | 
16 | // Extended list group components
17 | 
18 | .list-group-img {
19 |     width: 3rem;
20 |     height: 3rem;
21 |     border-radius: 50%;
22 |     vertical-align: top;
23 |     margin: -.1rem 1.2rem 0 -.2rem;
24 | }
25 | 
26 | .list-group-content {
27 |     flex: 1;
28 |     min-width: 0;
29 | 
30 |     > p {
31 |        color: $gray-500;
32 |        line-height: 1.5;
33 |        margin: .2rem 0 0;
34 |    }
35 | }
36 | 
37 | .list-group-heading {
38 |     font-size: $font-size-base;
39 |     color: $gray-800;
40 | 
41 |     > small {
42 |        float: right;
43 |        color: $gray-500;
44 |        font-weight: 500;
45 |    }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/maps/_map.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Map
 3 | //
 4 | 
 5 | .map-canvas {
 6 |     position: relative;
 7 |     width: 100%;
 8 |     height: $map-height;
 9 |     border-radius: $border-radius;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/masks/_mask.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Mask
 3 | //
 4 | 
 5 | .mask {
 6 |     position: absolute;
 7 |     top: 0;
 8 |     left: 0;
 9 |     width: 100%;
10 |     height: 100%;
11 |     @include transition($transition-base);
12 | }
13 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_alert.scss:
--------------------------------------------------------------------------------
 1 | @mixin alert-variant($background, $border, $color) {
 2 |     color: color-yiq($background);
 3 |     @include gradient-bg($background);
 4 |     border-color: $border;
 5 | 
 6 |     hr {
 7 |         border-top-color: darken($border, 5%);
 8 |     }
 9 | 
10 |     .alert-link {
11 |         color: darken($color, 10%);
12 |     }
13 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
 1 | // Contextual backgrounds
 2 | @mixin bg-variant($parent, $color, $ignore-warning: true) {
 3 |     #{$parent} {
 4 |         background-color: $color !important;
 5 |     }
 6 |     a#{$parent},
 7 |     button#{$parent} {
 8 |         @include hover-focus {
 9 |             background-color: darken($color, 10%) !important;
10 |         }
11 |     }
12 | }
13 | 
14 | @mixin bg-gradient-variant($parent, $color) {
15 |     #{$parent} {
16 |         background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
17 |     }
18 | }
19 | 
20 | @mixin bg-translucent-variant($parent, $color) {
21 |     #{$parent} {
22 |         background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
23 |     }
24 |     a#{$parent},
25 |     button#{$parent} {
26 |         @include hover-focus {
27 |             background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
28 |         }
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_badge.scss:
--------------------------------------------------------------------------------
 1 | @mixin badge-variant($bg) {
 2 | 	color: saturate(darken($bg, 10%), 10);
 3 |     background-color: transparentize(lighten($bg, 25%), .5);
 4 | 
 5 |   	&[href] {
 6 | 	    @include hover-focus {
 7 | 	        color: color-yiq($bg);
 8 | 	        text-decoration: none;
 9 | 	        background-color: darken($bg, 10%);
10 | 	    }
11 | 	}
12 | }
13 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_buttons.scss:
--------------------------------------------------------------------------------
  1 | @mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
  2 |     color: color-yiq($background);
  3 |     @include gradient-bg($background);
  4 |     border-color: $border;
  5 |     @include box-shadow($btn-box-shadow);
  6 | 
  7 |     @include hover {
  8 |         color: color-yiq($hover-background);
  9 |         @include gradient-bg($hover-background);
 10 |         border-color: $hover-border;
 11 |     }
 12 | 
 13 |     &:focus,
 14 |     &.focus {
 15 |         // Avoid using mixin so we can pass custom focus shadow properly
 16 |         @if $enable-shadows {
 17 |             box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
 18 |         }
 19 |         @else {
 20 |             box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
 21 |         }
 22 |     } // Disabled comes first so active can properly restyle
 23 |     &.disabled,
 24 |     &:disabled {
 25 |         color: color-yiq($background);
 26 |         background-color: $background;
 27 |         border-color: $border;
 28 |     }
 29 | 
 30 |     &:not(:disabled):not(.disabled):active,
 31 |     &:not(:disabled):not(.disabled).active,
 32 |     .show>&.dropdown-toggle {
 33 |         color: color-yiq($active-background);
 34 |         background-color: $active-background;
 35 |         @if $enable-gradients {
 36 |             background-image: none; // Remove the gradient for the pressed/active state
 37 |         }
 38 |         border-color: $active-border;
 39 | 
 40 |         &:focus {
 41 |             // Avoid using mixin so we can pass custom focus shadow properly
 42 |             @if $enable-shadows {
 43 |                 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
 44 |             }
 45 |             @else {
 46 |                 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
 47 |             }
 48 |         }
 49 |     }
 50 | }
 51 | 
 52 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
 53 |     color: $color;
 54 |     background-color: transparent;
 55 |     background-image: none;
 56 |     border-color: $color;
 57 | 
 58 |     &:hover {
 59 |         color: $color-hover;
 60 |         background-color: $active-background;
 61 |         border-color: $active-border;
 62 |     }
 63 | 
 64 |     &:focus,
 65 |     &.focus {
 66 |         box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
 67 |     }
 68 | 
 69 |     &.disabled,
 70 |     &:disabled {
 71 |         color: $color;
 72 |         background-color: transparent;
 73 |     }
 74 | 
 75 |     &:not(:disabled):not(.disabled):active,
 76 |     &:not(:disabled):not(.disabled).active,
 77 |     .show>&.dropdown-toggle {
 78 |         color: color-yiq($active-background);
 79 |         background-color: $active-background;
 80 |         border-color: $active-border;
 81 | 
 82 |         &:focus {
 83 |             // Avoid using mixin so we can pass custom focus shadow properly
 84 |             @if $enable-shadows and $btn-active-box-shadow !=none {
 85 |                 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
 86 |             }
 87 |             @else {
 88 |                 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
 89 |             }
 90 |         }
 91 |     }
 92 | }
 93 | 
 94 | // Button sizes
 95 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
 96 |     padding: $padding-y $padding-x;
 97 |     font-size: $font-size;
 98 |     line-height: $line-height; // Manually declare to provide an override to the browser default
 99 |     @if $enable-rounded {
100 |         border-radius: $border-radius;
101 |     }
102 |     @else {
103 |         border-radius: 0;
104 |     }
105 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_forms.scss:
--------------------------------------------------------------------------------
  1 | @mixin form-control-focus($ignore-warning) {
  2 |   &:focus {
  3 |     color: $input-focus-color;
  4 |     background-color: $input-focus-bg;
  5 |     border-color: $input-focus-border-color;
  6 |     outline: 0;
  7 |     // Avoid using mixin so we can pass custom focus shadow properly
  8 |     @if $enable-shadows {
  9 |       box-shadow: $input-box-shadow, $input-focus-box-shadow;
 10 |     } @else {
 11 |       box-shadow: $input-focus-box-shadow;
 12 |     }
 13 |   }
 14 | }
 15 | 
 16 | 
 17 | @mixin form-validation-state($state, $color, $icon) {
 18 |   .#{$state}-feedback {
 19 |     display: none;
 20 |     width: 100%;
 21 |     margin-top: $form-feedback-margin-top;
 22 |     font-size: $form-feedback-font-size;
 23 |     color: $color;
 24 |   }
 25 | 
 26 |   .#{$state}-tooltip {
 27 |     position: absolute;
 28 |     top: 100%;
 29 |     z-index: 5;
 30 |     display: none;
 31 |     max-width: 100%; // Contain to parent when possible
 32 |     padding: .5rem;
 33 |     margin-top: .1rem;
 34 |     font-size: .875rem;
 35 |     line-height: 1;
 36 |     color: #fff;
 37 |     background-color: rgba($color, .8);
 38 |     border-radius: .2rem;
 39 |   }
 40 | 
 41 |   .form-control,
 42 |   .custom-select {
 43 |     .was-validated &:#{$state},
 44 |     &.is-#{$state} {
 45 |       border-color: $color;
 46 | 
 47 |       &:focus {
 48 |         border-color: $color;
 49 |         //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
 50 |       }
 51 | 
 52 |       ~ .#{$state}-feedback,
 53 |       ~ .#{$state}-tooltip {
 54 |         display: block;
 55 |       }
 56 |     }
 57 |   }
 58 | 
 59 |   .form-check-input {
 60 |     .was-validated &:#{$state},
 61 |     &.is-#{$state} {
 62 |       ~ .form-check-label {
 63 |         color: $color;
 64 |       }
 65 | 
 66 |       ~ .#{$state}-feedback,
 67 |       ~ .#{$state}-tooltip {
 68 |         display: block;
 69 |       }
 70 |     }
 71 |   }
 72 | 
 73 |   .custom-control-input {
 74 |     .was-validated &:#{$state},
 75 |     &.is-#{$state} {
 76 |       ~ .custom-control-label {
 77 |         color: $color;
 78 | 
 79 |         &::before {
 80 |           background-color: lighten($color, 25%);
 81 |           border-color: lighten($color, 25%);
 82 |         }
 83 |       }
 84 | 
 85 |       ~ .#{$state}-feedback,
 86 |       ~ .#{$state}-tooltip {
 87 |         display: block;
 88 |       }
 89 | 
 90 |       &:checked {
 91 |         ~ .custom-control-label::before {
 92 |           @include gradient-bg(lighten($color, 10%));
 93 |           border-color: lighten($color, 25%);
 94 |         }
 95 |       }
 96 | 
 97 |       &:focus {
 98 |         ~ .custom-control-label::before {
 99 |           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
100 |         }
101 |       }
102 |     }
103 |   }
104 | 
105 |   // custom file
106 |   .custom-file-input {
107 |     .was-validated &:#{$state},
108 |     &.is-#{$state} {
109 |       ~ .custom-file-label {
110 |         border-color: $color;
111 | 
112 |         &::before { border-color: inherit; }
113 |       }
114 | 
115 |       ~ .#{$state}-feedback,
116 |       ~ .#{$state}-tooltip {
117 |         display: block;
118 |       }
119 | 
120 |       &:focus {
121 |         ~ .custom-file-label {
122 |           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
123 |         }
124 |       }
125 |     }
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_icon.scss:
--------------------------------------------------------------------------------
1 | @mixin icon-shape-variant($color) {
2 |     color: saturate(darken($color, 10%), 10);
3 |     background-color: transparentize(lighten($color, 10%), .5);
4 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_modals.scss:
--------------------------------------------------------------------------------
 1 | @mixin modal-variant($background) {
 2 | 	.modal-title {
 3 | 		color: color-yiq($background);
 4 | 	}
 5 | 	.modal-header,
 6 | 	.modal-footer {
 7 | 		border-color: rgba(color-yiq($background), .075);
 8 | 	}
 9 | 	.modal-content {
10 | 		background-color: $background;
11 | 		color: color-yiq($background);
12 | 
13 | 		.heading {
14 | 			color: color-yiq($background);
15 | 		}
16 | 	}
17 | 
18 | 	.close { 
19 |     	&>span:not(.sr-only) {
20 |     		color: $white;
21 |     	}
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/mixins/_popover.scss:
--------------------------------------------------------------------------------
 1 | @mixin popover-variant($background) {
 2 | 
 3 | 	background-color: $background;
 4 | 
 5 | 	.popover-header {
 6 | 		background-color: $background;
 7 | 		color: color-yiq($background);
 8 | 	}
 9 | 
10 | 	.popover-body {
11 | 		color: color-yiq($background);
12 | 	}
13 | 	.popover-header{
14 | 		border-color: rgba(color-yiq($background), .2);
15 | 	}
16 | 	&.bs-popover-top {
17 | 		.arrow::after {
18 | 			border-top-color: $background;
19 | 		}
20 | 	}
21 | 	&.bs-popover-right {
22 | 		.arrow::after {
23 | 			border-right-color: $background;
24 | 		}
25 | 	}
26 | 	&.bs-popover-bottom {
27 | 		.arrow::after {
28 | 			border-bottom-color: $background;
29 | 		}
30 | 	}
31 | 	&.bs-popover-left {
32 | 		.arrow::after {
33 | 			border-left-color: $background;
34 | 		}
35 | 	}
36 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/modals/_modal.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Modal
 3 | //
 4 | 
 5 | 
 6 | // Fluid modal
 7 | 
 8 | .modal-fluid {
 9 |     .modal-dialog {
10 |         margin-top: 0;
11 |         margin-bottom: 0;
12 |     }
13 |     .modal-content {
14 |         border-radius: 0;
15 |     }
16 | }
17 | 
18 | 
19 | // Background color variations
20 | 
21 | @each $color, $value in $theme-colors {
22 |     .modal-#{$color} {
23 |         @include modal-variant($value);
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navbars/_navbar-collapse.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Navabar collapse
  3 | //
  4 | 
  5 | // Collapse
  6 | 
  7 | .navbar-collapse-header {
  8 |     display: none;
  9 | }
 10 | 
 11 | @include media-breakpoint-down(sm) {
 12 |     .navbar-nav {
 13 |         .nav-link {
 14 |             padding: .625rem 0;
 15 |             color: theme-color("default") !important;
 16 |         }
 17 | 
 18 |         .dropdown-menu {
 19 |             box-shadow: none;
 20 |             min-width: auto;
 21 | 
 22 |             .media {
 23 |                 svg {
 24 |                     width: 30px;
 25 |                 }
 26 |             }
 27 |         }
 28 |     }
 29 | 
 30 |     .navbar-collapse {
 31 |         width: calc(100% - 1.4rem);
 32 |         position: absolute;
 33 |         top: 0;
 34 |         left: 0;
 35 |         right: 0;
 36 |         z-index: 1050;
 37 |         margin: .7rem;
 38 |         overflow-y: auto;
 39 |         height: auto !important;
 40 |         opacity: 0;
 41 | 
 42 |         .navbar-toggler {
 43 |             width: 20px;
 44 |             height: 20px;
 45 |             position: relative;
 46 |             cursor: pointer;
 47 |             display: inline-block;
 48 |             padding: 0;
 49 | 
 50 |             span {
 51 |                 display: block;
 52 |                 position: absolute;
 53 |                 width: 100%;
 54 |                 height: 2px;
 55 |                 border-radius: 2px;
 56 |                 opacity: 1;
 57 |                 background: #283448;
 58 |             }
 59 | 
 60 |             :nth-child(1) {
 61 |                 transform: rotate(135deg);
 62 |             }
 63 | 
 64 |             :nth-child(2) {
 65 |                 transform: rotate(-135deg);
 66 |             }
 67 |         }
 68 | 
 69 |         .navbar-collapse-header {
 70 |             display: block;
 71 |             padding-bottom: 1rem;
 72 |             margin-bottom: 1rem;
 73 |             border-bottom: 1px solid rgba(0, 0, 0, .1);
 74 |         }
 75 | 
 76 |         .collapse-brand {
 77 |             img {
 78 |                 height: 36px;
 79 |             }
 80 |         }
 81 | 
 82 |         .collapse-close {
 83 |             text-align: right;
 84 |         }
 85 |     }
 86 | 
 87 |     .navbar-collapse.collapsing,
 88 |     .navbar-collapse.show {
 89 |         padding: 1.5rem;
 90 |         border-radius: $border-radius;
 91 |         background: #FFF;
 92 |         box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
 93 |         animation: show-navbar-collapse .2s ease forwards;
 94 |     }
 95 | 
 96 |     .navbar-collapse.collapsing-out {
 97 |         animation: hide-navbar-collapse .2s ease forwards;
 98 |     }
 99 | }
100 | 
101 | @keyframes show-navbar-collapse {
102 |     0% {
103 |         opacity: 0;
104 |         transform: scale(.95);
105 |         transform-origin: 100% 0;
106 |     }
107 | 
108 |     100% {
109 |         opacity: 1;
110 |         transform: scale(1);
111 |     }
112 | }
113 | 
114 | @keyframes hide-navbar-collapse {
115 |     from {
116 |         opacity: 1;
117 |         transform: scale(1);
118 |         transform-origin: 100% 0;
119 |     }
120 | 
121 |     to {
122 |         opacity: 0;
123 |         transform: scale(.95);
124 |     }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navbars/_navbar-dropdown.scss:
--------------------------------------------------------------------------------
  1 | // Dropdown menu
  2 | 
  3 | @include media-breakpoint-up(md) {
  4 |     .navbar {
  5 |         .dropdown-menu {
  6 |             opacity: 0;
  7 |             pointer-events: none;
  8 |             margin: 0;
  9 |         }
 10 | 
 11 |         .dropdown-menu-arrow {
 12 |             &:before {
 13 |                 background: $dropdown-bg;
 14 |                 box-shadow: none;
 15 |                 content: '';
 16 |                 display: block;
 17 |                 height: 12px;
 18 |                 width: 12px;
 19 |                 left: 20px;
 20 |                 position: absolute;
 21 |                 bottom: 100%;
 22 |                 transform: rotate(-45deg) translateY(12px);
 23 |                 z-index: -5;
 24 |                 border-radius: 2px;
 25 |             }
 26 |         }
 27 | 
 28 |         .dropdown-menu-right {
 29 |             &:before {
 30 |                 right: 20px;
 31 |                 left: auto;
 32 |             }
 33 |         }
 34 | 
 35 |         &:not(.navbar-nav-hover) {
 36 |             .dropdown-menu {
 37 |                 &.show {
 38 |                     opacity: 1;
 39 |                     pointer-events: auto;
 40 |                     animation: show-navbar-dropdown .25s ease forwards;
 41 |                 }
 42 | 
 43 |                 &.close {
 44 |                     display: block;
 45 |                     animation: hide-navbar-dropdown .15s ease backwards;
 46 |                 }
 47 |             }
 48 |         }
 49 | 
 50 |         &.navbar-nav-hover {
 51 |             .dropdown-menu {
 52 |                 opacity: 0;
 53 |                 display: block;
 54 |                 pointer-events: none;
 55 |                 transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
 56 |                 transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
 57 |             }
 58 | 
 59 |             .nav-item.dropdown:hover > .dropdown-menu {
 60 |                 display: block;
 61 |                 opacity: 1;
 62 |                 pointer-events: auto;
 63 |                 visibility: visible;
 64 |                 transform: translate(0, 0);
 65 |                 animation: none;
 66 |             }
 67 |         }
 68 | 
 69 |         .dropdown-menu-inner {
 70 |             position: relative;
 71 |             padding: 1rem;
 72 |         }
 73 | 
 74 | 
 75 |         // Keyframes
 76 | 
 77 |         @keyframes show-navbar-dropdown {
 78 |             0% {
 79 |                 opacity: 0;
 80 |                 transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
 81 |                 transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
 82 |             }
 83 | 
 84 |             100% {
 85 |                 transform: translate(0, 0);
 86 |                 opacity: 1;
 87 |             }
 88 |         }
 89 | 
 90 |         @keyframes hide-navbar-dropdown {
 91 |             from {
 92 |                 opacity: 1;
 93 |             }
 94 | 
 95 |             to {
 96 |                 opacity: 0;
 97 |                 transform: translate(0, 10px);
 98 |             }
 99 |         }
100 |     }
101 | }
102 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navbars/_navbar-search.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Navbar search
 3 | //
 4 | 
 5 | .navbar-search {
 6 |     .input-group {
 7 |         border-radius: $navbar-search-border-radius;
 8 |         border: $navbar-search-border-width solid;
 9 |         background-color: transparent;
10 | 
11 |         .input-group-text {
12 |             background-color: transparent;
13 |             padding-left: 1rem;
14 |         }
15 |     }
16 | 
17 |     .form-control {
18 |         width: $navbar-search-width;
19 |         background-color: transparent;
20 |     }
21 | }
22 | 
23 | .navbar-search-dark {
24 |     .input-group {
25 |         border-color: $navbar-search-dark-border-color;
26 |     }
27 | 
28 |     .input-group-text {
29 |         color: $navbar-search-dark-color;
30 |     }
31 | 
32 |     .form-control {
33 |         color: $navbar-search-dark-focus-color;
34 | 
35 |         &::placeholder {
36 |             color: $navbar-search-dark-color;
37 |         }
38 |     }
39 | 
40 |     .focused {
41 |         .input-group {
42 |             border-color: $navbar-search-dark-focus-border-color;
43 |         }
44 |     }
45 | }
46 | 
47 | .navbar-search-light {
48 |     .input-group {
49 |         border-color: $navbar-search-light-border-color;
50 |     }
51 | 
52 |     .input-group-text {
53 |         color: $navbar-search-light-color;
54 |     }
55 | 
56 |     .form-control {
57 |         color: $navbar-search-light-focus-color;
58 | 
59 |         &::placeholder {
60 |             color: $navbar-search-light-color;
61 |         }
62 |     }
63 | 
64 |     .focused {
65 |         .input-group {
66 |             border-color: $navbar-search-light-focus-border-color;
67 |         }
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navbars/_navbar.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Navbar
  3 | //
  4 | 
  5 | 
  6 | // Navbar links
  7 | 
  8 | .navbar-horizontal {
  9 |     .navbar-nav {
 10 |         .nav-link {
 11 |             font-size: $navbar-nav-link-font-size;
 12 |             font-weight: $navbar-nav-link-font-weight;
 13 |             text-transform: $navbar-nav-link-text-transform;
 14 |             letter-spacing: $navbar-nav-link-letter-spacing;
 15 |             @include transition($navbar-transition);
 16 | 
 17 |             .nav-link-inner--text {
 18 |                 margin-left: .25rem;
 19 |             }
 20 |         }
 21 |     }
 22 | 
 23 | 
 24 |     // Navbar brand (logo)
 25 | 
 26 |     .navbar-brand {
 27 |         font-size: $font-size-sm;
 28 |         font-weight: 600;
 29 |         text-transform: uppercase;
 30 |         font-size: .875rem;
 31 |         letter-spacing: .05px;
 32 | 
 33 |         img {
 34 |             height: 30px;
 35 |         }
 36 |     }
 37 | 
 38 |     .navbar-dark {
 39 |         .navbar-brand {
 40 |             color: $white;
 41 |         }
 42 |     }
 43 | 
 44 |     .navbar-light {
 45 |         .navbar-brand {
 46 |             color: $gray-800;
 47 |         }
 48 |     }
 49 | 
 50 |     .navbar-nav {
 51 |       .nav-item {
 52 |         .media:not(:last-child){
 53 |           margin-bottom: 1.5rem;
 54 |         }
 55 |       }
 56 |     }
 57 | 
 58 |     @include media-breakpoint-up(lg) {
 59 |         .navbar-nav {
 60 |             .nav-item {
 61 |                 margin-right: .5rem;
 62 | 
 63 |                 [data-toggle="dropdown"]::after {
 64 |                     transition: $transition-base;
 65 |                 }
 66 | 
 67 |                 &.show {
 68 |                     [data-toggle="dropdown"]::after {
 69 |                         transform: rotate(180deg);
 70 |                     }
 71 |                 }
 72 |             }
 73 |             .nav-link {
 74 |                 padding-top: $navbar-nav-link-padding-y;
 75 |                 padding-bottom: $navbar-nav-link-padding-y;
 76 |                 border-radius: $navbar-nav-link-border-radius;
 77 | 
 78 |                 i {
 79 |                     margin-right: .625rem;
 80 |                 }
 81 |             }
 82 | 
 83 |             .nav-link-icon {
 84 |                 padding-left: .5rem !important;
 85 |                 padding-right: .5rem !important;
 86 |                 font-size: 1rem;
 87 |                 border-radius: $navbar-nav-link-border-radius;
 88 | 
 89 |                 i {
 90 |                     margin-right: 0;
 91 |                 }
 92 |             }
 93 |         }
 94 |     }
 95 | 
 96 | 
 97 |     // Transparent navbar
 98 | 
 99 |     .navbar-transparent {
100 |         position: absolute;
101 |         top: 0;
102 |         width: 100%;
103 |         z-index: 100;
104 |         background-color: transparent;
105 |         border: 0;
106 |         box-shadow: none;
107 | 
108 |         .navbar-brand {
109 |             color: rgba(255, 255, 255, 1);
110 |         }
111 | 
112 |         .navbar-toggler {
113 |             color: rgba(255, 255, 255, 1);
114 |         }
115 | 
116 |         .navbar-toggler-icon {
117 |             background-image: $navbar-dark-toggler-icon-bg;
118 |         }
119 |     }
120 | 
121 |     @include media-breakpoint-up(md) {
122 |         .navbar-transparent {
123 |             .navbar-nav {
124 |                 .nav-link {
125 |                     color: $navbar-dark-color;
126 | 
127 |                     @include hover-focus {
128 |                         color: $navbar-dark-hover-color;
129 |                     }
130 | 
131 |                     &.disabled {
132 |                         color: $navbar-dark-disabled-color;
133 |                     }
134 |                 }
135 | 
136 |                 .show > .nav-link,
137 |                 .active > .nav-link,
138 |                 .nav-link.show,
139 |                 .nav-link.active {
140 |                     color: $navbar-dark-active-color;
141 |                 }
142 |             }
143 | 
144 |             .navbar-brand {
145 |                 color: $navbar-dark-color;
146 | 
147 |                 @include hover-focus {
148 |                     color: $navbar-dark-color;
149 |                 }
150 |             }
151 |         }
152 |     }
153 | }
154 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navs/_nav-pills.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Nav pills
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .nav-pills {
 9 |     .nav-item:not(:last-child) {
10 |         padding-right: $nav-pills-space-x;
11 |     }
12 | 
13 |     .nav-link {
14 |     	padding: $nav-pills-padding-y $nav-pills-padding-x;
15 |         color: $nav-pills-link-color;
16 |         font-weight: 500;
17 |         font-size: $font-size-sm;
18 |         box-shadow: $nav-pills-box-shadow;
19 |         background-color: $nav-pills-bg;
20 |         transition: $transition-base;
21 | 
22 |         &:hover {
23 |         	color: $nav-pills-link-hover-color;
24 |         }
25 |     }
26 | 
27 |     .nav-link.active,
28 |     .show > .nav-link {
29 |         color: $nav-pills-link-active-color;
30 |         background-color: $nav-pills-link-active-bg;
31 |     }
32 | 
33 |     @include media-breakpoint-down(xs) {
34 |         .nav-item {
35 |             margin-bottom: $spacer;
36 |         }
37 |     }
38 | }
39 | 
40 | @include media-breakpoint-down(sm) {
41 |     .nav-pills:not(.nav-pills-circle) {
42 |         .nav-item {
43 |             padding-right: 0;
44 |         }
45 |     }
46 | }
47 | 
48 | 
49 | // Rounded circle nav pills
50 | 
51 | .nav-pills-circle {
52 |     .nav-link {
53 |         text-align: center;
54 |         height: 60px;
55 |         width: 60px;
56 |         padding: 0;
57 |         line-height: 60px;
58 |         border-radius: 50%;
59 |     }
60 | 
61 |     .nav-link-icon {
62 |         i, svg {
63 |             font-size: 1rem;
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/navs/_nav.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Nav
 3 | //
 4 | 
 5 | 
 6 | // Nav wrapper (container)
 7 | 
 8 | // Nav wrapper
 9 | .nav-wrapper {
10 |     padding: 1rem 0;
11 |     @include border-top-radius($card-border-radius);
12 | 
13 |     + .card {
14 |         @include border-top-radius(0);
15 |         @include border-bottom-radius($card-border-radius);
16 |     }
17 | }
18 | 
19 | 
20 | // Nav links
21 | 
22 | .nav-link {
23 |     color: $nav-link-color;
24 | 
25 |     &:hover {
26 |         color: $nav-link-hover-color;
27 |     }
28 | 
29 |     i.ni {
30 |         position: relative;
31 |         top: 2px;
32 |     }
33 | }
34 | 
35 | @media (min-width: 992px){
36 |   .nav-item.active-pro {
37 |       position: absolute;
38 |       width: 100%;
39 |       bottom: 10px;
40 |       background:  $table-head-bg;
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/paginations/_pagination.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Pagination
 3 | //
 4 | 
 5 | 
 6 | .page-item {
 7 |     &.active .page-link {
 8 |         box-shadow: $pagination-active-box-shadow;
 9 |     }
10 | 
11 |     .page-link,
12 |     span {
13 |         display: flex;
14 |         align-items: center;
15 |         justify-content: center;
16 |         padding: 0;
17 |         margin: 0 3px;
18 |         border-radius: 50% !important;
19 |         width: 36px;
20 | 		height: 36px;
21 | 		font-size: $font-size-sm;
22 |     }
23 | }
24 | 
25 | 
26 | // Size variations
27 | 
28 | .pagination-lg {
29 |     .page-item {
30 |         .page-link,
31 |         span {
32 |             width: 46px;
33 |             height: 46px;
34 |             line-height: 46px;
35 |         }
36 |     }
37 | }
38 | 
39 | .pagination-sm {
40 |     .page-item {
41 |         .page-link,
42 |         span {
43 |             width: 30px;
44 |             height: 30px;
45 |             line-height: 30px;
46 |         }
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/popovers/_popover.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Popover
 3 | //
 4 | 
 5 | 
 6 | .popover {
 7 |     border: 0;
 8 | }
 9 | 
10 | .popover-header {
11 | 	font-weight: $font-weight-bold;
12 | }
13 | 
14 | 
15 | // Alternative colors
16 | 
17 | @each $color, $value in $theme-colors {
18 |     .popover-#{$color} {
19 |         @include popover-variant($value);
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/progresses/_progress.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Progress
 3 | //
 4 | 
 5 | 
 6 | // Progress container
 7 | 
 8 | .progress-wrapper {
 9 |     position: relative;
10 |     padding-top: 1.5rem;
11 | }
12 | 
13 | 
14 | // General styles
15 | 
16 | .progress {
17 |     height: 8px;
18 |     margin-bottom: $spacer;
19 |     overflow: hidden;
20 |     border-radius: $border-radius-sm;
21 |     background-color: $progress-bg;
22 |     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
23 | 
24 |     .sr-only {
25 |         width: auto;
26 |         height: 20px;
27 |         margin: 0 0 0 30px;
28 |         left: 0;
29 |         clip: auto;
30 |         line-height: 20px;
31 |         font-size: 13px;
32 |     }
33 | }
34 | 
35 | 
36 | // Progress inner elements
37 | 
38 | .progress-heading {
39 |     font-size: 14px;
40 |     font-weight: 500;
41 |     margin: 0 0 2px;
42 |     padding: 0;
43 | }
44 | 
45 | .progress-bar {
46 |     box-shadow: none;
47 |     border-radius: 0;
48 |     height: auto;
49 | }
50 | 
51 | .progress-info{
52 |     margin-bottom: .5rem;
53 |     display: flex;
54 |     align-items: center;
55 |     justify-content: space-between;
56 | }
57 | 
58 | .progress-label {
59 |     span {
60 |         display: inline-block;
61 |         color: $primary;
62 |         font-size: .625rem;
63 |         font-weight: 600;
64 |         text-transform: uppercase;
65 |         background: rgba($primary, .1);
66 |         padding: .25rem 1rem;
67 |         border-radius: 30px;
68 |     }
69 | }
70 | 
71 | .progress-percentage {
72 |     text-align: right;
73 |     span {
74 |         display: inline-block;
75 |         color: $gray-600;
76 |         font-size: .875rem;
77 |         font-weight: 600;
78 |     }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/separators/_separator.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Separator
 3 | // add svg on top or bottom of a section for a more stylish visual
 4 | //
 5 | 
 6 | 
 7 | .separator {
 8 |     position: absolute;
 9 |     top: auto;
10 |     left: 0;
11 |     right: 0;
12 |     width: 100%;
13 |     height: 150px;
14 |     transform: translateZ(0);
15 |     overflow: hidden;
16 |     pointer-events: none;
17 | 
18 |     svg {
19 |         position: absolute;
20 |         pointer-events: none;
21 |     }
22 | }
23 | 
24 | .separator-top {
25 |     top: 0;
26 |     bottom: auto;
27 | 
28 |     svg {
29 |         top: 0;
30 |     }
31 | }
32 | 
33 | .separator-bottom {
34 |     top: auto;
35 |     bottom: 0;
36 | 
37 |     svg {
38 |         bottom: 0;
39 |     }
40 | }
41 | 
42 | .separator-inverse {
43 |     transform: rotate(180deg);
44 | }
45 | 
46 | // Styles
47 | 
48 | .separator-skew {
49 |     height: 60px;
50 | 
51 |     @include media-breakpoint-up(xl) {
52 |         height: 70px;
53 |     }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/tables/_table.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Table
  3 | //
  4 | 
  5 | 
  6 | // General styles
  7 | 
  8 | .table {
  9 |     thead th {
 10 |         padding-top: $table-head-spacer-y;
 11 |         padding-bottom: $table-head-spacer-y;
 12 |         font-size: $table-head-font-size;
 13 |         text-transform: $table-head-text-transform;
 14 |         letter-spacing: $table-head-letter-spacing;
 15 |         border-bottom: $table-border-width solid $table-border-color;
 16 |     }
 17 | 
 18 |     th {
 19 |         font-weight: $table-head-font-weight;
 20 |     }
 21 | 
 22 |     td {
 23 |         .progress {
 24 |             height: 3px;
 25 |             width: 120px;
 26 |             margin: 0;
 27 |         }
 28 |     }
 29 | 
 30 |     td,
 31 |     th {
 32 |         font-size: $table-body-font-size;
 33 |         white-space: nowrap;
 34 |     }
 35 | 
 36 | 
 37 |     // Vetical align table content
 38 | 
 39 |     &.align-items-center {
 40 |         td,
 41 |         th {
 42 |             vertical-align: middle;
 43 |         }
 44 |     }
 45 | 
 46 | 
 47 |    // Styles for dark table
 48 | 
 49 |    .thead-dark {
 50 |         th {
 51 |             background-color: $table-dark-head-bg;
 52 |             color: $table-dark-head-color;
 53 |         }
 54 |     }
 55 | 
 56 | 
 57 |     // Styles for light table
 58 | 
 59 |     .thead-light {
 60 |         th {
 61 |             background-color: $table-head-bg;
 62 |             color: $table-head-color;
 63 |         }
 64 |     }
 65 | }
 66 | 
 67 | 
 68 | // Add transition for hover state
 69 | 
 70 | .table-hover {
 71 |     tr {
 72 |         @include transition($transition-base);
 73 |     }
 74 | }
 75 | 
 76 | 
 77 | // Flush tables
 78 | 
 79 | .table-flush {
 80 |     td,
 81 |     th {
 82 |         border-left: 0;
 83 |         border-right: 0;
 84 |     }
 85 | 
 86 |     tbody {
 87 |         tr {
 88 |             &:first-child {
 89 |                 td,
 90 |                 th {
 91 |                     border-top: 0;
 92 |                 }
 93 |             }
 94 | 
 95 |             &:last-child {
 96 |                 td,
 97 |                 th {
 98 |                     border-bottom: 0;
 99 |                 }
100 |             }
101 |         }
102 |     }
103 | }
104 | 
105 | 
106 | // Tables inside cards
107 | 
108 | .card {
109 |     .table {
110 |         margin-bottom: 0;
111 | 
112 |         td,
113 |         th {
114 |             padding-left: $card-spacer-x;
115 |             padding-right: $card-spacer-x;
116 |         }
117 |     }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/type/_article.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Article
 3 | // 
 4 | 
 5 | article {
 6 | 	h4:not(:first-child),
 7 | 	h5:not(:first-child) {
 8 | 		margin-top: 3rem;
 9 | 	}
10 | 
11 | 	h4, h5 {
12 | 		margin-bottom: 1.5rem;
13 | 	}
14 | 
15 | 	figure {
16 | 		margin: 3rem 0;
17 | 	}
18 | 
19 | 	h5 + figure {
20 | 		margin-top: 0;
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/type/_display.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Display
 3 | //
 4 | 
 5 | 
 6 | .display-1,
 7 | .display-2,
 8 | .display-3,
 9 | .display-4 {
10 | 	span {
11 | 		display: block;
12 | 		font-weight: $font-weight-light;
13 | 	}
14 | }
15 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/type/_heading.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Heading
 3 | //
 4 | 
 5 | 
 6 | // General styles
 7 | 
 8 | .heading {
 9 | 	letter-spacing: $heading-letter-spacing;
10 | 	font-size: $heading-font-size;
11 | 	text-transform: $heading-text-transform;
12 | 	font-weight: $heading-font-weight;
13 | }
14 | 
15 | 
16 | // Heading variations
17 | 
18 | .heading-small {
19 | 	padding-top: .25rem;
20 | 	padding-bottom: .25rem;
21 | 	font-size: .75rem;
22 | 	text-transform: uppercase;
23 | 	letter-spacing: .04em;
24 | }
25 | 
26 | .heading-title {
27 | 	letter-spacing: $heading-title-letter-spacing;
28 | 	font-size: $heading-title-font-size;
29 | 	font-weight: $heading-title-font-weight;
30 | 	text-transform: $heading-title-text-transform;
31 | }
32 | 
33 | .heading-section {
34 | 	letter-spacing: $heading-section-letter-spacing;
35 | 	font-size: $heading-section-font-size;
36 | 	font-weight: $heading-section-font-weight;
37 | 	text-transform: $heading-section-text-transform;
38 | 
39 | 	img {
40 | 		display: block;
41 | 		width: 72px;
42 | 		height: 72px;
43 | 		margin-bottom: 1.5rem;
44 | 	}
45 | 
46 | 	&.text-center {
47 | 		img {
48 | 			margin-left: auto;
49 | 			margin-right: auto;
50 | 		}
51 | 	}
52 | }
53 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/type/_type.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Type
 3 | //
 4 | 
 5 | 
 6 | // Paragraphs
 7 | 
 8 | p {
 9 | 	font-size: $paragraph-font-size;
10 | 	font-weight: $paragraph-font-weight;
11 | 	line-height: $paragraph-line-height;
12 | }
13 | 
14 | .lead {
15 | 	font-size: $lead-font-size;
16 |   	font-weight: $lead-font-weight;
17 | 	line-height: $paragraph-line-height;
18 | 	margin-top: 1.5rem;
19 | 
20 | 	+ .btn-wrapper {
21 | 		margin-top: 3rem;
22 | 	}
23 | }
24 | 
25 | .description {
26 | 	font-size: $font-size-sm;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_backgrounds.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Backgrounds
 3 | //
 4 | 
 5 | 
 6 | @each $color, $value in $colors {
 7 | 	@include bg-variant(".bg-#{$color}", $value);
 8 | }
 9 | 
10 | @each $color, $value in $theme-colors {
11 | 	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
12 | }
13 | 
14 | @each $color, $value in $colors {
15 | 	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
16 | }
17 | 
18 | 
19 | // Background colors with transparency
20 | 
21 | @each $color, $value in $theme-colors {
22 |     @include bg-translucent-variant(".bg-translucent-#{$color}", $value);
23 | }
24 | 
25 | 
26 | // Sections backgrounds
27 | 
28 | @each $color, $value in $section-colors {
29 |     @include bg-variant(".section-#{$color}", $value);
30 | }
31 | 
32 | @each $color, $value in $theme-colors {
33 |     @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
34 | }
35 | 
36 | 
37 | // Shape (svg) fill colors
38 | 
39 | @each $color, $value in $theme-colors {
40 |     .fill-#{$color}  {
41 |         fill: $value;
42 |     }
43 | 
44 |     .stroke-#{$color}  {
45 |         stroke: $value;
46 |     }
47 | }
48 | 
49 | .fill-opacity-8 {
50 | 	fill-opacity: .8;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_blurable.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Blurable
 3 | // add a blue effect on hover on any element with .blur--hover class
 4 | //
 5 | 
 6 | .blur--hover {
 7 |     position: relative;
 8 | 
 9 |     .blur-item {
10 |         transition: 1s cubic-bezier(.19,1,.22,1);
11 |         will-change: transform;
12 |         filter: blur(0);
13 |         opacity: 1;
14 |     }
15 | 
16 |     .blur-hidden {
17 |         position: absolute;
18 |         top: calc(50% + 7px);
19 |         left: 50%;
20 |         transform: translate(-50%, -50%);
21 |         opacity: 0;
22 |         transition: $transition-base;
23 |         z-index: 100;
24 |     }
25 |     &:hover {
26 |         .blur-item {
27 |             opacity: .8;
28 |             filter: blur(10px);
29 |             transform: scale(.95);
30 |             z-index: 1;
31 |         }
32 |         .blur-hidden {
33 |             opacity: 1;
34 |             top: 50%;
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_floating.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Floating
 3 | // floating animation utility class
 4 | //
 5 | 
 6 | 
 7 | .floating {
 8 | 	animation: floating 3s ease infinite;
 9 | 	will-change: transform;
10 | 
11 | 	&:hover {
12 |         animation-play-state: paused;
13 |     }
14 | }
15 | 
16 | 
17 | // Size variations
18 | 
19 | .floating-lg {
20 | 	animation: floating-lg 3s ease infinite;
21 | }
22 | 
23 | .floating-sm {
24 | 	animation: floating-sm 3s ease infinite;
25 | }
26 | 
27 | 
28 | // Keyframes
29 | 
30 | @keyframes floating-lg {
31 |     0% {
32 |         transform: translateY(0px)
33 |     }
34 |     50% {
35 |         transform: translateY(15px)
36 |     }
37 |     100% {
38 |         transform: translateY(0px)
39 |     }
40 | }
41 | 
42 | @keyframes floating {
43 |     0% {
44 |         transform: translateY(0px)
45 |     }
46 |     50% {
47 |         transform: translateY(10px)
48 |     }
49 |     100% {
50 |         transform: translateY(0px)
51 |     }
52 | }
53 | 
54 | @keyframes floating-sm {
55 |     0% {
56 |         transform: translateY(0px)
57 |     }
58 |     50% {
59 |         transform: translateY(5px)
60 |     }
61 |     100% {
62 |         transform: translateY(0px)
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_helper.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Helper
 3 | // helper classes for different cases
 4 | //
 5 | 
 6 | 
 7 | // Clearfix for sections that use float property
 8 | 
 9 | .floatfix {
10 |     &:before,
11 |     &:after {
12 |         content: '';
13 |         display: table;
14 |     }
15 |     &:after {
16 |         clear: both;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_image.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Image
 3 | //
 4 | 
 5 | .img-center {
 6 |     display: block;
 7 |     margin-left: auto;
 8 |     margin-right: auto;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_opacity.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Opacity
 3 | // modify the transparency of an element with this quick modifier classes
 4 | //
 5 | 
 6 | .opacity-1 {
 7 |     opacity: .1 !important;
 8 | }
 9 | .opacity-2 {
10 |     opacity: .2 !important;
11 | }
12 | .opacity-3 {
13 |     opacity: .3 !important;
14 | }
15 | .opacity-4 {
16 |     opacity: .4 !important;
17 | }
18 | .opacity-5 {
19 |     opacity: .5 !important;
20 | }
21 | .opacity-6 {
22 |     opacity: .6 !important;
23 | }
24 | .opacity-7 {
25 |     opacity: .7 !important;
26 | }
27 | .opacity-8 {
28 |     opacity: .8 !important;
29 | }
30 | .opacity-8 {
31 |     opacity: .9 !important;
32 | }
33 | .opacity-10 {
34 |     opacity: 1 !important;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_overflow.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Overflow
 3 | //
 4 | 
 5 | .overflow-visible {
 6 |     overflow: visible !important;
 7 | }
 8 | 
 9 | .overflow-hidden {
10 |     overflow: hidden !important;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_position.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Position
 3 | // modifier classes to be applied on an abosolute positioned element
 4 | // use it next to .position-absolute class
 5 | //
 6 | 
 7 | @each $size, $value in $spacers {
 8 | 	.top-#{$size} {
 9 | 		top: $value;
10 | 	}
11 | 	.right-#{$size} {
12 | 		right: $value;
13 | 	}
14 | 	.bottom-#{$size} {
15 | 		bottom: $value;
16 | 	}
17 | 	.left-#{$size} {
18 | 		left: $value;
19 | 	}
20 | }
21 | 
22 | .center {
23 | 	left: 50%;
24 | 	transform: translateX(-50%);
25 | }
26 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_shadows.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Shadows
 3 | //
 4 | 
 5 | // General styles
 6 | [class*="shadow"] {
 7 | 	@if $enable-transitions {
 8 |         transition: $transition-base;
 9 |     }
10 | }
11 | 
12 | 
13 | // Size variations
14 | .shadow-sm--hover:hover {
15 | 	box-shadow: $box-shadow-sm !important;
16 | }
17 | 
18 | .shadow--hover:hover {
19 | 	box-shadow: $box-shadow !important;
20 | }
21 | 
22 | .shadow-lg--hover:hover {
23 | 	box-shadow: $box-shadow-lg !important;
24 | }
25 | 
26 | .shadow-none--hover:hover {
27 | 	box-shadow: none !important;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_sizing.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Height
3 | //
4 | 
5 | .h-100vh {
6 | 	height: 100vh !important;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_spacing.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Spacing
  3 | //
  4 | 
  5 | .row.row-grid > [class*="col-"] + [class*="col-"] {
  6 |     margin-top: 3rem;
  7 | }
  8 | 
  9 | @include media-breakpoint-up(lg) {
 10 |     .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
 11 |         margin-top: 0;
 12 |     }
 13 | }
 14 | @include media-breakpoint-up(md) {
 15 |     .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
 16 |         margin-top: 0;
 17 |     }
 18 | }
 19 | @include media-breakpoint-up(sm) {
 20 |     .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
 21 |         margin-top: 0;
 22 |     }
 23 | }
 24 | 
 25 | .row-grid + .row-grid {
 26 |     margin-top: 3rem;
 27 | }
 28 | 
 29 | 
 30 | // Negative margins and paddings
 31 | 
 32 | @media(min-width: 992px) {
 33 |     [class*="mt--"],
 34 |     [class*="mr--"],
 35 |     [class*="mb--"],
 36 |     [class*="ml--"] {
 37 |         
 38 |     }
 39 | 
 40 | 
 41 |     // Large negative margins in pixels
 42 | 
 43 |     .mt--100 {
 44 |         margin-top: -100px !important;
 45 |     }
 46 |     .mr--100 {
 47 |         margin-right: -100px !important;
 48 |     }
 49 |     .mb--100 {
 50 |         margin-bottom: -100px !important;
 51 |     }
 52 |     .ml--100 {
 53 |         margin-left: -100px !important;
 54 |     }
 55 |     .mt--150 {
 56 |         margin-top: -150px !important;
 57 |     }
 58 |     .mb--150 {
 59 |         margin-bottom: -150px !important;
 60 |     }
 61 |     .mt--200 {
 62 |         margin-top: -200px !important;
 63 |     }
 64 |     .mb--200 {
 65 |         margin-bottom: -200px !important;
 66 |     }
 67 |     .mt--300 {
 68 |         margin-top: -300px !important;
 69 |     }
 70 |     .mb--300 {
 71 |         margin-bottom: -300px !important;
 72 |     }
 73 | 
 74 | 
 75 |     // Large margins in pixels
 76 | 
 77 |     .pt-100 {
 78 |         padding-top: 100px !important;
 79 |     }
 80 |     .pb-100 {
 81 |         padding-bottom: 100px !important;
 82 |     }
 83 |     .pt-150 {
 84 |         padding-top: 150px !important;
 85 |     }
 86 |     .pb-150 {
 87 |         padding-bottom: 150px !important;
 88 |     }
 89 |     .pt-200 {
 90 |         padding-top: 200px !important;
 91 |     }
 92 |     .pb-200 {
 93 |         padding-bottom: 200px !important;
 94 |     }
 95 |     .pt-250 {
 96 |         padding-top: 250px !important;
 97 |     }
 98 |     .pb-250 {
 99 |         padding-bottom: 250px !important;
100 |     }
101 |     .pt-300 {
102 |         padding-top: 300px!important;
103 |     }
104 |     .pb-300 {
105 |         padding-bottom: 300px!important;
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_text.scss:
--------------------------------------------------------------------------------
 1 | // Weight and italics
 2 | 
 3 | .font-weight-300 { font-weight: 300 !important; }
 4 | .font-weight-400 { font-weight: 400 !important; }
 5 | .font-weight-500 { font-weight: 500 !important; }
 6 | .font-weight-600 { font-weight: 600 !important; }
 7 | .font-weight-700 { font-weight: 700 !important; }
 8 | .font-weight-800 { font-weight: 800 !important; }
 9 | .font-weight-900 { font-weight: 900 !important; }
10 | 
11 | 
12 | // Text decorations
13 | 
14 | .text-underline { text-decoration: underline; }
15 | .text-through { text-decoration: line-through; }
16 | 
17 | 
18 | // Text size
19 | 
20 | .text-xs { font-size: $font-size-xs !important; }
21 | .text-sm { font-size: $font-size-sm !important; }
22 | .text-lg { font-size: $font-size-lg !important; }
23 | .text-xl { font-size: $font-size-xl !important; }
24 | 
25 | 
26 | // Line heights
27 | 
28 | .lh-100 { line-height: 1; }
29 | .lh-110 { line-height: 1.1; }
30 | .lh-120 { line-height: 1.2; }
31 | .lh-130 { line-height: 1.3; }
32 | .lh-140 { line-height: 1.4; }
33 | .lh-150 { line-height: 1.5; }
34 | .lh-160 { line-height: 1.6; }
35 | .lh-170 { line-height: 1.7; }
36 | .lh-180 { line-height: 1.8; }
37 | 
38 | 
39 | // Letter spacings
40 | 
41 | .ls-1 { letter-spacing: .0625rem; }
42 | .ls-15 { letter-spacing: .09375rem; }
43 | .ls-2 { letter-spacing: 0.125rem; }
44 | 
45 | // Color variations
46 | 
47 | @each $color, $value in $colors {
48 | 	@include text-emphasis-variant(".text-#{$color}", $value, $ignore-warning: true);
49 | }
50 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/utilities/_transform.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Tranform
 3 | //
 4 | 
 5 | 
 6 | @include media-breakpoint-up(lg) {
 7 | 	.transform-perspective-right {
 8 | 		transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
 9 | 	}
10 | 	.transform-perspective-left{
11 | 		transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/vendors/_bootstrap-datepicker.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Bootstrap datepicker
  3 | //
  4 | 
  5 | 
  6 | .datepicker {
  7 |     border-radius: $datepicker-border-radius;
  8 | 
  9 |     &-inline {
 10 |         width: 220px;
 11 |     }
 12 | 
 13 |     direction: ltr;
 14 | 
 15 |     &-rtl {
 16 |         direction: rtl;
 17 |         &.dropdown-menu {
 18 |             left: auto;
 19 |         }
 20 |         table tr td span {
 21 |             float: right;
 22 |         }
 23 |     }
 24 | 
 25 |     &-dropdown {
 26 |         top: 0;
 27 |         left: 0;
 28 |         padding: $datepicker-dropdown-padding;
 29 |         @include box-shadow($dropdown-box-shadow);
 30 | 
 31 |         &.datepicker-orient-left:before {
 32 |             left: 6px;
 33 |         }
 34 |         &.datepicker-orient-left:after {
 35 |             left: 7px;
 36 |         }
 37 |         &.datepicker-orient-right:before {
 38 |             right: 6px;
 39 |         }
 40 |         &.datepicker-orient-right:after {
 41 |             right: 7px;
 42 |         }
 43 |         &.datepicker-orient-bottom:before {
 44 |             top: -7px;
 45 |         }
 46 |         &.datepicker-orient-bottom:after {
 47 |             top: -6px;
 48 |         }
 49 | 
 50 |         &.datepicker-orient-top:before {
 51 |             bottom: -7px;
 52 |             border-bottom: 0;
 53 |             border-top: 7px solid $datepicker-dropdown-border;
 54 |         }
 55 | 
 56 |         &.datepicker-orient-top:after {
 57 |             bottom: -6px;
 58 |             border-bottom: 0;
 59 |             border-top: 6px solid $datepicker-dropdown-bg;
 60 |         }
 61 |     }
 62 | 
 63 |     table {
 64 |         margin: 0;
 65 |         -webkit-touch-callout: none;
 66 |         user-select: none;
 67 | 
 68 |         tr {
 69 |             td {
 70 |                 border-radius: $datepicker-cell-border-radius;
 71 |             }
 72 | 
 73 |             th {
 74 |                 border-radius: $datepicker-header-cell-border-radius;
 75 |                 font-weight: 500;
 76 |             }
 77 | 
 78 |             td,
 79 |             th {
 80 |                 transition: $datepicker-cell-transition;
 81 |                 width: $datepicker-cell-width;
 82 |                 height: $datepicker-cell-height;
 83 |                 border: none;
 84 |                 text-align: center;
 85 |                 font-size: $font-size-sm;
 86 |             }
 87 |         }
 88 |     }
 89 | 
 90 |     // Inline display inside a table presents some problems with
 91 |     // border and background colors.
 92 |     .table-striped & table tr {
 93 |         td,
 94 |         th {
 95 |             background-color: transparent;
 96 |         }
 97 |     }
 98 | 
 99 |     table tr td {
100 |         &.old,
101 |         &.new {
102 |             color: $datepicker-disabled-old-new-color;
103 |         }
104 | 
105 |         &.day:hover,
106 |         &.focused {
107 |             background: $datepicker-cell-hover-background;
108 |             cursor: pointer;
109 |         }
110 | 
111 |         &.disabled,
112 |         &.disabled:hover {
113 |             background: none;
114 |             color: $datepicker-disabled-cell-color;
115 |             cursor: default;
116 |         }
117 | 
118 |         &.highlighted {
119 |             border-radius: 0;
120 | 
121 |             &.focused {
122 |                 background: $datepicker-highlighted-bg
123 |             }
124 | 
125 |             &.disabled,
126 |             &.disabled:active {
127 |                 background: $datepicker-highlighted-bg;
128 |                 color: $gray-400;
129 |             }
130 |         }
131 | 
132 |         &.today {
133 |             background: lighten($datepicker-active-background, 45%);
134 |             &.focused {
135 |                 background: lighten($gray-400, 58%);
136 |             }
137 | 
138 |             &.disabled,
139 |             &.disabled:active {
140 |                 background: lighten($gray-400, 58%);
141 |                 color: $btn-link-disabled-color;
142 |             }
143 |         }
144 | 
145 |         // Range selection
146 |         &.range {
147 |             background: $datepicker-range-background;
148 |             color: $datepicker-range-color;
149 |             border-radius: 0;
150 | 
151 |             &.focused {
152 |                 background: darken($datepicker-range-cell-focused-background, 3%);
153 |             }
154 | 
155 |             &.disabled,
156 |             &.disabled:active,
157 |             &.day.disabled:hover {
158 |                 background: darken($datepicker-active-background, 10%);
159 |                 color: lighten($datepicker-active-background, 10%);
160 |             }
161 |         }
162 | 
163 |         &.range.highlighted {
164 |             &.focused {
165 |                 background: darken($datepicker-range-highlighted-bg, 10%);
166 |             }
167 | 
168 |             &.disabled,
169 |             &.disabled:active {
170 |                 background: $datepicker-range-highlighted-bg;
171 |                 color: $datepicker-disabled-cell-color;
172 |             }
173 |         }
174 | 
175 |         &.range.today {
176 |             &.disabled,
177 |             &.disabled:active {
178 |                 background: $blue;
179 |                 color: $white;
180 |             }
181 |         }
182 | 
183 |         &.day.range-start {
184 |             border-top-right-radius: 0;
185 |             border-bottom-right-radius: 0;
186 |         }
187 | 
188 |         &.day.range-end {
189 |             border-top-left-radius: 0;
190 |             border-bottom-left-radius: 0;
191 |         }
192 | 
193 |         &.day.range-start.range-end {
194 |             border-radius: $datepicker-cell-border-radius;
195 |         }
196 | 
197 |         &.selected,
198 |         &.selected.highlighted,
199 |         &.selected:hover,
200 |         &.selected.highlighted:hover,
201 |         &.day.range:hover {
202 |             background: $datepicker-active-background;
203 |             color: $datepicker-active-color;
204 |         }
205 | 
206 |         &.active,
207 |         &.active.highlighted,
208 |         &.active:hover,
209 |         &.active.highlighted:hover {
210 |             background: $datepicker-active-background;
211 |             color: $datepicker-active-color;
212 |             box-shadow: $datepicker-active-box-shadow;
213 |         }
214 | 
215 |         span {
216 |             display: block;
217 |             width: 23%;
218 |             height: 54px;
219 |             line-height: 54px;
220 |             float: left;
221 |             margin: 1%;
222 |             cursor: pointer;
223 |             border-radius: 4px;
224 | 
225 |             &:hover,
226 |             &.focused {
227 |                 background: $gray-200;
228 |             }
229 | 
230 |             &.disabled,
231 |             &.disabled:hover {
232 |                 background: none;
233 |                 color: $datepicker-disabled-cell-color;
234 |                 cursor: default;
235 |             }
236 | 
237 |             &.active,
238 |             &.active:hover,
239 |             &.active.disabled,
240 |             &.active.disabled:hover {
241 |                 text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
242 |             }
243 | 
244 |             &.old,
245 |             &.new {
246 |                 color: $btn-link-disabled-color;
247 |             }
248 |         }
249 |     }
250 | 
251 |     .datepicker-switch {
252 |         width: 145px;
253 |     }
254 | 
255 |     .datepicker-switch,
256 |     .prev,
257 |     .next,
258 |     tfoot tr th {
259 |         cursor: pointer;
260 |         &:hover {
261 |             background: $gray-200;
262 |         }
263 |     }
264 | 
265 |     .prev,
266 |     .next {
267 |         &.disabled {
268 |             visibility: hidden;
269 |         }
270 |     }
271 | 
272 |     // Basic styling for calendar-week cells
273 |     .cw {
274 |         font-size: 10px;
275 |         width: 12px;
276 |         padding: 0 2px 0 5px;
277 |         vertical-align: middle;
278 |     }
279 | }
280 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/vendors/_headroom.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Headroom
 3 | //
 4 | 
 5 | 
 6 | .headroom {
 7 |     will-change: transform;
 8 |     background-color: inherit;
 9 |     @include transition($transition-base);
10 | }
11 | .headroom--pinned {
12 | 	@extend .position-fixed;
13 |     transform: translateY(0%);
14 | }
15 | .headroom--unpinned {
16 | 	@extend .position-fixed;
17 |     transform: translateY(-100%);
18 | }
19 | 
20 | .headroom--not-top {
21 | 	padding-top: .5rem;
22 | 	padding-bottom: .5rem;
23 |     background-color: theme-color("default") !important;
24 |     box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
25 | }
26 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/custom/vendors/_scrollbar.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Custom scrollbar
 3 | //
 4 | 
 5 | .scrollbar-inner {
 6 |     height: 100%;
 7 | 
 8 |     &:not(:hover) .scroll-element {
 9 |         opacity: 0;
10 |     }
11 | 
12 |     .scroll-element {
13 |         transition: opacity 300ms;
14 |         margin-right: 2px;
15 | 
16 |         .scroll-bar,
17 |         .scroll-element_track {
18 |             transition: background-color 300ms;
19 |         }
20 | 
21 |         .scroll-element_track {
22 |             background-color: transparent;
23 |         }
24 |     }
25 | 
26 |     .scroll-element.scroll-y {
27 |         width: 3px;
28 |         right: 0;
29 |     }
30 | 
31 |     .scroll-element.scroll-x {
32 |         height: 3px;
33 |         bottom: 0;
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_clipboard-js.scss:
--------------------------------------------------------------------------------
 1 | // clipboard.js
 2 | //
 3 | // JS-based `Copy` buttons for code snippets.
 4 | 
 5 | .ct-clipboard {
 6 |   position: relative;
 7 |   display: none;
 8 |   float: right;
 9 | 
10 |   + .highlight {
11 |     margin-top: 0;
12 |   }
13 | }
14 | 
15 | .btn-clipboard {
16 |   position: absolute;
17 |   top: 1rem;
18 |   right: 1rem;
19 |   z-index: 10;
20 |   display: block;
21 |   padding: .25rem .5rem;
22 |   font-size: 75%;
23 |   cursor: pointer;
24 |   background-color: transparent;
25 |   border: 0;
26 |   border-radius: .25rem;
27 |   color: #fff;
28 |   background-color: $ct-primary;
29 | 
30 |   &:hover {
31 |     color: #fff;
32 |     background-color: darken($ct-primary, 10%);
33 |   }
34 | }
35 | 
36 | @media (min-width: 768px) {
37 |   .ct-clipboard {
38 |     display: block;
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_content.scss:
--------------------------------------------------------------------------------
  1 | .docs {
  2 |     background: #FFF;
  3 | 
  4 |     h6 {
  5 |         font-size: 1rem;
  6 |         font-weight: $font-weight-bold;
  7 |     }
  8 | }
  9 | 
 10 | .ct-content {
 11 |     order: 1;
 12 | 
 13 |     >h2[id],
 14 |     >h3[id],
 15 |     >h4[id] {
 16 |         pointer-events: none;
 17 | 
 18 |         >div,
 19 |         >a {
 20 |             pointer-events: auto;
 21 |         }
 22 | 
 23 |         &::before {
 24 |             display: block;
 25 |             height: 6rem;
 26 |             margin-top: -6rem;
 27 |             visibility: hidden;
 28 |             content: "";
 29 |         }
 30 |     }
 31 | 
 32 |     >table {
 33 |         width: 100%;
 34 |         max-width: 100%;
 35 |         margin-bottom: 1rem;
 36 | 
 37 |         @include media-breakpoint-down(md) {
 38 |             display: block;
 39 |             overflow-x: auto;
 40 |             -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 41 |             &.table-bordered {
 42 |                 border: 0;
 43 |             }
 44 |         } // Cells
 45 |         >thead,
 46 |         >tbody,
 47 |         >tfoot {
 48 |             >tr {
 49 |                 >th,
 50 |                 >td {
 51 |                     padding: $table-cell-padding;
 52 |                     vertical-align: top;
 53 |                     border: 1px solid $table-border-color;
 54 | 
 55 |                     >p:last-child {
 56 |                         margin-bottom: 0;
 57 |                     }
 58 |                 }
 59 |             }
 60 |         } // Prevent breaking of code (e.g., Grunt tasks list)
 61 |         td:first-child>code {
 62 |             white-space: nowrap;
 63 |         }
 64 |     }
 65 | }
 66 | 
 67 | //
 68 | // Docs sections
 69 | //
 70 | .ct-content {
 71 |     >h2:not(:first-child) {
 72 |         margin-top: 3rem;
 73 |         font-size: 1.5rem;
 74 |         font-weight: $font-weight-bold;
 75 |     }
 76 | 
 77 |     >h3 {
 78 |         margin-top: 2.5rem;
 79 |         font-size: 1.25rem;
 80 |         font-weight: $font-weight-bold;
 81 |     }
 82 | 
 83 |     >ul li,
 84 |     >ol li {
 85 |         margin-bottom: .25rem;
 86 |     }
 87 | 
 88 |     @include media-breakpoint-up(lg) {
 89 |         >ul,
 90 |         >ol,
 91 |         >p {
 92 |             max-width: 80%;
 93 |         }
 94 |     }
 95 | }
 96 | 
 97 | .ct-page-title {
 98 |     padding-left: 1.25rem;
 99 |     border-left: 2px solid $ct-primary;
100 |     margin-bottom: 1.5rem;
101 | }
102 | 
103 | .ct-title {
104 |     margin-top: 1rem;
105 |     margin-bottom: .5rem;
106 |     font-weight: 300;
107 | 
108 |     @include media-breakpoint-up(sm) {
109 |         font-size: 1.5rem;
110 |         font-weight: $font-weight-bold;
111 |     }
112 | }
113 | 
114 | .ct-lead {
115 |     color: rgb(59, 69, 78);
116 |     font-weight: 500;
117 | 
118 |     @include media-breakpoint-up(sm) {
119 |         max-width: 80%;
120 |         margin-bottom: 1rem;
121 |         font-size: .875rem;
122 |     }
123 | }
124 | 
125 | .ct-text-purple {
126 |     color: $ct-primary;
127 | }
128 | 
129 | .ct-text-purple-bright {
130 |     color: $ct-primary-bright;
131 | }
132 | 
133 | // Docs code example tabs
134 | .ct-tabs-example {
135 |     .nav-link i {
136 |         margin-right: 5px;
137 |     }
138 | }
139 | 
140 | // Color swatches
141 | .color-swatch {
142 |     margin: 1rem 0;
143 |     border-radius: .25rem;
144 |     background-color: #F4F5F7;
145 | }
146 | 
147 | .color-swatch:after {
148 |     content: " ";
149 |     display: table;
150 |     clear: both;
151 | }
152 | 
153 | .color-swatch-header {
154 |     position: relative;
155 |     height: 0;
156 |     padding-bottom: 50%;
157 |     border-radius: .25rem .25rem 0 0;
158 |     border: 1px solid transparent;
159 | }
160 | 
161 | .color-swatch-header.is-light {
162 |     border-color: #C1C7D0;
163 | }
164 | 
165 | .color-swatch-header .pass-fail {
166 |     position: absolute;
167 |     width: 100%;
168 |     bottom: 0;
169 | }
170 | 
171 | .color-swatch-header .pass-fail-item-wrap {
172 |     position: relative;
173 |     float: left;
174 |     left: 50%;
175 |     -webkit-transform: translateX(-50%);
176 |     -ms-transform: translateX(-50%);
177 |     transform: translateX(-50%);
178 | }
179 | 
180 | .color-swatch-header .pass-fail-item-group {
181 |     display: inline-block;
182 |     padding: 0 5px;
183 | }
184 | 
185 | .color-swatch-header .pass-fail-item {
186 |     float: left;
187 |     display: inline-block;
188 |     text-align: center;
189 |     padding: 2px;
190 | }
191 | 
192 | .color-swatch-header .pass-fail-item.white .example {
193 |     color: #fff;
194 | }
195 | 
196 | .color-swatch-header .pass-fail-item.small .example {
197 |     font-size: 10px;
198 | }
199 | 
200 | .color-swatch-header .pass-fail-item .lozenge {
201 |     font-size: 11px;
202 |     text-transform: uppercase;
203 |     font-weight: 600;
204 |     background: #000;
205 |     color: #fff;
206 |     padding: 2px 4px;
207 |     line-height: 10px;
208 |     border-radius: 4px;
209 |     letter-spacing: 0.05em;
210 | }
211 | 
212 | .color-swatch-body {
213 |     position: relative;
214 |     left: 50%;
215 |     float: left;
216 |     padding: 10px 0;
217 |     -webkit-transform: translateX(-50%);
218 |     -ms-transform: translateX(-50%);
219 |     transform: translateX(-50%);
220 | }
221 | 
222 | .color-swatch-body .prop-item-wrap {
223 |     float: left;
224 |     padding: 0 15px;
225 |     min-width: 65px;
226 | }
227 | 
228 | .color-swatch-body .prop-item {
229 |     padding: 15px 0;
230 | }
231 | 
232 | .color-swatch-body .prop-item .label {
233 |     font-size: 11px;
234 |     color: #62748C;
235 |     text-transform: uppercase;
236 |     line-height: 16px;
237 | }
238 | 
239 | .color-swatch-body .prop-item .value {
240 |     font-size: 14px;
241 | }
242 | 
243 | .table-colors {
244 |     font-weight: 600;
245 |     font-size: 16px;
246 |     width: 100%;
247 | }
248 | 
249 | .table-colors td,
250 | .table-colors:first-child td,
251 | .table-colors td:first-child,
252 | .table-colors:first-child td:first-child,
253 | .table-colors td:last-child,
254 | .table-colors:first-child td:last-child {
255 |     background: $ct-primary-light;
256 |     border-bottom: 1px solid rgba(0, 0, 0, .1);
257 |     padding: 10px;
258 | }
259 | 
260 | .table-colors tr:last-child td,
261 | .table-colors:first-child tr:last-child td {
262 |     border-bottom: none;
263 | }
264 | 
265 | .table-colors td:nth-child(1),
266 | .table-colors:first-child td:nth-child(1) {
267 |     line-height: 40px;
268 | }
269 | 
270 | .table-colors .swatch,
271 | .table-colors:first-child .swatch {
272 |     float: left;
273 |     height: 40px;
274 |     width: 40px;
275 |     margin-right: 20px;
276 |     display: inline-block;
277 |     border-radius: 4px;
278 |     border: 1px solid transparent;
279 | }
280 | 
281 | .table-colors .swatch.is-light,
282 | .table-colors:first-child .swatch.is-light {
283 |     border-color: #C1C7D0;
284 | }
285 | 
286 | .table-colors .lozenge,
287 | .table-colors:first-child .lozenge {
288 |     float: left;
289 |     margin: 5px 10px 0 0;
290 |     font-size: 10px;
291 |     display: inline-block;
292 |     text-transform: uppercase;
293 |     font-weight: 600;
294 |     background: #97A0AF;
295 |     color: #042A53;
296 |     padding: 2px 4px;
297 |     line-height: 10px;
298 |     border-radius: 4px;
299 |     letter-spacing: 0.05em;
300 | }
301 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_footer.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Footer
 3 | //
 4 | .ct-footer {
 5 |     font-size: 85%;
 6 |     text-align: center;
 7 |     background-color: #f7f7f7;
 8 | 
 9 |     a {
10 |         font-weight: 500;
11 |         color: $gray-700;
12 | 
13 |         &:hover,
14 |         &:focus {
15 |             color: $link-color;
16 |         }
17 |     }
18 | 
19 |     p {
20 |         margin-bottom: 0;
21 |     }
22 | 
23 |     @include media-breakpoint-up(sm) {
24 |         text-align: left;
25 |     }
26 | }
27 | 
28 | .ct-footer-links {
29 |     padding-left: 0;
30 |     margin-bottom: 1rem;
31 | 
32 |     li {
33 |         display: inline-block;
34 | 
35 |         +li {
36 |             margin-left: 1rem;
37 |         }
38 |     }
39 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_nav.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Main navbar
  3 | //
  4 | .ct-navbar {
  5 |     background-color: $ct-primary;
  6 |     box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
  7 |     padding-top: .5rem;
  8 |     padding-bottom: .5rem;
  9 |     
 10 |     @include media-breakpoint-down(md) {
 11 |         padding-right: .5rem;
 12 |         padding-left: .5rem;
 13 | 
 14 |         .navbar-nav-scroll {
 15 |             max-width: 100%;
 16 |             height: 2.5rem;
 17 |             margin-top: .25rem;
 18 |             overflow: hidden;
 19 |             font-size: .875rem;
 20 | 
 21 |             .navbar-nav {
 22 |                 padding-bottom: 2rem;
 23 |                 overflow-x: auto;
 24 |                 white-space: nowrap;
 25 |                 -webkit-overflow-scrolling: touch;
 26 |             }
 27 |         }
 28 |     }
 29 | 
 30 |     @include media-breakpoint-up(md) {
 31 |         @supports (position: sticky) {
 32 |             position: sticky;
 33 |             top: 0;
 34 |             z-index: 1071; // over everything in bootstrap
 35 |         }
 36 |     }
 37 | 
 38 |     .navbar-nav {
 39 |         .nav-link {
 40 |             padding-right: .5rem;
 41 |             padding-left: .5rem;
 42 |             color: $ct-primary-light !important;
 43 | 
 44 |             &.active,
 45 |             &:hover {
 46 |                 color: #fff !important;
 47 |                 background-color: transparent !important;
 48 |             }
 49 | 
 50 |             &.active {
 51 |                 font-weight: 500;
 52 |             }
 53 |         }
 54 |     }
 55 | 
 56 |     .navbar-nav-svg {
 57 |         display: inline-block;
 58 |         width: 1rem;
 59 |         height: 1rem;
 60 |         vertical-align: text-top;
 61 |     }
 62 | 
 63 |     .dropdown-menu {
 64 |         font-size: .875rem;
 65 |     }
 66 | 
 67 |     .dropdown-item.active {
 68 |         font-weight: 500;
 69 |         color: $gray-900;
 70 |         background-color: transparent;
 71 |         background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
 72 |         background-repeat: no-repeat;
 73 |         background-position: .4rem .87rem;
 74 |         background-size: .75rem .75rem;
 75 |         padding-left: 25px;
 76 |     }
 77 | }
 78 | 
 79 | // Github corner
 80 | .github-corner {
 81 |     position: fixed;
 82 |     right: 0;
 83 |     z-index: 1080;
 84 | 
 85 |     &:hover {
 86 |         .octo-arm {
 87 |             animation: octocat-wave 560ms ease-in-out
 88 |         }
 89 |     }
 90 | 
 91 |     svg {
 92 |         fill: $white;
 93 |         color: $ct-primary;
 94 |     }
 95 | }
 96 | 
 97 | @keyframes octocat-wave {
 98 |     0%,
 99 |     100% {
100 |         transform: rotate(0)
101 |     }
102 |     20%,
103 |     60% {
104 |         transform: rotate(-25deg)
105 |     }
106 |     40%,
107 |     80% {
108 |         transform: rotate(10deg)
109 |     }
110 | }
111 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_prism.scss:
--------------------------------------------------------------------------------
  1 | code[class*="language-"],
  2 | pre[class*="language-"] {
  3 |     font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  4 |     font-size: 14px;
  5 |     line-height: 1.375;
  6 |     direction: ltr;
  7 |     text-align: left;
  8 |     white-space: pre;
  9 |     word-spacing: normal;
 10 |     word-break: normal;
 11 |     -moz-tab-size: 4;
 12 |     -o-tab-size: 4;
 13 |     tab-size: 4;
 14 |     -webkit-hyphens: none;
 15 |     -moz-hyphens: none;
 16 |     -ms-hyphens: none;
 17 |     hyphens: none;
 18 |     background: #f5f7ff;
 19 |     color: #5e6687;
 20 |     border-radius: .25rem;
 21 | }
 22 | 
 23 | pre[class*="language-"]::-moz-selection,
 24 | pre[class*="language-"] ::-moz-selection,
 25 | code[class*="language-"]::-moz-selection,
 26 | code[class*="language-"] ::-moz-selection {
 27 |     text-shadow: none;
 28 |     background: #dfe2f1;
 29 | }
 30 | 
 31 | pre[class*="language-"]::selection,
 32 | pre[class*="language-"] ::selection,
 33 | code[class*="language-"]::selection,
 34 | code[class*="language-"] ::selection {
 35 |     text-shadow: none;
 36 |     background: #dfe2f1;
 37 | }
 38 | 
 39 | 
 40 | /* Code blocks */
 41 | 
 42 | pre[class*="language-"] {
 43 |     padding: 1.25rem;
 44 |     margin: 0;
 45 |     overflow: auto;
 46 | }
 47 | 
 48 | 
 49 | /* Inline code */
 50 | 
 51 | :not(pre)>code[class*="language-"] {
 52 |     padding: .1em;
 53 |     border-radius: .3em;
 54 | }
 55 | 
 56 | .token.comment,
 57 | .token.prolog,
 58 | .token.doctype,
 59 | .token.cdata {
 60 |     color: #898ea4;
 61 | }
 62 | 
 63 | .token.punctuation {
 64 |     color: #5e6687;
 65 | }
 66 | 
 67 | .token.namespace {
 68 |     opacity: .7;
 69 | }
 70 | 
 71 | .token.operator,
 72 | .token.boolean,
 73 | .token.number {
 74 |     color: #c76b29;
 75 | }
 76 | 
 77 | .token.property {
 78 |     color: #c08b30;
 79 | }
 80 | 
 81 | .token.tag {
 82 |     color: #3d8fd1;
 83 | }
 84 | 
 85 | .token.string {
 86 |     color: #22a2c9;
 87 | }
 88 | 
 89 | .token.selector {
 90 |     color: #6679cc;
 91 | }
 92 | 
 93 | .token.attr-name {
 94 |     color: #c76b29;
 95 | }
 96 | 
 97 | .token.entity,
 98 | .token.url,
 99 | .language-css .token.string,
100 | .style .token.string {
101 |     color: #22a2c9;
102 | }
103 | 
104 | .token.attr-value,
105 | .token.keyword,
106 | .token.control,
107 | .token.directive,
108 | .token.unit {
109 |     color: #ac9739;
110 | }
111 | 
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 |     color: #22a2c9;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 |     color: #3d8fd1;
121 | }
122 | 
123 | .token.deleted {
124 |     text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 |     border-bottom: 1px dotted #202746;
129 |     text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 |     font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 |     font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 |     color: #c94922;
143 | }
144 | 
145 | .token.entity {
146 |     cursor: help;
147 | }
148 | 
149 | pre>code.highlight {
150 |     outline: 0.4em solid #c94922;
151 |     outline-offset: .4em;
152 | }
153 | 
154 | 
155 | /* overrides color-values for the Line Numbers plugin
156 |  * http://prismjs.com/plugins/line-numbers/
157 |  */
158 | 
159 | .line-numbers .line-numbers-rows {
160 |     border-right-color: #dfe2f1;
161 | }
162 | 
163 | .line-numbers-rows>span:before {
164 |     color: #979db4;
165 | }
166 | 
167 | 
168 | /* overrides color-values for the Line Highlight plugin
169 |  * http://prismjs.com/plugins/line-highlight/
170 |  */
171 | 
172 | .line-highlight {
173 |     background: rgba(107, 115, 148, 0.2);
174 |     background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
175 |     background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
176 | }


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_sidebar.scss:
--------------------------------------------------------------------------------
  1 | // stylelint-disable declaration-no-important
  2 | //
  3 | // Right side table of contents
  4 | //
  5 | .ct-toc {
  6 |     @supports (position: sticky) {
  7 |         position: sticky;
  8 |         top: 4rem;
  9 |         height: calc(100vh - 4rem);
 10 |         overflow-y: auto;
 11 |     }
 12 |     order: 2;
 13 |     padding-top: 2rem;
 14 |     padding-bottom: 1.5rem;
 15 |     font-size: .875rem;
 16 | }
 17 | 
 18 | .section-nav {
 19 |     padding-left: 0;
 20 |     border-left: 1px solid #eee;
 21 | 
 22 |     ul {
 23 |         padding-left: 1rem;
 24 | 
 25 |         ul {
 26 |             display: none;
 27 |         }
 28 |     }
 29 | }
 30 | 
 31 | .toc-entry {
 32 |     display: block;
 33 |     font-size: 1rem;
 34 | 
 35 |     a {
 36 |         display: block;
 37 |         padding: .125rem 1.5rem;
 38 |         color: #99979c;
 39 |         font-size: 90%;
 40 | 
 41 |         &:hover {
 42 |             color: $blue;
 43 |             text-decoration: none;
 44 |         }
 45 |     }
 46 | }
 47 | 
 48 | //
 49 | // Left side navigation
 50 | //
 51 | .ct-sidebar {
 52 |     order: 0; // background-color: #f5f2f9;
 53 |     border-bottom: 1px solid $ct-sidebar-border-color;
 54 |     background-color: $ct-sidebar-bg;
 55 | 
 56 |     @include media-breakpoint-up(md) {
 57 |         @supports (position: sticky) {
 58 |             position: sticky;
 59 |             top: 4rem;
 60 |             z-index: 1000;
 61 |             height: calc(100vh - 4rem);
 62 |         }
 63 |         border-right: 1px solid $ct-sidebar-border-color;
 64 |     }
 65 | 
 66 |     @include media-breakpoint-up(xl) {
 67 |         flex: 0 1 320px;
 68 |     }
 69 | }
 70 | 
 71 | .ct-links {
 72 |     padding-top: 2rem;
 73 |     padding-bottom: 1rem;
 74 |     margin-right: -15px;
 75 |     margin-left: -15px;
 76 | 
 77 |     @include media-breakpoint-up(md) {
 78 |         @supports (position: sticky) {
 79 |             max-height: calc(100vh - 5rem);
 80 |             overflow-y: auto;
 81 |         }
 82 |     } // Override collapse behaviors
 83 |     @include media-breakpoint-up(md) {
 84 |         display: block !important;
 85 |     }
 86 | }
 87 | 
 88 | .ct-search {
 89 |     position: relative; // To contain the Algolia search
 90 |     padding: 1rem 15px;
 91 |     margin-right: -15px;
 92 |     margin-left: -15px;
 93 |     border-bottom: 1px solid rgba(0, 0, 0, .05);
 94 | 
 95 |     .form-control:focus {
 96 |         border-color: $ct-primary-bright;
 97 |         box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25);
 98 |     }
 99 | }
100 | 
101 | .ct-search-docs-toggle {
102 |     line-height: 1;
103 |     color: $gray-900;
104 | }
105 | 
106 | .ct-sidenav {
107 |     display: none;
108 | }
109 | 
110 | .ct-toc-link {
111 |     display: block;
112 |     padding: .25rem 1.5rem;
113 |     font-weight: 600;
114 |     font-size: .875rem;
115 |     color: #0d2b3e;
116 | 
117 |     &:hover {
118 |         color: rgba(0, 0, 0, .85);
119 |         text-decoration: none;
120 |     }
121 | }
122 | 
123 | .ct-toc-item {
124 |     &.active {
125 |         margin-bottom: 1rem;
126 | 
127 |         &:not(:first-child) {
128 |             margin-top: 1rem;
129 |         }
130 | 
131 |         >.ct-toc-link {
132 |             color: rgba(0, 0, 0, .85);
133 | 
134 |             &:hover {
135 |                 background-color: transparent;
136 |             }
137 |         }
138 | 
139 |         >.ct-sidenav {
140 |             display: block;
141 |         }
142 |     }
143 | }
144 | 
145 | // All levels of nav
146 | .ct-sidebar .nav>li>a {
147 |     display: block;
148 |     padding: .25rem 1.5rem;
149 |     font-size: 84%;
150 |     color: #4c555a;
151 | }
152 | 
153 | .ct-sidebar .nav>li>a:hover {
154 |     color: rgba(0, 0, 0, .85);
155 |     text-decoration: none;
156 |     background-color: transparent;
157 | }
158 | 
159 | .ct-sidebar .nav>.active>a {
160 |     font-weight: 500;
161 |     color: #0099e5;
162 |     background-color: transparent;
163 |     padding-left: 2rem;
164 |     position: relative;
165 | 
166 |     &:before {
167 |         content: '';
168 |         position: absolute;
169 |         height: 16px;
170 |         width: 2px;
171 |         background-color: #0099e5;
172 |         top: 50%;
173 |         left: 1.5rem;
174 |         transform: translateY(-50%);
175 |     }
176 | }
177 | 
178 | .ct-sidebar .nav>.active:hover>a {
179 |     color: #0099e5
180 | }
181 | 
182 | 
183 | .scrollbar-inner {
184 |     height: 100%;
185 | 
186 |     &:not(:hover) .scroll-element {
187 |         opacity: 0;
188 |     }
189 | 
190 |     .scroll-element {
191 |         transition: opacity 300ms;
192 |         margin-right: 2px;
193 | 
194 |         .scroll-bar,
195 |         .scroll-element_track {
196 |             transition: background-color 300ms;
197 |         }
198 | 
199 |         .scroll-element_track {
200 |             background-color: transparent;
201 |         }
202 |     }
203 | 
204 |     .scroll-element.scroll-y {
205 |         width: 3px;
206 |         right: 0;
207 |     }
208 | 
209 |     .scroll-element.scroll-x {
210 |         height: 3px;
211 |         bottom: 0;
212 |     }
213 | }
214 | 


--------------------------------------------------------------------------------
/src/assets/scss/argon-dashboard/docs/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Local docs variables
 2 | $ct-primary:        theme-color("primary") !default;
 3 | $ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default;
 4 | $ct-primary-light:  rgba(255, 255, 255, .9) !default;
 5 | $ct-dark:          	#2a2730 !default;
 6 | $ct-download:      	#ffe484 !default;
 7 | $ct-info:          	#5bc0de !default;
 8 | $ct-warning:       	#f0ad4e !default;
 9 | $ct-danger:        	#d9534f !default;
10 | 
11 | $ct-sidebar-bg:	#f5f7f9;
12 | $ct-sidebar-border-color: #e6ecf1;
13 | 
14 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn{
2 |   .btn-inner--icon{
3 |     margin-right: 4px;
4 |   }
5 | }
6 | .btn + .btn {
7 |   margin-left: 4px;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/_mixins.scss:
--------------------------------------------------------------------------------
1 | button:focus, :focus {
2 |   outline: none;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/_navbar-dropdown.scss:
--------------------------------------------------------------------------------
 1 | @keyframes show-navbar-dropdown {
 2 |   0% {
 3 |     opacity: 0;
 4 |     transition: visibility 0.25s, opacity 0.25s;
 5 |   }
 6 |   100% {
 7 |     opacity: 1;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/_navbar.scss:
--------------------------------------------------------------------------------
1 | .navbar .collapsing .navbar-toggler{
2 |   pointer-events: none;
3 | }
4 | .navbar .nav-item .nav-link-icon.nav-link i{
5 |   margin-right: 4px;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/_tables.scss:
--------------------------------------------------------------------------------
 1 | .table {
 2 |   .avatar-group .avatar
 3 |   {
 4 |     margin-right: 4px;
 5 |   }
 6 |   .badge i{
 7 |     margin-right: 10px;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/bootstrap/_spinners.scss:
--------------------------------------------------------------------------------
 1 | $spinner-width:         2rem !default;
 2 | $spinner-height:        $spinner-width !default;
 3 | $spinner-border-width:  .25em !default;
 4 | 
 5 | $spinner-width-sm:        1rem !default;
 6 | $spinner-height-sm:       $spinner-width-sm !default;
 7 | $spinner-border-width-sm: .2em !default;
 8 | 
 9 | //
10 | // Rotating border
11 | //
12 | 
13 | @keyframes spinner-border {
14 |   to { transform: rotate(360deg); }
15 | }
16 | 
17 | .spinner-border {
18 |   display: inline-block;
19 |   width: $spinner-width;
20 |   height: $spinner-height;
21 |   vertical-align: text-bottom;
22 |   border: $spinner-border-width solid currentColor;
23 |   border-right-color: transparent;
24 |   // stylelint-disable-next-line property-blacklist
25 |   border-radius: 50%;
26 |   animation: spinner-border .75s linear infinite;
27 | }
28 | 
29 | .spinner-border-sm {
30 |   width: $spinner-width-sm;
31 |   height: $spinner-height-sm;
32 |   border-width: $spinner-border-width-sm;
33 | }
34 | 
35 | //
36 | // Growing circle
37 | //
38 | 
39 | @keyframes spinner-grow {
40 |   0% {
41 |     transform: scale(0);
42 |   }
43 |   50% {
44 |     opacity: 1;
45 |   }
46 | }
47 | 
48 | .spinner-grow {
49 |   display: inline-block;
50 |   width: $spinner-width;
51 |   height: $spinner-height;
52 |   vertical-align: text-bottom;
53 |   background-color: currentColor;
54 |   // stylelint-disable-next-line property-blacklist
55 |   border-radius: 50%;
56 |   opacity: 0;
57 |   animation: spinner-grow .75s linear infinite;
58 | }
59 | 
60 | .spinner-grow-sm {
61 |   width: $spinner-width-sm;
62 |   height: $spinner-height-sm;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/assets/scss/react/react-differences.scss:
--------------------------------------------------------------------------------
 1 | // Differences from the HTML to the React product
 2 | 
 3 | // bootstrap
 4 | @import "~bootstrap/scss/spinners";
 5 | // react plugins
 6 | @import "plugins/plugin-react-datetime";
 7 | // core components
 8 | @import "buttons";
 9 | @import "mixins";
10 | @import "navbar-dropdown";
11 | @import "navbar";
12 | @import "tables";
13 | 


--------------------------------------------------------------------------------
/src/components/Footers/AdminFooter.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | /*eslint-disable*/
19 | 
20 | // reactstrap components
21 | import { Container, Row, Col, Nav, NavItem, NavLink } from "reactstrap";
22 | 
23 | const Footer = () => {
24 |   return (
25 |     <footer className="footer">
26 |       <Row className="align-items-center justify-content-xl-between">
27 |         <Col xl="6">
28 |           <div className="copyright text-center text-xl-left text-muted">
29 |             © {new Date().getFullYear()}{" "}
30 |             <a
31 |               className="font-weight-bold ml-1"
32 |               href="https://www.creative-tim.com?ref=adr-admin-footer"
33 |               rel="noopener noreferrer"
34 |               target="_blank"
35 |             >
36 |               Creative Tim
37 |             </a>
38 |           </div>
39 |         </Col>
40 | 
41 |         <Col xl="6">
42 |           <Nav className="nav-footer justify-content-center justify-content-xl-end">
43 |             <NavItem>
44 |               <NavLink
45 |                 href="https://www.creative-tim.com?ref=adr-admin-footer"
46 |                 rel="noopener noreferrer"
47 |                 target="_blank"
48 |               >
49 |                 Creative Tim
50 |               </NavLink>
51 |             </NavItem>
52 | 
53 |             <NavItem>
54 |               <NavLink
55 |                 href="https://www.creative-tim.com/presentation?ref=adr-admin-footer"
56 |                 rel="noopener noreferrer"
57 |                 target="_blank"
58 |               >
59 |                 About Us
60 |               </NavLink>
61 |             </NavItem>
62 | 
63 |             <NavItem>
64 |               <NavLink
65 |                 href="http://blog.creative-tim.com?ref=adr-admin-footer"
66 |                 rel="noopener noreferrer"
67 |                 target="_blank"
68 |               >
69 |                 Blog
70 |               </NavLink>
71 |             </NavItem>
72 | 
73 |             <NavItem>
74 |               <NavLink
75 |                 href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md?ref=adr-admin-footer"
76 |                 rel="noopener noreferrer"
77 |                 target="_blank"
78 |               >
79 |                 MIT License
80 |               </NavLink>
81 |             </NavItem>
82 |           </Nav>
83 |         </Col>
84 |       </Row>
85 |     </footer>
86 |   );
87 | };
88 | 
89 | export default Footer;
90 | 


--------------------------------------------------------------------------------
/src/components/Footers/AuthFooter.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | /*eslint-disable*/
19 | 
20 | // reactstrap components
21 | import { NavItem, NavLink, Nav, Container, Row, Col } from "reactstrap";
22 | 
23 | const Login = () => {
24 |   return (
25 |     <>
26 |       <footer className="py-5">
27 |         <Container>
28 |           <Row className="align-items-center justify-content-xl-between">
29 |             <Col xl="6">
30 |               <div className="copyright text-center text-xl-left text-muted">
31 |                 © {new Date().getFullYear()}{" "}
32 |                 <a
33 |                   className="font-weight-bold ml-1"
34 |                   href="https://www.creative-tim.com?ref=adr-auth-footer"
35 |                   target="_blank"
36 |                 >
37 |                   Creative Tim
38 |                 </a>
39 |               </div>
40 |             </Col>
41 |             <Col xl="6">
42 |               <Nav className="nav-footer justify-content-center justify-content-xl-end">
43 |                 <NavItem>
44 |                   <NavLink
45 |                     href="https://www.creative-tim.com?ref=adr-auth-footer"
46 |                     target="_blank"
47 |                   >
48 |                     Creative Tim
49 |                   </NavLink>
50 |                 </NavItem>
51 |                 <NavItem>
52 |                   <NavLink
53 |                     href="https://www.creative-tim.com/presentation?ref=adr-auth-footer"
54 |                     target="_blank"
55 |                   >
56 |                     About Us
57 |                   </NavLink>
58 |                 </NavItem>
59 |                 <NavItem>
60 |                   <NavLink
61 |                     href="http://blog.creative-tim.com?ref=adr-auth-footer"
62 |                     target="_blank"
63 |                   >
64 |                     Blog
65 |                   </NavLink>
66 |                 </NavItem>
67 |                 <NavItem>
68 |                   <NavLink
69 |                     href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md?ref=adr-auth-footer"
70 |                     target="_blank"
71 |                   >
72 |                     MIT License
73 |                   </NavLink>
74 |                 </NavItem>
75 |               </Nav>
76 |             </Col>
77 |           </Row>
78 |         </Container>
79 |       </footer>
80 |     </>
81 |   );
82 | };
83 | 
84 | export default Login;
85 | 


--------------------------------------------------------------------------------
/src/components/Headers/Header.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | 
 19 | // reactstrap components
 20 | import { Card, CardBody, CardTitle, Container, Row, Col } from "reactstrap";
 21 | 
 22 | const Header = () => {
 23 |   return (
 24 |     <>
 25 |       <div className="header bg-gradient-info pb-8 pt-5 pt-md-8">
 26 |         <Container fluid>
 27 |           <div className="header-body">
 28 |             {/* Card stats */}
 29 |             <Row>
 30 |               <Col lg="6" xl="3">
 31 |                 <Card className="card-stats mb-4 mb-xl-0">
 32 |                   <CardBody>
 33 |                     <Row>
 34 |                       <div className="col">
 35 |                         <CardTitle
 36 |                           tag="h5"
 37 |                           className="text-uppercase text-muted mb-0"
 38 |                         >
 39 |                           Traffic
 40 |                         </CardTitle>
 41 |                         <span className="h2 font-weight-bold mb-0">
 42 |                           350,897
 43 |                         </span>
 44 |                       </div>
 45 |                       <Col className="col-auto">
 46 |                         <div className="icon icon-shape bg-danger text-white rounded-circle shadow">
 47 |                           <i className="fas fa-chart-bar" />
 48 |                         </div>
 49 |                       </Col>
 50 |                     </Row>
 51 |                     <p className="mt-3 mb-0 text-muted text-sm">
 52 |                       <span className="text-success mr-2">
 53 |                         <i className="fa fa-arrow-up" /> 3.48%
 54 |                       </span>{" "}
 55 |                       <span className="text-nowrap">Since last month</span>
 56 |                     </p>
 57 |                   </CardBody>
 58 |                 </Card>
 59 |               </Col>
 60 |               <Col lg="6" xl="3">
 61 |                 <Card className="card-stats mb-4 mb-xl-0">
 62 |                   <CardBody>
 63 |                     <Row>
 64 |                       <div className="col">
 65 |                         <CardTitle
 66 |                           tag="h5"
 67 |                           className="text-uppercase text-muted mb-0"
 68 |                         >
 69 |                           New users
 70 |                         </CardTitle>
 71 |                         <span className="h2 font-weight-bold mb-0">2,356</span>
 72 |                       </div>
 73 |                       <Col className="col-auto">
 74 |                         <div className="icon icon-shape bg-warning text-white rounded-circle shadow">
 75 |                           <i className="fas fa-chart-pie" />
 76 |                         </div>
 77 |                       </Col>
 78 |                     </Row>
 79 |                     <p className="mt-3 mb-0 text-muted text-sm">
 80 |                       <span className="text-danger mr-2">
 81 |                         <i className="fas fa-arrow-down" /> 3.48%
 82 |                       </span>{" "}
 83 |                       <span className="text-nowrap">Since last week</span>
 84 |                     </p>
 85 |                   </CardBody>
 86 |                 </Card>
 87 |               </Col>
 88 |               <Col lg="6" xl="3">
 89 |                 <Card className="card-stats mb-4 mb-xl-0">
 90 |                   <CardBody>
 91 |                     <Row>
 92 |                       <div className="col">
 93 |                         <CardTitle
 94 |                           tag="h5"
 95 |                           className="text-uppercase text-muted mb-0"
 96 |                         >
 97 |                           Sales
 98 |                         </CardTitle>
 99 |                         <span className="h2 font-weight-bold mb-0">924</span>
100 |                       </div>
101 |                       <Col className="col-auto">
102 |                         <div className="icon icon-shape bg-yellow text-white rounded-circle shadow">
103 |                           <i className="fas fa-users" />
104 |                         </div>
105 |                       </Col>
106 |                     </Row>
107 |                     <p className="mt-3 mb-0 text-muted text-sm">
108 |                       <span className="text-warning mr-2">
109 |                         <i className="fas fa-arrow-down" /> 1.10%
110 |                       </span>{" "}
111 |                       <span className="text-nowrap">Since yesterday</span>
112 |                     </p>
113 |                   </CardBody>
114 |                 </Card>
115 |               </Col>
116 |               <Col lg="6" xl="3">
117 |                 <Card className="card-stats mb-4 mb-xl-0">
118 |                   <CardBody>
119 |                     <Row>
120 |                       <div className="col">
121 |                         <CardTitle
122 |                           tag="h5"
123 |                           className="text-uppercase text-muted mb-0"
124 |                         >
125 |                           Performance
126 |                         </CardTitle>
127 |                         <span className="h2 font-weight-bold mb-0">49,65%</span>
128 |                       </div>
129 |                       <Col className="col-auto">
130 |                         <div className="icon icon-shape bg-info text-white rounded-circle shadow">
131 |                           <i className="fas fa-percent" />
132 |                         </div>
133 |                       </Col>
134 |                     </Row>
135 |                     <p className="mt-3 mb-0 text-muted text-sm">
136 |                       <span className="text-success mr-2">
137 |                         <i className="fas fa-arrow-up" /> 12%
138 |                       </span>{" "}
139 |                       <span className="text-nowrap">Since last month</span>
140 |                     </p>
141 |                   </CardBody>
142 |                 </Card>
143 |               </Col>
144 |             </Row>
145 |           </div>
146 |         </Container>
147 |       </div>
148 |     </>
149 |   );
150 | };
151 | 
152 | export default Header;
153 | 


--------------------------------------------------------------------------------
/src/components/Headers/UserHeader.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | 
19 | // reactstrap components
20 | import { Button, Container, Row, Col } from "reactstrap";
21 | 
22 | const UserHeader = () => {
23 |   return (
24 |     <>
25 |       <div
26 |         className="header pb-8 pt-5 pt-lg-8 d-flex align-items-center"
27 |         style={{
28 |           minHeight: "600px",
29 |           backgroundImage:
30 |             "url(" + require("../../assets/img/theme/profile-cover.jpg") + ")",
31 |           backgroundSize: "cover",
32 |           backgroundPosition: "center top",
33 |         }}
34 |       >
35 |         {/* Mask */}
36 |         <span className="mask bg-gradient-default opacity-8" />
37 |         {/* Header container */}
38 |         <Container className="d-flex align-items-center" fluid>
39 |           <Row>
40 |             <Col lg="7" md="10">
41 |               <h1 className="display-2 text-white">Hello Jesse</h1>
42 |               <p className="text-white mt-0 mb-5">
43 |                 This is your profile page. You can see the progress you've made
44 |                 with your work and manage your projects or assigned tasks
45 |               </p>
46 |               <Button
47 |                 color="info"
48 |                 href="#pablo"
49 |                 onClick={(e) => e.preventDefault()}
50 |               >
51 |                 Edit profile
52 |               </Button>
53 |             </Col>
54 |           </Row>
55 |         </Container>
56 |       </div>
57 |     </>
58 |   );
59 | };
60 | 
61 | export default UserHeader;
62 | 


--------------------------------------------------------------------------------
/src/components/Navbars/AdminNavbar.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | import { Link } from "react-router-dom";
 19 | // reactstrap components
 20 | import {
 21 |   DropdownMenu,
 22 |   DropdownItem,
 23 |   UncontrolledDropdown,
 24 |   DropdownToggle,
 25 |   Form,
 26 |   FormGroup,
 27 |   InputGroupAddon,
 28 |   InputGroupText,
 29 |   Input,
 30 |   InputGroup,
 31 |   Navbar,
 32 |   Nav,
 33 |   Container,
 34 |   Media,
 35 | } from "reactstrap";
 36 | 
 37 | const AdminNavbar = (props) => {
 38 |   return (
 39 |     <>
 40 |       <Navbar className="navbar-top navbar-dark" expand="md" id="navbar-main">
 41 |         <Container fluid>
 42 |           <Link
 43 |             className="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block"
 44 |             to="/"
 45 |           >
 46 |             {props.brandText}
 47 |           </Link>
 48 |           <Form className="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
 49 |             <FormGroup className="mb-0">
 50 |               <InputGroup className="input-group-alternative">
 51 |                 <InputGroupAddon addonType="prepend">
 52 |                   <InputGroupText>
 53 |                     <i className="fas fa-search" />
 54 |                   </InputGroupText>
 55 |                 </InputGroupAddon>
 56 |                 <Input placeholder="Search" type="text" />
 57 |               </InputGroup>
 58 |             </FormGroup>
 59 |           </Form>
 60 |           <Nav className="align-items-center d-none d-md-flex" navbar>
 61 |             <UncontrolledDropdown nav>
 62 |               <DropdownToggle className="pr-0" nav>
 63 |                 <Media className="align-items-center">
 64 |                   <span className="avatar avatar-sm rounded-circle">
 65 |                     <img
 66 |                       alt="..."
 67 |                       src={require("../../assets/img/theme/team-4-800x800.jpg")}
 68 |                     />
 69 |                   </span>
 70 |                   <Media className="ml-2 d-none d-lg-block">
 71 |                     <span className="mb-0 text-sm font-weight-bold">
 72 |                       Jessica Jones
 73 |                     </span>
 74 |                   </Media>
 75 |                 </Media>
 76 |               </DropdownToggle>
 77 |               <DropdownMenu className="dropdown-menu-arrow" right>
 78 |                 <DropdownItem className="noti-title" header tag="div">
 79 |                   <h6 className="text-overflow m-0">Welcome!</h6>
 80 |                 </DropdownItem>
 81 |                 <DropdownItem to="/admin/user-profile" tag={Link}>
 82 |                   <i className="ni ni-single-02" />
 83 |                   <span>My profile</span>
 84 |                 </DropdownItem>
 85 |                 <DropdownItem to="/admin/user-profile" tag={Link}>
 86 |                   <i className="ni ni-settings-gear-65" />
 87 |                   <span>Settings</span>
 88 |                 </DropdownItem>
 89 |                 <DropdownItem to="/admin/user-profile" tag={Link}>
 90 |                   <i className="ni ni-calendar-grid-58" />
 91 |                   <span>Activity</span>
 92 |                 </DropdownItem>
 93 |                 <DropdownItem to="/admin/user-profile" tag={Link}>
 94 |                   <i className="ni ni-support-16" />
 95 |                   <span>Support</span>
 96 |                 </DropdownItem>
 97 |                 <DropdownItem divider />
 98 |                 <DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
 99 |                   <i className="ni ni-user-run" />
100 |                   <span>Logout</span>
101 |                 </DropdownItem>
102 |               </DropdownMenu>
103 |             </UncontrolledDropdown>
104 |           </Nav>
105 |         </Container>
106 |       </Navbar>
107 |     </>
108 |   );
109 | };
110 | 
111 | export default AdminNavbar;
112 | 


--------------------------------------------------------------------------------
/src/components/Navbars/AuthNavbar.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | import { Link } from "react-router-dom";
 19 | // reactstrap components
 20 | import {
 21 |   UncontrolledCollapse,
 22 |   NavbarBrand,
 23 |   Navbar,
 24 |   NavItem,
 25 |   NavLink,
 26 |   Nav,
 27 |   Container,
 28 |   Row,
 29 |   Col,
 30 | } from "reactstrap";
 31 | 
 32 | const AdminNavbar = () => {
 33 |   return (
 34 |     <>
 35 |       <Navbar className="navbar-top navbar-horizontal navbar-dark" expand="md">
 36 |         <Container className="px-4">
 37 |           <NavbarBrand to="/" tag={Link}>
 38 |             <img
 39 |               alt="..."
 40 |               src={require("../../assets/img/brand/argon-react-white.png")}
 41 |             />
 42 |           </NavbarBrand>
 43 |           <button className="navbar-toggler" id="navbar-collapse-main">
 44 |             <span className="navbar-toggler-icon" />
 45 |           </button>
 46 |           <UncontrolledCollapse navbar toggler="#navbar-collapse-main">
 47 |             <div className="navbar-collapse-header d-md-none">
 48 |               <Row>
 49 |                 <Col className="collapse-brand" xs="6">
 50 |                   <Link to="/">
 51 |                     <img
 52 |                       alt="..."
 53 |                       src={require("../../assets/img/brand/argon-react.png")}
 54 |                     />
 55 |                   </Link>
 56 |                 </Col>
 57 |                 <Col className="collapse-close" xs="6">
 58 |                   <button className="navbar-toggler" id="navbar-collapse-main">
 59 |                     <span />
 60 |                     <span />
 61 |                   </button>
 62 |                 </Col>
 63 |               </Row>
 64 |             </div>
 65 |             <Nav className="ml-auto" navbar>
 66 |               <NavItem>
 67 |                 <NavLink className="nav-link-icon" to="/" tag={Link}>
 68 |                   <i className="ni ni-planet" />
 69 |                   <span className="nav-link-inner--text">Dashboard</span>
 70 |                 </NavLink>
 71 |               </NavItem>
 72 |               <NavItem>
 73 |                 <NavLink
 74 |                   className="nav-link-icon"
 75 |                   to="/auth/register"
 76 |                   tag={Link}
 77 |                 >
 78 |                   <i className="ni ni-circle-08" />
 79 |                   <span className="nav-link-inner--text">Register</span>
 80 |                 </NavLink>
 81 |               </NavItem>
 82 |               <NavItem>
 83 |                 <NavLink className="nav-link-icon" to="/auth/login" tag={Link}>
 84 |                   <i className="ni ni-key-25" />
 85 |                   <span className="nav-link-inner--text">Login</span>
 86 |                 </NavLink>
 87 |               </NavItem>
 88 |               <NavItem>
 89 |                 <NavLink
 90 |                   className="nav-link-icon"
 91 |                   to="/admin/user-profile"
 92 |                   tag={Link}
 93 |                 >
 94 |                   <i className="ni ni-single-02" />
 95 |                   <span className="nav-link-inner--text">Profile</span>
 96 |                 </NavLink>
 97 |               </NavItem>
 98 |             </Nav>
 99 |           </UncontrolledCollapse>
100 |         </Container>
101 |       </Navbar>
102 |     </>
103 |   );
104 | };
105 | 
106 | export default AdminNavbar;
107 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | import React from "react";
19 | import ReactDOM from "react-dom/client";
20 | import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
21 | 
22 | import "assets/plugins/nucleo/css/nucleo.css";
23 | import "@fortawesome/fontawesome-free/css/all.min.css";
24 | import "assets/scss/argon-dashboard-react.scss";
25 | 
26 | import AdminLayout from "layouts/Admin.js";
27 | import AuthLayout from "layouts/Auth.js";
28 | 
29 | const root = ReactDOM.createRoot(document.getElementById("root"));
30 | 
31 | root.render(
32 |   <BrowserRouter>
33 |     <Routes>
34 |       <Route path="/admin/*" element={<AdminLayout />} />
35 |       <Route path="/auth/*" element={<AuthLayout />} />
36 |       <Route path="*" element={<Navigate to="/admin/index" replace />} />
37 |     </Routes>
38 |   </BrowserRouter>
39 | );
40 | 


--------------------------------------------------------------------------------
/src/layouts/Admin.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | import React from "react";
19 | import { useLocation, Route, Routes, Navigate } from "react-router-dom";
20 | // reactstrap components
21 | import { Container } from "reactstrap";
22 | // core components
23 | import AdminNavbar from "components/Navbars/AdminNavbar.js";
24 | import AdminFooter from "components/Footers/AdminFooter.js";
25 | import Sidebar from "components/Sidebar/Sidebar.js";
26 | 
27 | import routes from "routes.js";
28 | 
29 | const Admin = (props) => {
30 |   const mainContent = React.useRef(null);
31 |   const location = useLocation();
32 | 
33 |   React.useEffect(() => {
34 |     document.documentElement.scrollTop = 0;
35 |     document.scrollingElement.scrollTop = 0;
36 |     mainContent.current.scrollTop = 0;
37 |   }, [location]);
38 | 
39 |   const getRoutes = (routes) => {
40 |     return routes.map((prop, key) => {
41 |       if (prop.layout === "/admin") {
42 |         return (
43 |           <Route path={prop.path} element={prop.component} key={key} exact />
44 |         );
45 |       } else {
46 |         return null;
47 |       }
48 |     });
49 |   };
50 | 
51 |   const getBrandText = (path) => {
52 |     for (let i = 0; i < routes.length; i++) {
53 |       if (
54 |         props?.location?.pathname.indexOf(routes[i].layout + routes[i].path) !==
55 |         -1
56 |       ) {
57 |         return routes[i].name;
58 |       }
59 |     }
60 |     return "Brand";
61 |   };
62 | 
63 |   return (
64 |     <>
65 |       <Sidebar
66 |         {...props}
67 |         routes={routes}
68 |         logo={{
69 |           innerLink: "/admin/index",
70 |           imgSrc: require("../assets/img/brand/argon-react.png"),
71 |           imgAlt: "...",
72 |         }}
73 |       />
74 |       <div className="main-content" ref={mainContent}>
75 |         <AdminNavbar
76 |           {...props}
77 |           brandText={getBrandText(props?.location?.pathname)}
78 |         />
79 |         <Routes>
80 |           {getRoutes(routes)}
81 |           <Route path="*" element={<Navigate to="/admin/index" replace />} />
82 |         </Routes>
83 |         <Container fluid>
84 |           <AdminFooter />
85 |         </Container>
86 |       </div>
87 |     </>
88 |   );
89 | };
90 | 
91 | export default Admin;
92 | 


--------------------------------------------------------------------------------
/src/layouts/Auth.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | import React from "react";
 19 | import { useLocation, Route, Routes, Navigate } from "react-router-dom";
 20 | // reactstrap components
 21 | import { Container, Row, Col } from "reactstrap";
 22 | 
 23 | // core components
 24 | import AuthNavbar from "components/Navbars/AuthNavbar.js";
 25 | import AuthFooter from "components/Footers/AuthFooter.js";
 26 | 
 27 | import routes from "routes.js";
 28 | 
 29 | const Auth = (props) => {
 30 |   const mainContent = React.useRef(null);
 31 |   const location = useLocation();
 32 | 
 33 |   React.useEffect(() => {
 34 |     document.body.classList.add("bg-default");
 35 |     return () => {
 36 |       document.body.classList.remove("bg-default");
 37 |     };
 38 |   }, []);
 39 |   React.useEffect(() => {
 40 |     document.documentElement.scrollTop = 0;
 41 |     document.scrollingElement.scrollTop = 0;
 42 |     mainContent.current.scrollTop = 0;
 43 |   }, [location]);
 44 | 
 45 |   const getRoutes = (routes) => {
 46 |     return routes.map((prop, key) => {
 47 |       if (prop.layout === "/auth") {
 48 |         return (
 49 |           <Route path={prop.path} element={prop.component} key={key} exact />
 50 |         );
 51 |       } else {
 52 |         return null;
 53 |       }
 54 |     });
 55 |   };
 56 | 
 57 |   return (
 58 |     <>
 59 |       <div className="main-content" ref={mainContent}>
 60 |         <AuthNavbar />
 61 |         <div className="header bg-gradient-info py-7 py-lg-8">
 62 |           <Container>
 63 |             <div className="header-body text-center mb-7">
 64 |               <Row className="justify-content-center">
 65 |                 <Col lg="5" md="6">
 66 |                   <h1 className="text-white">Welcome!</h1>
 67 |                   <p className="text-lead text-light">
 68 |                     Use these awesome forms to login or create new account in
 69 |                     your project for free.
 70 |                   </p>
 71 |                 </Col>
 72 |               </Row>
 73 |             </div>
 74 |           </Container>
 75 |           <div className="separator separator-bottom separator-skew zindex-100">
 76 |             <svg
 77 |               xmlns="http://www.w3.org/2000/svg"
 78 |               preserveAspectRatio="none"
 79 |               version="1.1"
 80 |               viewBox="0 0 2560 100"
 81 |               x="0"
 82 |               y="0"
 83 |             >
 84 |               <polygon
 85 |                 className="fill-default"
 86 |                 points="2560 0 2560 100 0 100"
 87 |               />
 88 |             </svg>
 89 |           </div>
 90 |         </div>
 91 |         {/* Page content */}
 92 |         <Container className="mt--8 pb-5">
 93 |           <Row className="justify-content-center">
 94 |             <Routes>
 95 |               {getRoutes(routes)}
 96 |               <Route path="*" element={<Navigate to="/auth/login" replace />} />
 97 |             </Routes>
 98 |           </Row>
 99 |         </Container>
100 |       </div>
101 |       <AuthFooter />
102 |     </>
103 |   );
104 | };
105 | 
106 | export default Auth;
107 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 | =========================================================
 4 | * Argon Dashboard React - v1.2.4
 5 | =========================================================
 6 | 
 7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
10 | 
11 | * Coded by Creative Tim
12 | 
13 | =========================================================
14 | 
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 | 
17 | */
18 | import Index from "views/Index.js";
19 | import Profile from "views/examples/Profile.js";
20 | import Maps from "views/examples/Maps.js";
21 | import Register from "views/examples/Register.js";
22 | import Login from "views/examples/Login.js";
23 | import Tables from "views/examples/Tables.js";
24 | import Icons from "views/examples/Icons.js";
25 | 
26 | var routes = [
27 |   {
28 |     path: "/index",
29 |     name: "Dashboard",
30 |     icon: "ni ni-tv-2 text-primary",
31 |     component: <Index />,
32 |     layout: "/admin",
33 |   },
34 |   {
35 |     path: "/icons",
36 |     name: "Icons",
37 |     icon: "ni ni-planet text-blue",
38 |     component: <Icons />,
39 |     layout: "/admin",
40 |   },
41 |   {
42 |     path: "/maps",
43 |     name: "Maps",
44 |     icon: "ni ni-pin-3 text-orange",
45 |     component: <Maps />,
46 |     layout: "/admin",
47 |   },
48 |   {
49 |     path: "/user-profile",
50 |     name: "User Profile",
51 |     icon: "ni ni-single-02 text-yellow",
52 |     component: <Profile />,
53 |     layout: "/admin",
54 |   },
55 |   {
56 |     path: "/tables",
57 |     name: "Tables",
58 |     icon: "ni ni-bullet-list-67 text-red",
59 |     component: <Tables />,
60 |     layout: "/admin",
61 |   },
62 |   {
63 |     path: "/login",
64 |     name: "Login",
65 |     icon: "ni ni-key-25 text-info",
66 |     component: <Login />,
67 |     layout: "/auth",
68 |   },
69 |   {
70 |     path: "/register",
71 |     name: "Register",
72 |     icon: "ni ni-circle-08 text-pink",
73 |     component: <Register />,
74 |     layout: "/auth",
75 |   },
76 | ];
77 | export default routes;
78 | 


--------------------------------------------------------------------------------
/src/views/examples/Login.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | 
 19 | // reactstrap components
 20 | import {
 21 |   Button,
 22 |   Card,
 23 |   CardHeader,
 24 |   CardBody,
 25 |   FormGroup,
 26 |   Form,
 27 |   Input,
 28 |   InputGroupAddon,
 29 |   InputGroupText,
 30 |   InputGroup,
 31 |   Row,
 32 |   Col,
 33 | } from "reactstrap";
 34 | 
 35 | const Login = () => {
 36 |   return (
 37 |     <>
 38 |       <Col lg="5" md="7">
 39 |         <Card className="bg-secondary shadow border-0">
 40 |           <CardHeader className="bg-transparent pb-5">
 41 |             <div className="text-muted text-center mt-2 mb-3">
 42 |               <small>Sign in with</small>
 43 |             </div>
 44 |             <div className="btn-wrapper text-center">
 45 |               <Button
 46 |                 className="btn-neutral btn-icon"
 47 |                 color="default"
 48 |                 href="#pablo"
 49 |                 onClick={(e) => e.preventDefault()}
 50 |               >
 51 |                 <span className="btn-inner--icon">
 52 |                   <img
 53 |                     alt="..."
 54 |                     src={
 55 |                       require("../../assets/img/icons/common/github.svg")
 56 |                         .default
 57 |                     }
 58 |                   />
 59 |                 </span>
 60 |                 <span className="btn-inner--text">Github</span>
 61 |               </Button>
 62 |               <Button
 63 |                 className="btn-neutral btn-icon"
 64 |                 color="default"
 65 |                 href="#pablo"
 66 |                 onClick={(e) => e.preventDefault()}
 67 |               >
 68 |                 <span className="btn-inner--icon">
 69 |                   <img
 70 |                     alt="..."
 71 |                     src={
 72 |                       require("../../assets/img/icons/common/google.svg")
 73 |                         .default
 74 |                     }
 75 |                   />
 76 |                 </span>
 77 |                 <span className="btn-inner--text">Google</span>
 78 |               </Button>
 79 |             </div>
 80 |           </CardHeader>
 81 |           <CardBody className="px-lg-5 py-lg-5">
 82 |             <div className="text-center text-muted mb-4">
 83 |               <small>Or sign in with credentials</small>
 84 |             </div>
 85 |             <Form role="form">
 86 |               <FormGroup className="mb-3">
 87 |                 <InputGroup className="input-group-alternative">
 88 |                   <InputGroupAddon addonType="prepend">
 89 |                     <InputGroupText>
 90 |                       <i className="ni ni-email-83" />
 91 |                     </InputGroupText>
 92 |                   </InputGroupAddon>
 93 |                   <Input
 94 |                     placeholder="Email"
 95 |                     type="email"
 96 |                     autoComplete="new-email"
 97 |                   />
 98 |                 </InputGroup>
 99 |               </FormGroup>
100 |               <FormGroup>
101 |                 <InputGroup className="input-group-alternative">
102 |                   <InputGroupAddon addonType="prepend">
103 |                     <InputGroupText>
104 |                       <i className="ni ni-lock-circle-open" />
105 |                     </InputGroupText>
106 |                   </InputGroupAddon>
107 |                   <Input
108 |                     placeholder="Password"
109 |                     type="password"
110 |                     autoComplete="new-password"
111 |                   />
112 |                 </InputGroup>
113 |               </FormGroup>
114 |               <div className="custom-control custom-control-alternative custom-checkbox">
115 |                 <input
116 |                   className="custom-control-input"
117 |                   id=" customCheckLogin"
118 |                   type="checkbox"
119 |                 />
120 |                 <label
121 |                   className="custom-control-label"
122 |                   htmlFor=" customCheckLogin"
123 |                 >
124 |                   <span className="text-muted">Remember me</span>
125 |                 </label>
126 |               </div>
127 |               <div className="text-center">
128 |                 <Button className="my-4" color="primary" type="button">
129 |                   Sign in
130 |                 </Button>
131 |               </div>
132 |             </Form>
133 |           </CardBody>
134 |         </Card>
135 |         <Row className="mt-3">
136 |           <Col xs="6">
137 |             <a
138 |               className="text-light"
139 |               href="#pablo"
140 |               onClick={(e) => e.preventDefault()}
141 |             >
142 |               <small>Forgot password?</small>
143 |             </a>
144 |           </Col>
145 |           <Col className="text-right" xs="6">
146 |             <a
147 |               className="text-light"
148 |               href="#pablo"
149 |               onClick={(e) => e.preventDefault()}
150 |             >
151 |               <small>Create new account</small>
152 |             </a>
153 |           </Col>
154 |         </Row>
155 |       </Col>
156 |     </>
157 |   );
158 | };
159 | 
160 | export default Login;
161 | 


--------------------------------------------------------------------------------
/src/views/examples/Maps.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | import React from "react";
 19 | 
 20 | // reactstrap components
 21 | import { Card, Container, Row } from "reactstrap";
 22 | 
 23 | // core components
 24 | import Header from "components/Headers/Header.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: 12,
 36 |       center: myLatlng,
 37 |       scrollwheel: false,
 38 |       zoomControl: true,
 39 |       styles: [
 40 |         {
 41 |           featureType: "administrative",
 42 |           elementType: "labels.text.fill",
 43 |           stylers: [{ color: "#444444" }],
 44 |         },
 45 |         {
 46 |           featureType: "landscape",
 47 |           elementType: "all",
 48 |           stylers: [{ color: "#f2f2f2" }],
 49 |         },
 50 |         {
 51 |           featureType: "poi",
 52 |           elementType: "all",
 53 |           stylers: [{ visibility: "off" }],
 54 |         },
 55 |         {
 56 |           featureType: "road",
 57 |           elementType: "all",
 58 |           stylers: [{ saturation: -100 }, { lightness: 45 }],
 59 |         },
 60 |         {
 61 |           featureType: "road.highway",
 62 |           elementType: "all",
 63 |           stylers: [{ visibility: "simplified" }],
 64 |         },
 65 |         {
 66 |           featureType: "road.arterial",
 67 |           elementType: "labels.icon",
 68 |           stylers: [{ visibility: "off" }],
 69 |         },
 70 |         {
 71 |           featureType: "transit",
 72 |           elementType: "all",
 73 |           stylers: [{ visibility: "off" }],
 74 |         },
 75 |         {
 76 |           featureType: "water",
 77 |           elementType: "all",
 78 |           stylers: [{ color: "#5e72e4" }, { visibility: "on" }],
 79 |         },
 80 |       ],
 81 |     };
 82 | 
 83 |     map = new google.maps.Map(map, mapOptions);
 84 | 
 85 |     const marker = new google.maps.Marker({
 86 |       position: myLatlng,
 87 |       map: map,
 88 |       animation: google.maps.Animation.DROP,
 89 |       title: "Light Bootstrap Dashboard PRO React!",
 90 |     });
 91 | 
 92 |     const contentString =
 93 |       '<div class="info-window-content"><h2>Light Bootstrap Dashboard PRO React</h2>' +
 94 |       "<p>A premium Admin for React-Bootstrap, Bootstrap, React, and React Hooks.</p></div>";
 95 | 
 96 |     const infowindow = new google.maps.InfoWindow({
 97 |       content: contentString,
 98 |     });
 99 | 
100 |     google.maps.event.addListener(marker, "click", function () {
101 |       infowindow.open(map, marker);
102 |     });
103 |   }, []);
104 |   return (
105 |     <>
106 |       <div
107 |         style={{ height: `600px` }}
108 |         className="map-canvas"
109 |         id="map-canvas"
110 |         ref={mapRef}
111 |       ></div>
112 |     </>
113 |   );
114 | };
115 | 
116 | const Maps = () => {
117 |   return (
118 |     <>
119 |       <Header />
120 |       {/* Page content */}
121 |       <Container className="mt--7" fluid>
122 |         <Row>
123 |           <div className="col">
124 |             <Card className="shadow border-0">
125 |               <MapWrapper />
126 |             </Card>
127 |           </div>
128 |         </Row>
129 |       </Container>
130 |     </>
131 |   );
132 | };
133 | 
134 | export default Maps;
135 | 


--------------------------------------------------------------------------------
/src/views/examples/Register.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 | =========================================================
  4 | * Argon Dashboard React - v1.2.4
  5 | =========================================================
  6 | 
  7 | * Product Page: https://www.creative-tim.com/product/argon-dashboard-react
  8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com)
  9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
 10 | 
 11 | * Coded by Creative Tim
 12 | 
 13 | =========================================================
 14 | 
 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 16 | 
 17 | */
 18 | 
 19 | // reactstrap components
 20 | import {
 21 |   Button,
 22 |   Card,
 23 |   CardHeader,
 24 |   CardBody,
 25 |   FormGroup,
 26 |   Form,
 27 |   Input,
 28 |   InputGroupAddon,
 29 |   InputGroupText,
 30 |   InputGroup,
 31 |   Row,
 32 |   Col,
 33 | } from "reactstrap";
 34 | 
 35 | const Register = () => {
 36 |   return (
 37 |     <>
 38 |       <Col lg="6" md="8">
 39 |         <Card className="bg-secondary shadow border-0">
 40 |           <CardHeader className="bg-transparent pb-5">
 41 |             <div className="text-muted text-center mt-2 mb-4">
 42 |               <small>Sign up with</small>
 43 |             </div>
 44 |             <div className="text-center">
 45 |               <Button
 46 |                 className="btn-neutral btn-icon mr-4"
 47 |                 color="default"
 48 |                 href="#pablo"
 49 |                 onClick={(e) => e.preventDefault()}
 50 |               >
 51 |                 <span className="btn-inner--icon">
 52 |                   <img
 53 |                     alt="..."
 54 |                     src={
 55 |                       require("../../assets/img/icons/common/github.svg")
 56 |                         .default
 57 |                     }
 58 |                   />
 59 |                 </span>
 60 |                 <span className="btn-inner--text">Github</span>
 61 |               </Button>
 62 |               <Button
 63 |                 className="btn-neutral btn-icon"
 64 |                 color="default"
 65 |                 href="#pablo"
 66 |                 onClick={(e) => e.preventDefault()}
 67 |               >
 68 |                 <span className="btn-inner--icon">
 69 |                   <img
 70 |                     alt="..."
 71 |                     src={
 72 |                       require("../../assets/img/icons/common/google.svg")
 73 |                         .default
 74 |                     }
 75 |                   />
 76 |                 </span>
 77 |                 <span className="btn-inner--text">Google</span>
 78 |               </Button>
 79 |             </div>
 80 |           </CardHeader>
 81 |           <CardBody className="px-lg-5 py-lg-5">
 82 |             <div className="text-center text-muted mb-4">
 83 |               <small>Or sign up with credentials</small>
 84 |             </div>
 85 |             <Form role="form">
 86 |               <FormGroup>
 87 |                 <InputGroup className="input-group-alternative mb-3">
 88 |                   <InputGroupAddon addonType="prepend">
 89 |                     <InputGroupText>
 90 |                       <i className="ni ni-hat-3" />
 91 |                     </InputGroupText>
 92 |                   </InputGroupAddon>
 93 |                   <Input placeholder="Name" type="text" />
 94 |                 </InputGroup>
 95 |               </FormGroup>
 96 |               <FormGroup>
 97 |                 <InputGroup className="input-group-alternative mb-3">
 98 |                   <InputGroupAddon addonType="prepend">
 99 |                     <InputGroupText>
100 |                       <i className="ni ni-email-83" />
101 |                     </InputGroupText>
102 |                   </InputGroupAddon>
103 |                   <Input
104 |                     placeholder="Email"
105 |                     type="email"
106 |                     autoComplete="new-email"
107 |                   />
108 |                 </InputGroup>
109 |               </FormGroup>
110 |               <FormGroup>
111 |                 <InputGroup className="input-group-alternative">
112 |                   <InputGroupAddon addonType="prepend">
113 |                     <InputGroupText>
114 |                       <i className="ni ni-lock-circle-open" />
115 |                     </InputGroupText>
116 |                   </InputGroupAddon>
117 |                   <Input
118 |                     placeholder="Password"
119 |                     type="password"
120 |                     autoComplete="new-password"
121 |                   />
122 |                 </InputGroup>
123 |               </FormGroup>
124 |               <div className="text-muted font-italic">
125 |                 <small>
126 |                   password strength:{" "}
127 |                   <span className="text-success font-weight-700">strong</span>
128 |                 </small>
129 |               </div>
130 |               <Row className="my-4">
131 |                 <Col xs="12">
132 |                   <div className="custom-control custom-control-alternative custom-checkbox">
133 |                     <input
134 |                       className="custom-control-input"
135 |                       id="customCheckRegister"
136 |                       type="checkbox"
137 |                     />
138 |                     <label
139 |                       className="custom-control-label"
140 |                       htmlFor="customCheckRegister"
141 |                     >
142 |                       <span className="text-muted">
143 |                         I agree with the{" "}
144 |                         <a href="#pablo" onClick={(e) => e.preventDefault()}>
145 |                           Privacy Policy
146 |                         </a>
147 |                       </span>
148 |                     </label>
149 |                   </div>
150 |                 </Col>
151 |               </Row>
152 |               <div className="text-center">
153 |                 <Button className="mt-4" color="primary" type="button">
154 |                   Create account
155 |                 </Button>
156 |               </div>
157 |             </Form>
158 |           </CardBody>
159 |         </Card>
160 |       </Col>
161 |     </>
162 |   );
163 | };
164 | 
165 | export default Register;
166 | 


--------------------------------------------------------------------------------