admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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.
Files changed (142) hide show
  1. package/.bundlewatch.config.json +6 -6
  2. package/.cache/.eslintcache +1 -1
  3. package/.cache/.stylelintcache +1 -1
  4. package/.gitpod.yml +1 -1
  5. package/README.md +9 -4
  6. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  7. package/dist/css/adminlte.css +879 -418
  8. package/dist/css/adminlte.css.map +1 -1
  9. package/dist/css/adminlte.min.css +2 -2
  10. package/dist/css/adminlte.min.css.map +1 -1
  11. package/dist/css/adminlte.rtl.css +886 -416
  12. package/dist/css/adminlte.rtl.css.map +1 -1
  13. package/dist/css/adminlte.rtl.min.css +2 -2
  14. package/dist/css/adminlte.rtl.min.css.map +1 -1
  15. package/dist/js/adminlte.js +178 -96
  16. package/dist/js/adminlte.js.map +1 -1
  17. package/dist/js/adminlte.min.js +3 -3
  18. package/dist/js/adminlte.min.js.map +1 -1
  19. package/dist/pages/UI/general.html +895 -0
  20. package/dist/pages/UI/timeline.html +309 -515
  21. package/dist/pages/docs/browser-support.html +265 -433
  22. package/dist/pages/docs/color-mode.html +482 -615
  23. package/dist/pages/docs/components/main-header.html +516 -703
  24. package/dist/pages/docs/components/main-sidebar.html +550 -0
  25. package/dist/pages/docs/faq.html +433 -0
  26. package/dist/pages/docs/how-to-contribute.html +474 -0
  27. package/dist/pages/docs/introduction.html +463 -0
  28. package/dist/pages/docs/javascript/treeview.html +453 -0
  29. package/dist/pages/docs/layout.html +293 -433
  30. package/dist/pages/docs/license.html +436 -0
  31. package/dist/pages/examples/lockscreen.html +69 -0
  32. package/dist/pages/examples/login-v2.html +88 -0
  33. package/dist/pages/examples/login.html +49 -100
  34. package/dist/pages/examples/register-v2.html +90 -0
  35. package/dist/pages/examples/register.html +50 -103
  36. package/dist/pages/forms/general.html +430 -454
  37. package/dist/pages/index.html +466 -740
  38. package/dist/pages/index2.html +672 -1041
  39. package/dist/pages/index3.html +371 -629
  40. package/dist/pages/layout/collapsed-sidebar.html +441 -0
  41. package/dist/pages/layout/fixed-complete.html +541 -0
  42. package/dist/pages/layout/fixed-sidebar.html +263 -446
  43. package/dist/pages/layout/layout-rtl.html +263 -445
  44. package/dist/pages/layout/logo-switch.html +234 -0
  45. package/dist/pages/layout/sidebar-mini.html +263 -445
  46. package/dist/pages/layout/unfixed-sidebar.html +263 -445
  47. package/dist/pages/tables/simple.html +314 -499
  48. package/dist/pages/widgets/cards.html +326 -629
  49. package/dist/pages/widgets/info-box.html +348 -674
  50. package/dist/pages/widgets/small-box.html +279 -465
  51. package/index.html +6 -10
  52. package/package.json +34 -30
  53. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  54. package/src/config/astro.config.mjs +3 -1
  55. package/src/html/.prettierrc.js +11 -0
  56. package/src/html/components/_head.astro +32 -26
  57. package/src/html/components/_scripts.astro +27 -28
  58. package/src/html/components/dashboard/_footer.astro +14 -8
  59. package/src/html/components/dashboard/_sidenav.astro +352 -113
  60. package/src/html/components/dashboard/_topbar.astro +99 -50
  61. package/src/html/components/docs/{browser-support/index.md → browser-support.mdx} +2 -1
  62. package/src/html/components/docs/color-mode.mdx +169 -0
  63. package/src/html/components/docs/components/{main-header-1.md → main-header.mdx} +60 -21
  64. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  65. package/src/html/components/docs/faq.mdx +11 -0
  66. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  67. package/src/html/components/docs/{introduction/index.md → introduction.mdx} +30 -5
  68. package/src/html/components/docs/license.mdx +9 -0
  69. package/src/html/components/javascript/treeview.mdx +39 -0
  70. package/src/html/pages/UI/general.astro +1451 -0
  71. package/src/html/pages/UI/timeline.astro +111 -48
  72. package/src/html/pages/docs/browser-support.astro +24 -11
  73. package/src/html/pages/docs/color-mode.astro +91 -42
  74. package/src/html/pages/docs/components/main-header.astro +134 -46
  75. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  76. package/src/html/pages/docs/faq.astro +71 -0
  77. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  78. package/src/html/pages/docs/{index.astro → introduction.astro} +24 -11
  79. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  80. package/src/html/pages/docs/layout.astro +62 -19
  81. package/src/html/pages/docs/license.astro +71 -0
  82. package/src/html/pages/examples/lockscreen.astro +63 -0
  83. package/src/html/pages/examples/login-v2.astro +109 -0
  84. package/src/html/pages/examples/login.astro +34 -16
  85. package/src/html/pages/examples/register-v2.astro +116 -0
  86. package/src/html/pages/examples/register.astro +36 -18
  87. package/src/html/pages/forms/general.astro +568 -37
  88. package/src/html/pages/index.astro +403 -157
  89. package/src/html/pages/index2.astro +715 -255
  90. package/src/html/pages/index3.astro +298 -197
  91. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  92. package/src/html/pages/layout/fixed-complete.astro +209 -0
  93. package/src/html/pages/layout/fixed-sidebar.astro +52 -27
  94. package/src/html/pages/layout/layout-rtl.astro +53 -28
  95. package/src/html/pages/layout/logo-switch.astro +212 -0
  96. package/src/html/pages/layout/sidebar-mini.astro +53 -28
  97. package/src/html/pages/layout/unfixed-sidebar.astro +51 -27
  98. package/src/html/pages/tables/simple.astro +226 -86
  99. package/src/html/pages/widgets/cards.astro +137 -72
  100. package/src/html/pages/widgets/info-box.astro +96 -41
  101. package/src/html/pages/widgets/small-box.astro +93 -32
  102. package/src/scss/_app-content.scss +52 -0
  103. package/src/scss/_app-footer.scss +1 -1
  104. package/src/scss/_app-main.scss +6 -5
  105. package/src/scss/_app-sidebar.scss +244 -70
  106. package/src/scss/_bootstrap-variables.scss +26 -22
  107. package/src/scss/_callouts.scss +6 -0
  108. package/src/scss/_cards.scss +32 -7
  109. package/src/scss/_compact-mode.scss +79 -0
  110. package/src/scss/_direct-chat.scss +5 -0
  111. package/src/scss/_dropdown.scss +1 -0
  112. package/src/scss/_info-box.scss +2 -10
  113. package/src/scss/_small-box.scss +0 -3
  114. package/src/scss/_timeline.scss +1 -0
  115. package/src/scss/_toasts.scss +33 -0
  116. package/src/scss/_variables.scss +32 -9
  117. package/src/scss/adminlte.scss +1 -2
  118. package/src/scss/mixins/_animations.scss +0 -5
  119. package/src/scss/pages/_lockscreen.scss +75 -0
  120. package/src/scss/pages/_login_and_register.scss +1 -3
  121. package/src/scss/parts/_core.scss +2 -0
  122. package/src/scss/parts/_extra-components.scss +1 -0
  123. package/src/scss/parts/_pages.scss +1 -0
  124. package/src/ts/adminlte.ts +3 -1
  125. package/src/ts/card-widget.ts +20 -52
  126. package/src/ts/direct-chat.ts +5 -4
  127. package/src/ts/fullscreen.ts +110 -0
  128. package/src/ts/layout.ts +5 -4
  129. package/src/ts/push-menu.ts +6 -22
  130. package/src/ts/treeview.ts +34 -11
  131. package/src/ts/util/index.ts +15 -13
  132. package/src/utils/index.js +20 -3
  133. package/.idea/AdminLTE.iml +0 -12
  134. package/.idea/codeStyles/Project.xml +0 -29
  135. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  136. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  137. package/.idea/modules.xml +0 -8
  138. package/.idea/php.xml +0 -28
  139. package/.idea/vcs.xml +0 -6
  140. package/dist/pages/docs.html +0 -617
  141. package/src/html/components/docs/color-mode/navbar-html.md +0 -80
  142. package/src/html/components/docs/color-mode/toggle-script.md +0 -48
