Compare commits
1 Commits
v4.0.0-bet
...
github-pag
| Author | SHA1 | Date | |
|---|---|---|---|
|
0796503d6d |
2
.github/FUNDING.yml
vendored
2
.github/FUNDING.yml
vendored
@@ -1,2 +0,0 @@
|
||||
github: danny007in
|
||||
custom: ["https://www.paypal.me/daniel007in"]
|
||||
2
.github/workflows/bundlewatch.yml
vendored
2
.github/workflows/bundlewatch.yml
vendored
@@ -20,7 +20,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
2
.github/workflows/codeql.yml
vendored
2
.github/workflows/codeql.yml
vendored
@@ -23,7 +23,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
2
.github/workflows/docs.yml
vendored
2
.github/workflows/docs.yml
vendored
@@ -20,7 +20,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
@@ -20,7 +20,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
10
.github/workflows/node-sass.yml
vendored
10
.github/workflows/node-sass.yml
vendored
@@ -20,7 +20,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
@@ -43,12 +43,10 @@ jobs:
|
||||
- name: Check built CSS files
|
||||
shell: bash
|
||||
run: |
|
||||
SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
|
||||
if [[ -z "$SASS_VARS_FOUND" ]]; then
|
||||
echo "All good, no Sass variables found!"
|
||||
if [[ $(find dist-sass/css/ -name "*.css" | xargs grep -F "\$" | wc -l | bc) -eq 0 ]]; then
|
||||
echo "All good, no Sass variables found"
|
||||
exit 0
|
||||
else
|
||||
echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
|
||||
echo "$SASS_VARS_FOUND"
|
||||
echo "Found Sass variables!"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -10,7 +10,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
57
.github/workflows/static.yml
vendored
Normal file
57
.github/workflows/static.yml
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
# Simple workflow for deploying static content to GitHub Pages
|
||||
name: Deploy static content to Pages
|
||||
|
||||
on:
|
||||
# Runs on pushes targeting the default branch
|
||||
push:
|
||||
branches: ["master"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
# Single deploy job since we're just deploying
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
cache: npm
|
||||
|
||||
- name: Install npm dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run dist
|
||||
run: npm run compile
|
||||
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v3
|
||||
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v2
|
||||
with:
|
||||
# Upload entire repository
|
||||
path: '.'
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v2
|
||||
18
.npmignore
18
.npmignore
@@ -5,21 +5,3 @@
|
||||
/.github/
|
||||
/.temp/
|
||||
/.lgtm.yml
|
||||
/.cache/
|
||||
/.idea/
|
||||
/.browserlistrc
|
||||
/.bundlewatch.config.json
|
||||
/.editorconfig
|
||||
/.eslintignore
|
||||
/.eslintrc.json
|
||||
/.gitattributes
|
||||
/.gitignore
|
||||
/.gitpod.yml
|
||||
/.stylelintignore
|
||||
/.stylelintrc.json
|
||||
/composer.json
|
||||
/tsconfig.json
|
||||
/src/assets/
|
||||
/src/config/
|
||||
/src/html/
|
||||
/src/utils/
|
||||
|
||||
@@ -40,14 +40,9 @@ To compile the dist files you need Node.js/npm, clone/download the repo then:
|
||||
- Clone this Repository to your machine and change to `master` branch.
|
||||
- Go to Cloned Folder.
|
||||
- In cli/bash run `npm install` it will install dependency from `package.json`.
|
||||
- After installation completes, run `npm run dev`
|
||||
- After installation complets, run `npm run dev`
|
||||
- Cool, Send urs changes in PR to `master` branch.
|
||||
|
||||
## Sponsorship
|
||||
|
||||
Support AdminLTE development by becoming a sponsor.
|
||||
[Github Sponsors](https://github.com/sponsors/danny007in) or
|
||||
[PayPal](https://www.paypal.me/daniel007in)
|
||||
|
||||
## License
|
||||
|
||||
|
||||
19455
package-lock.json
generated
19455
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
63
package.json
63
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "admin-lte",
|
||||
"description": "Responsive open source admin dashboard and control panel.",
|
||||
"version": "4.0.0-beta2",
|
||||
"version": "4.0.0-alpha3",
|
||||
"license": "MIT",
|
||||
"author": "Colorlib <https://colorlib.com>",
|
||||
"main": "dist/js/adminlte.min.js",
|
||||
@@ -57,40 +57,39 @@
|
||||
"url": "https://github.com/ColorlibHQ/AdminLTE/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.3",
|
||||
"@astrojs/mdx": "^3.1.5",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^7.5.0",
|
||||
"@typescript-eslint/parser": "^7.5.0",
|
||||
"astro": "^4.15.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"@astrojs/mdx": "^1.1.0",
|
||||
"@rollup/plugin-typescript": "^11.1.3",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"astro": "^3.0.8",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"bootstrap": "^5.3.2",
|
||||
"bundlewatch": "^0.4.0",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"concurrently": "^8.2.2",
|
||||
"bundlewatch": "^0.3.3",
|
||||
"clean-css-cli": "^5.6.2",
|
||||
"concurrently": "^8.2.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-config-xo": "^0.44.0",
|
||||
"eslint-config-xo-typescript": "^4.0.0",
|
||||
"eslint-plugin-astro": "^0.34.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-unicorn": "^52.0.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-config-xo": "^0.43.1",
|
||||
"eslint-config-xo-typescript": "^1.0.1",
|
||||
"eslint-plugin-astro": "^0.29.0",
|
||||
"eslint-plugin-import": "^2.28.1",
|
||||
"eslint-plugin-unicorn": "^48.0.1",
|
||||
"fs-extra": "^11.1.1",
|
||||
"js-beautify": "^1.15.1",
|
||||
"lockfile-lint": "^4.14.0",
|
||||
"nodemon": "^3.1.2",
|
||||
"js-beautify": "^1.14.9",
|
||||
"lockfile-lint": "^4.12.1",
|
||||
"nodemon": "^3.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.41",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"rollup": "^4.21.0",
|
||||
"rtlcss": "^4.2.0",
|
||||
"sass": "^1.77.4",
|
||||
"stylelint": "^16.8.2",
|
||||
"stylelint-config-twbs-bootstrap": "^14.2.0",
|
||||
"terser": "^5.31.6",
|
||||
"tslib": "^2.7.0",
|
||||
"typescript": "^5.5.4"
|
||||
"postcss": "^8.4.29",
|
||||
"postcss-cli": "^10.1.0",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-astro": "^0.12.0",
|
||||
"rollup": "^3.29.2",
|
||||
"rtlcss": "^4.1.0",
|
||||
"sass": "^1.67.0",
|
||||
"stylelint": "^15.10.3",
|
||||
"stylelint-config-twbs-bootstrap": "^11.0.1",
|
||||
"terser": "^5.19.4",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,12 +15,5 @@ export default defineConfig({
|
||||
integrations: [mdx()],
|
||||
srcDir: './src/html',
|
||||
cacheDir: './dist/pages',
|
||||
outDir: './dist/pages',
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
ignored: ['!**/dist/**'],
|
||||
}
|
||||
}
|
||||
}
|
||||
outDir: './dist/pages'
|
||||
})
|
||||
|
||||
@@ -27,10 +27,20 @@ const cssPath = isRtl ? ".rtl" : "";
|
||||
/>
|
||||
<!--end::Fonts-->
|
||||
<!--begin::Third Party Plugin(OverlayScrollbars)-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
|
||||
integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<!--end::Third Party Plugin(OverlayScrollbars)-->
|
||||
<!--begin::Third Party Plugin(Bootstrap Icons)-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
|
||||
integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<!--end::Third Party Plugin(Bootstrap Icons)-->
|
||||
<!--begin::Required Plugin(AdminLTE)-->
|
||||
<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
|
||||
|
||||
@@ -4,12 +4,27 @@ const adminlteJsUrl = path + "/js/adminlte.js";
|
||||
---
|
||||
|
||||
<!--begin::Third Party Plugin(OverlayScrollbars)-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
|
||||
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
|
||||
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
|
||||
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js"
|
||||
integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<!--end::Third Party Plugin(OverlayScrollbars)-->
|
||||
<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
|
||||
integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<!--end::Required Plugin(popperjs for Bootstrap 5)-->
|
||||
<!--begin::Required Plugin(Bootstrap 5)-->
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<!--end::Required Plugin(Bootstrap 5)-->
|
||||
<!--begin::Required Plugin(AdminLTE)-->
|
||||
<script src={adminlteJsUrl} is:inline></script>
|
||||
<!--end::Required Plugin(AdminLTE)-->
|
||||
<!--begin::OverlayScrollbars Configure-->
|
||||
|
||||
@@ -9,8 +9,8 @@ const year = new Date().getFullYear();
|
||||
<!--end::To the end-->
|
||||
<!--begin::Copyright-->
|
||||
<strong>
|
||||
Copyright © 2014-{year}
|
||||
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
|
||||
Copyright © 2014-{year}
|
||||
<a href="https://adminlte.io">AdminLTE.io</a>.
|
||||
</strong>
|
||||
All rights reserved.
|
||||
<!--end::Copyright-->
|
||||
|
||||
@@ -75,15 +75,6 @@ const htmlPath = convertPathToHtml(path);
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/generate/theme.html"}
|
||||
class:list={["nav-link", page === "theme-generate" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-palette"></i>
|
||||
<p>Theme Generate</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
|
||||
<a
|
||||
href="#"
|
||||
@@ -163,11 +154,11 @@ const htmlPath = convertPathToHtml(path);
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/layout-custom-area.html"}
|
||||
class:list={["nav-link", page === "layout-custom-area" && "active"]}
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Layout <small>+ Custom Area </small></p>
|
||||
<p>Fixed Complete</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
@@ -234,15 +225,6 @@ const htmlPath = convertPathToHtml(path);
|
||||
<p>General</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/UI/icons.html"}
|
||||
class:list={["nav-link", page === "icons" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/UI/timeline.html"}
|
||||
|
||||
@@ -16,7 +16,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
|
||||
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js"
|
||||
integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
@@ -25,7 +25,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css"
|
||||
integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
@@ -38,19 +38,19 @@ _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or
|
||||
#### Via npm
|
||||
|
||||
```bash
|
||||
npm install admin-lte@4.0.0-beta2 --save
|
||||
npm install admin-lte@4.0.0-alpha2 --save
|
||||
```
|
||||
|
||||
#### Via Yarn
|
||||
|
||||
```bash
|
||||
yarn add admin-lte@4.0.0-beta2
|
||||
yarn add admin-lte@4.0.0-alpha2
|
||||
```
|
||||
|
||||
#### Via Composer
|
||||
|
||||
```bash
|
||||
composer require "almasaeed2010/adminlte=4.0.0-beta2"
|
||||
composer require "almasaeed2010/adminlte=4.0.0-alpha2"
|
||||
```
|
||||
|
||||
#### Via Git
|
||||
|
||||
@@ -63,7 +63,7 @@ const pageTitle = "General UI Elements";
|
||||
href="https://getbootstrap.com/docs/5.3/components/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="callout-link"
|
||||
class="fw-bold"
|
||||
>
|
||||
Bootstrap Components
|
||||
</a>
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Icons";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "ui-elements";
|
||||
const page = "icons";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Icons</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Icons
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!-- Timelime example -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- The icons -->
|
||||
<div class="col-12">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>You can use any font library you like with AdminLTE 4.</p>
|
||||
<strong>Recommendations</strong>
|
||||
<ul class="mt-1">
|
||||
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
|
||||
<li><a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a></li>
|
||||
<li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -60,10 +60,8 @@ const page = "color-mode";
|
||||
<div class="callout callout-info">
|
||||
<h5 class="fw-bold">Tips</h5>
|
||||
<p>
|
||||
<a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
|
||||
Color modes in Bootstrap
|
||||
</a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
|
||||
|
||||
First Visit
|
||||
https://getbootstrap.com/docs/5.3/customize/color-modes/
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -59,9 +59,8 @@ const distPath = path;
|
||||
<h5 class="fw-bold">Reminder!</h5>
|
||||
<p>
|
||||
AdminLTE uses all of Bootstrap 5 components. It's a good start
|
||||
to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
|
||||
Bootstrap documentation
|
||||
</a> to get an idea of the
|
||||
to review the [Bootstrap
|
||||
documentation](https://getbootstrap.com/) to get an idea of the
|
||||
various components that this documentation <b>does not</b> cover.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@ const page = "layout";
|
||||
<div class="callout callout-info mb-4">
|
||||
<h5 class="fw-bold">Tips</h5>
|
||||
<p>
|
||||
The <a href="/starter.html" target="_blank" rel="noopener noreferrer" class="callout-link">
|
||||
The <a href="/starter.html" class="link-primary">
|
||||
starter page
|
||||
</a> is a good place to start building your app if you’d like to
|
||||
start from scratch.
|
||||
|
||||
@@ -49,11 +49,11 @@ const year = new Date().getFullYear();
|
||||
Enter your password to retrieve your session
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
|
||||
<a href="login.html">Or sign in as a different user</a>
|
||||
</div>
|
||||
<div class="lockscreen-footer text-center">
|
||||
Copyright © 2014-{year}
|
||||
<b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
|
||||
Copyright © 2014-{year}
|
||||
<b><a href="https://adminlte.io">AdminLTE.io</a></b><br />
|
||||
All rights reserved
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ const page = "general";
|
||||
href="https://getbootstrap.com/docs/5.3/forms/overview/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="callout-link"
|
||||
class="fw-bold"
|
||||
>
|
||||
Bootstrap Form
|
||||
</a>
|
||||
|
||||
@@ -1,479 +0,0 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
import { convertPathToHtml } from "../../../utils/index.js";
|
||||
|
||||
const title = "AdminLTE 4 | Theme Customize";
|
||||
const path = "../../../dist";
|
||||
const htmlPath = convertPathToHtml(path);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<!--begin::Sidebar-->
|
||||
<aside class="app-sidebar bg-primary shadow" data-bs-theme="dark">
|
||||
<!--begin::Sidebar Brand-->
|
||||
<div class="sidebar-brand">
|
||||
<!--begin::Brand Link-->
|
||||
<a href={htmlPath + "/index.html"} class="brand-link">
|
||||
<!--begin::Brand Image-->
|
||||
<img
|
||||
src={path + "/assets/img/AdminLTELogo.png"}
|
||||
alt="AdminLTE Logo"
|
||||
class="brand-image opacity-75 shadow"
|
||||
/>
|
||||
<!--end::Brand Image-->
|
||||
<!--begin::Brand Text-->
|
||||
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||
<!--end::Brand Text-->
|
||||
</a>
|
||||
<!--end::Brand Link-->
|
||||
</div>
|
||||
<!--end::Sidebar Brand-->
|
||||
|
||||
<!--begin::Sidebar Wrapper-->
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
<!--begin::Sidebar Menu-->
|
||||
<ul
|
||||
class="nav sidebar-menu flex-column"
|
||||
data-lte-toggle="treeview"
|
||||
role="menu"
|
||||
data-accordion="false"
|
||||
>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>
|
||||
Level 1
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>
|
||||
Level 2
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--end::Sidebar Menu-->
|
||||
</nav>
|
||||
</div>
|
||||
<!--end::Sidebar Wrapper-->
|
||||
</aside>
|
||||
<!--end::Sidebar-->
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Theme Customize</h3>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Theme Customize
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-12">
|
||||
<!--begin::Card-->
|
||||
<div class="card">
|
||||
<!--begin::Card Header-->
|
||||
<div class="card-header">
|
||||
<!--begin::Card Title-->
|
||||
<h3 class="card-title">Sidebar Theme</h3>
|
||||
<!--end::Card Title-->
|
||||
|
||||
<!--begin::Card Toolbar-->
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Card Toolbar-->
|
||||
</div>
|
||||
<!--end::Card Header-->
|
||||
<!--begin::Card Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="sidebar-color-modes"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Sidebar Color Mode Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="sidebar-color"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Sidebar Color Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<div id="sidebar-color-code" class="w-100"></div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Card Body-->
|
||||
<!--begin::Card Footer-->
|
||||
<div class="card-footer">
|
||||
Check more color in
|
||||
<a
|
||||
href="https://getbootstrap.com/docs/5.3/utilities/background/"
|
||||
target="_blank"
|
||||
class="link-primary">Bootstrap Background Colors</a
|
||||
>
|
||||
</div>
|
||||
<!--end::Card Footer-->
|
||||
</div>
|
||||
<!--end::Card-->
|
||||
|
||||
<!--begin::Card-->
|
||||
<div class="card mt-4">
|
||||
<!--begin::Card Header-->
|
||||
<div class="card-header">
|
||||
<!--begin::Card Title-->
|
||||
<h3 class="card-title">Navbar Theme</h3>
|
||||
<!--end::Card Title-->
|
||||
|
||||
<!--begin::Card Toolbar-->
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Card Toolbar-->
|
||||
</div>
|
||||
<!--end::Card Header-->
|
||||
<!--begin::Card Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="navbar-color-modes"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Navbar Color Mode Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="navbar-color"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Navbar Color Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<div id="navbar-color-code" class="w-100"></div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Card Body-->
|
||||
<!--begin::Card Footer-->
|
||||
<div class="card-footer">
|
||||
Check more color in
|
||||
<a
|
||||
href="https://getbootstrap.com/docs/5.3/utilities/background/"
|
||||
target="_blank"
|
||||
class="link-primary">Bootstrap Background Colors</a
|
||||
>
|
||||
</div>
|
||||
<!--end::Card Footer-->
|
||||
</div>
|
||||
<!--end::Card-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<script is:inline>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const appSidebar = document.querySelector(".app-sidebar");
|
||||
const sidebarColorModes = document.querySelector(
|
||||
"#sidebar-color-modes",
|
||||
);
|
||||
const sidebarColor = document.querySelector("#sidebar-color");
|
||||
const sidebarColorCode = document.querySelector("#sidebar-color-code");
|
||||
|
||||
const themeBg = [
|
||||
"bg-primary",
|
||||
"bg-primary-subtle",
|
||||
"bg-secondary",
|
||||
"bg-secondary-subtle",
|
||||
"bg-success",
|
||||
"bg-success-subtle",
|
||||
"bg-danger",
|
||||
"bg-danger-subtle",
|
||||
"bg-warning",
|
||||
"bg-warning-subtle",
|
||||
"bg-info",
|
||||
"bg-info-subtle",
|
||||
"bg-light",
|
||||
"bg-light-subtle",
|
||||
"bg-dark",
|
||||
"bg-dark-subtle",
|
||||
"bg-body-secondary",
|
||||
"bg-body-tertiary",
|
||||
"bg-body",
|
||||
"bg-black",
|
||||
"bg-white",
|
||||
"bg-transparent",
|
||||
];
|
||||
|
||||
// loop through each option themeBg array
|
||||
document.querySelector("#sidebar-color").innerHTML = themeBg.map(
|
||||
(bg) => {
|
||||
// return option element with value and text
|
||||
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
|
||||
},
|
||||
);
|
||||
|
||||
let sidebarColorMode = "";
|
||||
let sidebarBg = "";
|
||||
|
||||
function updateSidebar() {
|
||||
appSidebar.setAttribute("data-bs-theme", sidebarColorMode);
|
||||
|
||||
sidebarColorCode.innerHTML = `<pre><code class="language-html"><aside class="app-sidebar ${sidebarBg}" data-bs-theme="${sidebarColorMode}">...</aside></code></pre>`;
|
||||
}
|
||||
|
||||
sidebarColorModes.addEventListener("input", (event) => {
|
||||
sidebarColorMode = event.target.value;
|
||||
updateSidebar();
|
||||
});
|
||||
|
||||
sidebarColor.addEventListener("input", (event) => {
|
||||
sidebarBg = event.target.value;
|
||||
|
||||
themeBg.forEach((className) => {
|
||||
appSidebar.classList.remove(className);
|
||||
});
|
||||
|
||||
if (themeBg.includes(sidebarBg)) {
|
||||
appSidebar.classList.add(sidebarBg);
|
||||
}
|
||||
|
||||
updateSidebar();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const appNavbar = document.querySelector(".app-header");
|
||||
const navbarColorModes = document.querySelector("#navbar-color-modes");
|
||||
const navbarColor = document.querySelector("#navbar-color");
|
||||
const navbarColorCode = document.querySelector("#navbar-color-code");
|
||||
|
||||
const themeBg = [
|
||||
"bg-primary",
|
||||
"bg-primary-subtle",
|
||||
"bg-secondary",
|
||||
"bg-secondary-subtle",
|
||||
"bg-success",
|
||||
"bg-success-subtle",
|
||||
"bg-danger",
|
||||
"bg-danger-subtle",
|
||||
"bg-warning",
|
||||
"bg-warning-subtle",
|
||||
"bg-info",
|
||||
"bg-info-subtle",
|
||||
"bg-light",
|
||||
"bg-light-subtle",
|
||||
"bg-dark",
|
||||
"bg-dark-subtle",
|
||||
"bg-body-secondary",
|
||||
"bg-body-tertiary",
|
||||
"bg-body",
|
||||
"bg-black",
|
||||
"bg-white",
|
||||
"bg-transparent",
|
||||
];
|
||||
|
||||
// loop through each option themeBg array
|
||||
document.querySelector("#navbar-color").innerHTML = themeBg.map(
|
||||
(bg) => {
|
||||
// return option element with value and text
|
||||
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
|
||||
},
|
||||
);
|
||||
|
||||
let navbarColorMode = "";
|
||||
let navbarBg = "";
|
||||
|
||||
function updateNavbar() {
|
||||
appNavbar.setAttribute("data-bs-theme", navbarColorMode);
|
||||
navbarColorCode.innerHTML = `<pre><code class="language-html"><nav class="app-header navbar navbar-expand ${navbarBg}" data-bs-theme="${navbarColorMode}">...</nav></code></pre>`;
|
||||
}
|
||||
|
||||
navbarColorModes.addEventListener("input", (event) => {
|
||||
navbarColorMode = event.target.value;
|
||||
updateNavbar();
|
||||
});
|
||||
|
||||
navbarColor.addEventListener("input", (event) => {
|
||||
navbarBg = event.target.value;
|
||||
|
||||
themeBg.forEach((className) => {
|
||||
appNavbar.classList.remove(className);
|
||||
});
|
||||
|
||||
if (themeBg.includes(navbarBg)) {
|
||||
appNavbar.classList.add(navbarBg);
|
||||
}
|
||||
|
||||
updateNavbar();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -11,7 +11,7 @@ const mainPage = "dashboard";
|
||||
const page = "index";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
@@ -91,10 +91,7 @@ const page = "index";
|
||||
d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
|
||||
>
|
||||
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
More info <i class="bi bi-link-45deg"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -120,10 +117,7 @@ const page = "index";
|
||||
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
|
||||
></path>
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
|
||||
>
|
||||
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
More info <i class="bi bi-link-45deg"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -149,10 +143,7 @@ const page = "index";
|
||||
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
|
||||
>
|
||||
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
More info <i class="bi bi-link-45deg"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -185,10 +176,7 @@ const page = "index";
|
||||
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
|
||||
></path>
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
|
||||
>
|
||||
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
More info <i class="bi bi-link-45deg"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -213,7 +201,7 @@ const page = "index";
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-primary mb-4">
|
||||
<div class="card direct-chat direct-chat-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
@@ -522,7 +510,7 @@ const page = "index";
|
||||
<!-- Start col -->
|
||||
<div class="col-lg-5 connectedSortable">
|
||||
<div
|
||||
class="card text-white bg-primary bg-gradient border-primary mb-4"
|
||||
class="card mb-4 text-white bg-primary bg-gradient border-primary"
|
||||
>
|
||||
<div class="card-header border-0">
|
||||
<h3 class="card-title">Sales Value</h3>
|
||||
@@ -544,15 +532,15 @@ const page = "index";
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-4 text-center">
|
||||
<div id="sparkline-1" class="text-dark"></div>
|
||||
<div id="sparkline-1"></div>
|
||||
<div class="text-white">Visitors</div>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<div id="sparkline-2" class="text-dark"></div>
|
||||
<div id="sparkline-2"></div>
|
||||
<div class="text-white">Online</div>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<div id="sparkline-3" class="text-dark"></div>
|
||||
<div id="sparkline-3"></div>
|
||||
<div class="text-white">Sales</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -581,7 +569,8 @@ const page = "index";
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
|
||||
integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- sortablejs -->
|
||||
<script is:inline>
|
||||
@@ -590,12 +579,11 @@ const page = "index";
|
||||
connectedSortables.forEach((connectedSortable) => {
|
||||
let sortable = new Sortable(connectedSortable, {
|
||||
group: "shared",
|
||||
handle: ".card-header",
|
||||
});
|
||||
});
|
||||
|
||||
const cardHeaders = document.querySelectorAll(
|
||||
".connectedSortable .card-header",
|
||||
".connectedSortable .card-header"
|
||||
);
|
||||
cardHeaders.forEach((cardHeader) => {
|
||||
cardHeader.style.cursor = "move";
|
||||
@@ -606,7 +594,8 @@ const page = "index";
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
|
||||
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script is:inline>
|
||||
@@ -663,7 +652,7 @@ const page = "index";
|
||||
|
||||
const sales_chart = new ApexCharts(
|
||||
document.querySelector("#revenue-chart"),
|
||||
sales_chart_options,
|
||||
sales_chart_options
|
||||
);
|
||||
sales_chart.render();
|
||||
</script>
|
||||
@@ -672,11 +661,13 @@ const page = "index";
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
|
||||
integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
|
||||
integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- jsvectormap -->
|
||||
<script is:inline>
|
||||
@@ -728,7 +719,7 @@ const page = "index";
|
||||
|
||||
const sparkline1 = new ApexCharts(
|
||||
document.querySelector("#sparkline-1"),
|
||||
option_sparkline1,
|
||||
option_sparkline1
|
||||
);
|
||||
sparkline1.render();
|
||||
|
||||
@@ -759,7 +750,7 @@ const page = "index";
|
||||
|
||||
const sparkline2 = new ApexCharts(
|
||||
document.querySelector("#sparkline-2"),
|
||||
option_sparkline2,
|
||||
option_sparkline2
|
||||
);
|
||||
sparkline2.render();
|
||||
|
||||
@@ -790,7 +781,7 @@ const page = "index";
|
||||
|
||||
const sparkline3 = new ApexCharts(
|
||||
document.querySelector("#sparkline-3"),
|
||||
option_sparkline3,
|
||||
option_sparkline3
|
||||
);
|
||||
sparkline3.render();
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,7 @@ const mainPage = "dashboard";
|
||||
const page = "index2";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
@@ -309,7 +309,7 @@ const page = "index2";
|
||||
<!-- Start col -->
|
||||
<div class="col-md-8">
|
||||
<!--begin::Row-->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-warning">
|
||||
@@ -329,8 +329,7 @@ const page = "index2";
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"
|
||||
></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -623,7 +622,7 @@ const page = "index2";
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- USERS LIST -->
|
||||
<div class="card">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Members</h3>
|
||||
|
||||
@@ -637,8 +636,7 @@ const page = "index2";
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"
|
||||
></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -769,7 +767,7 @@ const page = "index2";
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
|
||||
<a href="javascript:">View All Users</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
@@ -779,7 +777,7 @@ const page = "index2";
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
|
||||
<!--begin::Latest Order Widget-->
|
||||
<!-- TABLE: LATEST ORDERS -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Orders</h3>
|
||||
@@ -817,7 +815,7 @@ const page = "index2";
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
|
||||
<a href="pages/examples/invoice.html">OR9842</a>
|
||||
</td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td>
|
||||
@@ -826,24 +824,36 @@ const page = "index2";
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-1"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#00a65a"
|
||||
data-height="20"
|
||||
>
|
||||
90,80,90,-70,61,-83,63
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
|
||||
<a href="pages/examples/invoice.html">OR1848</a>
|
||||
</td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td>
|
||||
<span class="badge text-bg-warning">Pending</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-2"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#f39c12"
|
||||
data-height="20"
|
||||
>
|
||||
90,80,-90,70,61,-83,68
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
|
||||
<a href="pages/examples/invoice.html">OR7429</a>
|
||||
</td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td>
|
||||
@@ -852,36 +862,54 @@ const page = "index2";
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-3"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#f56954"
|
||||
data-height="20"
|
||||
>
|
||||
90,-80,90,70,-61,83,63
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
|
||||
<a href="pages/examples/invoice.html">OR7429</a>
|
||||
</td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td>
|
||||
<span class="badge text-bg-info">Processing</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-4"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#00c0ef"
|
||||
data-height="20"
|
||||
>
|
||||
90,80,-90,70,-61,83,63
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
|
||||
<a href="pages/examples/invoice.html">OR1848</a>
|
||||
</td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td>
|
||||
<span class="badge text-bg-warning">Pending</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-5"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#f39c12"
|
||||
data-height="20"
|
||||
>
|
||||
90,80,-90,70,61,-83,68
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
|
||||
<a href="pages/examples/invoice.html">OR7429</a>
|
||||
</td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td>
|
||||
@@ -890,19 +918,31 @@ const page = "index2";
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-6"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#f56954"
|
||||
data-height="20"
|
||||
>
|
||||
90,-80,90,70,-61,83,63
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
|
||||
<a href="pages/examples/invoice.html">OR9842</a>
|
||||
</td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td>
|
||||
<span class="badge text-bg-success">Shipped</span>
|
||||
</td>
|
||||
<td>
|
||||
<div id="table-sparkline-7"></div>
|
||||
<div
|
||||
class="sparkbar"
|
||||
data-color="#00a65a"
|
||||
data-height="20"
|
||||
>
|
||||
90,80,90,-70,61,-83,63
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -1023,7 +1063,7 @@ const page = "index2";
|
||||
United States of America
|
||||
<span class="float-end text-danger">
|
||||
<i class="bi bi-arrow-down fs-7"></i>
|
||||
12%
|
||||
12%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -1193,7 +1233,8 @@ const page = "index2";
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
|
||||
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script is:inline>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
@@ -1209,7 +1250,7 @@ const page = "index2";
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
const sales_chart_options = {
|
||||
var sales_chart_options = {
|
||||
series: [
|
||||
{
|
||||
name: "Digital Goods",
|
||||
@@ -1256,9 +1297,9 @@ const page = "index2";
|
||||
},
|
||||
};
|
||||
|
||||
const sales_chart = new ApexCharts(
|
||||
var sales_chart = new ApexCharts(
|
||||
document.querySelector("#sales-chart"),
|
||||
sales_chart_options,
|
||||
sales_chart_options
|
||||
);
|
||||
sales_chart.render();
|
||||
|
||||
@@ -1266,80 +1307,11 @@ const page = "index2";
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
function createSparklineChart(selector, data) {
|
||||
const options = {
|
||||
series: [{ data }],
|
||||
chart: {
|
||||
type: "line",
|
||||
width: 150,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: ["var(--bs-primary)"],
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chart = new ApexCharts(document.querySelector(selector), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
const table_sparkline_1_data = [
|
||||
25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
|
||||
];
|
||||
const table_sparkline_2_data = [
|
||||
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
|
||||
];
|
||||
const table_sparkline_3_data = [
|
||||
15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
|
||||
];
|
||||
const table_sparkline_4_data = [
|
||||
30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
|
||||
];
|
||||
const table_sparkline_5_data = [
|
||||
20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
|
||||
];
|
||||
const table_sparkline_6_data = [
|
||||
5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
|
||||
];
|
||||
const table_sparkline_7_data = [
|
||||
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
|
||||
];
|
||||
|
||||
createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
|
||||
createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
|
||||
createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
|
||||
createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
|
||||
createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
|
||||
createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
|
||||
createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
const pie_chart_options = {
|
||||
var pie_chart_options = {
|
||||
series: [700, 500, 400, 600, 300, 100],
|
||||
chart: {
|
||||
type: "donut",
|
||||
@@ -1358,9 +1330,9 @@ const page = "index2";
|
||||
],
|
||||
};
|
||||
|
||||
const pie_chart = new ApexCharts(
|
||||
var pie_chart = new ApexCharts(
|
||||
document.querySelector("#pie-chart"),
|
||||
pie_chart_options,
|
||||
pie_chart_options
|
||||
);
|
||||
pie_chart.render();
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ const page = "index3";
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h3 class="card-title">Online Store Visitors</h3>
|
||||
<a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
|
||||
<a href="javascript:void(0);">View Report</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -100,7 +100,7 @@ const page = "index3";
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<h3 class="card-title">Products</h3>
|
||||
<div class="card-tools">
|
||||
@@ -157,7 +157,7 @@ const page = "index3";
|
||||
</td>
|
||||
<td>$29 USD</td>
|
||||
<td>
|
||||
<small class="text-info me-1">
|
||||
<small class="text-warning me-1">
|
||||
<i class="bi bi-arrow-down"></i>
|
||||
0.5%
|
||||
</small>
|
||||
@@ -228,7 +228,7 @@ const page = "index3";
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h3 class="card-title">Sales</h3>
|
||||
<a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
|
||||
<a href="javascript:void(0);">View Report</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -298,7 +298,7 @@ const page = "index3";
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="bi bi-graph-up-arrow text-success"></i> 12%
|
||||
<i class="ion ion-android-arrow-up text-success"></i> 12%
|
||||
</span>
|
||||
<span class="text-secondary">CONVERSION RATE</span>
|
||||
</p>
|
||||
@@ -307,7 +307,7 @@ const page = "index3";
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center border-bottom mb-3"
|
||||
>
|
||||
<p class="text-info fs-2">
|
||||
<p class="text-warning fs-2">
|
||||
<svg
|
||||
height="32"
|
||||
fill="none"
|
||||
@@ -326,7 +326,7 @@ const page = "index3";
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="bi bi-graph-up-arrow text-info"></i> 0.8%
|
||||
<i class="ion ion-android-arrow-up text-warning"></i> 0.8%
|
||||
</span>
|
||||
<span class="text-secondary">SALES RATE</span>
|
||||
</p>
|
||||
@@ -354,7 +354,7 @@ const page = "index3";
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="bi bi-graph-down-arrow text-danger"></i>
|
||||
<i class="ion ion-android-arrow-down text-danger"></i>
|
||||
1%
|
||||
</span>
|
||||
<span class="text-secondary">REGISTRATION RATE</span>
|
||||
@@ -393,7 +393,7 @@ const page = "index3";
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
const visitors_chart_options = {
|
||||
var visitors_chart_options = {
|
||||
series: [
|
||||
{
|
||||
name: "High - 2023",
|
||||
@@ -433,13 +433,13 @@ const page = "index3";
|
||||
},
|
||||
};
|
||||
|
||||
const visitors_chart = new ApexCharts(
|
||||
var visitors_chart = new ApexCharts(
|
||||
document.querySelector("#visitors-chart"),
|
||||
visitors_chart_options
|
||||
);
|
||||
visitors_chart.render();
|
||||
|
||||
const sales_chart_options = {
|
||||
var sales_chart_options = {
|
||||
series: [
|
||||
{
|
||||
name: "Net Profit",
|
||||
@@ -502,7 +502,7 @@ const page = "index3";
|
||||
},
|
||||
};
|
||||
|
||||
const sales_chart = new ApexCharts(
|
||||
var sales_chart = new ApexCharts(
|
||||
document.querySelector("#sales-chart"),
|
||||
sales_chart_options
|
||||
);
|
||||
|
||||
209
src/html/pages/layout/fixed-complete.astro
Normal file
209
src/html/pages/layout/fixed-complete.astro
Normal file
@@ -0,0 +1,209 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Fixed Complete";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-complete";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed-complete sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
<div class="app-main-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0">Fixed Complete <small>(Sidebar, Header & Footer)</small></h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
||||
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
|
||||
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
|
||||
accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
|
||||
justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
|
||||
voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
||||
</p>
|
||||
<p>
|
||||
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
|
||||
<div class="app-content-bottom-area">
|
||||
<div class="row">
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -1,144 +0,0 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Layout Custom Area";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "layout-custom-area";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Top Area-->
|
||||
<div class="app-content-top-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Top Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0"> Layout Custom Area </h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">Footer</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
|
||||
<!--begin::App Content Bottom Area-->
|
||||
<div class="app-content-bottom-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Bottom Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-secondary" name="save" value="create">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -56,7 +56,7 @@ const page = "simple";
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Bordered Table</h3>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@ const page = "simple";
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
@@ -86,7 +86,7 @@ const page = "simple";
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
@@ -102,7 +102,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-warning">70%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
@@ -120,7 +120,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-primary">30%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
@@ -164,7 +164,7 @@ const page = "simple";
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Condensed Full Width Table</h3>
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@ const page = "simple";
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
@@ -194,7 +194,7 @@ const page = "simple";
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
@@ -210,7 +210,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-warning">70%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
@@ -228,7 +228,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-primary">30%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
@@ -255,7 +255,7 @@ const page = "simple";
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Full Width Table</h3>
|
||||
|
||||
@@ -291,7 +291,7 @@ const page = "simple";
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
@@ -305,7 +305,7 @@ const page = "simple";
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
@@ -321,7 +321,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-warning">70%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
@@ -339,7 +339,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-primary">30%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
@@ -364,7 +364,7 @@ const page = "simple";
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
@@ -380,7 +380,7 @@ const page = "simple";
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
@@ -394,7 +394,7 @@ const page = "simple";
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
@@ -410,7 +410,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-warning">70%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
@@ -428,7 +428,7 @@ const page = "simple";
|
||||
<span class="badge text-bg-primary">30%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="align-middle">
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
|
||||
@@ -57,7 +57,7 @@ const page = "cards";
|
||||
|
||||
<h5 class="mb-2">Abilities</h5>
|
||||
<!--begin::Row-->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
@@ -158,7 +158,7 @@ const page = "cards";
|
||||
|
||||
<h5 class="mb-2">Card Outlined</h5>
|
||||
<!--begin::Row-->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-outline card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
@@ -259,7 +259,7 @@ const page = "cards";
|
||||
|
||||
<h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
|
||||
<!--begin::Row-->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card text-bg-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
|
||||
@@ -126,7 +126,7 @@ const page = "small-box";
|
||||
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
|
||||
More info <i class="bi bi-link-45deg"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,52 @@
|
||||
.app-content {
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
overflow: auto;
|
||||
background: $lte-app-footer-bg;
|
||||
|
||||
> .row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
&.app-content-top-area-sm,
|
||||
&.app-content-bottom-area-sm{
|
||||
min-height: $lte-app-content-bottom-area-height-sm;
|
||||
}
|
||||
|
||||
&.app-content-top-area-md,
|
||||
&.app-content-bottom-area-md{
|
||||
min-height: $lte-app-content-bottom-area-height-md;
|
||||
}
|
||||
&.app-content-top-area-lg,
|
||||
&.app-content-bottom-area-lg{
|
||||
min-height: $lte-app-content-bottom-area-height-lg;
|
||||
}
|
||||
&.app-content-top-area-xl,
|
||||
&.app-content-bottom-area-xl{
|
||||
min-height: $lte-app-content-bottom-area-height-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .625;
|
||||
padding-bottom: $grid-gutter-width * .625;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
border-top: $lte-app-footer-border-top;
|
||||
}
|
||||
.app-content-top-area {
|
||||
border-bottom: $lte-app-footer-border-top;
|
||||
|
||||
+ .app-main {
|
||||
padding-top: $grid-gutter-width * .5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
.app-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: #{$lte-prefix}app-main;
|
||||
max-width: 100vw;
|
||||
padding-bottom: $lte-app-main-padding-bottom;
|
||||
padding-bottom: $grid-gutter-width * .5;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.app-content-header {
|
||||
@@ -14,28 +12,6 @@
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 2.5rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area {
|
||||
color: $lte-app-content-bottom-area-color;
|
||||
background-color: $lte-app-content-bottom-area-bg;
|
||||
}
|
||||
|
||||
.app-content-top-area {
|
||||
padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
|
||||
border-bottom: $lte-app-content-top-area-top-border;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
|
||||
margin-top: auto;
|
||||
margin-bottom: $lte-app-content-bottom-area-margin-bottom;
|
||||
border-top: $lte-app-content-bottom-area-top-border;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,7 +187,7 @@
|
||||
|
||||
.nav-arrow {
|
||||
@include transition(transform $lte-transition-fn $lte-transition-speed);
|
||||
transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
|
||||
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $lte-transition-speed;
|
||||
animation-fill-mode: both;
|
||||
@@ -244,7 +244,7 @@
|
||||
|
||||
> .nav-link {
|
||||
.nav-arrow {
|
||||
transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
|
||||
transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -452,6 +452,7 @@
|
||||
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
&.layout-fixed-complete,
|
||||
&.layout-fixed {
|
||||
.app-main-wrapper {
|
||||
display: flex;
|
||||
@@ -476,7 +477,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-fixed-complete {
|
||||
.app-main-wrapper {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
&.sidebar-open {
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge {
|
||||
|
||||
@@ -665,7 +665,7 @@ $headings-font-family: null !default;
|
||||
$headings-font-style: null !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: inherit !default;
|
||||
$headings-color: null !default;
|
||||
// scss-docs-end headings-variables
|
||||
|
||||
// scss-docs-start display-headings
|
||||
@@ -715,10 +715,6 @@ $hr-border-color: null !default; // Allows for inherited colors
|
||||
$hr-border-width: var(--#{$prefix}border-width) !default;
|
||||
$hr-opacity: .25 !default;
|
||||
|
||||
// scss-docs-start vr-variables
|
||||
$vr-border-width: var(--#{$prefix}border-width) !default;
|
||||
// scss-docs-end vr-variables
|
||||
|
||||
$legend-margin-bottom: .5rem !default;
|
||||
$legend-font-size: 1.5rem !default;
|
||||
$legend-font-weight: null !default;
|
||||
@@ -728,7 +724,6 @@ $dt-font-weight: $font-weight-bold !default;
|
||||
$list-inline-padding: .5rem !default;
|
||||
|
||||
$mark-padding: .1875em !default;
|
||||
$mark-color: $body-color !default;
|
||||
$mark-bg: $yellow-100 !default;
|
||||
// scss-docs-end type-variables
|
||||
|
||||
@@ -745,25 +740,25 @@ $table-cell-padding-x-sm: .25rem !default;
|
||||
|
||||
$table-cell-vertical-align: top !default;
|
||||
|
||||
$table-color: var(--#{$prefix}emphasis-color) !default;
|
||||
$table-bg: var(--#{$prefix}body-bg) !default;
|
||||
$table-color: var(--#{$prefix}body-color) !default;
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: transparent !default;
|
||||
|
||||
$table-th-font-weight: null !default;
|
||||
|
||||
$table-striped-color: $table-color !default;
|
||||
$table-striped-bg-factor: .05 !default;
|
||||
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
|
||||
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
|
||||
|
||||
$table-active-color: $table-color !default;
|
||||
$table-active-bg-factor: .1 !default;
|
||||
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
|
||||
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
|
||||
|
||||
$table-hover-color: $table-color !default;
|
||||
$table-hover-bg-factor: .075 !default;
|
||||
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
|
||||
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
|
||||
|
||||
$table-border-factor: .2 !default;
|
||||
$table-border-factor: .1 !default;
|
||||
$table-border-width: var(--#{$prefix}border-width) !default;
|
||||
$table-border-color: var(--#{$prefix}border-color) !default;
|
||||
|
||||
@@ -853,7 +848,6 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
||||
$btn-link-color: var(--#{$prefix}link-color) !default;
|
||||
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -915,7 +909,7 @@ $input-disabled-border-color: null !default;
|
||||
$input-color: var(--#{$prefix}body-color) !default;
|
||||
$input-border-color: var(--#{$prefix}border-color) !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
$input-box-shadow: $box-shadow-inset !default;
|
||||
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
@@ -1031,7 +1025,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
|
||||
$form-select-border-width: $input-border-width !default;
|
||||
$form-select-border-color: $input-border-color !default;
|
||||
$form-select-border-radius: $input-border-radius !default;
|
||||
$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
$form-select-box-shadow: $box-shadow-inset !default;
|
||||
|
||||
$form-select-focus-border-color: $input-focus-border-color !default;
|
||||
$form-select-focus-width: $input-focus-width !default;
|
||||
@@ -1054,9 +1048,9 @@ $form-select-transition: $input-transition !default;
|
||||
$form-range-track-width: 100% !default;
|
||||
$form-range-track-height: .5rem !default;
|
||||
$form-range-track-cursor: pointer !default;
|
||||
$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$form-range-track-border-radius: 1rem !default;
|
||||
$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
$form-range-track-box-shadow: $box-shadow-inset !default;
|
||||
|
||||
$form-range-thumb-width: 1rem !default;
|
||||
$form-range-thumb-height: $form-range-thumb-width !default;
|
||||
@@ -1232,8 +1226,7 @@ $navbar-dark-color: rgba($white, .55) !default;
|
||||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
||||
$navbar-dark-icon-color: $navbar-dark-color !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
@@ -1255,10 +1248,10 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
|
||||
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$dropdown-border-width: var(--#{$prefix}border-width) !default;
|
||||
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
||||
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
|
||||
$dropdown-divider-bg: $dropdown-border-color !default;
|
||||
$dropdown-divider-margin-y: $spacer * .5 !default;
|
||||
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
$dropdown-box-shadow: $box-shadow !default;
|
||||
|
||||
$dropdown-link-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-link-hover-color: $dropdown-link-color !default;
|
||||
@@ -1446,8 +1439,8 @@ $popover-max-width: 276px !default;
|
||||
$popover-border-width: var(--#{$prefix}border-width) !default;
|
||||
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
||||
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
||||
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
|
||||
$popover-box-shadow: $box-shadow !default;
|
||||
|
||||
$popover-header-font-size: $font-size-base !default;
|
||||
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
@@ -1521,8 +1514,8 @@ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !d
|
||||
$modal-content-border-width: var(--#{$prefix}border-width) !default;
|
||||
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
||||
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
||||
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
|
||||
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
|
||||
$modal-content-box-shadow-xs: $box-shadow-sm !default;
|
||||
$modal-content-box-shadow-sm-up: $box-shadow !default;
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
@@ -1560,6 +1553,9 @@ $alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
$alert-bg-scale: -80% !default;
|
||||
$alert-border-scale: -70% !default;
|
||||
$alert-color-scale: 40% !default;
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
// scss-docs-end alert-variables
|
||||
|
||||
|
||||
@@ -11,11 +11,6 @@
|
||||
background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
|
||||
|
||||
.callout-link {
|
||||
font-weight: $lte-callout-link-font-weight;
|
||||
color: var(--#{$prefix}callout-link-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
@@ -35,6 +30,5 @@
|
||||
--#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
|
||||
--#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
|
||||
--#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
|
||||
--#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,7 +172,6 @@
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -1,4 +1,30 @@
|
||||
.compact-mode {
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .425;
|
||||
padding-bottom: $grid-gutter-width * .425;
|
||||
}
|
||||
.app-content-top-area-sm,
|
||||
.app-content-bottom-area-sm {
|
||||
min-height: $lte-app-content-bottom-area-height-sm * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-md,
|
||||
.app-content-bottom-area-md {
|
||||
min-height: $lte-app-content-bottom-area-height-md * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-lg,
|
||||
.app-content-bottom-area-lg {
|
||||
min-height: $lte-app-content-bottom-area-height-lg * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-xl,
|
||||
.app-content-bottom-area-xl {
|
||||
min-height: $lte-app-content-bottom-area-height-xl * .825;
|
||||
}
|
||||
|
||||
|
||||
.app-header {
|
||||
max-height: $lte-app-header-height-compact;
|
||||
|
||||
|
||||
@@ -169,16 +169,11 @@
|
||||
@include clearfix();
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba($black, .2);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -204,7 +204,6 @@
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@include media-breakpoint-up(sm) {
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
background-color: var(--#{$prefix}body-bg) !important;
|
||||
|
||||
@@ -18,10 +18,10 @@
|
||||
.progress {
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
|
||||
background-color: rgba($black, .125);
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--#{$lte-prefix}card-variant-color);
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,6 +62,14 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.info-box {
|
||||
.progress-bar {
|
||||
background-color: color-contrast($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -58,7 +58,6 @@
|
||||
// Link in header
|
||||
> a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// Item body and footer
|
||||
|
||||
@@ -59,15 +59,18 @@ $lte-app-header-link-padding-y: $navbar-padding-y !default;
|
||||
$lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
$lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
|
||||
// APP MAIN
|
||||
// --------------------------------------------------------
|
||||
$lte-app-main-padding-bottom: $grid-gutter-width * .5 !default;
|
||||
|
||||
// CONTENT PADDING
|
||||
// --------------------------------------------------------
|
||||
$lte-content-padding-y: 0 !default;
|
||||
$lte-content-padding-x: .5rem !default;
|
||||
|
||||
// MAIN CONTENT
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-height-sm: 3.5rem !default;
|
||||
$lte-app-content-bottom-area-height-md: 6rem !default;
|
||||
$lte-app-content-bottom-area-height-lg: 9rem !default;
|
||||
$lte-app-content-bottom-area-height-xl: 12rem !default;
|
||||
|
||||
// MAIN FOOTER
|
||||
// --------------------------------------------------------
|
||||
$lte-app-footer-padding: 1rem !default;
|
||||
@@ -78,21 +81,6 @@ $lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-a
|
||||
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
|
||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||
|
||||
// CONTENT BOTTOM AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
|
||||
$lte-app-content-bottom-area-color: $lte-app-footer-color !default;
|
||||
$lte-app-content-bottom-area-bg: $lte-app-footer-bg !default;
|
||||
$lte-app-content-bottom-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-bottom-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-bottom-area-padding-x: 0 !default;
|
||||
|
||||
// CONTENT TOP AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-top-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-top-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-top-area-padding-x: 0 !default;
|
||||
|
||||
// BRAND LINK
|
||||
// --------------------------------------------------------
|
||||
$navbar-brand-padding-y-compact: $navbar-brand-padding-y * .75 !default;
|
||||
@@ -113,10 +101,6 @@ $lte-card-title-font-weight: $font-weight-normal !default;
|
||||
// --------------------------------------------------------
|
||||
$lte-progress-bar-border-radius: 1px !default;
|
||||
|
||||
// CALLOUTS
|
||||
// --------------------------------------------------------
|
||||
$lte-callout-link-font-weight: $alert-link-font-weight !default;
|
||||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* AdminLTE v4.0.0-beta2
|
||||
* AdminLTE v4.0.0-alpha2
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE card-widget.ts
|
||||
* @description Card widget for AdminLTE.
|
||||
* @license MIT
|
||||
* AdminLTE card-widget.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE direct-chat.ts
|
||||
* @description Direct chat for AdminLTE.
|
||||
* @license MIT
|
||||
* AdminLTE direct-chat.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE fullscreen.ts
|
||||
* @description Fullscreen plugin for AdminLTE.
|
||||
* @license MIT
|
||||
* --------------------------------------------
|
||||
* ----------------------------------------------------------------------------
|
||||
* AdminLTE fullscreen.ts
|
||||
* License MIT
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE layout.ts
|
||||
* @description Layout for AdminLTE.
|
||||
* @license MIT
|
||||
* AdminLTE layout.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE push-menu.ts
|
||||
* @description Push menu for AdminLTE.
|
||||
* @license MIT
|
||||
* AdminLTE push-menu.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
@@ -156,7 +155,7 @@ onDOMContentLoaded(() => {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
const data = new PushMenu(target, Defaults)
|
||||
data.collapse()
|
||||
}, { passive: true })
|
||||
})
|
||||
sidebarOverlay.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
const target = event.currentTarget as HTMLElement
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* @file AdminLTE treeview.ts
|
||||
* @description Treeview plugin for AdminLTE.
|
||||
* @license MIT
|
||||
* AdminLTE treeview.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
@@ -33,13 +32,11 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
|
||||
|
||||
const Default = {
|
||||
animationSpeed: 300,
|
||||
accordion: true
|
||||
animationSpeed: 300
|
||||
}
|
||||
|
||||
type Config = {
|
||||
animationSpeed: number;
|
||||
accordion: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -59,20 +56,6 @@ class Treeview {
|
||||
open(): void {
|
||||
const event = new Event(EVENT_EXPANDED)
|
||||
|
||||
if (this._config.accordion) {
|
||||
const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
|
||||
|
||||
openMenuList?.forEach(openMenu => {
|
||||
if (openMenu !== this._element.parentElement) {
|
||||
openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
|
||||
const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
|
||||
if (childElement) {
|
||||
slideUp(childElement, this._config.animationSpeed)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_MENU_OPEN)
|
||||
|
||||
const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
|
||||
|
||||
@@ -83,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
|
||||
}, duration)
|
||||
}
|
||||
|
||||
/* TOGGLE */
|
||||
/* TOOGLE */
|
||||
const slideToggle = (target: HTMLElement, duration = 500) => {
|
||||
if (window.getComputedStyle(target).display === 'none') {
|
||||
slideDown(target, duration)
|
||||
|
||||
Reference in New Issue
Block a user