admin-lte 4.0.0-beta1 → 4.0.0-beta2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.astro/settings.json +5 -0
- package/dist/css/adminlte.css +48 -120
- package/dist/css/adminlte.css.map +1 -1
- package/dist/css/adminlte.min.css +2 -2
- package/dist/css/adminlte.min.css.map +1 -1
- package/dist/css/adminlte.rtl.css +48 -120
- package/dist/css/adminlte.rtl.css.map +1 -1
- package/dist/css/adminlte.rtl.min.css +2 -2
- package/dist/css/adminlte.rtl.min.css.map +1 -1
- package/dist/js/adminlte.js +2 -2
- package/dist/js/adminlte.js.map +1 -1
- package/dist/js/adminlte.min.js +2 -2
- package/dist/js/adminlte.min.js.map +1 -1
- package/dist/pages/UI/general.html +8 -2
- package/dist/pages/UI/icons.html +452 -0
- package/dist/pages/UI/timeline.html +8 -2
- package/dist/pages/docs/browser-support.html +8 -2
- package/dist/pages/docs/color-mode.html +8 -2
- package/dist/pages/docs/components/main-header.html +8 -2
- package/dist/pages/docs/components/main-sidebar.html +8 -2
- package/dist/pages/docs/faq.html +8 -2
- package/dist/pages/docs/how-to-contribute.html +8 -2
- package/dist/pages/docs/introduction.html +13 -7
- package/dist/pages/docs/javascript/treeview.html +8 -2
- package/dist/pages/docs/layout.html +8 -2
- package/dist/pages/docs/license.html +8 -2
- package/dist/pages/forms/general.html +8 -2
- package/dist/pages/generate/theme.html +412 -0
- package/dist/pages/index.html +8 -2
- package/dist/pages/index2.html +8 -2
- package/dist/pages/index3.html +8 -2
- package/dist/pages/layout/collapsed-sidebar.html +8 -2
- package/dist/pages/layout/fixed-sidebar.html +8 -2
- package/dist/pages/layout/layout-custom-area.html +467 -0
- package/dist/pages/layout/layout-rtl.html +8 -2
- package/dist/pages/layout/sidebar-mini.html +8 -2
- package/dist/pages/layout/unfixed-sidebar.html +8 -2
- package/dist/pages/tables/simple.html +8 -2
- package/dist/pages/widgets/cards.html +8 -2
- package/dist/pages/widgets/info-box.html +8 -2
- package/dist/pages/widgets/small-box.html +8 -2
- package/package.json +19 -19
- package/src/scss/_app-content.scss +0 -49
- package/src/scss/_app-main.scss +21 -1
- package/src/scss/_app-sidebar.scss +1 -6
- package/src/scss/_compact-mode.scss +0 -26
- package/src/scss/_variables.scss +19 -7
- package/src/scss/adminlte.scss +1 -1
- package/src/ts/push-menu.ts +1 -1
- package/.bundlewatch.config.json +0 -28
- package/.cache/.eslintcache +0 -1
- package/.cache/.stylelintcache +0 -1
- package/.editorconfig +0 -14
- package/.eslintignore +0 -7
- package/.eslintrc.json +0 -120
- package/.gitattributes +0 -6
- package/.gitpod.yml +0 -6
- package/.stylelintignore +0 -8
- package/.stylelintrc.json +0 -47
- package/composer.json +0 -25
- package/dist/pages/layout/fixed-complete.html +0 -541
- package/src/assets/img/AdminLTEFullLogo.png +0 -0
- package/src/assets/img/AdminLTELogo.png +0 -0
- package/src/assets/img/avatar.png +0 -0
- package/src/assets/img/avatar2.png +0 -0
- package/src/assets/img/avatar3.png +0 -0
- package/src/assets/img/avatar4.png +0 -0
- package/src/assets/img/avatar5.png +0 -0
- package/src/assets/img/boxed-bg.jpg +0 -0
- package/src/assets/img/boxed-bg.png +0 -0
- package/src/assets/img/credit/american-express.png +0 -0
- package/src/assets/img/credit/cirrus.png +0 -0
- package/src/assets/img/credit/mastercard.png +0 -0
- package/src/assets/img/credit/paypal.png +0 -0
- package/src/assets/img/credit/paypal2.png +0 -0
- package/src/assets/img/credit/visa.png +0 -0
- package/src/assets/img/default-150x150.png +0 -0
- package/src/assets/img/icons.png +0 -0
- package/src/assets/img/photo1.png +0 -0
- package/src/assets/img/photo2.png +0 -0
- package/src/assets/img/photo3.jpg +0 -0
- package/src/assets/img/photo4.jpg +0 -0
- package/src/assets/img/prod-1.jpg +0 -0
- package/src/assets/img/prod-2.jpg +0 -0
- package/src/assets/img/prod-3.jpg +0 -0
- package/src/assets/img/prod-4.jpg +0 -0
- package/src/assets/img/prod-5.jpg +0 -0
- package/src/assets/img/user1-128x128.jpg +0 -0
- package/src/assets/img/user2-160x160.jpg +0 -0
- package/src/assets/img/user3-128x128.jpg +0 -0
- package/src/assets/img/user4-128x128.jpg +0 -0
- package/src/assets/img/user5-128x128.jpg +0 -0
- package/src/assets/img/user6-128x128.jpg +0 -0
- package/src/assets/img/user7-128x128.jpg +0 -0
- package/src/assets/img/user8-128x128.jpg +0 -0
- package/src/config/assets.config.mjs +0 -8
- package/src/config/astro.config.mjs +0 -19
- package/src/config/postcss.config.mjs +0 -15
- package/src/config/rollup.config.js +0 -20
- package/src/html/.eslintrc.json +0 -24
- package/src/html/.prettierrc.js +0 -11
- package/src/html/.tsconfig.json +0 -4
- package/src/html/components/_head.astro +0 -37
- package/src/html/components/_scripts.astro +0 -39
- package/src/html/components/dashboard/_footer.astro +0 -18
- package/src/html/components/dashboard/_sidenav.astro +0 -562
- package/src/html/components/dashboard/_topbar.astro +0 -221
- package/src/html/components/docs/browser-support.mdx +0 -23
- package/src/html/components/docs/color-mode.mdx +0 -169
- package/src/html/components/docs/components/main-header.mdx +0 -198
- package/src/html/components/docs/components/main-sidebar.mdx +0 -129
- package/src/html/components/docs/faq.mdx +0 -11
- package/src/html/components/docs/how-to-contribute.mdx +0 -34
- package/src/html/components/docs/introduction.mdx +0 -60
- package/src/html/components/docs/license.mdx +0 -9
- package/src/html/components/javascript/treeview.mdx +0 -39
- package/src/html/env.d.ts +0 -1
- package/src/html/pages/UI/general.astro +0 -1451
- package/src/html/pages/UI/timeline.astro +0 -221
- package/src/html/pages/docs/browser-support.astro +0 -71
- package/src/html/pages/docs/color-mode.astro +0 -273
- package/src/html/pages/docs/components/main-header.astro +0 -320
- package/src/html/pages/docs/components/main-sidebar.astro +0 -71
- package/src/html/pages/docs/faq.astro +0 -71
- package/src/html/pages/docs/how-to-contribute.astro +0 -71
- package/src/html/pages/docs/introduction.astro +0 -71
- package/src/html/pages/docs/javascript/treeview.astro +0 -71
- package/src/html/pages/docs/layout.astro +0 -120
- package/src/html/pages/docs/license.astro +0 -71
- package/src/html/pages/examples/lockscreen.astro +0 -63
- package/src/html/pages/examples/login-v2.astro +0 -109
- package/src/html/pages/examples/login.astro +0 -99
- package/src/html/pages/examples/register-v2.astro +0 -116
- package/src/html/pages/examples/register.astro +0 -102
- package/src/html/pages/forms/general.astro +0 -624
- package/src/html/pages/index.astro +0 -799
- package/src/html/pages/index2.astro +0 -1373
- package/src/html/pages/index3.astro +0 -513
- package/src/html/pages/layout/collapsed-sidebar.astro +0 -110
- package/src/html/pages/layout/fixed-complete.astro +0 -209
- package/src/html/pages/layout/fixed-sidebar.astro +0 -109
- package/src/html/pages/layout/layout-rtl.astro +0 -109
- package/src/html/pages/layout/logo-switch.astro +0 -212
- package/src/html/pages/layout/sidebar-mini.astro +0 -108
- package/src/html/pages/layout/unfixed-sidebar.astro +0 -107
- package/src/html/pages/tables/simple.astro +0 -472
- package/src/html/pages/widgets/cards.astro +0 -373
- package/src/html/pages/widgets/info-box.astro +0 -413
- package/src/html/pages/widgets/small-box.astro +0 -182
- package/src/utils/index.js +0 -28
- package/tsconfig.json +0 -31
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Head from "@components/_head.astro";
|
|
3
|
-
import Footer from "@components/dashboard/_footer.astro";
|
|
4
|
-
import Topbar from "@components/dashboard/_topbar.astro";
|
|
5
|
-
import Sidenav from "@components/dashboard/_sidenav.astro";
|
|
6
|
-
import Scripts from "@components/_scripts.astro";
|
|
7
|
-
|
|
8
|
-
const title = "AdminLTE 4 | Timeline Elements";
|
|
9
|
-
const path = "../../../dist";
|
|
10
|
-
const mainPage = "ui-elements";
|
|
11
|
-
const page = "timeline";
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<!DOCTYPE html>
|
|
15
|
-
<html lang="en">
|
|
16
|
-
<!--begin::Head-->
|
|
17
|
-
<head>
|
|
18
|
-
<Head title={title} path={path} />
|
|
19
|
-
</head>
|
|
20
|
-
<!--end::Head-->
|
|
21
|
-
<!--begin::Body-->
|
|
22
|
-
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
23
|
-
<!--begin::App Wrapper-->
|
|
24
|
-
<div class="app-wrapper">
|
|
25
|
-
<Topbar path={path} />
|
|
26
|
-
<Sidenav path={path} mainPage={mainPage} page={page} />
|
|
27
|
-
<!--begin::App Main-->
|
|
28
|
-
<main class="app-main">
|
|
29
|
-
<!--begin::App Content Header-->
|
|
30
|
-
<div class="app-content-header">
|
|
31
|
-
<!--begin::Container-->
|
|
32
|
-
<div class="container-fluid">
|
|
33
|
-
<!--begin::Row-->
|
|
34
|
-
<div class="row">
|
|
35
|
-
<div class="col-sm-6">
|
|
36
|
-
<h3 class="mb-0">Timeline</h3>
|
|
37
|
-
</div>
|
|
38
|
-
<div class="col-sm-6">
|
|
39
|
-
<ol class="breadcrumb float-sm-end">
|
|
40
|
-
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
41
|
-
<li class="breadcrumb-item active" aria-current="page">
|
|
42
|
-
Timeline
|
|
43
|
-
</li>
|
|
44
|
-
</ol>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
<!--end::Row-->
|
|
48
|
-
</div>
|
|
49
|
-
<!--end::Container-->
|
|
50
|
-
</div>
|
|
51
|
-
<!--end::App Content Header-->
|
|
52
|
-
<!--begin::App Content-->
|
|
53
|
-
<div class="app-content">
|
|
54
|
-
<!--begin::Container-->
|
|
55
|
-
<div class="container-fluid">
|
|
56
|
-
<!-- Timelime example -->
|
|
57
|
-
<div class="row">
|
|
58
|
-
<div class="col-md-12">
|
|
59
|
-
<!-- The time line -->
|
|
60
|
-
<div class="timeline">
|
|
61
|
-
<!-- timeline time label -->
|
|
62
|
-
<div class="time-label">
|
|
63
|
-
<span class="text-bg-danger">10 Feb. 2023</span>
|
|
64
|
-
</div>
|
|
65
|
-
<!-- /.timeline-label -->
|
|
66
|
-
<!-- timeline item -->
|
|
67
|
-
<div>
|
|
68
|
-
<i
|
|
69
|
-
class="timeline-icon bi bi-envelope text-bg-primary"
|
|
70
|
-
>
|
|
71
|
-
</i>
|
|
72
|
-
<div class="timeline-item">
|
|
73
|
-
<span class="time">
|
|
74
|
-
<i class="bi bi-clock-fill"></i> 12:05
|
|
75
|
-
</span>
|
|
76
|
-
<h3 class="timeline-header">
|
|
77
|
-
<a href="#">Support Team</a> sent you an email
|
|
78
|
-
</h3>
|
|
79
|
-
|
|
80
|
-
<div class="timeline-body">
|
|
81
|
-
Etsy doostang zoodles disqus groupon greplin oooj voxy
|
|
82
|
-
zoodles, weebly ning heekya handango imeem plugg dopplr
|
|
83
|
-
jibjab, movity jajah plickers sifteo edmodo ifttt
|
|
84
|
-
zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu
|
|
85
|
-
weebly balihoo...
|
|
86
|
-
</div>
|
|
87
|
-
<div class="timeline-footer">
|
|
88
|
-
<a class="btn btn-primary btn-sm">Read more</a>
|
|
89
|
-
<a class="btn btn-danger btn-sm">Delete</a>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
<!-- END timeline item -->
|
|
94
|
-
<!-- timeline item -->
|
|
95
|
-
<div>
|
|
96
|
-
<i class="timeline-icon bi bi-person text-bg-success">
|
|
97
|
-
</i>
|
|
98
|
-
<div class="timeline-item">
|
|
99
|
-
<span class="time">
|
|
100
|
-
<i class="bi bi-clock-fill"></i> 5 mins ago
|
|
101
|
-
</span>
|
|
102
|
-
<h3 class="timeline-header no-border">
|
|
103
|
-
<a href="#">Sarah Young</a> accepted your friend request
|
|
104
|
-
</h3>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
<!-- END timeline item -->
|
|
108
|
-
<!-- timeline item -->
|
|
109
|
-
<div>
|
|
110
|
-
<i
|
|
111
|
-
class="timeline-icon bi bi-chat-text-fill text-bg-warning"
|
|
112
|
-
>
|
|
113
|
-
</i>
|
|
114
|
-
<div class="timeline-item">
|
|
115
|
-
<span class="time">
|
|
116
|
-
<i class="bi bi-clock-fill"></i> 27 mins ago
|
|
117
|
-
</span>
|
|
118
|
-
<h3 class="timeline-header">
|
|
119
|
-
<a href="#">Jay White</a> commented on your post
|
|
120
|
-
</h3>
|
|
121
|
-
<div class="timeline-body">
|
|
122
|
-
Take me to your leader! Switzerland is small and
|
|
123
|
-
neutral! We are more like Germany, ambitious and
|
|
124
|
-
misunderstood!
|
|
125
|
-
</div>
|
|
126
|
-
<div class="timeline-footer">
|
|
127
|
-
<a class="btn btn-warning btn-sm">View comment</a>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
<!-- END timeline item -->
|
|
132
|
-
<!-- timeline time label -->
|
|
133
|
-
<div class="time-label">
|
|
134
|
-
<span class="text-bg-success">3 Jan. 2023</span>
|
|
135
|
-
</div>
|
|
136
|
-
<!-- /.timeline-label -->
|
|
137
|
-
<!-- timeline item -->
|
|
138
|
-
<div>
|
|
139
|
-
<i class="timeline-icon bi bi-camera text-bg-primary">
|
|
140
|
-
</i>
|
|
141
|
-
<div class="timeline-item">
|
|
142
|
-
<span class="time">
|
|
143
|
-
<i class="bi bi-clock-fill"></i> 2 days ago
|
|
144
|
-
</span>
|
|
145
|
-
<h3 class="timeline-header">
|
|
146
|
-
<a href="#">Mina Lee</a> uploaded new photos
|
|
147
|
-
</h3>
|
|
148
|
-
<div class="timeline-body">
|
|
149
|
-
<img
|
|
150
|
-
src={path + "/assets/img/user1-128x128.jpg"}
|
|
151
|
-
alt="..."
|
|
152
|
-
/>
|
|
153
|
-
<img
|
|
154
|
-
src={path + "/assets/img/user1-128x128.jpg"}
|
|
155
|
-
alt="..."
|
|
156
|
-
/>
|
|
157
|
-
<img
|
|
158
|
-
src={path + "/assets/img/user1-128x128.jpg"}
|
|
159
|
-
alt="..."
|
|
160
|
-
/>
|
|
161
|
-
<img
|
|
162
|
-
src={path + "/assets/img/user1-128x128.jpg"}
|
|
163
|
-
alt="..."
|
|
164
|
-
/>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
<!-- END timeline item -->
|
|
169
|
-
<!-- timeline item -->
|
|
170
|
-
<div>
|
|
171
|
-
<i class="timeline-icon bi bi-camera-film text-bg-info"></i>
|
|
172
|
-
|
|
173
|
-
<div class="timeline-item">
|
|
174
|
-
<span class="time">
|
|
175
|
-
<i class="bi bi-clock-fill"></i> 5 days ago
|
|
176
|
-
</span>
|
|
177
|
-
|
|
178
|
-
<h3 class="timeline-header">
|
|
179
|
-
<a href="#">Mr. Doe</a> shared a video
|
|
180
|
-
</h3>
|
|
181
|
-
|
|
182
|
-
<div class="timeline-body">
|
|
183
|
-
<div class="ratio ratio-16x9">
|
|
184
|
-
<iframe
|
|
185
|
-
src="https://www.youtube.com/embed/tMWkeBIohBs"
|
|
186
|
-
allowfullscreen></iframe>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="timeline-footer">
|
|
190
|
-
<a href="#" class="btn btn-sm text-bg-warning">
|
|
191
|
-
See comments
|
|
192
|
-
</a>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
|
-
<!-- END timeline item -->
|
|
197
|
-
<div>
|
|
198
|
-
<i
|
|
199
|
-
class="timeline-icon bi bi-clock-fill text-bg-secondary"
|
|
200
|
-
>
|
|
201
|
-
</i>
|
|
202
|
-
</div>
|
|
203
|
-
</div>
|
|
204
|
-
</div>
|
|
205
|
-
<!-- /.col -->
|
|
206
|
-
</div>
|
|
207
|
-
<!-- /.row -->
|
|
208
|
-
</div>
|
|
209
|
-
<!--end::Container-->
|
|
210
|
-
</div>
|
|
211
|
-
<!--end::App Content-->
|
|
212
|
-
</main>
|
|
213
|
-
<!--end::App Main-->
|
|
214
|
-
<Footer />
|
|
215
|
-
</div>
|
|
216
|
-
<!--end::App Wrapper-->
|
|
217
|
-
<!--begin::Script-->
|
|
218
|
-
<Scripts path={path} />
|
|
219
|
-
<!--end::Script-->
|
|
220
|
-
</body><!--end::Body-->
|
|
221
|
-
</html>
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Head from "@components/_head.astro";
|
|
3
|
-
import Footer from "@components/dashboard/_footer.astro";
|
|
4
|
-
import Topbar from "@components/dashboard/_topbar.astro";
|
|
5
|
-
import BrowserSupport from "@components/docs/browser-support.mdx";
|
|
6
|
-
import Sidenav from "@components/dashboard/_sidenav.astro";
|
|
7
|
-
import Scripts from "@components/_scripts.astro";
|
|
8
|
-
|
|
9
|
-
const title = "Browser Support | AdminLTE 4";
|
|
10
|
-
const path = "../../../dist";
|
|
11
|
-
const mainPage = "docs";
|
|
12
|
-
const page = "browser-support";
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
<!DOCTYPE html>
|
|
16
|
-
<html lang="en">
|
|
17
|
-
<!--begin::Head-->
|
|
18
|
-
<head>
|
|
19
|
-
<Head title={title} path={path} />
|
|
20
|
-
</head>
|
|
21
|
-
<!--end::Head-->
|
|
22
|
-
<!--begin::Body-->
|
|
23
|
-
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
24
|
-
<!--begin::App Wrapper-->
|
|
25
|
-
<div class="app-wrapper">
|
|
26
|
-
<Topbar path={path} />
|
|
27
|
-
<Sidenav path={path} mainPage={mainPage} page={page} />
|
|
28
|
-
<!--begin::App Main-->
|
|
29
|
-
<main class="app-main">
|
|
30
|
-
<!--begin::App Content Header-->
|
|
31
|
-
<div class="app-content-header">
|
|
32
|
-
<!--begin::Container-->
|
|
33
|
-
<div class="container-fluid">
|
|
34
|
-
<!--begin::Row-->
|
|
35
|
-
<div class="row">
|
|
36
|
-
<div class="col-sm-6">
|
|
37
|
-
<h3 class="mb-0">Browser Support</h3>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="col-sm-6">
|
|
40
|
-
<ol class="breadcrumb float-sm-end">
|
|
41
|
-
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
|
42
|
-
<li class="breadcrumb-item active" aria-current="page">
|
|
43
|
-
Browser Support
|
|
44
|
-
</li>
|
|
45
|
-
</ol>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<!--end::Row-->
|
|
49
|
-
</div>
|
|
50
|
-
<!--end::Container-->
|
|
51
|
-
</div>
|
|
52
|
-
<!--end::App Content Header-->
|
|
53
|
-
<!--begin::App Content-->
|
|
54
|
-
<div class="app-content">
|
|
55
|
-
<!--begin::Container-->
|
|
56
|
-
<div class="container-fluid">
|
|
57
|
-
<BrowserSupport />
|
|
58
|
-
</div>
|
|
59
|
-
<!--end::Container-->
|
|
60
|
-
</div>
|
|
61
|
-
<!--end::App Content-->
|
|
62
|
-
</main>
|
|
63
|
-
<!--end::App Main-->
|
|
64
|
-
<Footer />
|
|
65
|
-
</div>
|
|
66
|
-
<!--end::App Wrapper-->
|
|
67
|
-
<!--begin::Script-->
|
|
68
|
-
<Scripts path={path} />
|
|
69
|
-
<!--end::Script-->
|
|
70
|
-
</body><!--end::Body-->
|
|
71
|
-
</html>
|
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Head from "@components/_head.astro";
|
|
3
|
-
import Footer from "@components/dashboard/_footer.astro";
|
|
4
|
-
import Topbar from "@components/dashboard/_topbar.astro";
|
|
5
|
-
import Sidenav from "@components/dashboard/_sidenav.astro";
|
|
6
|
-
import Scripts from "@components/_scripts.astro";
|
|
7
|
-
import ColorMode from "@components/docs/color-mode.mdx";
|
|
8
|
-
|
|
9
|
-
const title = "Color Mode | AdminLTE 4";
|
|
10
|
-
const path = "../../../dist";
|
|
11
|
-
const mainPage = "docs";
|
|
12
|
-
const page = "color-mode";
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
<!DOCTYPE html>
|
|
16
|
-
<html lang="en">
|
|
17
|
-
<!--begin::Head-->
|
|
18
|
-
<head>
|
|
19
|
-
<Head title={title} path={path} />
|
|
20
|
-
</head>
|
|
21
|
-
<!--end::Head-->
|
|
22
|
-
<!--begin::Body-->
|
|
23
|
-
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
24
|
-
<!--begin::App Wrapper-->
|
|
25
|
-
<div class="app-wrapper">
|
|
26
|
-
<Topbar path={path} />
|
|
27
|
-
<Sidenav path={path} mainPage={mainPage} page={page} />
|
|
28
|
-
<!--begin::App Main-->
|
|
29
|
-
<main class="app-main">
|
|
30
|
-
<!--begin::App Content Header-->
|
|
31
|
-
<div class="app-content-header">
|
|
32
|
-
<!--begin::Container-->
|
|
33
|
-
<div class="container-fluid">
|
|
34
|
-
<!--begin::Row-->
|
|
35
|
-
<div class="row">
|
|
36
|
-
<div class="col-sm-6">
|
|
37
|
-
<h3 class="mb-0">Color Mode Toggle</h3>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="col-sm-6">
|
|
40
|
-
<ol class="breadcrumb float-sm-end">
|
|
41
|
-
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
|
42
|
-
<li class="breadcrumb-item active" aria-current="page">
|
|
43
|
-
Color Mode
|
|
44
|
-
</li>
|
|
45
|
-
</ol>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<!--end::Row-->
|
|
49
|
-
</div>
|
|
50
|
-
<!--end::Container-->
|
|
51
|
-
</div>
|
|
52
|
-
<!--end::App Content Header-->
|
|
53
|
-
<!--begin::App Content-->
|
|
54
|
-
<div class="app-content">
|
|
55
|
-
<!--begin::Container-->
|
|
56
|
-
<div class="container-fluid">
|
|
57
|
-
<!--begin::Row-->
|
|
58
|
-
<div class="row g-4">
|
|
59
|
-
<div class="col-12">
|
|
60
|
-
<div class="callout callout-info">
|
|
61
|
-
<h5 class="fw-bold">Tips</h5>
|
|
62
|
-
<p>
|
|
63
|
-
<a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
|
|
64
|
-
Color modes in Bootstrap
|
|
65
|
-
</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.
|
|
66
|
-
|
|
67
|
-
</p>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
<!-- Start column -->
|
|
71
|
-
<div class="col-12">
|
|
72
|
-
<!--begin::Header-->
|
|
73
|
-
<nav class="navbar navbar-expand bg-body">
|
|
74
|
-
<!--begin::Container-->
|
|
75
|
-
<div class="container-fluid">
|
|
76
|
-
<!--begin::Start Navbar links-->
|
|
77
|
-
<ul class="navbar-nav">
|
|
78
|
-
<li class="nav-item">
|
|
79
|
-
<a
|
|
80
|
-
class="nav-link"
|
|
81
|
-
data-lte-toggle="sidebar"
|
|
82
|
-
href="#"
|
|
83
|
-
role="button"><i class="bi bi-list"></i></a
|
|
84
|
-
>
|
|
85
|
-
</li>
|
|
86
|
-
<li class="nav-item d-none d-md-block">
|
|
87
|
-
<a href="#" class="nav-link">Home</a>
|
|
88
|
-
</li>
|
|
89
|
-
<li class="nav-item d-none d-md-block">
|
|
90
|
-
<a href="#" class="nav-link">Contact</a>
|
|
91
|
-
</li>
|
|
92
|
-
</ul>
|
|
93
|
-
<!--end::Start Navbar links-->
|
|
94
|
-
<!--begin::End Navbar links-->
|
|
95
|
-
<ul class="navbar-nav ms-auto">
|
|
96
|
-
<li class="nav-item dropdown">
|
|
97
|
-
<button
|
|
98
|
-
class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
|
|
99
|
-
id="bd-theme"
|
|
100
|
-
type="button"
|
|
101
|
-
aria-expanded="false"
|
|
102
|
-
data-bs-toggle="dropdown"
|
|
103
|
-
data-bs-display="static"
|
|
104
|
-
>
|
|
105
|
-
<span class="theme-icon-active">
|
|
106
|
-
<i class="my-1"></i>
|
|
107
|
-
</span>
|
|
108
|
-
<span class="d-lg-none ms-2" id="bd-theme-text"
|
|
109
|
-
>Toggle theme</span
|
|
110
|
-
>
|
|
111
|
-
</button>
|
|
112
|
-
<ul
|
|
113
|
-
class="dropdown-menu dropdown-menu-end"
|
|
114
|
-
aria-labelledby="bd-theme-text"
|
|
115
|
-
style="--bs-dropdown-min-width: 8rem;"
|
|
116
|
-
>
|
|
117
|
-
<li>
|
|
118
|
-
<button
|
|
119
|
-
type="button"
|
|
120
|
-
class="dropdown-item d-flex align-items-center active"
|
|
121
|
-
data-bs-theme-value="light"
|
|
122
|
-
aria-pressed="false"
|
|
123
|
-
>
|
|
124
|
-
<i class="bi bi-sun-fill me-2"></i>
|
|
125
|
-
Light
|
|
126
|
-
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
127
|
-
</button>
|
|
128
|
-
</li>
|
|
129
|
-
<li>
|
|
130
|
-
<button
|
|
131
|
-
type="button"
|
|
132
|
-
class="dropdown-item d-flex align-items-center"
|
|
133
|
-
data-bs-theme-value="dark"
|
|
134
|
-
aria-pressed="false"
|
|
135
|
-
>
|
|
136
|
-
<i class="bi bi-moon-fill me-2"></i>
|
|
137
|
-
Dark
|
|
138
|
-
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
139
|
-
</button>
|
|
140
|
-
</li>
|
|
141
|
-
<li>
|
|
142
|
-
<button
|
|
143
|
-
type="button"
|
|
144
|
-
class="dropdown-item d-flex align-items-center"
|
|
145
|
-
data-bs-theme-value="auto"
|
|
146
|
-
aria-pressed="true"
|
|
147
|
-
>
|
|
148
|
-
<i class="bi bi-circle-fill-half-stroke me-2"
|
|
149
|
-
></i>
|
|
150
|
-
Auto
|
|
151
|
-
<i class="bi bi-check-lg ms-auto d-none"></i>
|
|
152
|
-
</button>
|
|
153
|
-
</li>
|
|
154
|
-
</ul>
|
|
155
|
-
</li>
|
|
156
|
-
</ul>
|
|
157
|
-
<!--end::End Navbar links-->
|
|
158
|
-
</div>
|
|
159
|
-
<!--end::Container-->
|
|
160
|
-
</nav>
|
|
161
|
-
<!--end::Header-->
|
|
162
|
-
</div>
|
|
163
|
-
<!-- Start column -->
|
|
164
|
-
<div class="col-12">
|
|
165
|
-
<ColorMode />
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
<!--end::Row-->
|
|
169
|
-
</div>
|
|
170
|
-
<!--end::Container-->
|
|
171
|
-
</div>
|
|
172
|
-
<!--end::App Content-->
|
|
173
|
-
</main>
|
|
174
|
-
<!--end::App Main-->
|
|
175
|
-
<Footer />
|
|
176
|
-
</div>
|
|
177
|
-
<!--end::App Wrapper-->
|
|
178
|
-
|
|
179
|
-
<Scripts path={path} />
|
|
180
|
-
|
|
181
|
-
<script is:inline>
|
|
182
|
-
// Color Mode Toggler
|
|
183
|
-
(() => {
|
|
184
|
-
"use strict";
|
|
185
|
-
|
|
186
|
-
const storedTheme = localStorage.getItem("theme");
|
|
187
|
-
|
|
188
|
-
const getPreferredTheme = () => {
|
|
189
|
-
if (storedTheme) {
|
|
190
|
-
return storedTheme;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
194
|
-
? "dark"
|
|
195
|
-
: "light";
|
|
196
|
-
};
|
|
197
|
-
|
|
198
|
-
const setTheme = function (theme) {
|
|
199
|
-
if (
|
|
200
|
-
theme === "auto" &&
|
|
201
|
-
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
202
|
-
) {
|
|
203
|
-
document.documentElement.setAttribute("data-bs-theme", "dark");
|
|
204
|
-
} else {
|
|
205
|
-
document.documentElement.setAttribute("data-bs-theme", theme);
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
setTheme(getPreferredTheme());
|
|
210
|
-
|
|
211
|
-
const showActiveTheme = (theme, focus = false) => {
|
|
212
|
-
const themeSwitcher = document.querySelector("#bd-theme");
|
|
213
|
-
|
|
214
|
-
if (!themeSwitcher) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
const themeSwitcherText = document.querySelector("#bd-theme-text");
|
|
219
|
-
const activeThemeIcon = document.querySelector(
|
|
220
|
-
".theme-icon-active i"
|
|
221
|
-
);
|
|
222
|
-
const btnToActive = document.querySelector(
|
|
223
|
-
`[data-bs-theme-value="${theme}"]`
|
|
224
|
-
);
|
|
225
|
-
const svgOfActiveBtn = btnToActive
|
|
226
|
-
.querySelector("i")
|
|
227
|
-
.getAttribute("class");
|
|
228
|
-
|
|
229
|
-
for (const element of document.querySelectorAll(
|
|
230
|
-
"[data-bs-theme-value]"
|
|
231
|
-
)) {
|
|
232
|
-
element.classList.remove("active");
|
|
233
|
-
element.setAttribute("aria-pressed", "false");
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
btnToActive.classList.add("active");
|
|
237
|
-
btnToActive.setAttribute("aria-pressed", "true");
|
|
238
|
-
activeThemeIcon.setAttribute("class", svgOfActiveBtn);
|
|
239
|
-
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
|
240
|
-
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
|
|
241
|
-
|
|
242
|
-
if (focus) {
|
|
243
|
-
themeSwitcher.focus();
|
|
244
|
-
}
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
window
|
|
248
|
-
.matchMedia("(prefers-color-scheme: dark)")
|
|
249
|
-
.addEventListener("change", () => {
|
|
250
|
-
if (storedTheme !== "light" || storedTheme !== "dark") {
|
|
251
|
-
setTheme(getPreferredTheme());
|
|
252
|
-
}
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
window.addEventListener("DOMContentLoaded", () => {
|
|
256
|
-
showActiveTheme(getPreferredTheme());
|
|
257
|
-
|
|
258
|
-
for (const toggle of document.querySelectorAll(
|
|
259
|
-
"[data-bs-theme-value]"
|
|
260
|
-
)) {
|
|
261
|
-
toggle.addEventListener("click", () => {
|
|
262
|
-
const theme = toggle.getAttribute("data-bs-theme-value");
|
|
263
|
-
localStorage.setItem("theme", theme);
|
|
264
|
-
setTheme(theme);
|
|
265
|
-
showActiveTheme(theme, true);
|
|
266
|
-
});
|
|
267
|
-
}
|
|
268
|
-
});
|
|
269
|
-
})();
|
|
270
|
-
</script>
|
|
271
|
-
<!--end::Script-->
|
|
272
|
-
</body><!--end::Body-->
|
|
273
|
-
</html>
|