package/src/html/pages/widgets/info-box.astro CHANGED
@@ -1,28 +1,36 @@
1
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 | Widgets - Info Box'
9
- const path = '../../../dist'
10
- const mainPage = 'widgets'
11
- const page = 'info-box'
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 | Widgets - Info Box";
9
+ const path = "../../../dist";
10
+ const mainPage = "widgets";
11
+ const page = "info-box";
12
12
  ---
13
+
13
14
  <!DOCTYPE html>
14
15
  <html lang="en">
16
+ <!--begin::Head-->
15
17
  <head>
16
18
  <Head title={title} path={path} />
17
19
  </head>
20
+ <!--end::Head-->
21
+ <!--begin::Body-->
18
22
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
+ <!--begin::App Wrapper-->
19
24
  <div class="app-wrapper">
20
25
  <Topbar path={path} />
21
26
  <Sidenav path={path} mainPage={mainPage} page={page} />
22
- <!-- Main content -->
27
+ <!--begin::App Main-->
23
28
  <main class="app-main">
29
+ <!--begin::App Content Header-->
24
30
  <div class="app-content-header">
31
+ <!--begin::Container-->
25
32
  <div class="container-fluid">
33
+ <!--begin::Row-->
26
34
  <div class="row">
27
35
  <div class="col-sm-6">
