Initial version
This commit is contained in:
commit
abd886a7ee
19
documentation.html
Normal file
19
documentation.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Sneat – Bootstrap 5 HTML Admin Template</title>
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; URL='https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/'"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
If you do not redirect please visit :
|
||||
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/"
|
||||
>https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/</a
|
||||
>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
14
hire-us.html
Normal file
14
hire-us.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hire Us</title>
|
||||
<meta http-equiv="refresh" content="0; URL='https://themeselection.com/hire-us/'" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
If you do not redirect please visit :
|
||||
<a href="https://themeselection.com/hire-us/">https://themeselection.com/hire-us/</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
20
react-sneat-bootstrap-admin-template/.eslintrc.cjs
Normal file
20
react-sneat-bootstrap-admin-template/.eslintrc.cjs
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
1
react-sneat-bootstrap-admin-template/.ignore
Normal file
1
react-sneat-bootstrap-admin-template/.ignore
Normal file
@ -0,0 +1 @@
|
||||
/node_modules/*
|
||||
21
react-sneat-bootstrap-admin-template/LICENSE
Normal file
21
react-sneat-bootstrap-admin-template/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 Dwiwijaya
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
61
react-sneat-bootstrap-admin-template/README.md
Normal file
61
react-sneat-bootstrap-admin-template/README.md
Normal file
@ -0,0 +1,61 @@
|
||||
<p align="center">
|
||||
<a href="https://react-sneat-bootstrap-admin-template.vercel.app/" target="_blank">
|
||||
<img style="margin-right:20px" src="https://user-images.githubusercontent.com/749684/150333149-805037bc-8874-4a1f-876a-61a9683f8ef5.png" alt="sneat-logo" width="30px" height="auto">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png" alt="React Logo" height="45px">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vitejs-logo.svg/615px-Vitejs-logo.svg.png" alt="Vite Logo" height="45px">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">
|
||||
<a href="https://react-sneat-bootstrap-admin-template.vercel.app/" target="_blank" align="center">
|
||||
React Sneat - Free Bootstrap 5 Admin Template
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
[](https://themeselection.com/item/sneat-free-bootstrap-html-admin-template/)
|
||||
|
||||
🚀 This project is a conversion of the Sneat Admin Template to React JS, providing a modern and responsive user interface for building powerful web applications. The original Sneat template was adapted to React components, making it easy to integrate into React-based projects.
|
||||
|
||||
[View Demo React Sneat](https://react-sneat-bootstrap-admin-template.vercel.app/) Also check [ThemeSelection Sneat](https://demos.themeselection.com/sneat-bootstrap-html-admin-template-free/html/)
|
||||
## Features
|
||||
|
||||
- Responsive layout for various screen sizes.
|
||||
- Clean and modular React components following Atomic Design principles.
|
||||
- Integration with popular React libraries for state management, routing, etc.
|
||||
- Theming and styling using modern CSS-in-JS approaches.
|
||||
- Pre-configured build setup for efficient development and production builds.
|
||||
|
||||
## Usage
|
||||
|
||||
1. Clone the repository: `git clone https://github.com/11Dwiwijaya/react-sneat-bootstrap-admin-template.git`
|
||||
2. Install dependencies: `npm install`
|
||||
3. Run the development server: `npm start`
|
||||
4. Build for production: `npm run build`
|
||||
|
||||
## Folder Structure
|
||||
|
||||
- `src/components`: Atomic Design components (atoms, molecules, organisms, templates, pages).
|
||||
- `src/hooks`: Custom React hooks.
|
||||
- `src/layout`: Layout components.
|
||||
- `src/routes`: Application routing components.
|
||||
- `src/data`: Static data or mocks.
|
||||
- `src/utils`: Utility functions.
|
||||
- `src/assets`: Project-specific assets.
|
||||
- `src/styles`: Global styles and theming.
|
||||
- `public`: Static assets and HTML template.
|
||||
|
||||
## What's the improvement?
|
||||
- **SEO**: Ensure proper HTML semantics, use semantic tags, and provide meaningful metadata.
|
||||
- **Performance**: Optimize assets, lazy load where possible, and implement code splitting.
|
||||
- **Accessibility**: Follow accessibility best practices, use ARIA roles, and ensure keyboard navigation.
|
||||
- **Responsive Design**: Prioritize a mobile-first approach and test on various devices.
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! If you find issues or have improvements, please create a new issue or submit a pull request.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [MIT License](LICENSE).
|
||||
|
||||
Happy coding!
|
||||
78
react-sneat-bootstrap-admin-template/index.html
Normal file
78
react-sneat-bootstrap-admin-template/index.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="light-style layout-menu-fixed layout-compact" dir="ltr" data-theme="theme-default"
|
||||
data-assets-path="/assets/" data-template="vertical-menu-template-free">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Transforming the Sneat Admin Template HTML into a dynamic and modern React Vite application. Explore powerful features and a sleek UI for efficient app management.">
|
||||
<meta name="keywords" content="Sneat, Admin Template, React Vite, Web Development, UI, App Management">
|
||||
<meta name="author" content="Your Name">
|
||||
|
||||
<title>
|
||||
Dashboard - Analytics | Sneat - Bootstrap 5 React Admin Template - Free
|
||||
</title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="/assets/img/favicon/favicon.ico" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/vendor/fonts/boxicons.css" />
|
||||
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/assets/css/demo.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/assets/vendor/libs/apex-charts/apex-charts.css" />
|
||||
|
||||
<!-- Page CSS -->
|
||||
|
||||
<!-- Helpers -->
|
||||
<script src="/assets/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/assets/js/config.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
|
||||
<script src="/assets/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/assets/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/assets/vendor/js/bootstrap.js"></script>
|
||||
<script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/assets/vendor/js/menu.js"></script>
|
||||
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
|
||||
<!-- Main JS -->
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
<!-- Page JS -->
|
||||
<script src="/assets/js/ui-toasts.js"></script>
|
||||
<script src="/assets/js/dashboards-analytics.js"></script>
|
||||
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3597
react-sneat-bootstrap-admin-template/package-lock.json
generated
Normal file
3597
react-sneat-bootstrap-admin-template/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
react-sneat-bootstrap-admin-template/package.json
Normal file
31
react-sneat-bootstrap-admin-template/package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "react-sneat",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"perfect-scrollbar": "^1.5.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.20.1",
|
||||
"sort-by": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.37",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.4",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
24
react-sneat-bootstrap-admin-template/public/.eslintrc.json
Normal file
24
react-sneat-bootstrap-admin-template/public/.eslintrc.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
"es6": true,
|
||||
"jquery": true
|
||||
},
|
||||
"plugins": ["prettier"],
|
||||
"extends": ["airbnb-base", "plugin:prettier/recommended"],
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"no-underscore-dangle": "off",
|
||||
"semi": ["error", "never"],
|
||||
"arrow-parens": ["error", "as-needed"],
|
||||
"no-param-reassign": "off",
|
||||
"no-plusplus": [
|
||||
"error",
|
||||
{
|
||||
"allowForLoopAfterthoughts": true
|
||||
}
|
||||
],
|
||||
"no-cond-assign": ["error", "except-parens"]
|
||||
}
|
||||
}
|
||||
124
react-sneat-bootstrap-admin-template/public/assets/css/demo.css
Normal file
124
react-sneat-bootstrap-admin-template/public/assets/css/demo.css
Normal file
@ -0,0 +1,124 @@
|
||||
/*
|
||||
* demo.css
|
||||
* File include item demo only specific css only
|
||||
******************************************************************************/
|
||||
|
||||
.menu .app-brand.demo {
|
||||
height: 64px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.app-brand-logo.demo svg {
|
||||
width: 22px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.app-brand-text.demo {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.5px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
|
||||
/* Detached navbar */
|
||||
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
|
||||
padding-top: 76px !important;
|
||||
}
|
||||
/* Default navbar */
|
||||
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
|
||||
padding-top: 64px !important;
|
||||
}
|
||||
.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
|
||||
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
|
||||
padding-top: 62px !important;
|
||||
}
|
||||
|
||||
/* Navbar page z-index issue solution */
|
||||
.content-wrapper .navbar {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Content
|
||||
******************************************************************************/
|
||||
|
||||
.demo-blocks > * {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.demo-inline-spacing > * {
|
||||
margin: 1rem 0.375rem 0 0 !important;
|
||||
}
|
||||
|
||||
/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
|
||||
.demo-vertical-spacing > * {
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.demo-vertical-spacing.demo-only-element > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.demo-vertical-spacing-lg > * {
|
||||
margin-top: 1.875rem !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.demo-vertical-spacing-lg.demo-only-element > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.demo-vertical-spacing-xl > * {
|
||||
margin-top: 5rem !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.demo-vertical-spacing-xl.demo-only-element > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.rtl-only {
|
||||
display: none !important;
|
||||
text-align: left !important;
|
||||
direction: ltr !important;
|
||||
}
|
||||
|
||||
[dir='rtl'] .rtl-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Dropdown buttons going out of small screens */
|
||||
@media (max-width: 576px) {
|
||||
#dropdown-variation-demo .btn-group .text-truncate {
|
||||
width: 231px;
|
||||
position: relative;
|
||||
}
|
||||
#dropdown-variation-demo .btn-group .text-truncate::after {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout demo
|
||||
******************************************************************************/
|
||||
|
||||
.layout-demo-wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.layout-demo-placeholder img {
|
||||
width: 900px;
|
||||
}
|
||||
.layout-demo-info {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 702 B |
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
Binary file not shown.
|
After Width: | Height: | Size: 689 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 936 B |
Binary file not shown.
|
After Width: | Height: | Size: 920 B |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@ -0,0 +1,42 @@
|
||||
<svg width="25" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path
|
||||
d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
|
||||
id="path-1"></path>
|
||||
<path
|
||||
d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
|
||||
id="path-3"></path>
|
||||
<path
|
||||
d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
|
||||
id="path-4"></path>
|
||||
<path
|
||||
d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
|
||||
id="path-5"></path>
|
||||
</defs>
|
||||
<g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
|
||||
<g id="Icon" transform="translate(27.000000, 15.000000)">
|
||||
<g id="Mask" transform="translate(0.000000, 8.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use fill="#696cff" xlink:href="#path-1"></use>
|
||||
<g id="Path-3" mask="url(#mask-2)">
|
||||
<use fill="#696cff" xlink:href="#path-3"></use>
|
||||
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="Path-4" mask="url(#mask-2)">
|
||||
<use fill="#696cff" xlink:href="#path-4"></use>
|
||||
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Triangle"
|
||||
transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
|
||||
<use fill="#696cff" xlink:href="#path-5"></use>
|
||||
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
29
react-sneat-bootstrap-admin-template/public/assets/js/config.js
vendored
Normal file
29
react-sneat-bootstrap-admin-template/public/assets/js/config.js
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Config
|
||||
* -------------------------------------------------------------------------------------
|
||||
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
|
||||
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// JS global variables
|
||||
let config = {
|
||||
colors: {
|
||||
primary: '#696cff',
|
||||
secondary: '#8592a3',
|
||||
success: '#71dd37',
|
||||
info: '#03c3ec',
|
||||
warning: '#ffab00',
|
||||
danger: '#ff3e1d',
|
||||
dark: '#233446',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
cardColor: '#fff',
|
||||
bodyBg: '#f5f5f9',
|
||||
bodyColor: '#697a8d',
|
||||
headingColor: '#566a7f',
|
||||
textMuted: '#a1acb8',
|
||||
borderColor: '#eceef1'
|
||||
}
|
||||
};
|
||||
670
react-sneat-bootstrap-admin-template/public/assets/js/dashboards-analytics.js
vendored
Normal file
670
react-sneat-bootstrap-admin-template/public/assets/js/dashboards-analytics.js
vendored
Normal file
@ -0,0 +1,670 @@
|
||||
/**
|
||||
* Dashboard Analytics
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function dashboardAnalitics() {
|
||||
let cardColor, headingColor, axisColor, shadeColor, borderColor;
|
||||
|
||||
cardColor = config.colors.cardColor;
|
||||
headingColor = config.colors.headingColor;
|
||||
axisColor = config.colors.axisColor;
|
||||
borderColor = config.colors.borderColor;
|
||||
|
||||
// Total Revenue Report Chart - Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
|
||||
totalRevenueChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: '2021',
|
||||
data: [18, 7, 15, 29, 18, 12, 9]
|
||||
},
|
||||
{
|
||||
name: '2020',
|
||||
data: [-13, -18, -9, -14, -5, -17, -15]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 300,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '33%',
|
||||
borderRadius: 12,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.info],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [cardColor]
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'left',
|
||||
position: 'top',
|
||||
markers: {
|
||||
height: 8,
|
||||
width: 8,
|
||||
radius: 12,
|
||||
offsetX: -3
|
||||
},
|
||||
labels: {
|
||||
colors: axisColor
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: -8,
|
||||
left: 20,
|
||||
right: 20
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1700,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '32%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1580,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1440,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '42%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '48%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '40%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1040,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 11,
|
||||
columnWidth: '48%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '30%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 840,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '28%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 640,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '32%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '37%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '45%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '52%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 380,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
|
||||
const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
|
||||
totalRevenueChart.render();
|
||||
}
|
||||
|
||||
// Growth Chart - Radial Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const growthChartEl = document.querySelector('#growthChart'),
|
||||
growthChartOptions = {
|
||||
series: [78],
|
||||
labels: ['Growth'],
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 150,
|
||||
offsetY: 10,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
hollow: {
|
||||
size: '55%'
|
||||
},
|
||||
track: {
|
||||
background: cardColor,
|
||||
strokeWidth: '100%'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 15,
|
||||
color: headingColor,
|
||||
fontSize: '15px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
value: {
|
||||
offsetY: -25,
|
||||
color: headingColor,
|
||||
fontSize: '22px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [config.colors.primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.6,
|
||||
stops: [30, 70, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 5
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -35,
|
||||
bottom: -10
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof growthChartEl !== undefined && growthChartEl !== null) {
|
||||
const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
|
||||
growthChart.render();
|
||||
}
|
||||
|
||||
// Profit Report Line Chart
|
||||
// --------------------------------------------------------------------
|
||||
const profileReportChartEl = document.querySelector('#profileReportChart'),
|
||||
profileReportChartConfig = {
|
||||
chart: {
|
||||
height: 80,
|
||||
// width: 175,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
left: 5,
|
||||
blur: 3,
|
||||
color: config.colors.warning,
|
||||
opacity: 0.15
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
right: 8
|
||||
}
|
||||
},
|
||||
colors: [config.colors.warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [110, 270, 145, 245, 205, 285]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
show: false,
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) {
|
||||
const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig);
|
||||
profileReportChart.render();
|
||||
}
|
||||
|
||||
// Order Statistics Chart
|
||||
// --------------------------------------------------------------------
|
||||
const chartOrderStatistics = document.querySelector('#orderStatisticsChart'),
|
||||
orderChartConfig = {
|
||||
chart: {
|
||||
height: 165,
|
||||
width: 130,
|
||||
type: 'donut'
|
||||
},
|
||||
labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
|
||||
series: [85, 15, 50, 50],
|
||||
colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success],
|
||||
stroke: {
|
||||
width: 5,
|
||||
colors: [cardColor]
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: function (val, opt) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 15
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' }
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' }
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'Public Sans',
|
||||
color: headingColor,
|
||||
offsetY: -15,
|
||||
formatter: function (val) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
name: {
|
||||
offsetY: 20,
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '0.8125rem',
|
||||
color: axisColor,
|
||||
label: 'Weekly',
|
||||
formatter: function (w) {
|
||||
return '38%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
|
||||
const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
|
||||
statisticsChart.render();
|
||||
}
|
||||
|
||||
// Income Chart - Area chart
|
||||
// --------------------------------------------------------------------
|
||||
const incomeChartEl = document.querySelector('#incomeChart'),
|
||||
incomeChartConfig = {
|
||||
series: [
|
||||
{
|
||||
data: [24, 21, 30, 22, 42, 26, 35, 29]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 215,
|
||||
parentHeightOffset: 0,
|
||||
parentWidthOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'area'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
markers: {
|
||||
size: 6,
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 4,
|
||||
discrete: [
|
||||
{
|
||||
fillColor: config.colors.white,
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 7,
|
||||
strokeColor: config.colors.primary,
|
||||
strokeWidth: 2,
|
||||
size: 6,
|
||||
radius: 8
|
||||
}
|
||||
],
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: shadeColor,
|
||||
shadeIntensity: 0.6,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.25,
|
||||
stops: [0, 95, 100]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 3,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -8,
|
||||
left: -10,
|
||||
right: 8
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
min: 10,
|
||||
max: 50,
|
||||
tickAmount: 4
|
||||
}
|
||||
};
|
||||
if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
|
||||
const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
|
||||
incomeChart.render();
|
||||
}
|
||||
|
||||
// Expenses Mini Chart - Radial Chart
|
||||
// --------------------------------------------------------------------
|
||||
const weeklyExpensesEl = document.querySelector('#expensesOfWeek'),
|
||||
weeklyExpensesConfig = {
|
||||
series: [65],
|
||||
chart: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
strokeWidth: '8',
|
||||
hollow: {
|
||||
margin: 2,
|
||||
size: '45%'
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '50%',
|
||||
background: borderColor
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
formatter: function (val) {
|
||||
return '$' + parseInt(val);
|
||||
},
|
||||
offsetY: 5,
|
||||
color: '#697a8d',
|
||||
fontSize: '13px',
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
colors: config.colors.primary
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10,
|
||||
bottom: -15,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
|
||||
const weeklyExpenses = new ApexCharts(weeklyExpensesEl, weeklyExpensesConfig);
|
||||
weeklyExpenses.render();
|
||||
}
|
||||
};
|
||||
37
react-sneat-bootstrap-admin-template/public/assets/js/extended-ui-perfect-scrollbar.js
vendored
Normal file
37
react-sneat-bootstrap-admin-template/public/assets/js/extended-ui-perfect-scrollbar.js
vendored
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Perfect Scrollbar
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const verticalExample = document.getElementById('vertical-example'),
|
||||
horizontalExample = document.getElementById('horizontal-example'),
|
||||
horizVertExample = document.getElementById('both-scrollbars-example');
|
||||
|
||||
// Vertical Example
|
||||
// --------------------------------------------------------------------
|
||||
if (verticalExample) {
|
||||
new PerfectScrollbar(verticalExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
|
||||
// Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizontalExample) {
|
||||
new PerfectScrollbar(horizontalExample, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollY: true
|
||||
});
|
||||
}
|
||||
|
||||
// Both vertical and Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizVertExample) {
|
||||
new PerfectScrollbar(horizVertExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
11
react-sneat-bootstrap-admin-template/public/assets/js/form-basic-inputs.js
vendored
Normal file
11
react-sneat-bootstrap-admin-template/public/assets/js/form-basic-inputs.js
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Form Basic Inputs
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Indeterminate checkbox
|
||||
const checkbox = document.getElementById('defaultCheck2');
|
||||
checkbox.indeterminate = true;
|
||||
})();
|
||||
118
react-sneat-bootstrap-admin-template/public/assets/js/main.js
vendored
Normal file
118
react-sneat-bootstrap-admin-template/public/assets/js/main.js
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
/**
|
||||
* Main
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
let menu, animate;
|
||||
|
||||
function Main () {
|
||||
// Initialize menu
|
||||
//-----------------
|
||||
|
||||
let layoutMenuEl = document.querySelectorAll('#layout-menu');
|
||||
layoutMenuEl.forEach(function (element) {
|
||||
menu = new Menu(element, {
|
||||
orientation: 'vertical',
|
||||
closeChildren: false
|
||||
});
|
||||
// Change parameter to true if you want scroll animation
|
||||
window.Helpers.scrollToActive((animate = false));
|
||||
window.Helpers.mainMenu = menu;
|
||||
});
|
||||
|
||||
// Initialize menu togglers and bind click on each
|
||||
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
|
||||
menuToggler.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
window.Helpers.toggleCollapsed();
|
||||
});
|
||||
});
|
||||
|
||||
// Display menu toggle (layout-menu-toggle) on hover with delay
|
||||
let delay = function (elem, callback) {
|
||||
let timeout = null;
|
||||
elem.onmouseenter = function () {
|
||||
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
|
||||
if (!Helpers.isSmallScreen()) {
|
||||
timeout = setTimeout(callback, 300);
|
||||
} else {
|
||||
timeout = setTimeout(callback, 0);
|
||||
}
|
||||
};
|
||||
|
||||
elem.onmouseleave = function () {
|
||||
// Clear any timers set to timeout
|
||||
document.querySelector('.layout-menu-toggle').classList.remove('d-block');
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
};
|
||||
if (document.getElementById('layout-menu')) {
|
||||
delay(document.getElementById('layout-menu'), function () {
|
||||
// not for small screen
|
||||
if (!Helpers.isSmallScreen()) {
|
||||
document.querySelector('.layout-menu-toggle').classList.add('d-block');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Display in main menu when menu scrolls
|
||||
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
|
||||
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
|
||||
if (menuInnerContainer.length > 0 && menuInnerShadow) {
|
||||
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
|
||||
if (this.querySelector('.ps__thumb-y').offsetTop) {
|
||||
menuInnerShadow.style.display = 'block';
|
||||
} else {
|
||||
menuInnerShadow.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Init helpers & misc
|
||||
// --------------------
|
||||
|
||||
// Init BS Tooltip
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Accordion active class
|
||||
const accordionActiveFunction = function (e) {
|
||||
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
|
||||
e.target.closest('.accordion-item').classList.add('active');
|
||||
} else {
|
||||
e.target.closest('.accordion-item').classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
|
||||
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
|
||||
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
|
||||
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
|
||||
});
|
||||
|
||||
// Auto update layout based on screen size
|
||||
window.Helpers.setAutoUpdate(true);
|
||||
|
||||
// Toggle Password Visibility
|
||||
window.Helpers.initPasswordToggle();
|
||||
|
||||
// Speech To Text
|
||||
window.Helpers.initSpeechToText();
|
||||
|
||||
// Manage menu expanded/collapsed with templateCustomizer & local storage
|
||||
//------------------------------------------------------------------
|
||||
|
||||
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
|
||||
if (window.Helpers.isSmallScreen()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If current layout is vertical and current window screen is > small
|
||||
|
||||
// Auto update menu collapsed/expanded based on the themeConfig
|
||||
window.Helpers.setCollapsed(true, false);
|
||||
};
|
||||
29
react-sneat-bootstrap-admin-template/public/assets/js/pages-account-settings-account.js
vendored
Normal file
29
react-sneat-bootstrap-admin-template/public/assets/js/pages-account-settings-account.js
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Account Settings - Account
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const deactivateAcc = document.querySelector('#formAccountDeactivation');
|
||||
|
||||
// Update/reset user image of account page
|
||||
let accountUserImage = document.getElementById('uploadedAvatar');
|
||||
const fileInput = document.querySelector('.account-file-input'),
|
||||
resetFileInput = document.querySelector('.account-image-reset');
|
||||
|
||||
if (accountUserImage) {
|
||||
const resetImage = accountUserImage.src;
|
||||
fileInput.onchange = () => {
|
||||
if (fileInput.files[0]) {
|
||||
accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
|
||||
}
|
||||
};
|
||||
resetFileInput.onclick = () => {
|
||||
fileInput.value = '';
|
||||
accountUserImage.src = resetImage;
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
33
react-sneat-bootstrap-admin-template/public/assets/js/ui-modals.js
vendored
Normal file
33
react-sneat-bootstrap-admin-template/public/assets/js/ui-modals.js
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* UI Modals
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// On hiding modal, remove iframe video/audio to stop playing
|
||||
const youTubeModal = document.querySelector('#youTubeModal'),
|
||||
youTubeModalVideo = youTubeModal.querySelector('iframe');
|
||||
youTubeModal.addEventListener('hidden.bs.modal', function () {
|
||||
youTubeModalVideo.setAttribute('src', '');
|
||||
});
|
||||
|
||||
// Function to get and auto play youTube video
|
||||
const autoPlayYouTubeModal = function () {
|
||||
const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
|
||||
modalTriggerList.map(function (modalTriggerEl) {
|
||||
modalTriggerEl.onclick = function () {
|
||||
const theModal = this.getAttribute('data-bs-target'),
|
||||
videoSRC = this.getAttribute('data-theVideo'),
|
||||
videoSRCauto = `${videoSRC}?autoplay=1`,
|
||||
modalVideo = document.querySelector(`${theModal} iframe`);
|
||||
if (modalVideo) {
|
||||
modalVideo.setAttribute('src', videoSRCauto);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// Calling function on load
|
||||
autoPlayYouTubeModal();
|
||||
})();
|
||||
13
react-sneat-bootstrap-admin-template/public/assets/js/ui-popover.js
vendored
Normal file
13
react-sneat-bootstrap-admin-template/public/assets/js/ui-popover.js
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// /**
|
||||
// * UI Tooltips & Popovers
|
||||
// */
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
// added { html: true, sanitize: false } option to render button in content area of popover
|
||||
return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false });
|
||||
});
|
||||
})();
|
||||
39
react-sneat-bootstrap-admin-template/public/assets/js/ui-toasts.js
vendored
Normal file
39
react-sneat-bootstrap-admin-template/public/assets/js/ui-toasts.js
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* UI Toasts
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function Toast () {
|
||||
// Bootstrap toasts example
|
||||
// --------------------------------------------------------------------
|
||||
const toastPlacementExample = document.querySelector('.toast-placement-ex'),
|
||||
toastPlacementBtn = document.querySelector('#showToastPlacement');
|
||||
let selectedType, selectedPlacement, toastPlacement;
|
||||
|
||||
// Dispose toast when open another
|
||||
function toastDispose(toast) {
|
||||
if (toast && toast._element !== null) {
|
||||
if (toastPlacementExample) {
|
||||
toastPlacementExample.classList.remove(selectedType);
|
||||
DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement);
|
||||
}
|
||||
toast.dispose();
|
||||
}
|
||||
}
|
||||
// Placement Button click
|
||||
if (toastPlacementBtn) {
|
||||
toastPlacementBtn.onclick = function () {
|
||||
if (toastPlacement) {
|
||||
toastDispose(toastPlacement);
|
||||
}
|
||||
selectedType = document.querySelector('#selectTypeOpt').value;
|
||||
selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');
|
||||
|
||||
toastPlacementExample.classList.add(selectedType);
|
||||
DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
|
||||
toastPlacement = new bootstrap.Toast(toastPlacementExample);
|
||||
toastPlacement.show();
|
||||
};
|
||||
}
|
||||
};
|
||||
18560
react-sneat-bootstrap-admin-template/public/assets/vendor/css/core.css
vendored
Normal file
18560
react-sneat-bootstrap-admin-template/public/assets/vendor/css/core.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
832
react-sneat-bootstrap-admin-template/public/assets/vendor/css/theme-default.css
vendored
Normal file
832
react-sneat-bootstrap-admin-template/public/assets/vendor/css/theme-default.css
vendored
Normal file
@ -0,0 +1,832 @@
|
||||
@charset "UTF-8";
|
||||
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0.75rem;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.bg-menu-theme .menu-header {
|
||||
position: relative;
|
||||
}
|
||||
.bg-menu-theme .menu-header:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1.1875rem;
|
||||
width: 1rem;
|
||||
height: 1px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item > .menu-link {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item {
|
||||
margin: 0.565rem 0;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item:not(:first-child) {
|
||||
margin-left: 0.0625rem;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item:not(:last-child) {
|
||||
margin-right: 0.0625rem;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item .menu-sub {
|
||||
box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.25rem;
|
||||
height: 2.6845rem;
|
||||
border-radius: 0.375rem 0 0 0.375rem;
|
||||
}
|
||||
.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1.4375rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
|
||||
left: 1.3rem;
|
||||
}
|
||||
.bg-menu-theme .menu-horizontal-wrapper > .menu-inner > .menu-item > .menu-sub > .menu-item > .menu-link:before {
|
||||
display: none;
|
||||
}
|
||||
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
|
||||
left: 1.1875rem;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
.layout-horizontal .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
|
||||
left: 1.1rem;
|
||||
}
|
||||
|
||||
.layout-menu-hover .layout-menu {
|
||||
box-shadow: 0 0.625rem 1.25rem rgba(161, 172, 184, 0.5);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.app-brand .layout-menu-toggle {
|
||||
position: absolute;
|
||||
left: 15rem;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
.app-brand .layout-menu-toggle i {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
line-height: 1.05;
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.app-brand .layout-menu-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
.layout-menu-expanded .app-brand .layout-menu-toggle {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vertical .menu-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #696cff !important;
|
||||
}
|
||||
|
||||
.text-body[href]:hover {
|
||||
color: #5f61e6 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #696cff !important;
|
||||
}
|
||||
|
||||
a.bg-primary:hover, a.bg-primary:focus {
|
||||
background-color: #6467f2 !important;
|
||||
}
|
||||
|
||||
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
|
||||
background-color: #696cff;
|
||||
}
|
||||
|
||||
.bg-label-primary {
|
||||
background-color: #e7e7ff !important;
|
||||
color: #696cff !important;
|
||||
}
|
||||
|
||||
.border-label-primary {
|
||||
border: 3px solid #c3c4ff !important;
|
||||
}
|
||||
|
||||
.border-light-primary {
|
||||
border: 3px solid rgba(105, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus,
|
||||
.pagination li.active > a:not(.page-link),
|
||||
.pagination li.active > a:not(.page-link):hover,
|
||||
.pagination li.active > a:not(.page-link):focus {
|
||||
border-color: #696cff;
|
||||
background-color: #696cff;
|
||||
color: #fff;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: #696cff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
|
||||
.list-group-item-primary {
|
||||
border-color: #696cff;
|
||||
background-color: #e1e2ff;
|
||||
color: #696cff !important;
|
||||
}
|
||||
|
||||
a.list-group-item-primary,
|
||||
button.list-group-item-primary {
|
||||
color: #696cff;
|
||||
}
|
||||
a.list-group-item-primary:hover, a.list-group-item-primary:focus,
|
||||
button.list-group-item-primary:hover,
|
||||
button.list-group-item-primary:focus {
|
||||
border-color: #696cff;
|
||||
background-color: #d6d7f2;
|
||||
color: #696cff;
|
||||
}
|
||||
a.list-group-item-primary.active,
|
||||
button.list-group-item-primary.active {
|
||||
border-color: #696cff !important;
|
||||
background-color: #696cff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
|
||||
border-color: #696cff;
|
||||
background-color: #696cff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
background-color: #e7e7ff;
|
||||
border-color: #d2d3ff;
|
||||
color: #696cff;
|
||||
}
|
||||
.alert-primary .btn-close {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.alert-primary .alert-link {
|
||||
color: #696cff;
|
||||
}
|
||||
|
||||
.alert-primary hr {
|
||||
background-color: #696cff !important;
|
||||
}
|
||||
|
||||
.table-primary {
|
||||
--bs-table-bg: #e1e2ff;
|
||||
--bs-table-striped-bg: #dcdefb;
|
||||
--bs-table-striped-color: #435971;
|
||||
--bs-table-active-bg: #d1d4f1;
|
||||
--bs-table-active-color: #435971;
|
||||
--bs-table-hover-bg: #d8daf6;
|
||||
--bs-table-hover-color: #435971;
|
||||
color: #435971;
|
||||
border-color: #d1d4f1;
|
||||
}
|
||||
.table-primary th {
|
||||
border-bottom-color: inherit !important;
|
||||
}
|
||||
.table-primary .btn-icon {
|
||||
color: #435971;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #696cff;
|
||||
border-color: #696cff;
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
color: #fff !important;
|
||||
background-color: #5f61e6 !important;
|
||||
border-color: #5f61e6 !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus {
|
||||
color: #fff;
|
||||
background-color: #5f61e6;
|
||||
border-color: #5f61e6;
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle {
|
||||
color: #fff !important;
|
||||
background-color: #595cd9 !important;
|
||||
border-color: #595cd9 !important;
|
||||
}
|
||||
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .btn-primary.show.dropdown-toggle:focus, .show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-primary.disabled, .btn-primary:disabled {
|
||||
color: #fff !important;
|
||||
background-color: #696cff !important;
|
||||
border-color: #696cff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #696cff;
|
||||
border-color: #696cff;
|
||||
background: transparent;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
color: #fff !important;
|
||||
background-color: #5f61e6 !important;
|
||||
border-color: #5f61e6 !important;
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
|
||||
color: #fff;
|
||||
background-color: #5f61e6;
|
||||
border-color: #5f61e6;
|
||||
box-shadow: none;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
|
||||
color: #fff !important;
|
||||
background-color: #595cd9 !important;
|
||||
border-color: #595cd9 !important;
|
||||
}
|
||||
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
|
||||
box-shadow: none !important;
|
||||
color: #696cff !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary .badge {
|
||||
background: #696cff;
|
||||
border-color: #696cff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover .badge,
|
||||
.btn-outline-primary:focus:hover .badge,
|
||||
.btn-outline-primary:active .badge,
|
||||
.btn-outline-primary.active .badge,
|
||||
.show > .btn-outline-primary.dropdown-toggle .badge {
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
color: #696cff;
|
||||
}
|
||||
|
||||
.dropdown-item:not(.disabled).active,
|
||||
.dropdown-item:not(.disabled):active {
|
||||
background-color: rgba(105, 108, 255, 0.08);
|
||||
color: #696cff !important;
|
||||
}
|
||||
|
||||
.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
|
||||
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
|
||||
background-color: rgba(105, 108, 255, 0.08);
|
||||
color: #696cff !important;
|
||||
}
|
||||
|
||||
.dt-button-collection .dropdown-item:not(.disabled):active {
|
||||
background-color: rgba(105, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
.nav .nav-link:hover, .nav .nav-link:focus {
|
||||
color: #5f61e6;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus {
|
||||
background-color: #696cff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: #696cff !important;
|
||||
}
|
||||
|
||||
.input-group:focus-within .form-control,
|
||||
.input-group:focus-within .input-group-text {
|
||||
border-color: #696cff !important;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: #696cff;
|
||||
box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
.form-check-input:disabled {
|
||||
background-color: #eceef1;
|
||||
}
|
||||
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
|
||||
background-color: #696cff;
|
||||
border-color: #696cff;
|
||||
box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
|
||||
.custom-option.checked {
|
||||
border: 1px solid #696cff;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input:focus {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23696cff'/%3e%3c/svg%3e");
|
||||
}
|
||||
.form-switch .form-check-input:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-control:focus ~ .form-label {
|
||||
border-color: #696cff;
|
||||
}
|
||||
.form-control:focus ~ .form-label::after {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after {
|
||||
border-color: #696cff;
|
||||
}
|
||||
|
||||
.navbar.bg-primary {
|
||||
background-color: #696cff !important;
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-brand,
|
||||
.navbar.bg-primary .navbar-brand a {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-brand:hover, .navbar.bg-primary .navbar-brand:focus,
|
||||
.navbar.bg-primary .navbar-brand a:hover,
|
||||
.navbar.bg-primary .navbar-brand a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-search-wrapper .navbar-search-icon,
|
||||
.navbar.bg-primary .navbar-search-wrapper .search-input {
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.navbar.bg-primary .search-input-wrapper .search-input,
|
||||
.navbar.bg-primary .search-input-wrapper .search-toggler {
|
||||
background-color: #696cff !important;
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-nav > .nav-link,
|
||||
.navbar.bg-primary .navbar-nav > .nav-item > .nav-link,
|
||||
.navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link {
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-nav > .nav-link:hover, .navbar.bg-primary .navbar-nav > .nav-link:focus,
|
||||
.navbar.bg-primary .navbar-nav > .nav-item > .nav-link:hover,
|
||||
.navbar.bg-primary .navbar-nav > .nav-item > .nav-link:focus,
|
||||
.navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link:hover,
|
||||
.navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-nav > .nav-link.disabled,
|
||||
.navbar.bg-primary .navbar-nav > .nav-item > .nav-link.disabled,
|
||||
.navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link.disabled {
|
||||
color: #b0b2ff !important;
|
||||
}
|
||||
.navbar.bg-primary .navbar-nav .show > .nav-link,
|
||||
.navbar.bg-primary .navbar-nav .active > .nav-link,
|
||||
.navbar.bg-primary .navbar-nav .nav-link.show,
|
||||
.navbar.bg-primary .navbar-nav .nav-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-toggler {
|
||||
color: #e0e1ff;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.navbar.bg-primary .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.navbar.bg-primary .navbar-text {
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-text a {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary .navbar-text a:hover, .navbar.bg-primary .navbar-text a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.bg-primary hr {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.menu.bg-primary {
|
||||
background-color: #696cff !important;
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.menu.bg-primary .menu-link,
|
||||
.menu.bg-primary .menu-horizontal-prev,
|
||||
.menu.bg-primary .menu-horizontal-next {
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.menu.bg-primary .menu-link:hover, .menu.bg-primary .menu-link:focus,
|
||||
.menu.bg-primary .menu-horizontal-prev:hover,
|
||||
.menu.bg-primary .menu-horizontal-prev:focus,
|
||||
.menu.bg-primary .menu-horizontal-next:hover,
|
||||
.menu.bg-primary .menu-horizontal-next:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.menu.bg-primary .menu-link.active,
|
||||
.menu.bg-primary .menu-horizontal-prev.active,
|
||||
.menu.bg-primary .menu-horizontal-next.active {
|
||||
color: #fff;
|
||||
}
|
||||
.menu.bg-primary .menu-item.disabled .menu-link,
|
||||
.menu.bg-primary .menu-horizontal-prev.disabled,
|
||||
.menu.bg-primary .menu-horizontal-next.disabled {
|
||||
color: #b0b2ff !important;
|
||||
}
|
||||
.menu.bg-primary .menu-item.open:not(.menu-item-closing) > .menu-toggle,
|
||||
.menu.bg-primary .menu-item.active > .menu-link {
|
||||
color: #fff;
|
||||
}
|
||||
.menu.bg-primary .menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background-color: #6d70ff;
|
||||
}
|
||||
.menu.bg-primary.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background-color: #7174ff;
|
||||
}
|
||||
.menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub, .menu.bg-primary.menu-horizontal .menu-inner .menu-item.open > .menu-toggle {
|
||||
background: #6d70ff;
|
||||
}
|
||||
.menu.bg-primary .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
|
||||
.menu.bg-primary .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
|
||||
background: transparent;
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.menu.bg-primary .menu-inner-shadow {
|
||||
background: linear-gradient(#696cff 41%, rgba(105, 108, 255, 0.11) 95%, rgba(105, 108, 255, 0));
|
||||
}
|
||||
.menu.bg-primary .menu-text {
|
||||
color: #fff;
|
||||
}
|
||||
.menu.bg-primary .menu-header {
|
||||
color: #c2c4ff;
|
||||
}
|
||||
.menu.bg-primary hr,
|
||||
.menu.bg-primary .menu-divider,
|
||||
.menu.bg-primary .menu-inner > .menu-item.open > .menu-sub::before {
|
||||
border-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
.menu.bg-primary .menu-inner > .menu-header::before {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.menu.bg-primary .menu-block::before {
|
||||
background-color: #c2c4ff;
|
||||
}
|
||||
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
|
||||
background-color: #8385ff;
|
||||
}
|
||||
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before,
|
||||
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
box-shadow: 0 0 0 2px #6d70ff;
|
||||
}
|
||||
.menu.bg-primary .ps__thumb-y,
|
||||
.menu.bg-primary .ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background: rgba(255, 255, 255, 0.5942917647) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.app-brand .layout-menu-toggle {
|
||||
border: 7px solid #696cff !important;
|
||||
}
|
||||
}
|
||||
.footer.bg-primary {
|
||||
background-color: #696cff !important;
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.footer.bg-primary .footer-link {
|
||||
color: #e0e1ff;
|
||||
}
|
||||
.footer.bg-primary .footer-link:hover, .footer.bg-primary .footer-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.footer.bg-primary .footer-link.disabled {
|
||||
color: #b0b2ff !important;
|
||||
}
|
||||
.footer.bg-primary .footer-text {
|
||||
color: #fff;
|
||||
}
|
||||
.footer.bg-primary .show > .footer-link,
|
||||
.footer.bg-primary .active > .footer-link,
|
||||
.footer.bg-primary .footer-link.show,
|
||||
.footer.bg-primary .footer-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
.footer.bg-primary hr {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.bg-primary.toast, .bg-primary.bs-toast {
|
||||
color: #fff;
|
||||
background-color: rgba(105, 108, 255, 0.85) !important;
|
||||
box-shadow: 0 0.25rem 1rem rgba(105, 108, 255, 0.4);
|
||||
}
|
||||
.bg-primary.toast .toast-header, .bg-primary.bs-toast .toast-header {
|
||||
color: #fff;
|
||||
}
|
||||
.bg-primary.toast .toast-header .btn-close, .bg-primary.bs-toast .toast-header .btn-close {
|
||||
background-color: #696cff !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
box-shadow: 0 0.1875rem 0.375rem 0 rgba(105, 108, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-floating > .form-control:focus ~ label,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
||||
.form-floating > .form-select ~ label {
|
||||
color: #696cff;
|
||||
}
|
||||
.form-floating > .form-control:-webkit-autofill ~ label {
|
||||
color: #696cff;
|
||||
}
|
||||
|
||||
.svg-illustration svg {
|
||||
fill: #696cff;
|
||||
}
|
||||
|
||||
html:not([dir=rtl]) .border-primary,
|
||||
html[dir=rtl] .border-primary {
|
||||
border-color: #696cff !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #696cff;
|
||||
}
|
||||
a:hover {
|
||||
color: #787bff;
|
||||
}
|
||||
|
||||
.fill-primary {
|
||||
fill: #696cff;
|
||||
}
|
||||
|
||||
.bg-navbar-theme {
|
||||
background-color: #fff !important;
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-navbar-theme .navbar-brand,
|
||||
.bg-navbar-theme .navbar-brand a {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme .navbar-brand:hover, .bg-navbar-theme .navbar-brand:focus,
|
||||
.bg-navbar-theme .navbar-brand a:hover,
|
||||
.bg-navbar-theme .navbar-brand a:focus {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme .navbar-search-wrapper .navbar-search-icon,
|
||||
.bg-navbar-theme .navbar-search-wrapper .search-input {
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-navbar-theme .search-input-wrapper .search-input,
|
||||
.bg-navbar-theme .search-input-wrapper .search-toggler {
|
||||
background-color: #fff !important;
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-navbar-theme .navbar-nav > .nav-link,
|
||||
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
|
||||
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link {
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-navbar-theme .navbar-nav > .nav-link:hover, .bg-navbar-theme .navbar-nav > .nav-link:focus,
|
||||
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
|
||||
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:focus,
|
||||
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:hover,
|
||||
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:focus {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme .navbar-nav > .nav-link.disabled,
|
||||
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link.disabled,
|
||||
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link.disabled {
|
||||
color: #a5afbb !important;
|
||||
}
|
||||
.bg-navbar-theme .navbar-nav .show > .nav-link,
|
||||
.bg-navbar-theme .navbar-nav .active > .nav-link,
|
||||
.bg-navbar-theme .navbar-nav .nav-link.show,
|
||||
.bg-navbar-theme .navbar-nav .nav-link.active {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme .navbar-toggler {
|
||||
color: #697a8d;
|
||||
border-color: rgba(86, 106, 127, 0.075);
|
||||
}
|
||||
.bg-navbar-theme .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(67, 89, 113, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(67, 89, 113, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.bg-navbar-theme .navbar-text {
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-navbar-theme .navbar-text a {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme .navbar-text a:hover, .bg-navbar-theme .navbar-text a:focus {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-navbar-theme hr {
|
||||
border-color: rgba(86, 106, 127, 0.075);
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: saturate(200%) blur(6px);
|
||||
}
|
||||
|
||||
.navbar-detached {
|
||||
box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
|
||||
}
|
||||
|
||||
.layout-navbar-fixed .layout-page:before {
|
||||
backdrop-filter: saturate(200%) blur(10px);
|
||||
background: rgba(245, 245, 249, 0.6);
|
||||
}
|
||||
|
||||
.bg-menu-theme {
|
||||
background-color: #fff !important;
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-menu-theme .menu-link,
|
||||
.bg-menu-theme .menu-horizontal-prev,
|
||||
.bg-menu-theme .menu-horizontal-next {
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-menu-theme .menu-link:hover, .bg-menu-theme .menu-link:focus,
|
||||
.bg-menu-theme .menu-horizontal-prev:hover,
|
||||
.bg-menu-theme .menu-horizontal-prev:focus,
|
||||
.bg-menu-theme .menu-horizontal-next:hover,
|
||||
.bg-menu-theme .menu-horizontal-next:focus {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-menu-theme .menu-link.active,
|
||||
.bg-menu-theme .menu-horizontal-prev.active,
|
||||
.bg-menu-theme .menu-horizontal-next.active {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-menu-theme .menu-item.disabled .menu-link,
|
||||
.bg-menu-theme .menu-horizontal-prev.disabled,
|
||||
.bg-menu-theme .menu-horizontal-next.disabled {
|
||||
color: #a5afbb !important;
|
||||
}
|
||||
.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
|
||||
.bg-menu-theme .menu-item.active > .menu-link {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background-color: #fff;
|
||||
}
|
||||
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background-color: white;
|
||||
}
|
||||
.bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub, .bg-menu-theme.menu-horizontal .menu-inner .menu-item.open > .menu-toggle {
|
||||
background: #fff;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
|
||||
.bg-menu-theme .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
|
||||
background: transparent;
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-menu-theme .menu-inner-shadow {
|
||||
background: linear-gradient(#fff 41%, rgba(255, 255, 255, 0.11) 95%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
.bg-menu-theme .menu-text {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-menu-theme .menu-header {
|
||||
color: #8f9baa;
|
||||
}
|
||||
.bg-menu-theme hr,
|
||||
.bg-menu-theme .menu-divider,
|
||||
.bg-menu-theme .menu-inner > .menu-item.open > .menu-sub::before {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-header::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bg-menu-theme .menu-block::before {
|
||||
background-color: #8f9baa;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
|
||||
background-color: white;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
background-color: #566a7f;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before,
|
||||
.bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
}
|
||||
.bg-menu-theme .ps__thumb-y,
|
||||
.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background: rgba(86, 106, 127, 0.2) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.app-brand .layout-menu-toggle {
|
||||
border: 7px solid #fff !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.bg-menu-theme.menu-vertical {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba(161, 172, 184, 0.12);
|
||||
}
|
||||
}
|
||||
.bg-menu-theme .menu-header {
|
||||
color: #a1acb8;
|
||||
}
|
||||
.bg-menu-theme .menu-header:before {
|
||||
background-color: #a1acb8 !important;
|
||||
}
|
||||
.bg-menu-theme.menu-vertical {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba(161, 172, 184, 0.12);
|
||||
}
|
||||
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
|
||||
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
|
||||
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
|
||||
background-color: rgba(67, 89, 113, 0.04);
|
||||
}
|
||||
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle {
|
||||
background-color: rgba(67, 89, 113, 0.04);
|
||||
}
|
||||
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
|
||||
color: #696cff;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
|
||||
color: #696cff;
|
||||
background-color: rgba(105, 108, 255, 0.16) !important;
|
||||
}
|
||||
.bg-menu-theme .menu-inner > .menu-item.active:before {
|
||||
background: #696cff;
|
||||
}
|
||||
.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
|
||||
background-color: #b4bdc6 !important;
|
||||
}
|
||||
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
|
||||
background-color: #696cff !important;
|
||||
border: 3px solid #e7e7ff !important;
|
||||
}
|
||||
|
||||
.app-brand .layout-menu-toggle {
|
||||
background-color: #696cff;
|
||||
border: 7px solid #f5f5f9;
|
||||
}
|
||||
.app-brand .layout-menu-toggle i {
|
||||
color: #fff;
|
||||
}
|
||||
.app-brand .layout-menu-toggle .menu-inner > .menu-header::before {
|
||||
background-color: #b4bdc6;
|
||||
}
|
||||
|
||||
.bg-footer-theme {
|
||||
background-color: #f5f5f9 !important;
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-footer-theme .footer-link {
|
||||
color: #697a8d;
|
||||
}
|
||||
.bg-footer-theme .footer-link:hover, .bg-footer-theme .footer-link:focus {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-footer-theme .footer-link.disabled {
|
||||
color: #a1abb8 !important;
|
||||
}
|
||||
.bg-footer-theme .footer-text {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-footer-theme .show > .footer-link,
|
||||
.bg-footer-theme .active > .footer-link,
|
||||
.bg-footer-theme .footer-link.show,
|
||||
.bg-footer-theme .footer-link.active {
|
||||
color: #566a7f;
|
||||
}
|
||||
.bg-footer-theme hr {
|
||||
border-color: rgba(86, 106, 127, 0.0768713725);
|
||||
}
|
||||
|
||||
.layout-footer-fixed .content-footer {
|
||||
box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
|
||||
}
|
||||
6947
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons.css
vendored
Normal file
6947
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.eot
vendored
Normal file
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.eot
vendored
Normal file
Binary file not shown.
1660
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.svg
vendored
Normal file
1660
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.2 MiB |
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.ttf
vendored
Normal file
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.ttf
vendored
Normal file
Binary file not shown.
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.woff
vendored
Normal file
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.woff
vendored
Normal file
Binary file not shown.
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.woff2
vendored
Normal file
BIN
react-sneat-bootstrap-admin-template/public/assets/vendor/fonts/boxicons/boxicons.woff2
vendored
Normal file
Binary file not shown.
678
react-sneat-bootstrap-admin-template/public/assets/vendor/js/bootstrap.js
vendored
Normal file
678
react-sneat-bootstrap-admin-template/public/assets/vendor/js/bootstrap.js
vendored
Normal file
File diff suppressed because one or more lines are too long
78
react-sneat-bootstrap-admin-template/public/assets/vendor/js/helpers.js
vendored
Normal file
78
react-sneat-bootstrap-admin-template/public/assets/vendor/js/helpers.js
vendored
Normal file
File diff suppressed because one or more lines are too long
78
react-sneat-bootstrap-admin-template/public/assets/vendor/js/menu.js
vendored
Normal file
78
react-sneat-bootstrap-admin-template/public/assets/vendor/js/menu.js
vendored
Normal file
File diff suppressed because one or more lines are too long
764
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/apex-charts/apex-charts.css
vendored
Normal file
764
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/apex-charts/apex-charts.css
vendored
Normal file
@ -0,0 +1,764 @@
|
||||
/**
|
||||
* Apex Charts
|
||||
*/
|
||||
.apexcharts-canvas {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
|
||||
}
|
||||
|
||||
/* scrollbar is not visible by default for legend, hence forcing the visibility */
|
||||
.apexcharts-canvas ::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.apexcharts-canvas ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
||||
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apexcharts-text tspan {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.legend-mouseover-inactive {
|
||||
transition: 0.15s ease all;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.apexcharts-series-collapsed {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 6px -4px #999;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
left: 62px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 12;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light {
|
||||
border: 1px solid #e3e3e3;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-dark {
|
||||
color: #fff;
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip * {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
padding: 6px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
||||
background: #ECEFF1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-tooltip-text-z-value {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-y-label:empty,
|
||||
.apexcharts-tooltip-text-y-value:empty,
|
||||
.apexcharts-tooltip-text-goals-label:empty,
|
||||
.apexcharts-tooltip-text-goals-value:empty,
|
||||
.apexcharts-tooltip-text-z-value:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-tooltip-text-z-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-goals-label,
|
||||
.apexcharts-tooltip-text-goals-value {
|
||||
padding: 6px 0 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-goals-group,
|
||||
.apexcharts-tooltip-text-goals-label,
|
||||
.apexcharts-tooltip-text-goals-value {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-goals-label:not(:empty),
|
||||
.apexcharts-tooltip-text-goals-value:not(:empty) {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-marker {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group {
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group.apexcharts-active,
|
||||
.apexcharts-tooltip-series-group:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group-hidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-y-group {
|
||||
padding: 6px 0 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-boxPlot {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box > div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box span.value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar .category {
|
||||
font-weight: 600;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar .series-name {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
opacity: 0;
|
||||
padding: 9px 10px;
|
||||
pointer-events: none;
|
||||
color: #373d3f;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: #ECEFF1;
|
||||
border: 1px solid #90A4AE;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip.apexcharts-theme-dark {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:after,
|
||||
.apexcharts-xaxistooltip:before {
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:after {
|
||||
border-color: rgba(236, 239, 241, 0);
|
||||
border-width: 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:before {
|
||||
border-color: rgba(144, 164, 174, 0);
|
||||
border-width: 7px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:after,
|
||||
.apexcharts-xaxistooltip-bottom:before {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:after,
|
||||
.apexcharts-xaxistooltip-top:before {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:after {
|
||||
border-bottom-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:before {
|
||||
border-bottom-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:after {
|
||||
border-top-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:before {
|
||||
border-top-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
|
||||
border-top-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
|
||||
border-top-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip {
|
||||
opacity: 0;
|
||||
padding: 4px 10px;
|
||||
pointer-events: none;
|
||||
color: #373d3f;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: #ECEFF1;
|
||||
border: 1px solid #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip.apexcharts-theme-dark {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:after,
|
||||
.apexcharts-yaxistooltip:before {
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:after {
|
||||
border-color: rgba(236, 239, 241, 0);
|
||||
border-width: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:before {
|
||||
border-color: rgba(144, 164, 174, 0);
|
||||
border-width: 7px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:after,
|
||||
.apexcharts-yaxistooltip-left:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:after,
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:after {
|
||||
border-left-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:before {
|
||||
border-left-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
|
||||
border-left-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
|
||||
border-left-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:after {
|
||||
border-right-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
border-right-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
|
||||
border-right-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
|
||||
border-right-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apexcharts-xcrosshairs,
|
||||
.apexcharts-ycrosshairs {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-xcrosshairs.apexcharts-active,
|
||||
.apexcharts-ycrosshairs.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-ycrosshairs-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-selection-rect {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.svg_select_boundingRect, .svg_select_points_rot {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.apexcharts-selection-rect + g .svg_select_boundingRect,
|
||||
.apexcharts-selection-rect + g .svg_select_points_rot {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.apexcharts-selection-rect + g .svg_select_points_l,
|
||||
.apexcharts-selection-rect + g .svg_select_points_r {
|
||||
cursor: ew-resize;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.svg_select_points {
|
||||
fill: #efefef;
|
||||
stroke: #333;
|
||||
rx: 2;
|
||||
}
|
||||
|
||||
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon,
|
||||
.apexcharts-zoomin-icon,
|
||||
.apexcharts-zoomout-icon,
|
||||
.apexcharts-reset-icon,
|
||||
.apexcharts-pan-icon,
|
||||
.apexcharts-selection-icon,
|
||||
.apexcharts-menu-icon,
|
||||
.apexcharts-toolbar-custom-icon {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 24px;
|
||||
color: #6E8192;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon svg,
|
||||
.apexcharts-zoomin-icon svg,
|
||||
.apexcharts-zoomout-icon svg,
|
||||
.apexcharts-reset-icon svg,
|
||||
.apexcharts-menu-icon svg {
|
||||
fill: #6E8192;
|
||||
}
|
||||
|
||||
.apexcharts-selection-icon svg {
|
||||
fill: #444;
|
||||
transform: scale(0.76);
|
||||
}
|
||||
|
||||
.apexcharts-theme-dark .apexcharts-zoom-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-reset-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-pan-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-selection-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-menu-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
|
||||
fill: #f3f4f5;
|
||||
}
|
||||
|
||||
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
|
||||
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
|
||||
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
|
||||
fill: #008FFB;
|
||||
}
|
||||
|
||||
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.apexcharts-selection-icon,
|
||||
.apexcharts-menu-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apexcharts-reset-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon,
|
||||
.apexcharts-reset-icon,
|
||||
.apexcharts-menu-icon {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.apexcharts-zoomin-icon,
|
||||
.apexcharts-zoomout-icon {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.apexcharts-zoomout-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon {
|
||||
transform: scale(0.62);
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon svg {
|
||||
fill: #fff;
|
||||
stroke: #6E8192;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon.apexcharts-selected svg {
|
||||
stroke: #008FFB;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.apexcharts-toolbar {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
max-width: 176px;
|
||||
text-align: right;
|
||||
border-radius: 3px;
|
||||
padding: 0px 6px 2px 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.apexcharts-menu {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
right: 10px;
|
||||
opacity: 0;
|
||||
min-width: 110px;
|
||||
transition: 0.15s ease all;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-menu.apexcharts-menu-open {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-menu-item {
|
||||
padding: 6px 7px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apexcharts-theme-light .apexcharts-menu-item:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.apexcharts-theme-dark .apexcharts-menu {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.apexcharts-canvas:hover .apexcharts-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.apexcharts-datalabel.apexcharts-element-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label,
|
||||
.apexcharts-datalabels,
|
||||
.apexcharts-datalabel,
|
||||
.apexcharts-datalabel-label,
|
||||
.apexcharts-datalabel-value {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label-delay {
|
||||
opacity: 0;
|
||||
animation-name: opaque;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
.apexcharts-canvas .apexcharts-element-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-hide .apexcharts-series-points {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-gridline,
|
||||
.apexcharts-annotation-rect,
|
||||
.apexcharts-tooltip .apexcharts-marker,
|
||||
.apexcharts-area-series .apexcharts-area,
|
||||
.apexcharts-line,
|
||||
.apexcharts-zoom-rect,
|
||||
.apexcharts-toolbar svg,
|
||||
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
|
||||
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
|
||||
.apexcharts-radar-series path,
|
||||
.apexcharts-radar-series polygon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* markers */
|
||||
.apexcharts-marker {
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
@keyframes opaque {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* Resize generated styles */
|
||||
@keyframes resizeanim {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.resize-triggers {
|
||||
animation: 1ms resizeanim;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.resize-triggers,
|
||||
.resize-triggers > div,
|
||||
.contract-trigger:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resize-triggers > div {
|
||||
background: #eee;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.contract-trigger:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip {
|
||||
background: #fff;
|
||||
border-color: #d9dee3;
|
||||
box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
|
||||
background: #fff;
|
||||
border-color: #d9dee3;
|
||||
font-family: var(--bs-font-sans-serif) !important;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
|
||||
color: #566a7f;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
|
||||
color: #fff;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip {
|
||||
background: #f5f5f9;
|
||||
border-color: #d9dee3;
|
||||
color: #566a7f;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:after {
|
||||
border-bottom-color: #f5f5f9;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:before {
|
||||
border-bottom-color: #d9dee3;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:after {
|
||||
border-left-color: #f5f5f9;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:before {
|
||||
border-left-color: #d9dee3;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:after {
|
||||
border-right-color: #f5f5f9;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:before {
|
||||
border-right-color: #d9dee3;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:after,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:after {
|
||||
border-top-color: #f5f5f9;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:before,
|
||||
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:before {
|
||||
border-top-color: #d9dee3;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-tooltip-text {
|
||||
font-family: var(--bs-font-sans-serif) !important;
|
||||
filter: none;
|
||||
}
|
||||
.light-style .apexcharts-canvas .apexcharts-marker {
|
||||
filter: drop-shadow(0 2px 4px rgba(161, 172, 184, 0.4));
|
||||
}
|
||||
|
||||
#orderStatisticsChart .apexcharts-xcrosshairs.apexcharts-active,
|
||||
#orderStatisticsChart .apexcharts-ycrosshairs.apexcharts-active,
|
||||
#totalRevenueChart .apexcharts-xcrosshairs.apexcharts-active,
|
||||
#totalRevenueChart .apexcharts-ycrosshairs.apexcharts-active,
|
||||
#expensesBarChart .apexcharts-xcrosshairs.apexcharts-active,
|
||||
#expensesBarChart .apexcharts-ycrosshairs.apexcharts-active {
|
||||
opacity: 0;
|
||||
}
|
||||
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/apex-charts/apexcharts.js
vendored
Normal file
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/apex-charts/apexcharts.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
@import '../../node_modules/highlight.js/styles/github.css';
|
||||
59
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/highlight/highlight.css
vendored
Normal file
59
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/highlight/highlight.css
vendored
Normal file
@ -0,0 +1,59 @@
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #383a42;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: #a0a1a7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag, .hljs-formula, .hljs-keyword {
|
||||
color: #a626a4;
|
||||
}
|
||||
|
||||
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst {
|
||||
color: #e45649;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184bb;
|
||||
}
|
||||
|
||||
.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
|
||||
color: #50a14f;
|
||||
}
|
||||
|
||||
.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable {
|
||||
color: #986801;
|
||||
}
|
||||
|
||||
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title {
|
||||
color: #4078f2;
|
||||
}
|
||||
|
||||
.hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_ {
|
||||
color: #c18401;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
2049
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/highlight/highlight.js
vendored
Normal file
2049
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/highlight/highlight.js
vendored
Normal file
File diff suppressed because one or more lines are too long
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/jquery/jquery.js
vendored
Normal file
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/jquery/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
131
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/masonry/masonry.js
vendored
Normal file
131
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/masonry/masonry.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,211 @@
|
||||
/*
|
||||
* Container style
|
||||
*/
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar rail styles
|
||||
*/
|
||||
.ps__rail-x {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||
height: 15px;
|
||||
/* there must be 'bottom' or 'top' for ps__rail-x */
|
||||
bottom: 0px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||
width: 15px;
|
||||
/* there must be 'right' or 'left' for ps__rail-y */
|
||||
right: 0;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ps:hover > .ps__rail-x,
|
||||
.ps:hover > .ps__rail-y,
|
||||
.ps--focus > .ps__rail-x,
|
||||
.ps--focus > .ps__rail-y,
|
||||
.ps--scrolling-x > .ps__rail-x,
|
||||
.ps--scrolling-y > .ps__rail-y {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar thumb styles
|
||||
*/
|
||||
.ps__thumb-x {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s linear, height 0.2s ease-in-out;
|
||||
-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
|
||||
height: 6px;
|
||||
/* there must be 'bottom' for ps__thumb-x */
|
||||
bottom: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s linear, width 0.2s ease-in-out;
|
||||
-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
|
||||
width: 6px;
|
||||
/* there must be 'right' for ps__thumb-y */
|
||||
right: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-x.ps--clicking .ps__thumb-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
/* MS supports */
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
.ps {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
height: 0.25rem;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
width: 0.25rem;
|
||||
}
|
||||
|
||||
.ps__rail-x,
|
||||
.ps__rail-y,
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-x.ps--clicking > .ps__thumb-x {
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-y.ps--clicking,
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
height: 0.25rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
width: 0.25rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.light-style .ps__thumb-x,
|
||||
.light-style .ps__thumb-y {
|
||||
background-color: rgba(67, 89, 113, 0.4);
|
||||
}
|
||||
.light-style .ps__rail-x:hover,
|
||||
.light-style .ps__rail-y:hover,
|
||||
.light-style .ps__rail-x:focus,
|
||||
.light-style .ps__rail-y:focus,
|
||||
.light-style .ps__rail-x.ps--clicking,
|
||||
.light-style .ps__rail-y.ps--clicking {
|
||||
background-color: rgba(67, 89, 113, 0.2);
|
||||
}
|
||||
.light-style .ps__rail-x:hover > .ps__thumb-x,
|
||||
.light-style .ps__rail-y:hover > .ps__thumb-y,
|
||||
.light-style .ps__rail-x:focus > .ps__thumb-x,
|
||||
.light-style .ps__rail-y:focus > .ps__thumb-y,
|
||||
.light-style .ps__rail-x.ps--clicking > .ps__thumb-x,
|
||||
.light-style .ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background-color: rgba(67, 89, 113, 0.7);
|
||||
}
|
||||
.light-style .ps-inverted .ps__rail-x:hover,
|
||||
.light-style .ps-inverted .ps__rail-y:hover,
|
||||
.light-style .ps-inverted .ps__rail-x:focus,
|
||||
.light-style .ps-inverted .ps__rail-y:focus,
|
||||
.light-style .ps-inverted .ps__rail-x.ps--clicking,
|
||||
.light-style .ps-inverted .ps__rail-y.ps--clicking {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.light-style .ps-inverted .ps__thumb-x,
|
||||
.light-style .ps-inverted .ps__thumb-y {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.light-style .ps-inverted .ps__rail-x:hover > .ps__thumb-x,
|
||||
.light-style .ps-inverted .ps__rail-y:hover > .ps__thumb-y,
|
||||
.light-style .ps-inverted .ps__rail-x:focus > .ps__thumb-x,
|
||||
.light-style .ps-inverted .ps__rail-y:focus > .ps__thumb-y,
|
||||
.light-style .ps-inverted .ps__rail-x.ps--clicking > .ps__thumb-x,
|
||||
.light-style .ps-inverted .ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none) {
|
||||
#both-scrollbars-example {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/popper/popper.js
vendored
Normal file
120
react-sneat-bootstrap-admin-template/public/assets/vendor/libs/popper/popper.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,23 @@
|
||||
$boxicons-font-path: 'boxicons';
|
||||
$boxicons-font-size-base: 16px;
|
||||
|
||||
@import '../node_modules/boxicons/css/boxicons';
|
||||
|
||||
.bx {
|
||||
vertical-align: middle;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
// Override font path
|
||||
@font-face {
|
||||
font-family: 'boxicons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../fonts/#{$boxicons-font-path}/boxicons.eot');
|
||||
src: url('../fonts/#{$boxicons-font-path}/boxicons.eot') format('embedded-opentype'),
|
||||
url('../fonts/#{$boxicons-font-path}/boxicons.woff2') format('woff2'),
|
||||
url('../fonts/#{$boxicons-font-path}/boxicons.woff') format('woff'),
|
||||
url('../fonts/#{$boxicons-font-path}/boxicons.ttf') format('truetype'),
|
||||
url('../fonts/#{$boxicons-font-path}/boxicons.svg?#boxicons') format('svg');
|
||||
}
|
||||
7
react-sneat-bootstrap-admin-template/public/js/bootstrap.js
vendored
Normal file
7
react-sneat-bootstrap-admin-template/public/js/bootstrap.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
try {
|
||||
window.bootstrap = bootstrap
|
||||
} catch (e) {}
|
||||
|
||||
export { bootstrap }
|
||||
851
react-sneat-bootstrap-admin-template/public/js/helpers.js
vendored
Normal file
851
react-sneat-bootstrap-admin-template/public/js/helpers.js
vendored
Normal file
@ -0,0 +1,851 @@
|
||||
// Constants
|
||||
var TRANS_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
|
||||
var TRANS_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
|
||||
var INLINE_STYLES = `
|
||||
.layout-menu-fixed .layout-navbar-full .layout-menu,
|
||||
.layout-page {
|
||||
padding-top: {navbarHeight}px !important;
|
||||
}
|
||||
.content-wrapper {
|
||||
padding-bottom: {footerHeight}px !important;
|
||||
}`
|
||||
|
||||
// Guard
|
||||
function requiredParam(name) {
|
||||
throw new Error(`Parameter required${name ? `: \`${name}\`` : ''}`)
|
||||
}
|
||||
|
||||
var Helpers = {
|
||||
// Root Element
|
||||
ROOT_EL: typeof window !== 'undefined' ? document.documentElement : null,
|
||||
|
||||
// Large screens breakpoint
|
||||
LAYOUT_BREAKPOINT: 1200,
|
||||
|
||||
// Resize delay in milliseconds
|
||||
RESIZE_DELAY: 200,
|
||||
|
||||
menuPsScroll: null,
|
||||
|
||||
mainMenu: null,
|
||||
|
||||
// Internal variables
|
||||
_curStyle: null,
|
||||
_styleEl: null,
|
||||
_resizeTimeout: null,
|
||||
_resizeCallback: null,
|
||||
_transitionCallback: null,
|
||||
_transitionCallbackTimeout: null,
|
||||
_listeners: [],
|
||||
_initialized: false,
|
||||
_autoUpdate: false,
|
||||
_lastWindowHeight: 0,
|
||||
|
||||
// *******************************************************************************
|
||||
// * Utilities
|
||||
|
||||
// ---
|
||||
// Scroll To Active Menu Item
|
||||
_scrollToActive(animate = false, duration = 500) {
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
|
||||
if (!layoutMenu) return
|
||||
|
||||
let activeEl = layoutMenu.querySelector('li.menu-item.active:not(.open)')
|
||||
|
||||
if (activeEl) {
|
||||
// t = current time
|
||||
// b = start value
|
||||
// c = change in value
|
||||
// d = duration
|
||||
const easeInOutQuad = (t, b, c, d) => {
|
||||
t /= d / 2
|
||||
if (t < 1) return (c / 2) * t * t + b
|
||||
t -= 1
|
||||
return (-c / 2) * (t * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
const element = this.getLayoutMenu().querySelector('.menu-inner')
|
||||
|
||||
if (typeof activeEl === 'string') {
|
||||
activeEl = document.querySelector(activeEl)
|
||||
}
|
||||
if (typeof activeEl !== 'number') {
|
||||
activeEl = activeEl.getBoundingClientRect().top + element.scrollTop
|
||||
}
|
||||
|
||||
// If active element's top position is less than 2/3 (66%) of menu height than do not scroll
|
||||
if (activeEl < parseInt((element.clientHeight * 2) / 3, 10)) return
|
||||
|
||||
const start = element.scrollTop
|
||||
const change = activeEl - start - parseInt(element.clientHeight / 2, 10)
|
||||
const startDate = +new Date()
|
||||
|
||||
if (animate === true) {
|
||||
const animateScroll = () => {
|
||||
const currentDate = +new Date()
|
||||
const currentTime = currentDate - startDate
|
||||
const val = easeInOutQuad(currentTime, start, change, duration)
|
||||
element.scrollTop = val
|
||||
if (currentTime < duration) {
|
||||
requestAnimationFrame(animateScroll)
|
||||
} else {
|
||||
element.scrollTop = change
|
||||
}
|
||||
}
|
||||
animateScroll()
|
||||
} else {
|
||||
element.scrollTop = change
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Add classes
|
||||
_addClass(cls, el = this.ROOT_EL) {
|
||||
if (el.length !== undefined) {
|
||||
// Add classes to multiple elements
|
||||
el.forEach(e => {
|
||||
cls.split(' ').forEach(c => e.classList.add(c))
|
||||
})
|
||||
} else {
|
||||
// Add classes to single element
|
||||
cls.split(' ').forEach(c => el.classList.add(c))
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Remove classes
|
||||
_removeClass(cls, el = this.ROOT_EL) {
|
||||
if (el.length !== undefined) {
|
||||
// Remove classes to multiple elements
|
||||
el.forEach(e => {
|
||||
cls.split(' ').forEach(c => e.classList.remove(c))
|
||||
})
|
||||
} else {
|
||||
// Remove classes to single element
|
||||
cls.split(' ').forEach(c => el.classList.remove(c))
|
||||
}
|
||||
},
|
||||
|
||||
// Toggle classes
|
||||
_toggleClass(el = this.ROOT_EL, cls1, cls2) {
|
||||
if (el.classList.contains(cls1)) {
|
||||
el.classList.replace(cls1, cls2)
|
||||
} else {
|
||||
el.classList.replace(cls2, cls1)
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Has class
|
||||
_hasClass(cls, el = this.ROOT_EL) {
|
||||
let result = false
|
||||
|
||||
cls.split(' ').forEach(c => {
|
||||
if (el.classList.contains(c)) result = true
|
||||
})
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
_findParent(el, cls) {
|
||||
if ((el && el.tagName.toUpperCase() === 'BODY') || el.tagName.toUpperCase() === 'HTML') return null
|
||||
el = el.parentNode
|
||||
while (el && el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
|
||||
el = el.parentNode
|
||||
}
|
||||
el = el && el.tagName.toUpperCase() !== 'BODY' ? el : null
|
||||
return el
|
||||
},
|
||||
|
||||
// ---
|
||||
// Trigger window event
|
||||
_triggerWindowEvent(name) {
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
if (document.createEvent) {
|
||||
let event
|
||||
|
||||
if (typeof Event === 'function') {
|
||||
event = new Event(name)
|
||||
} else {
|
||||
event = document.createEvent('Event')
|
||||
event.initEvent(name, false, true)
|
||||
}
|
||||
|
||||
window.dispatchEvent(event)
|
||||
} else {
|
||||
window.fireEvent(`on${name}`, document.createEventObject())
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Trigger event
|
||||
_triggerEvent(name) {
|
||||
this._triggerWindowEvent(`layout${name}`)
|
||||
|
||||
this._listeners.filter(listener => listener.event === name).forEach(listener => listener.callback.call(null))
|
||||
},
|
||||
|
||||
// ---
|
||||
// Update style
|
||||
_updateInlineStyle(navbarHeight = 0, footerHeight = 0) {
|
||||
if (!this._styleEl) {
|
||||
this._styleEl = document.createElement('style')
|
||||
this._styleEl.type = 'text/css'
|
||||
document.head.appendChild(this._styleEl)
|
||||
}
|
||||
|
||||
const newStyle = INLINE_STYLES.replace(/\{navbarHeight\}/gi, navbarHeight).replace(
|
||||
/\{footerHeight\}/gi,
|
||||
footerHeight
|
||||
)
|
||||
|
||||
if (this._curStyle !== newStyle) {
|
||||
this._curStyle = newStyle
|
||||
this._styleEl.textContent = newStyle
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Remove style
|
||||
_removeInlineStyle() {
|
||||
if (this._styleEl) document.head.removeChild(this._styleEl)
|
||||
this._styleEl = null
|
||||
this._curStyle = null
|
||||
},
|
||||
|
||||
// ---
|
||||
// Redraw layout menu (Safari bugfix)
|
||||
_redrawLayoutMenu() {
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
|
||||
if (layoutMenu && layoutMenu.querySelector('.menu')) {
|
||||
const inner = layoutMenu.querySelector('.menu-inner')
|
||||
const { scrollTop } = inner
|
||||
const pageScrollTop = document.documentElement.scrollTop
|
||||
|
||||
layoutMenu.style.display = 'none'
|
||||
// layoutMenu.offsetHeight
|
||||
layoutMenu.style.display = ''
|
||||
inner.scrollTop = scrollTop
|
||||
document.documentElement.scrollTop = pageScrollTop
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
// ---
|
||||
// Check for transition support
|
||||
_supportsTransitionEnd() {
|
||||
if (window.QUnit) return false
|
||||
|
||||
const el = document.body || document.documentElement
|
||||
|
||||
if (!el) return false
|
||||
|
||||
let result = false
|
||||
TRANS_PROPERTIES.forEach(evnt => {
|
||||
if (typeof el.style[evnt] !== 'undefined') result = true
|
||||
})
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
// ---
|
||||
// Calculate current navbar height
|
||||
_getNavbarHeight() {
|
||||
const layoutNavbar = this.getLayoutNavbar()
|
||||
|
||||
if (!layoutNavbar) return 0
|
||||
if (!this.isSmallScreen()) return layoutNavbar.getBoundingClientRect().height
|
||||
|
||||
// Needs some logic to get navbar height on small screens
|
||||
|
||||
const clonedEl = layoutNavbar.cloneNode(true)
|
||||
clonedEl.id = null
|
||||
clonedEl.style.visibility = 'hidden'
|
||||
clonedEl.style.position = 'absolute'
|
||||
|
||||
Array.prototype.slice.call(clonedEl.querySelectorAll('.collapse.show')).forEach(el => this._removeClass('show', el))
|
||||
|
||||
layoutNavbar.parentNode.insertBefore(clonedEl, layoutNavbar)
|
||||
|
||||
const navbarHeight = clonedEl.getBoundingClientRect().height
|
||||
|
||||
clonedEl.parentNode.removeChild(clonedEl)
|
||||
|
||||
return navbarHeight
|
||||
},
|
||||
|
||||
// ---
|
||||
// Get current footer height
|
||||
_getFooterHeight() {
|
||||
const layoutFooter = this.getLayoutFooter()
|
||||
|
||||
if (!layoutFooter) return 0
|
||||
|
||||
return layoutFooter.getBoundingClientRect().height
|
||||
},
|
||||
|
||||
// ---
|
||||
// Get animation duration of element
|
||||
_getAnimationDuration(el) {
|
||||
const duration = window.getComputedStyle(el).transitionDuration
|
||||
|
||||
return parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
|
||||
},
|
||||
|
||||
// ---
|
||||
// Set menu hover state
|
||||
_setMenuHoverState(hovered) {
|
||||
this[hovered ? '_addClass' : '_removeClass']('layout-menu-hover')
|
||||
},
|
||||
|
||||
// ---
|
||||
// Toggle collapsed
|
||||
_setCollapsed(collapsed) {
|
||||
if (this.isSmallScreen()) {
|
||||
if (collapsed) {
|
||||
this._removeClass('layout-menu-expanded')
|
||||
} else {
|
||||
setTimeout(
|
||||
() => {
|
||||
this._addClass('layout-menu-expanded')
|
||||
},
|
||||
this._redrawLayoutMenu() ? 5 : 0
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Add layout sivenav toggle animationEnd event
|
||||
_bindLayoutAnimationEndEvent(modifier, cb) {
|
||||
const menu = this.getMenu()
|
||||
const duration = menu ? this._getAnimationDuration(menu) + 50 : 0
|
||||
|
||||
if (!duration) {
|
||||
modifier.call(this)
|
||||
cb.call(this)
|
||||
return
|
||||
}
|
||||
|
||||
this._transitionCallback = e => {
|
||||
if (e.target !== menu) return
|
||||
this._unbindLayoutAnimationEndEvent()
|
||||
cb.call(this)
|
||||
}
|
||||
|
||||
TRANS_EVENTS.forEach(e => {
|
||||
menu.addEventListener(e, this._transitionCallback, false)
|
||||
})
|
||||
|
||||
modifier.call(this)
|
||||
|
||||
this._transitionCallbackTimeout = setTimeout(() => {
|
||||
this._transitionCallback.call(this, { target: menu })
|
||||
}, duration)
|
||||
},
|
||||
|
||||
// ---
|
||||
// Remove layout sivenav toggle animationEnd event
|
||||
_unbindLayoutAnimationEndEvent() {
|
||||
const menu = this.getMenu()
|
||||
|
||||
if (this._transitionCallbackTimeout) {
|
||||
clearTimeout(this._transitionCallbackTimeout)
|
||||
this._transitionCallbackTimeout = null
|
||||
}
|
||||
|
||||
if (menu && this._transitionCallback) {
|
||||
TRANS_EVENTS.forEach(e => {
|
||||
menu.removeEventListener(e, this._transitionCallback, false)
|
||||
})
|
||||
}
|
||||
|
||||
if (this._transitionCallback) {
|
||||
this._transitionCallback = null
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Bind delayed window resize event
|
||||
_bindWindowResizeEvent() {
|
||||
this._unbindWindowResizeEvent()
|
||||
|
||||
const cb = () => {
|
||||
if (this._resizeTimeout) {
|
||||
clearTimeout(this._resizeTimeout)
|
||||
this._resizeTimeout = null
|
||||
}
|
||||
this._triggerEvent('resize')
|
||||
}
|
||||
|
||||
this._resizeCallback = () => {
|
||||
if (this._resizeTimeout) clearTimeout(this._resizeTimeout)
|
||||
this._resizeTimeout = setTimeout(cb, this.RESIZE_DELAY)
|
||||
}
|
||||
|
||||
window.addEventListener('resize', this._resizeCallback, false)
|
||||
},
|
||||
|
||||
// ---
|
||||
// Unbind delayed window resize event
|
||||
_unbindWindowResizeEvent() {
|
||||
if (this._resizeTimeout) {
|
||||
clearTimeout(this._resizeTimeout)
|
||||
this._resizeTimeout = null
|
||||
}
|
||||
|
||||
if (this._resizeCallback) {
|
||||
window.removeEventListener('resize', this._resizeCallback, false)
|
||||
this._resizeCallback = null
|
||||
}
|
||||
},
|
||||
|
||||
_bindMenuMouseEvents() {
|
||||
if (this._menuMouseEnter && this._menuMouseLeave && this._windowTouchStart) return
|
||||
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
if (!layoutMenu) return this._unbindMenuMouseEvents()
|
||||
|
||||
if (!this._menuMouseEnter) {
|
||||
this._menuMouseEnter = () => {
|
||||
if (this.isSmallScreen() || this._hasClass('layout-transitioning')) {
|
||||
return this._setMenuHoverState(false)
|
||||
}
|
||||
|
||||
return this._setMenuHoverState(false)
|
||||
}
|
||||
layoutMenu.addEventListener('mouseenter', this._menuMouseEnter, false)
|
||||
layoutMenu.addEventListener('touchstart', this._menuMouseEnter, false)
|
||||
}
|
||||
|
||||
if (!this._menuMouseLeave) {
|
||||
this._menuMouseLeave = () => {
|
||||
this._setMenuHoverState(false)
|
||||
}
|
||||
layoutMenu.addEventListener('mouseleave', this._menuMouseLeave, false)
|
||||
}
|
||||
|
||||
if (!this._windowTouchStart) {
|
||||
this._windowTouchStart = e => {
|
||||
if (!e || !e.target || !this._findParent(e.target, '.layout-menu')) {
|
||||
this._setMenuHoverState(false)
|
||||
}
|
||||
}
|
||||
window.addEventListener('touchstart', this._windowTouchStart, true)
|
||||
}
|
||||
},
|
||||
|
||||
_unbindMenuMouseEvents() {
|
||||
if (!this._menuMouseEnter && !this._menuMouseLeave && !this._windowTouchStart) return
|
||||
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
|
||||
if (this._menuMouseEnter) {
|
||||
if (layoutMenu) {
|
||||
layoutMenu.removeEventListener('mouseenter', this._menuMouseEnter, false)
|
||||
layoutMenu.removeEventListener('touchstart', this._menuMouseEnter, false)
|
||||
}
|
||||
this._menuMouseEnter = null
|
||||
}
|
||||
|
||||
if (this._menuMouseLeave) {
|
||||
if (layoutMenu) {
|
||||
layoutMenu.removeEventListener('mouseleave', this._menuMouseLeave, false)
|
||||
}
|
||||
this._menuMouseLeave = null
|
||||
}
|
||||
|
||||
if (this._windowTouchStart) {
|
||||
if (layoutMenu) {
|
||||
window.addEventListener('touchstart', this._windowTouchStart, true)
|
||||
}
|
||||
this._windowTouchStart = null
|
||||
}
|
||||
|
||||
this._setMenuHoverState(false)
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Methods
|
||||
|
||||
scrollToActive(animate = false) {
|
||||
this._scrollToActive(animate)
|
||||
},
|
||||
|
||||
// ---
|
||||
// Collapse / expand layout
|
||||
setCollapsed(collapsed = requiredParam('collapsed'), animate = true) {
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
|
||||
if (!layoutMenu) return
|
||||
|
||||
this._unbindLayoutAnimationEndEvent()
|
||||
|
||||
if (animate && this._supportsTransitionEnd()) {
|
||||
this._addClass('layout-transitioning')
|
||||
if (collapsed) this._setMenuHoverState(false)
|
||||
|
||||
this._bindLayoutAnimationEndEvent(
|
||||
() => {
|
||||
// Collapse / Expand
|
||||
if (this.isSmallScreen) this._setCollapsed(collapsed)
|
||||
},
|
||||
() => {
|
||||
this._removeClass('layout-transitioning')
|
||||
this._triggerWindowEvent('resize')
|
||||
this._triggerEvent('toggle')
|
||||
this._setMenuHoverState(false)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this._addClass('layout-no-transition')
|
||||
if (collapsed) this._setMenuHoverState(false)
|
||||
|
||||
// Collapse / Expand
|
||||
this._setCollapsed(collapsed)
|
||||
|
||||
setTimeout(() => {
|
||||
this._removeClass('layout-no-transition')
|
||||
this._triggerWindowEvent('resize')
|
||||
this._triggerEvent('toggle')
|
||||
this._setMenuHoverState(false)
|
||||
}, 1)
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Toggle layout
|
||||
toggleCollapsed(animate = true) {
|
||||
console.log('a');
|
||||
this.setCollapsed(!this.isCollapsed(), animate)
|
||||
},
|
||||
|
||||
// ---
|
||||
// Set layout positioning
|
||||
setPosition(fixed = requiredParam('fixed'), offcanvas = requiredParam('offcanvas')) {
|
||||
this._removeClass('layout-menu-offcanvas layout-menu-fixed layout-menu-fixed-offcanvas')
|
||||
|
||||
if (!fixed && offcanvas) {
|
||||
this._addClass('layout-menu-offcanvas')
|
||||
} else if (fixed && !offcanvas) {
|
||||
this._addClass('layout-menu-fixed')
|
||||
this._redrawLayoutMenu()
|
||||
} else if (fixed && offcanvas) {
|
||||
this._addClass('layout-menu-fixed-offcanvas')
|
||||
this._redrawLayoutMenu()
|
||||
}
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Getters
|
||||
|
||||
getLayoutMenu() {
|
||||
return document.querySelector('.layout-menu')
|
||||
},
|
||||
|
||||
getMenu() {
|
||||
const layoutMenu = this.getLayoutMenu()
|
||||
|
||||
if (!layoutMenu) return null
|
||||
|
||||
return !this._hasClass('menu', layoutMenu) ? layoutMenu.querySelector('.menu') : layoutMenu
|
||||
},
|
||||
|
||||
getLayoutNavbar() {
|
||||
return document.querySelector('.layout-navbar')
|
||||
},
|
||||
|
||||
getLayoutFooter() {
|
||||
return document.querySelector('.content-footer')
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Update
|
||||
|
||||
update() {
|
||||
if (
|
||||
(this.getLayoutNavbar() &&
|
||||
((!this.isSmallScreen() && this.isLayoutNavbarFull() && this.isFixed()) || this.isNavbarFixed())) ||
|
||||
(this.getLayoutFooter() && this.isFooterFixed())
|
||||
) {
|
||||
this._updateInlineStyle(this._getNavbarHeight(), this._getFooterHeight())
|
||||
}
|
||||
|
||||
this._bindMenuMouseEvents()
|
||||
},
|
||||
|
||||
setAutoUpdate(enable = requiredParam('enable')) {
|
||||
if (enable && !this._autoUpdate) {
|
||||
this.on('resize.Helpers:autoUpdate', () => this.update())
|
||||
this._autoUpdate = true
|
||||
} else if (!enable && this._autoUpdate) {
|
||||
this.off('resize.Helpers:autoUpdate')
|
||||
this._autoUpdate = false
|
||||
}
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Tests
|
||||
|
||||
isRtl() {
|
||||
return (
|
||||
document.querySelector('body').getAttribute('dir') === 'rtl' ||
|
||||
document.querySelector('html').getAttribute('dir') === 'rtl'
|
||||
)
|
||||
},
|
||||
|
||||
isMobileDevice() {
|
||||
return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1
|
||||
},
|
||||
|
||||
isSmallScreen() {
|
||||
return (
|
||||
(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < this.LAYOUT_BREAKPOINT
|
||||
)
|
||||
},
|
||||
|
||||
isLayoutNavbarFull() {
|
||||
return !!document.querySelector('.layout-wrapper.layout-navbar-full')
|
||||
},
|
||||
|
||||
isCollapsed() {
|
||||
if (this.isSmallScreen()) {
|
||||
return !this._hasClass('layout-menu-expanded')
|
||||
}
|
||||
return this._hasClass('layout-menu-collapsed')
|
||||
},
|
||||
|
||||
isFixed() {
|
||||
return this._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
||||
},
|
||||
|
||||
isNavbarFixed() {
|
||||
return (
|
||||
this._hasClass('layout-navbar-fixed') || (!this.isSmallScreen() && this.isFixed() && this.isLayoutNavbarFull())
|
||||
)
|
||||
},
|
||||
|
||||
isFooterFixed() {
|
||||
return this._hasClass('layout-footer-fixed')
|
||||
},
|
||||
|
||||
isLightStyle() {
|
||||
return document.documentElement.classList.contains('light-style')
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Events
|
||||
|
||||
on(event = requiredParam('event'), callback = requiredParam('callback')) {
|
||||
const [_event] = event.split('.')
|
||||
let [, ...namespace] = event.split('.')
|
||||
// let [_event, ...namespace] = event.split('.')
|
||||
namespace = namespace.join('.') || null
|
||||
|
||||
this._listeners.push({ event: _event, namespace, callback })
|
||||
},
|
||||
|
||||
off(event = requiredParam('event')) {
|
||||
const [_event] = event.split('.')
|
||||
let [, ...namespace] = event.split('.')
|
||||
namespace = namespace.join('.') || null
|
||||
|
||||
this._listeners
|
||||
.filter(listener => listener.event === _event && listener.namespace === namespace)
|
||||
.forEach(listener => this._listeners.splice(this._listeners.indexOf(listener), 1))
|
||||
},
|
||||
|
||||
// *******************************************************************************
|
||||
// * Life cycle
|
||||
|
||||
init() {
|
||||
if (this._initialized) return
|
||||
this._initialized = true
|
||||
|
||||
// Initialize `style` element
|
||||
this._updateInlineStyle(0)
|
||||
|
||||
// Bind window resize event
|
||||
this._bindWindowResizeEvent()
|
||||
|
||||
// Bind init event
|
||||
this.off('init._Helpers')
|
||||
this.on('init._Helpers', () => {
|
||||
this.off('resize._Helpers:redrawMenu')
|
||||
this.on('resize._Helpers:redrawMenu', () => {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this.isSmallScreen() && !this.isCollapsed() && this._redrawLayoutMenu()
|
||||
})
|
||||
|
||||
// Force repaint in IE 10
|
||||
if (typeof document.documentMode === 'number' && document.documentMode < 11) {
|
||||
this.off('resize._Helpers:ie10RepaintBody')
|
||||
this.on('resize._Helpers:ie10RepaintBody', () => {
|
||||
if (this.isFixed()) return
|
||||
const { scrollTop } = document.documentElement
|
||||
document.body.style.display = 'none'
|
||||
// document.body.offsetHeight
|
||||
document.body.style.display = 'block'
|
||||
document.documentElement.scrollTop = scrollTop
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this._triggerEvent('init')
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (!this._initialized) return
|
||||
this._initialized = false
|
||||
|
||||
this._removeClass('layout-transitioning')
|
||||
this._removeInlineStyle()
|
||||
this._unbindLayoutAnimationEndEvent()
|
||||
this._unbindWindowResizeEvent()
|
||||
this._unbindMenuMouseEvents()
|
||||
this.setAutoUpdate(false)
|
||||
|
||||
this.off('init._Helpers')
|
||||
|
||||
// Remove all listeners except `init`
|
||||
this._listeners
|
||||
.filter(listener => listener.event !== 'init')
|
||||
.forEach(listener => this._listeners.splice(this._listeners.indexOf(listener), 1))
|
||||
},
|
||||
|
||||
// ---
|
||||
// Init Password Toggle
|
||||
initPasswordToggle() {
|
||||
const toggler = document.querySelectorAll('.form-password-toggle i')
|
||||
if (typeof toggler !== 'undefined' && toggler !== null) {
|
||||
toggler.forEach(el => {
|
||||
el.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
const formPasswordToggle = el.closest('.form-password-toggle')
|
||||
const formPasswordToggleIcon = formPasswordToggle.querySelector('i')
|
||||
const formPasswordToggleInput = formPasswordToggle.querySelector('input')
|
||||
|
||||
if (formPasswordToggleInput.getAttribute('type') === 'text') {
|
||||
formPasswordToggleInput.setAttribute('type', 'password')
|
||||
formPasswordToggleIcon.classList.replace('bx-show', 'bx-hide')
|
||||
} else if (formPasswordToggleInput.getAttribute('type') === 'password') {
|
||||
formPasswordToggleInput.setAttribute('type', 'text')
|
||||
formPasswordToggleIcon.classList.replace('bx-hide', 'bx-show')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ---
|
||||
// Init Speech To Text
|
||||
initSpeechToText() {
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
|
||||
const speechToText = document.querySelectorAll('.speech-to-text')
|
||||
if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
|
||||
if (typeof speechToText !== 'undefined' && speechToText !== null) {
|
||||
const recognition = new SpeechRecognition()
|
||||
const toggler = document.querySelectorAll('.speech-to-text i')
|
||||
toggler.forEach(el => {
|
||||
let listening = false
|
||||
el.addEventListener('click', () => {
|
||||
el.closest('.input-group').querySelector('.form-control').focus()
|
||||
recognition.onspeechstart = () => {
|
||||
listening = true
|
||||
}
|
||||
if (listening === false) {
|
||||
recognition.start()
|
||||
}
|
||||
recognition.onerror = () => {
|
||||
listening = false
|
||||
}
|
||||
recognition.onresult = event => {
|
||||
el.closest('.input-group').querySelector('.form-control').value = event.results[0][0].transcript
|
||||
}
|
||||
recognition.onspeechend = () => {
|
||||
listening = false
|
||||
recognition.stop()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Ajax Call Promise
|
||||
ajaxCall(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = new XMLHttpRequest()
|
||||
req.open('GET', url)
|
||||
req.onload = () => (req.status === 200 ? resolve(req.response) : reject(Error(req.statusText)))
|
||||
req.onerror = e => reject(Error(`Network Error: ${e}`))
|
||||
req.send()
|
||||
})
|
||||
},
|
||||
|
||||
// ---
|
||||
// SidebarToggle (Used in Apps)
|
||||
initSidebarToggle() {
|
||||
const sidebarToggler = document.querySelectorAll('[data-bs-toggle="sidebar"]')
|
||||
|
||||
sidebarToggler.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
const target = el.getAttribute('data-target')
|
||||
const overlay = el.getAttribute('data-overlay')
|
||||
const appOverlay = document.querySelectorAll('.app-overlay')
|
||||
const targetEl = document.querySelectorAll(target)
|
||||
|
||||
targetEl.forEach(tel => {
|
||||
tel.classList.toggle('show')
|
||||
if (
|
||||
typeof overlay !== 'undefined' &&
|
||||
overlay !== null &&
|
||||
overlay !== false &&
|
||||
typeof appOverlay !== 'undefined'
|
||||
) {
|
||||
if (tel.classList.contains('show')) {
|
||||
appOverlay[0].classList.add('show')
|
||||
} else {
|
||||
appOverlay[0].classList.remove('show')
|
||||
}
|
||||
appOverlay[0].addEventListener('click', e => {
|
||||
e.currentTarget.classList.remove('show')
|
||||
tel.classList.remove('show')
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// *******************************************************************************
|
||||
// * Initialization
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
Helpers.init()
|
||||
|
||||
if (Helpers.isMobileDevice() && window.chrome) {
|
||||
document.documentElement.classList.add('layout-menu-100vh')
|
||||
}
|
||||
|
||||
// Update layout after page load
|
||||
if (document.readyState === 'complete') Helpers.update()
|
||||
else
|
||||
document.addEventListener('DOMContentLoaded', function onContentLoaded() {
|
||||
Helpers.update()
|
||||
document.removeEventListener('DOMContentLoaded', onContentLoaded)
|
||||
})
|
||||
}
|
||||
|
||||
// ---
|
||||
export { Helpers }
|
||||
589
react-sneat-bootstrap-admin-template/public/js/menu.js
vendored
Normal file
589
react-sneat-bootstrap-admin-template/public/js/menu.js
vendored
Normal file
@ -0,0 +1,589 @@
|
||||
const TRANSITION_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
|
||||
// const TRANSITION_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
|
||||
|
||||
class Menu {
|
||||
constructor(el, config = {}, _PS = null) {
|
||||
this._el = el
|
||||
this._animate = config.animate !== false
|
||||
this._accordion = config.accordion !== false
|
||||
this._closeChildren = Boolean(config.closeChildren)
|
||||
|
||||
this._onOpen = config.onOpen || (() => {})
|
||||
this._onOpened = config.onOpened || (() => {})
|
||||
this._onClose = config.onClose || (() => {})
|
||||
this._onClosed = config.onClosed || (() => {})
|
||||
|
||||
this._psScroll = null
|
||||
this._topParent = null
|
||||
this._menuBgClass = null
|
||||
|
||||
el.classList.add('menu')
|
||||
el.classList[this._animate ? 'remove' : 'add']('menu-no-animation') // check
|
||||
|
||||
el.classList.add('menu-vertical')
|
||||
|
||||
const PerfectScrollbarLib = _PS || window.PerfectScrollbar
|
||||
|
||||
if (PerfectScrollbarLib) {
|
||||
this._scrollbar = new PerfectScrollbarLib(el.querySelector('.menu-inner'), {
|
||||
suppressScrollX: true,
|
||||
wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
||||
})
|
||||
|
||||
window.Helpers.menuPsScroll = this._scrollbar
|
||||
} else {
|
||||
el.querySelector('.menu-inner').classList.add('overflow-auto')
|
||||
}
|
||||
|
||||
// Add data attribute for bg color class of menu
|
||||
const menuClassList = el.classList
|
||||
|
||||
for (let i = 0; i < menuClassList.length; i++) {
|
||||
if (menuClassList[i].startsWith('bg-')) {
|
||||
this._menuBgClass = menuClassList[i]
|
||||
}
|
||||
}
|
||||
el.setAttribute('data-bg-class', this._menuBgClass)
|
||||
|
||||
this._bindEvents()
|
||||
|
||||
// Link menu instance to element
|
||||
el.menuInstance = this
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
// Click Event
|
||||
this._evntElClick = e => {
|
||||
// Find top parent element
|
||||
if (e.target.closest('ul') && e.target.closest('ul').classList.contains('menu-inner')) {
|
||||
const menuItem = Menu._findParent(e.target, 'menu-item', false)
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
if (menuItem) this._topParent = menuItem.childNodes[0]
|
||||
}
|
||||
|
||||
const toggleLink = e.target.classList.contains('menu-toggle')
|
||||
? e.target
|
||||
: Menu._findParent(e.target, 'menu-toggle', false)
|
||||
|
||||
if (toggleLink) {
|
||||
e.preventDefault()
|
||||
|
||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
||||
this.toggle(toggleLink)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (window.Helpers.isMobileDevice) this._el.addEventListener('click', this._evntElClick)
|
||||
|
||||
this._evntWindowResize = () => {
|
||||
this.update()
|
||||
if (this._lastWidth !== window.innerWidth) {
|
||||
this._lastWidth = window.innerWidth
|
||||
this.update()
|
||||
}
|
||||
|
||||
const horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']")
|
||||
if (!this._horizontal && !horizontalMenuTemplate) this.manageScroll()
|
||||
}
|
||||
window.addEventListener('resize', this._evntWindowResize)
|
||||
}
|
||||
|
||||
static childOf(/* child node */ c, /* parent node */ p) {
|
||||
// returns boolean
|
||||
if (c.parentNode) {
|
||||
while ((c = c.parentNode) && c !== p);
|
||||
return !!c
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
_unbindEvents() {
|
||||
if (this._evntElClick) {
|
||||
this._el.removeEventListener('click', this._evntElClick)
|
||||
this._evntElClick = null
|
||||
}
|
||||
|
||||
if (this._evntElMouseOver) {
|
||||
this._el.removeEventListener('mouseover', this._evntElMouseOver)
|
||||
this._evntElMouseOver = null
|
||||
}
|
||||
|
||||
if (this._evntElMouseOut) {
|
||||
this._el.removeEventListener('mouseout', this._evntElMouseOut)
|
||||
this._evntElMouseOut = null
|
||||
}
|
||||
|
||||
if (this._evntWindowResize) {
|
||||
window.removeEventListener('resize', this._evntWindowResize)
|
||||
this._evntWindowResize = null
|
||||
}
|
||||
|
||||
if (this._evntBodyClick) {
|
||||
document.body.removeEventListener('click', this._evntBodyClick)
|
||||
this._evntBodyClick = null
|
||||
}
|
||||
|
||||
if (this._evntInnerMousemove) {
|
||||
this._inner.removeEventListener('mousemove', this._evntInnerMousemove)
|
||||
this._evntInnerMousemove = null
|
||||
}
|
||||
|
||||
if (this._evntInnerMouseleave) {
|
||||
this._inner.removeEventListener('mouseleave', this._evntInnerMouseleave)
|
||||
this._evntInnerMouseleave = null
|
||||
}
|
||||
}
|
||||
|
||||
static _isRoot(item) {
|
||||
return !Menu._findParent(item, 'menu-item', false)
|
||||
}
|
||||
|
||||
static _findParent(el, cls, throwError = true) {
|
||||
if (el.tagName.toUpperCase() === 'BODY') return null
|
||||
el = el.parentNode
|
||||
while (el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
|
||||
el = el.parentNode
|
||||
}
|
||||
|
||||
el = el.tagName.toUpperCase() !== 'BODY' ? el : null
|
||||
|
||||
if (!el && throwError) throw new Error(`Cannot find \`.${cls}\` parent element`)
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
static _findChild(el, cls) {
|
||||
const items = el.childNodes
|
||||
const found = []
|
||||
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
if (items[i].classList) {
|
||||
let passed = 0
|
||||
|
||||
for (let j = 0; j < cls.length; j++) {
|
||||
if (items[i].classList.contains(cls[j])) passed += 1
|
||||
}
|
||||
|
||||
if (cls.length === passed) found.push(items[i])
|
||||
}
|
||||
}
|
||||
|
||||
return found
|
||||
}
|
||||
|
||||
static _findMenu(item) {
|
||||
let curEl = item.childNodes[0]
|
||||
let menu = null
|
||||
|
||||
while (curEl && !menu) {
|
||||
if (curEl.classList && curEl.classList.contains('menu-sub')) menu = curEl
|
||||
curEl = curEl.nextSibling
|
||||
}
|
||||
|
||||
if (!menu) throw new Error('Cannot find `.menu-sub` element for the current `.menu-toggle`')
|
||||
|
||||
return menu
|
||||
}
|
||||
|
||||
// Has class
|
||||
static _hasClass(cls, el = window.Helpers.ROOT_EL) {
|
||||
let result = false
|
||||
|
||||
cls.split(' ').forEach(c => {
|
||||
if (el.classList.contains(c)) result = true
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
open(el, closeChildren = this._closeChildren) {
|
||||
const item = this._findUnopenedParent(Menu._getItem(el, true), closeChildren)
|
||||
|
||||
if (!item) return
|
||||
|
||||
const toggleLink = Menu._getLink(item, true)
|
||||
|
||||
Menu._promisify(this._onOpen, this, item, toggleLink, Menu._findMenu(item))
|
||||
.then(() => {
|
||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
||||
if (this._animate && !this._horizontal) {
|
||||
window.requestAnimationFrame(() => this._toggleAnimation(true, item, false))
|
||||
if (this._accordion) this._closeOther(item, closeChildren)
|
||||
} else if (this._animate) {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
} else {
|
||||
item.classList.add('open')
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
if (this._accordion) this._closeOther(item, closeChildren)
|
||||
}
|
||||
} else {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
close(el, closeChildren = this._closeChildren, _autoClose = false) {
|
||||
const item = Menu._getItem(el, true)
|
||||
const toggleLink = Menu._getLink(el, true)
|
||||
|
||||
if (!item.classList.contains('open') || item.classList.contains('disabled')) return
|
||||
|
||||
Menu._promisify(this._onClose, this, item, toggleLink, Menu._findMenu(item), _autoClose)
|
||||
.then(() => {
|
||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
||||
if (this._animate && !this._horizontal) {
|
||||
window.requestAnimationFrame(() => this._toggleAnimation(false, item, closeChildren))
|
||||
} else {
|
||||
item.classList.remove('open')
|
||||
|
||||
if (closeChildren) {
|
||||
const opened = item.querySelectorAll('.menu-item.open')
|
||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
} else {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
_closeOther(item, closeChildren) {
|
||||
const opened = Menu._findChild(item.parentNode, ['menu-item', 'open'])
|
||||
|
||||
for (let i = 0, l = opened.length; i < l; i++) {
|
||||
if (opened[i] !== item) this.close(opened[i], closeChildren)
|
||||
}
|
||||
}
|
||||
|
||||
toggle(el, closeChildren = this._closeChildren) {
|
||||
const item = Menu._getItem(el, true)
|
||||
// const toggleLink = Menu._getLink(el, true)
|
||||
|
||||
if (item.classList.contains('open')) this.close(item, closeChildren)
|
||||
else this.open(item, closeChildren)
|
||||
}
|
||||
|
||||
static _getItem(el, toggle) {
|
||||
let item = null
|
||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
||||
|
||||
if (el.classList.contains('menu-item')) {
|
||||
if (Menu._findChild(el, [selector]).length) item = el
|
||||
} else if (el.classList.contains(selector)) {
|
||||
item = el.parentNode.classList.contains('menu-item') ? el.parentNode : null
|
||||
}
|
||||
|
||||
if (!item) {
|
||||
throw new Error(`${toggle ? 'Toggable ' : ''}\`.menu-item\` element not found.`)
|
||||
}
|
||||
|
||||
return item
|
||||
}
|
||||
|
||||
static _getLink(el, toggle) {
|
||||
let found = []
|
||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
||||
|
||||
if (el.classList.contains(selector)) found = [el]
|
||||
else if (el.classList.contains('menu-item')) found = Menu._findChild(el, [selector])
|
||||
|
||||
if (!found.length) throw new Error(`\`${selector}\` element not found.`)
|
||||
|
||||
return found[0]
|
||||
}
|
||||
|
||||
_findUnopenedParent(item, closeChildren) {
|
||||
let tree = []
|
||||
let parentItem = null
|
||||
|
||||
while (item) {
|
||||
if (item.classList.contains('disabled')) {
|
||||
parentItem = null
|
||||
tree = []
|
||||
} else {
|
||||
if (!item.classList.contains('open')) parentItem = item
|
||||
tree.push(item)
|
||||
}
|
||||
|
||||
item = Menu._findParent(item, 'menu-item', false)
|
||||
}
|
||||
|
||||
if (!parentItem) return null
|
||||
if (tree.length === 1) return parentItem
|
||||
|
||||
tree = tree.slice(0, tree.indexOf(parentItem))
|
||||
|
||||
for (let i = 0, l = tree.length; i < l; i++) {
|
||||
tree[i].classList.add('open')
|
||||
|
||||
if (this._accordion) {
|
||||
const openedItems = Menu._findChild(tree[i].parentNode, ['menu-item', 'open'])
|
||||
|
||||
for (let j = 0, k = openedItems.length; j < k; j++) {
|
||||
if (openedItems[j] !== tree[i]) {
|
||||
openedItems[j].classList.remove('open')
|
||||
|
||||
if (closeChildren) {
|
||||
const openedChildren = openedItems[j].querySelectorAll('.menu-item.open')
|
||||
for (let x = 0, z = openedChildren.length; x < z; x++) {
|
||||
openedChildren[x].classList.remove('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return parentItem
|
||||
}
|
||||
|
||||
_toggleAnimation(open, item, closeChildren) {
|
||||
const toggleLink = Menu._getLink(item, true)
|
||||
const menu = Menu._findMenu(item)
|
||||
|
||||
Menu._unbindAnimationEndEvent(item)
|
||||
|
||||
const linkHeight = Math.round(toggleLink.getBoundingClientRect().height)
|
||||
|
||||
item.style.overflow = 'hidden'
|
||||
|
||||
const clearItemStyle = () => {
|
||||
item.classList.remove('menu-item-animating')
|
||||
item.classList.remove('menu-item-closing')
|
||||
item.style.overflow = null
|
||||
item.style.height = null
|
||||
|
||||
this.update()
|
||||
}
|
||||
|
||||
if (open) {
|
||||
item.style.height = `${linkHeight}px`
|
||||
item.classList.add('menu-item-animating')
|
||||
item.classList.add('open')
|
||||
|
||||
Menu._bindAnimationEndEvent(item, () => {
|
||||
clearItemStyle()
|
||||
this._onOpened(this, item, toggleLink, menu)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
||||
}, 50)
|
||||
} else {
|
||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
||||
item.classList.add('menu-item-animating')
|
||||
item.classList.add('menu-item-closing')
|
||||
|
||||
Menu._bindAnimationEndEvent(item, () => {
|
||||
item.classList.remove('open')
|
||||
clearItemStyle()
|
||||
|
||||
if (closeChildren) {
|
||||
const opened = item.querySelectorAll('.menu-item.open')
|
||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
||||
}
|
||||
|
||||
this._onClosed(this, item, toggleLink, menu)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
item.style.height = `${linkHeight}px`
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
static _bindAnimationEndEvent(el, handler) {
|
||||
const cb = e => {
|
||||
if (e.target !== el) return
|
||||
Menu._unbindAnimationEndEvent(el)
|
||||
handler(e)
|
||||
}
|
||||
|
||||
let duration = window.getComputedStyle(el).transitionDuration
|
||||
duration = parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
|
||||
|
||||
el._menuAnimationEndEventCb = cb
|
||||
TRANSITION_EVENTS.forEach(ev => el.addEventListener(ev, el._menuAnimationEndEventCb, false))
|
||||
|
||||
el._menuAnimationEndEventTimeout = setTimeout(() => {
|
||||
cb({ target: el })
|
||||
}, duration + 50)
|
||||
}
|
||||
|
||||
_getItemOffset(item) {
|
||||
let curItem = this._inner.childNodes[0]
|
||||
let left = 0
|
||||
|
||||
while (curItem !== item) {
|
||||
if (curItem.tagName) {
|
||||
left += Math.round(curItem.getBoundingClientRect().width)
|
||||
}
|
||||
|
||||
curItem = curItem.nextSibling
|
||||
}
|
||||
|
||||
return left
|
||||
}
|
||||
|
||||
static _promisify(fn, ...args) {
|
||||
const result = fn(...args)
|
||||
if (result instanceof Promise) {
|
||||
return result
|
||||
}
|
||||
if (result === false) {
|
||||
return Promise.reject()
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
get _innerWidth() {
|
||||
const items = this._inner.childNodes
|
||||
let width = 0
|
||||
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
if (items[i].tagName) {
|
||||
width += Math.round(items[i].getBoundingClientRect().width)
|
||||
}
|
||||
}
|
||||
|
||||
return width
|
||||
}
|
||||
|
||||
get _innerPosition() {
|
||||
return parseInt(this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] || '0px', 10)
|
||||
}
|
||||
|
||||
set _innerPosition(value) {
|
||||
this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] = `${value}px`
|
||||
return value
|
||||
}
|
||||
|
||||
static _unbindAnimationEndEvent(el) {
|
||||
const cb = el._menuAnimationEndEventCb
|
||||
|
||||
if (el._menuAnimationEndEventTimeout) {
|
||||
clearTimeout(el._menuAnimationEndEventTimeout)
|
||||
el._menuAnimationEndEventTimeout = null
|
||||
}
|
||||
|
||||
if (!cb) return
|
||||
|
||||
TRANSITION_EVENTS.forEach(ev => el.removeEventListener(ev, cb, false))
|
||||
el._menuAnimationEndEventCb = null
|
||||
}
|
||||
|
||||
closeAll(closeChildren = this._closeChildren) {
|
||||
const opened = this._el.querySelectorAll('.menu-inner > .menu-item.open')
|
||||
|
||||
for (let i = 0, l = opened.length; i < l; i++) this.close(opened[i], closeChildren)
|
||||
}
|
||||
|
||||
static setDisabled(el, disabled) {
|
||||
Menu._getItem(el, false).classList[disabled ? 'add' : 'remove']('disabled')
|
||||
}
|
||||
|
||||
static isActive(el) {
|
||||
return Menu._getItem(el, false).classList.contains('active')
|
||||
}
|
||||
|
||||
static isOpened(el) {
|
||||
return Menu._getItem(el, false).classList.contains('open')
|
||||
}
|
||||
|
||||
static isDisabled(el) {
|
||||
return Menu._getItem(el, false).classList.contains('disabled')
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this._scrollbar) {
|
||||
this._scrollbar.update()
|
||||
}
|
||||
}
|
||||
|
||||
manageScroll() {
|
||||
const { PerfectScrollbar } = window
|
||||
const menuInner = document.querySelector('.menu-inner')
|
||||
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (this._scrollbar !== null) {
|
||||
// window.Helpers.menuPsScroll.destroy()
|
||||
this._scrollbar.destroy()
|
||||
this._scrollbar = null
|
||||
}
|
||||
menuInner.classList.add('overflow-auto')
|
||||
} else {
|
||||
if (this._scrollbar === null) {
|
||||
const menuScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
||||
suppressScrollX: true,
|
||||
wheelPropagation: false
|
||||
})
|
||||
this._scrollbar = menuScroll
|
||||
}
|
||||
menuInner.classList.remove('overflow-auto')
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this._el) return
|
||||
|
||||
this._unbindEvents()
|
||||
|
||||
const items = this._el.querySelectorAll('.menu-item')
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
Menu._unbindAnimationEndEvent(items[i])
|
||||
items[i].classList.remove('menu-item-animating')
|
||||
items[i].classList.remove('open')
|
||||
items[i].style.overflow = null
|
||||
items[i].style.height = null
|
||||
}
|
||||
|
||||
const menus = this._el.querySelectorAll('.menu-menu')
|
||||
for (let i2 = 0, l2 = menus.length; i2 < l2; i2++) {
|
||||
menus[i2].style.marginRight = null
|
||||
menus[i2].style.marginLeft = null
|
||||
}
|
||||
|
||||
this._el.classList.remove('menu-no-animation')
|
||||
|
||||
if (this._wrapper) {
|
||||
this._prevBtn.parentNode.removeChild(this._prevBtn)
|
||||
this._nextBtn.parentNode.removeChild(this._nextBtn)
|
||||
this._wrapper.parentNode.insertBefore(this._inner, this._wrapper)
|
||||
this._wrapper.parentNode.removeChild(this._wrapper)
|
||||
this._inner.style.marginLeft = null
|
||||
this._inner.style.marginRight = null
|
||||
}
|
||||
|
||||
this._el.menuInstance = null
|
||||
delete this._el.menuInstance
|
||||
|
||||
this._el = null
|
||||
this._animate = null
|
||||
this._accordion = null
|
||||
this._closeChildren = null
|
||||
this._onOpen = null
|
||||
this._onOpened = null
|
||||
this._onClose = null
|
||||
this._onClosed = null
|
||||
if (this._scrollbar) {
|
||||
this._scrollbar.destroy()
|
||||
this._scrollbar = null
|
||||
}
|
||||
this._inner = null
|
||||
this._prevBtn = null
|
||||
this._wrapper = null
|
||||
this._nextBtn = null
|
||||
}
|
||||
}
|
||||
|
||||
export { Menu }
|
||||
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Apex Charts
|
||||
*/
|
||||
@use '../../scss/_bootstrap-extended/include' as light;
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
@import '../../node_modules/apexcharts-clevision/dist/apexcharts';
|
||||
|
||||
// Light style
|
||||
@if $enable-light-style {
|
||||
.light-style {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-tooltip {
|
||||
background: light.$card-bg;
|
||||
border-color: light.$border-color;
|
||||
box-shadow: light.$popover-box-shadow;
|
||||
.apexcharts-tooltip-title {
|
||||
background: light.$card-bg;
|
||||
border-color: light.$border-color;
|
||||
font-family: light.$font-family-base !important;
|
||||
}
|
||||
&.apexcharts-theme-light {
|
||||
color: light.$headings-color;
|
||||
}
|
||||
&.apexcharts-theme-dark {
|
||||
color: light.$white;
|
||||
}
|
||||
.apexcharts-tooltip-title {
|
||||
font-weight: light.$headings-font-weight;
|
||||
}
|
||||
}
|
||||
.apexcharts-xaxistooltip,
|
||||
.apexcharts-yaxistooltip {
|
||||
background: light.$body-bg;
|
||||
border-color: light.$border-color;
|
||||
color: light.$headings-color;
|
||||
&.apexcharts-xaxistooltip-bottom,
|
||||
&.apexcharts-yaxistooltip-bottom {
|
||||
&:after {
|
||||
border-bottom-color: light.$body-bg;
|
||||
}
|
||||
&:before {
|
||||
border-bottom-color: light.$border-color;
|
||||
}
|
||||
}
|
||||
&.apexcharts-xaxistooltip-left,
|
||||
&.apexcharts-yaxistooltip-left {
|
||||
&:after {
|
||||
border-left-color: light.$body-bg;
|
||||
}
|
||||
&:before {
|
||||
border-left-color: light.$border-color;
|
||||
}
|
||||
}
|
||||
&.apexcharts-xaxistooltip-right,
|
||||
&.apexcharts-yaxistooltip-right {
|
||||
&:after {
|
||||
border-right-color: light.$body-bg;
|
||||
}
|
||||
&:before {
|
||||
border-right-color: light.$border-color;
|
||||
}
|
||||
}
|
||||
&.apexcharts-xaxistooltip-top,
|
||||
&.apexcharts-yaxistooltip-top {
|
||||
&:after {
|
||||
border-top-color: light.$body-bg;
|
||||
}
|
||||
&:before {
|
||||
border-top-color: light.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apexcharts-tooltip-text {
|
||||
font-family: light.$font-family-base !important;
|
||||
filter: none;
|
||||
}
|
||||
.apexcharts-marker {
|
||||
filter: drop-shadow(0 2px 4px #a1acb866);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// bar charts with radius hover fix
|
||||
#orderStatisticsChart,
|
||||
#totalRevenueChart,
|
||||
#expensesBarChart {
|
||||
.apexcharts-xcrosshairs.apexcharts-active,
|
||||
.apexcharts-ycrosshairs.apexcharts-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
3
react-sneat-bootstrap-admin-template/public/libs/apex-charts/apexcharts.js
vendored
Normal file
3
react-sneat-bootstrap-admin-template/public/libs/apex-charts/apexcharts.js
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import ApexCharts from 'apexcharts-clevision';
|
||||
|
||||
export { ApexCharts };
|
||||
@ -0,0 +1 @@
|
||||
@import '../../node_modules/highlight.js/styles/github.css';
|
||||
3
react-sneat-bootstrap-admin-template/public/libs/highlight/highlight.js
vendored
Normal file
3
react-sneat-bootstrap-admin-template/public/libs/highlight/highlight.js
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
export { hljs };
|
||||
@ -0,0 +1 @@
|
||||
@import '../../node_modules/highlight.js/styles/atom-one-light';
|
||||
4
react-sneat-bootstrap-admin-template/public/libs/jquery/jquery.js
vendored
Normal file
4
react-sneat-bootstrap-admin-template/public/libs/jquery/jquery.js
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import jQuery from 'jquery/dist/jquery';
|
||||
|
||||
const $ = jQuery;
|
||||
export { jQuery, $ };
|
||||
7
react-sneat-bootstrap-admin-template/public/libs/masonry/masonry.js
vendored
Normal file
7
react-sneat-bootstrap-admin-template/public/libs/masonry/masonry.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
// var Masonry = require('masonry-layout/dist/masonry.pkgd')
|
||||
|
||||
// export { Masonry }
|
||||
|
||||
import * as Masonry from 'masonry-layout/dist/masonry.pkgd';
|
||||
|
||||
export { Masonry };
|
||||
3
react-sneat-bootstrap-admin-template/public/libs/perfect-scrollbar/perfect-scrollbar.js
vendored
Normal file
3
react-sneat-bootstrap-admin-template/public/libs/perfect-scrollbar/perfect-scrollbar.js
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import PerfectScrollbar from 'perfect-scrollbar/dist/perfect-scrollbar';
|
||||
|
||||
export { PerfectScrollbar };
|
||||
@ -0,0 +1,115 @@
|
||||
@use '../../scss/_bootstrap-extended/include' as light;
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar';
|
||||
|
||||
$ps-width: 0.25rem !default;
|
||||
$ps-hover-width: 0.375rem !default;
|
||||
|
||||
.ps {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
height: $ps-width;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
width: $ps-width;
|
||||
}
|
||||
|
||||
.ps__rail-x,
|
||||
.ps__rail-y,
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-x.ps--clicking > .ps__thumb-x {
|
||||
height: $ps-hover-width;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-y.ps--clicking,
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
width: $ps-hover-width;
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
height: $ps-width;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
width: $ps-width;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Light layout
|
||||
@if $enable-light-style {
|
||||
.light-style {
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
background-color: light.$gray-400;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-y.ps--clicking {
|
||||
background-color: light.$gray-200;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-x.ps--clicking > .ps__thumb-x,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background-color: light.$gray-700;
|
||||
}
|
||||
|
||||
.ps-inverted {
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-y.ps--clicking {
|
||||
background-color: rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-x.ps--clicking > .ps__thumb-x,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox width issue fixed
|
||||
@supports (-moz-appearance: none) {
|
||||
#both-scrollbars-example {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
6
react-sneat-bootstrap-admin-template/public/libs/popper/popper.js
vendored
Normal file
6
react-sneat-bootstrap-admin-template/public/libs/popper/popper.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
import Popper from '@popperjs/core/dist/umd/popper.min';
|
||||
|
||||
// Required to enable animations on dropdowns/tooltips/popovers
|
||||
// Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false
|
||||
|
||||
export { Popper };
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user