28
36
  <h3 class="mb-0">Info Box</h3>
@@ -30,20 +38,29 @@ const page = 'info-box'
30
38
  <div class="col-sm-6">
31
39
  <ol class="breadcrumb float-sm-end">
32
40
  <li class="breadcrumb-item"><a href="#">Home</a></li>
33
- <li class="breadcrumb-item active" aria-current="page">Info Box</li>
41
+ <li class="breadcrumb-item active" aria-current="page">
42
+ Info Box
43
+ </li>
34
44
  </ol>
35
45
  </div>
36
46
  </div>
47
+ <!--end::Row-->
37
48
  </div>
49
+ <!--end::Container-->
38
50
  </div>
39
- <!-- Main content -->
51
+ <!--end::App Content Header-->
52
+ <!--begin::App Content-->
40
53
  <div class="app-content">
54
+ <!--begin::Container-->
41
55
  <div class="container-fluid">
42
56
  <h5 class="mb-2">Info Box</h5>
57
+ <!--begin::Row-->
43
58
  <div class="row">
44
59
  <div class="col-12 col-sm-6 col-md-3">
45
60
  <div class="info-box">
46
- <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
61
+ <span class="info-box-icon text-bg-primary shadow-sm">
62
+ <i class="bi bi-gear-fill"></i>
63
+ </span>
47
64
 
48
65
  <div class="info-box-content">
49
66
  <span class="info-box-text">CPU Traffic</span>
@@ -60,7 +77,9 @@ const page = 'info-box'
60
77
 
61
78
  <div class="col-12 col-sm-6 col-md-3">
62
79
  <div class="info-box">
63
- <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
80
+ <span class="info-box-icon text-bg-success shadow-sm">
81
+ <i class="bi bi-cart-fill"></i>
82
+ </span>
64
83
 
65
84
  <div class="info-box-content">
66
85
  <span class="info-box-text">Sales</span>
@@ -77,7 +96,9 @@ const page = 'info-box'
77
96
 
78
97
  <div class="col-12 col-sm-6 col-md-3">
79
98
  <div class="info-box">
80
- <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
99
+ <span class="info-box-icon text-bg-warning shadow-sm">
100
+ <i class="bi bi-people-fill"></i>
101
+ </span>
81
102
 
82
103
  <div class="info-box-content">
83
104
  <span class="info-box-text">New Members</span>
@@ -91,7 +112,9 @@ const page = 'info-box'
91
112
 
92
113
  <div class="col-12 col-sm-6 col-md-3">
93
114
  <div class="info-box">
94
- <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
115
+ <span class="info-box-icon text-bg-danger shadow-sm">
116
+ <i class="bi bi-hand-thumbs-up-fill"></i>
117
+ </span>
95
118
 
96
119
  <div class="info-box-content">
97
120
  <span class="info-box-text">Likes</span>
@@ -103,14 +126,21 @@ const page = 'info-box'
103
126
  </div>
104
127
  <!-- /.col -->
105
128
  </div>
106
- <!-- /.row -->
129
+ <!--end::Row-->
107
130
 
108
131
  <!-- =========================================================== -->
109
- <h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
132
+ <h5 class="mb-2">
133
+ Info Box With Custom Shadows <small>
134
+ <i>Using Bootstrap's Shadow Utility</i>
135
+ </small>
136
+ </h5>
137
+ <!--begin::Row-->
110
138
  <div class="row">
111
139
  <div class="col-12 col-sm-6 col-md-3">
112
140
  <div class="info-box shadow-none">
113
- <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
141
+ <span class="info-box-icon text-bg-primary shadow-sm">
142
+ <i class="bi bi-gear-fill"></i>
143
+ </span>
114
144
 
115
145
  <div class="info-box-content">
116
146
  <span class="info-box-text">CPU Traffic</span>
@@ -127,7 +157,9 @@ const page = 'info-box'
127
157
 
128
158
  <div class="col-12 col-sm-6 col-md-3">
129
159
  <div class="info-box shadow-sm">
130
- <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
160
+ <span class="info-box-icon text-bg-success shadow-sm">
161
+ <i class="bi bi-cart-fill"></i>
162
+ </span>
131
163
 
132
164
  <div class="info-box-content">
133
165
  <span class="info-box-text">Sales</span>
@@ -144,7 +176,9 @@ const page = 'info-box'
144
176
 
145
177
  <div class="col-12 col-sm-6 col-md-3">
146
178
  <div class="info-box shadow">
147
- <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
179
+ <span class="info-box-icon text-bg-warning shadow-sm">
180
+ <i class="bi bi-people-fill"></i>
181
+ </span>
148
182
 
149
183
  <div class="info-box-content">
150
184
  <span class="info-box-text">New Members</span>
@@ -158,7 +192,9 @@ const page = 'info-box'
158
192
 
159
193
  <div class="col-12 col-sm-6 col-md-3">
160
194
  <div class="info-box shadow-lg">
161
- <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
195
+ <span class="info-box-icon text-bg-danger shadow-sm">
196
+ <i class="bi bi-hand-thumbs-up-fill"></i>
197
+ </span>
162
198
 
163
199
  <div class="info-box-content">
164
200
  <span class="info-box-text">Likes</span>
@@ -170,14 +206,17 @@ const page = 'info-box'
170
206
  </div>
171
207
  <!-- /.col -->
172
208
  </div>
173
- <!-- /.row -->
209
+ <!--end::Row-->
174
210
 
175
211
  <!-- =========================================================== -->
176
212
  <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
213
+ <!--begin::Row-->
177
214
  <div class="row">
178
215
  <div class="col-md-3 col-sm-6 col-12">
179
216
  <div class="info-box text-bg-primary">
180
- <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
217
+ <span class="info-box-icon">
218
+ <i class="bi bi-bookmark-fill"></i>
219
+ </span>
181
220
 
182
221
  <div class="info-box-content">
183
222
  <span class="info-box-text">Bookmarks</span>
@@ -197,7 +236,9 @@ const page = 'info-box'
197
236
  <!-- /.col -->
198
237
  <div class="col-md-3 col-sm-6 col-12">
199
238
  <div class="info-box text-bg-success">
200
- <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
239
+ <span class="info-box-icon">
240
+ <i class="bi bi-hand-thumbs-up"></i>
241
+ </span>
201
242
 
202
243
  <div class="info-box-content">
203
244
  <span class="info-box-text">Likes</span>
@@ -217,7 +258,9 @@ const page = 'info-box'
217
258
  <!-- /.col -->
218
259
  <div class="col-md-3 col-sm-6 col-12">
219
260
  <div class="info-box text-bg-warning">
220
- <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
261
+ <span class="info-box-icon">
262
+ <i class="bi bi-calendar3"></i>
263
+ </span>
221
264
 
222
265
  <div class="info-box-content">
223
266
  <span class="info-box-text">Events</span>
@@ -237,7 +280,9 @@ const page = 'info-box'
237
280
  <!-- /.col -->
238
281
  <div class="col-md-3 col-sm-6 col-12">
239
282
  <div class="info-box text-bg-danger">
240
- <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
283
+ <span class="info-box-icon">
284
+ <i class="bi bi-chat-text-fill"></i>
285
+ </span>
241
286
 
242
287
  <div class="info-box-content">
243
288
  <span class="info-box-text">Comments</span>
@@ -256,14 +301,17 @@ const page = 'info-box'
256
301
  </div>
257
302
  <!-- /.col -->
258
303
  </div>
259
- <!-- /.row -->
304
+ <!--end::Row-->
260
305
 
261
306
  <!-- =========================================================== -->
262
307
  <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
308
+ <!--begin::Row-->
263
309
  <div class="row">
264
310
  <div class="col-md-3 col-sm-6 col-12">
265
311
  <div class="info-box text-bg-primary bg-gradient">
266
- <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
312
+ <span class="info-box-icon">
313
+ <i class="bi bi-bookmark-fill"></i>
314
+ </span>
267
315
 
268
316
  <div class="info-box-content">
269
317
  <span class="info-box-text">Bookmarks</span>
@@ -283,7 +331,9 @@ const page = 'info-box'
283
331
  <!-- /.col -->
284
332
  <div class="col-md-3 col-sm-6 col-12">
285
333
  <div class="info-box text-bg-success bg-gradient">
286
- <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
334
+ <span class="info-box-icon">
335
+ <i class="bi bi-hand-thumbs-up"></i>
336
+ </span>
287
337
 
288
338
  <div class="info-box-content">
289
339
  <span class="info-box-text">Likes</span>
@@ -303,7 +353,9 @@ const page = 'info-box'
303
353
  <!-- /.col -->
304
354
  <div class="col-md-3 col-sm-6 col-12">
305
355
  <div class="info-box text-bg-warning bg-gradient">
306
- <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
356
+ <span class="info-box-icon">
357
+ <i class="bi bi-calendar3"></i>
358
+ </span>
307
359
 
308
360
  <div class="info-box-content">
309
361
  <span class="info-box-text">Events</span>
@@ -323,7 +375,9 @@ const page = 'info-box'
323
375
  <!-- /.col -->
324
376
  <div class="col-md-3 col-sm-6 col-12">
325
377
  <div class="info-box text-bg-danger bg-gradient">
326
- <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
378
+ <span class="info-box-icon">
379
+ <i class="bi bi-chat-text-fill"></i>
380
+ </span>
327
381
 
328
382
  <div class="info-box-content">
329
383
  <span class="info-box-text">Comments</span>
@@ -342,17 +396,18 @@ const page = 'info-box'
342
396
  </div>
343
397
  <!-- /.col -->
344
398
  </div>
345
- <!-- /.row -->
346
- </div><!-- /.container-fluid -->
399
+ <!--end::Row-->
400
+ </div>
401
+ <!--end::Container-->
347
402
  </div>
348
- <!-- /.content -->
403
+ <!--end::App Content-->
349
404
  </main>
350
- <!-- /.app-content -->
351
-
405
+ <!--end::App Main-->
352
406
  <Footer />
353
407
  </div>
354
- <!-- ./app-wrapper -->
355
-
408
+ <!--end::App Wrapper-->
409
+ <!--begin::Script-->
356
410
  <Scripts path={path} />
357
- </body>
411
+ <!--end::Script-->
412
+ </body><!--end::Body-->
358
413
  </html>
package/src/html/pages/widgets/small-box.astro CHANGED
@@ -1,28 +1,36 @@
1
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';
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
7
 
8
- const title = 'AdminLTE 4 | Widgets - Small Box'
9
- const path = '../../../dist'
10
- const mainPage = 'widgets'
11
- const page = 'small-box'
8
+ const title = "AdminLTE 4 | Widgets - Small Box";
9
+ const path = "../../../dist";
10
+ const mainPage = "widgets";
11
+ const page = "small-box";
12
12
  ---
13
+
13
14
  <!DOCTYPE html>
14
15
  <html lang="en">
16
+ <!--begin::Head-->
15
17
  <head>
16
18
  <Head title={title} path={path} />
17
19
  </head>
20
+ <!--end::Head-->
21
+ <!--begin::Body-->
18
22
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
+ <!--begin::App Wrapper-->
19
24
  <div class="app-wrapper">
20
25
  <Topbar path={path} />
21
26
  <Sidenav path={path} mainPage={mainPage} page={page} />
22
- <!-- Main content -->
27
+ <!--begin::App Main-->
23
28
  <main class="app-main">
29
+ <!--begin::App Content Header-->
24
30
  <div class="app-content-header">
31
+ <!--begin::Container-->
25
32
  <div class="container-fluid">
33
+ <!--begin::Row-->
26
34
  <div class="row">
27
35
  <div class="col-sm-6">
28
36
  <h3 class="mb-0">Small Box</h3>
@@ -30,14 +38,20 @@ const page = 'small-box'
30
38
  <div class="col-sm-6">
31
39
  <ol class="breadcrumb float-sm-end">
32
40
  <li class="breadcrumb-item"><a href="#">Home</a></li>
33
- <li class="breadcrumb-item active" aria-current="page">Small Box</li>
41
+ <li class="breadcrumb-item active" aria-current="page">
42
+ Small Box
43
+ </li>
34
44
  </ol>
35
45
  </div>
36
46
  </div>
47
+ <!--end::Row-->
37
48
  </div>
49
+ <!--end::Container-->
38
50
  </div>
39
- <!-- Main content -->
51
+ <!--end::App Content Header-->
52
+ <!--begin::App Content-->
40
53
  <div class="app-content">
54
+ <!--begin::Container-->
41
55
  <div class="container-fluid">
42
56
  <!-- Small Box (Stat card) -->
43
57
  <h5 class="mb-2">Small Box</h5>
@@ -51,10 +65,20 @@ const page = 'small-box'
51
65
 
52
66
  <p>New Orders</p>
53
67
  </div>
54
- <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
55
- <path 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>
68
+ <svg
69
+ class="small-box-icon"
70
+ fill="currentColor"
71
+ viewBox="0 0 24 24"
72
+ xmlns="http://www.w3.org/2000/svg"
73
+ aria-hidden="true"
74
+ >
75
+ <path
76
+ 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"
77
+ ></path>
56
78
  </svg>
57
- <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
79
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
80
+ More info <i class="bi bi-link-45deg"></i>
81
+ </a>
58
82
  </div>
59
83
  </div>
60
84
  <!-- ./col -->
@@ -66,10 +90,20 @@ const page = 'small-box'
66
90
 
67
91
  <p>Bounce Rate</p>
68
92
  </div>
69
- <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
70
- <path 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>
93
+ <svg
94
+ class="small-box-icon"
95
+ fill="currentColor"
96
+ viewBox="0 0 24 24"
97
+ xmlns="http://www.w3.org/2000/svg"
98
+ aria-hidden="true"
99
+ >
100
+ <path
101
+ 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"
102
+ ></path>
71
103
  </svg>
72
- <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
104
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
105
+ More info <i class="bi bi-link-45deg"></i>
106
+ </a>
73
107
  </div>
74
108
  </div>
75
109
  <!-- ./col -->
@@ -81,10 +115,20 @@ const page = 'small-box'
81
115
 
82
116
  <p>User Registrations</p>
83
117
  </div>
84
- <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
85
- <path 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>
118
+ <svg
119
+ class="small-box-icon"
120
+ fill="currentColor"
121
+ viewBox="0 0 24 24"
122
+ xmlns="http://www.w3.org/2000/svg"
123
+ aria-hidden="true"
124
+ >
125
+ <path
126
+ 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"
127
+ ></path>
86
128
  </svg>
87
- <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
129
+ <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
130
+ More info <i class="bi bi-link-45deg"></i>
131
+ </a>
88
132
  </div>
89
133
  </div>
90
134
  <!-- ./col -->
@@ -96,26 +140,43 @@ const page = 'small-box'
96
140
 
97
141
  <p>Unique Visitors</p>
98
142
  </div>
99
- <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
100
- <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
101
- <path clip-rule="evenodd" fill-rule="evenodd" 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>
143
+ <svg
144
+ class="small-box-icon"
145
+ fill="currentColor"
146
+ viewBox="0 0 24 24"
147
+ xmlns="http://www.w3.org/2000/svg"
148
+ aria-hidden="true"
149
+ >
150
+ <path
151
+ clip-rule="evenodd"
152
+ fill-rule="evenodd"
153
+ d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
154
+ ></path>
155
+ <path
156
+ clip-rule="evenodd"
157
+ fill-rule="evenodd"
158
+ 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"
159
+ ></path>
102
160
  </svg>
103
- <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
161
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
162
+ More info <i class="bi bi-link-45deg"></i>
163
+ </a>
104
164
  </div>
105
165
  </div>
106
166
  <!-- ./col -->
107
167
  </div>
108
168
  <!-- /.row -->
109
- </div><!-- /.container-fluid -->
169
+ </div>
170
+ <!--end::Container-->
110
171
  </div>
111
- <!-- /.content -->
172
+ <!--end::App Content-->
112
173
  </main>
113
- <!-- /.app-content -->
114
-
174
+ <!--end::App Main-->
115
175
  <Footer />
116
176
  </div>
117
- <!-- ./app-wrapper -->
118
-
177
+ <!--end::App Wrapper-->
178
+ <!--begin::Script-->
119
179
  <Scripts path={path} />
120
- </body>
180
+ <!--end::Script-->
181
+ </body><!--end::Body-->
121
182
  </html>
package/src/scss/_app-content.scss ADDED
@@ -0,0 +1,52 @@
1
+ .app-content {
2
+ padding: $lte-content-padding-y $lte-content-padding-x;
3
+ }
4
+
5
+ .app-content-top-area,
6
+ .app-content-bottom-area{
7
+ display: flex;
8
+ align-items: center;
9
+ padding: $lte-content-padding-y $lte-content-padding-x;
10
+ overflow: auto;
11
+ background: $lte-app-footer-bg;
12
+
13
+ > .row {
14
+ display: contents;
15
+ }
16
+
17
+ &.app-content-top-area-sm,
18
+ &.app-content-bottom-area-sm{
19
+ min-height: $lte-app-content-bottom-area-height-sm;
20
+ }
21
+
22
+ &.app-content-top-area-md,
23
+ &.app-content-bottom-area-md{
24
+ min-height: $lte-app-content-bottom-area-height-md;
25
+ }
26
+ &.app-content-top-area-lg,
27
+ &.app-content-bottom-area-lg{
28
+ min-height: $lte-app-content-bottom-area-height-lg;
29
+ }
30
+ &.app-content-top-area-xl,
31
+ &.app-content-bottom-area-xl{
32
+ min-height: $lte-app-content-bottom-area-height-xl;
33
+ }
34
+ }
35
+
36
+ .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),
37
+ .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) {
38
+ padding-top: $grid-gutter-width * .625;
39
+ padding-bottom: $grid-gutter-width * .625;
40
+ }
41
+
42
+ .app-content-bottom-area {
43
+ border-top: $lte-app-footer-border-top;
44
+ }
45
+ .app-content-top-area {
46
+ border-bottom: $lte-app-footer-border-top;
47
+
48
+ + .app-main {
49
+ padding-top: $grid-gutter-width * .5;
50
+ }
51
+ }
52
+
package/src/scss/_app-footer.scss CHANGED
@@ -6,10 +6,10 @@
6
6
  grid-area: #{$lte-prefix}app-footer;
7
7
  width: inherit;
8
8
  max-width: 100vw;
9
+ min-height: 3rem;
9
10
  padding: $lte-app-footer-padding;
10
11
  color: $lte-app-footer-color;
11
12
  background-color: $lte-app-footer-bg;
12
13
  border-top: $lte-app-footer-border-top;
13
14
  @include transition($lte-transition-speed $lte-transition-fn);
14
15
  }
15
-
package/src/scss/_app-main.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  .app-main {
2
+ position: relative;
2
3
  grid-area: #{$lte-prefix}app-main;
3
4
  max-width: 100vw;
4
- padding-bottom: 1rem;
5
+ padding-bottom: $grid-gutter-width * .5;
5
6
  @include transition($lte-transition-speed $lte-transition-fn);
6
7
 
7
8
  .app-content-header {
@@ -11,10 +12,10 @@
11
12
  padding: 0;
12
13
  margin-bottom: 0;
13
14
  line-height: 2.5rem;
14
- }
15
- }
16
15
 
17
- .app-content {
18
- padding: $lte-content-padding-y $lte-content-padding-x;
16
+ a {
17
+ text-decoration: none;
18
+ }
19
+ }
19
20
  }
20
21
  }