admin-lte 4.3.1 → 4.4.1
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/CHANGELOG.md +19 -0
- package/README.md +1 -0
- package/dist/css/adminlte-colors.css +1261 -0
- package/dist/css/adminlte-colors.css.map +1 -0
- package/dist/css/adminlte-colors.min.css +15 -0
- package/dist/css/adminlte-colors.min.css.map +1 -0
- package/dist/css/adminlte-colors.rtl.css +1260 -0
- package/dist/css/adminlte-colors.rtl.css.map +1 -0
- package/dist/css/adminlte-colors.rtl.min.css +15 -0
- package/dist/css/adminlte-colors.rtl.min.css.map +1 -0
- package/dist/css/adminlte-docs.css +1 -1
- package/dist/css/adminlte-docs.css.map +1 -1
- package/dist/css/adminlte-docs.min.css +1 -1
- package/dist/css/adminlte-docs.min.css.map +1 -1
- package/dist/css/adminlte-docs.rtl.css +1 -1
- package/dist/css/adminlte-docs.rtl.css.map +1 -1
- package/dist/css/adminlte-docs.rtl.min.css +1 -1
- package/dist/css/adminlte-docs.rtl.min.css.map +1 -1
- package/dist/css/adminlte-select2.css +1 -1
- package/dist/css/adminlte-select2.css.map +1 -1
- package/dist/css/adminlte-select2.min.css +1 -1
- package/dist/css/adminlte-select2.min.css.map +1 -1
- package/dist/css/adminlte-select2.rtl.css +1 -1
- package/dist/css/adminlte-select2.rtl.css.map +1 -1
- package/dist/css/adminlte-select2.rtl.min.css +1 -1
- package/dist/css/adminlte-select2.rtl.min.css.map +1 -1
- package/dist/css/adminlte.css +122 -19
- 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 +122 -19
- 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.esm.js +1 -1
- package/dist/js/adminlte.esm.min.js +1 -1
- package/dist/js/adminlte.js +1 -1
- package/dist/js/adminlte.min.js +1 -1
- package/package.json +2 -1
- package/src/scss/_app-header.scss +49 -1
- package/src/scss/_app-sidebar.scss +10 -2
- package/src/scss/_mixins.scss +1 -0
- package/src/scss/_variables.scss +8 -0
- package/src/scss/adminlte-colors.scss +35 -0
- package/src/scss/adminlte-docs.scss +1 -1
- package/src/scss/adminlte-select2.scss +1 -1
- package/src/scss/adminlte.scss +1 -1
- package/src/scss/colors/_colors.scss +159 -0
- package/src/scss/colors/_variables.scss +85 -0
- package/src/scss/mixins/_search-field.scss +46 -0
- package/src/ts/adminlte.ts +1 -1
package/dist/js/adminlte.esm.js
CHANGED
package/dist/js/adminlte.js
CHANGED
package/dist/js/adminlte.min.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "admin-lte",
|
|
3
3
|
"description": "Responsive open source admin dashboard and control panel.",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.4.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": "Colorlib <https://colorlib.com>",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"test": "vitest run",
|
|
65
65
|
"test-watch": "vitest",
|
|
66
66
|
"test-a11y": "node tests/a11y.mjs",
|
|
67
|
+
"palette": "node scripts/palette.mjs",
|
|
67
68
|
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
|
|
68
69
|
"clean": "rimraf dist",
|
|
69
70
|
"compile": "npm-run-all css js assets copy-assets docs-compile docs-format flatten-build",
|
|
@@ -17,6 +17,55 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
// Navbar search: a quiet pill with the icon inside; the icon is the submit
|
|
21
|
+
// button. Widens a little while it has focus. Below `md` the demo shows an
|
|
22
|
+
// icon link to the search page instead (see the Topbar markup).
|
|
23
|
+
.navbar-search {
|
|
24
|
+
--#{$lte-prefix}search-field-width: #{$lte-search-field-width};
|
|
25
|
+
--#{$lte-prefix}search-field-focus-width: #{$lte-search-field-focus-width};
|
|
26
|
+
@include lte-search-field();
|
|
27
|
+
|
|
28
|
+
.navbar-search-field {
|
|
29
|
+
position: relative;
|
|
30
|
+
width: var(--#{$lte-prefix}search-field-width);
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
@include transition(width .2s ease-in-out);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:focus-within .navbar-search-field {
|
|
36
|
+
width: var(--#{$lte-prefix}search-field-focus-width);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.form-control {
|
|
40
|
+
padding-left: $lte-search-field-icon-space;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.navbar-search-submit {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 50%;
|
|
46
|
+
left: $lte-search-field-padding-x;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
padding: 0;
|
|
50
|
+
line-height: 1;
|
|
51
|
+
color: var(--#{$lte-prefix}search-field-icon-color);
|
|
52
|
+
background: transparent;
|
|
53
|
+
border: 0;
|
|
54
|
+
transform: translateY(-50%);
|
|
55
|
+
@include border-radius($border-radius-pill);
|
|
56
|
+
|
|
57
|
+
&:hover,
|
|
58
|
+
&:focus-visible {
|
|
59
|
+
color: var(--#{$lte-prefix}search-field-color);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:focus-visible {
|
|
63
|
+
outline: 2px solid var(--#{$prefix}focus-ring-color);
|
|
64
|
+
outline-offset: 2px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
20
69
|
// Navbar badge
|
|
21
70
|
.navbar-badge {
|
|
22
71
|
position: absolute;
|
|
@@ -52,7 +101,6 @@
|
|
|
52
101
|
max-height: 100vh;
|
|
53
102
|
|
|
54
103
|
.sidebar-wrapper {
|
|
55
|
-
height: subtract(100vh, add($lte-app-header-height, 1px));
|
|
56
104
|
overflow-x: hidden;
|
|
57
105
|
overflow-y: auto;
|
|
58
106
|
}
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
|
|
17
17
|
|
|
18
18
|
z-index: $lte-zindex-sidebar;
|
|
19
|
+
// A column: brand and filter keep their size, .sidebar-wrapper takes the
|
|
20
|
+
// rest and scrolls (#6104). Anything else placed above or below the menu
|
|
21
|
+
// just works, without a hard-coded height calc.
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
19
24
|
grid-area: #{$lte-prefix}app-sidebar;
|
|
20
25
|
min-width: var(--#{$lte-prefix}sidebar-width);
|
|
21
26
|
max-width: var(--#{$lte-prefix}sidebar-width);
|
|
@@ -24,6 +29,7 @@
|
|
|
24
29
|
|
|
25
30
|
.sidebar-brand {
|
|
26
31
|
display: flex;
|
|
32
|
+
flex: 0 0 auto;
|
|
27
33
|
align-items: center;
|
|
28
34
|
justify-content: center;
|
|
29
35
|
height: $lte-app-header-height;
|
|
@@ -76,6 +82,8 @@
|
|
|
76
82
|
}
|
|
77
83
|
|
|
78
84
|
.sidebar-wrapper {
|
|
85
|
+
flex: 1 1 auto;
|
|
86
|
+
min-height: 0;
|
|
79
87
|
padding-top: $lte-sidebar-padding-y;
|
|
80
88
|
padding-right: $lte-sidebar-padding-x;
|
|
81
89
|
padding-bottom: $lte-sidebar-padding-y;
|
|
@@ -312,7 +320,9 @@
|
|
|
312
320
|
// Sidebar search: the filter field above the menu. It sits outside
|
|
313
321
|
// .sidebar-wrapper so it stays put while the menu scrolls under it.
|
|
314
322
|
.sidebar-search {
|
|
323
|
+
flex: 0 0 auto;
|
|
315
324
|
padding: $lte-sidebar-padding-y ($lte-sidebar-padding-x * 2);
|
|
325
|
+
@include lte-search-field();
|
|
316
326
|
}
|
|
317
327
|
|
|
318
328
|
// Logo style
|
|
@@ -503,7 +513,6 @@
|
|
|
503
513
|
max-height: 100vh;
|
|
504
514
|
|
|
505
515
|
.sidebar-wrapper {
|
|
506
|
-
height: subtract(100vh, add($lte-app-header-height, 1px));
|
|
507
516
|
overflow-x: hidden;
|
|
508
517
|
overflow-y: auto;
|
|
509
518
|
}
|
|
@@ -544,7 +553,6 @@
|
|
|
544
553
|
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
|
|
545
554
|
|
|
546
555
|
.sidebar-wrapper {
|
|
547
|
-
height: subtract(100vh, add($lte-app-header-height, 1px));
|
|
548
556
|
overflow-x: hidden;
|
|
549
557
|
overflow-y: auto;
|
|
550
558
|
}
|
package/src/scss/_mixins.scss
CHANGED
package/src/scss/_variables.scss
CHANGED
|
@@ -58,6 +58,14 @@ $lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid
|
|
|
58
58
|
$lte-app-header-link-padding-y: $navbar-padding-y !default;
|
|
59
59
|
$lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
|
|
60
60
|
$lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
|
|
61
|
+
|
|
62
|
+
// Search fields in the chrome (navbar search, sidebar filter)
|
|
63
|
+
$lte-search-field-width: 14rem !default;
|
|
64
|
+
$lte-search-field-focus-width: 18rem !default;
|
|
65
|
+
$lte-search-field-font-size: $font-size-sm !default;
|
|
66
|
+
$lte-search-field-padding-y: .3rem !default;
|
|
67
|
+
$lte-search-field-padding-x: .75rem !default;
|
|
68
|
+
$lte-search-field-icon-space: 2.125rem !default;
|
|
61
69
|
$lte-zindex-fixed-header: $zindex-fixed !default;
|
|
62
70
|
|
|
63
71
|
// APP MAIN
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* AdminLTE v4.4.1 — Extended color palette
|
|
3
|
+
* Opt-in. Nothing here is in adminlte.css: load this sheet after it and you
|
|
4
|
+
* get fourteen additional colours (orange, amber, olive, teal, sky, indigo,
|
|
5
|
+
* violet, fuchsia, pink, navy, steel, slate, graphite, midnight) as `--bs-*`
|
|
6
|
+
* tokens plus the
|
|
7
|
+
* `.bg-*`, `.text-bg-*`, `.text-*`, `.border-*`, `.link-*`, `.bg-gradient-*`,
|
|
8
|
+
* `.card-*`, `.callout-*` and `.direct-chat-*` families — with dark mode.
|
|
9
|
+
* Every colour takes white text at ≥ 4.6:1. See docs/colors.html.
|
|
10
|
+
*
|
|
11
|
+
* Author: Colorlib
|
|
12
|
+
* Website: AdminLTE.io <https://adminlte.io>
|
|
13
|
+
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
// Bootstrap Configuration
|
|
17
|
+
// ---------------------------------------------------
|
|
18
|
+
@import "bootstrap/scss/functions";
|
|
19
|
+
@import "bootstrap-overrides";
|
|
20
|
+
@import "bootstrap/scss/variables";
|
|
21
|
+
@import "bootstrap/scss/variables-dark";
|
|
22
|
+
@import "bootstrap/scss/maps";
|
|
23
|
+
@import "bootstrap/scss/mixins";
|
|
24
|
+
|
|
25
|
+
// AdminLTE Configuration
|
|
26
|
+
// ---------------------------------------------------
|
|
27
|
+
// `mixins` is deliberately not imported: it emits AdminLTE's @keyframes, and
|
|
28
|
+
// this sheet only uses Bootstrap's own mixins and functions.
|
|
29
|
+
@import "variables";
|
|
30
|
+
@import "variables-dark";
|
|
31
|
+
|
|
32
|
+
// Palette
|
|
33
|
+
// ---------------------------------------------------
|
|
34
|
+
@import "colors/variables";
|
|
35
|
+
@import "colors/colors";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* AdminLTE v4.
|
|
2
|
+
* AdminLTE v4.4.1 — documentation styles
|
|
3
3
|
* Styles for the documentation and FAQ pages only (body.docs-page /
|
|
4
4
|
* body.faq-page). Applications never need this file; it is loaded by the
|
|
5
5
|
* docs pages in addition to adminlte.css.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* AdminLTE v4.
|
|
2
|
+
* AdminLTE v4.4.1 — Select2 compatibility theme
|
|
3
3
|
* Styling only. AdminLTE bundles neither Select2 nor jQuery; this optional
|
|
4
4
|
* sheet makes a Select2 you load yourself match Bootstrap 5.3 form controls,
|
|
5
5
|
* including `data-bs-theme` dark mode. Load it AFTER select2.css.
|
package/src/scss/adminlte.scss
CHANGED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
//
|
|
4
|
+
// Colors: Tokens, utilities and component hooks
|
|
5
|
+
//
|
|
6
|
+
// Generated for every entry in `$lte-palette` (see colors/_variables.scss).
|
|
7
|
+
// Nothing here touches Bootstrap's own theme colours; the shapes mirror what
|
|
8
|
+
// Bootstrap emits for them so the two mix freely.
|
|
9
|
+
//
|
|
10
|
+
|
|
11
|
+
// Tokens
|
|
12
|
+
// --------------------------------------------------------
|
|
13
|
+
// Mirrors what Bootstrap's _root.scss emits for $theme-colors: the colour, its
|
|
14
|
+
// RGB channels (for the opacity utilities) and the subtle / emphasis pair used
|
|
15
|
+
// by callouts — with the dark-mode values Bootstrap would derive.
|
|
16
|
+
:root,
|
|
17
|
+
[data-bs-theme="light"] {
|
|
18
|
+
@each $name, $value in $lte-palette {
|
|
19
|
+
--#{$prefix}#{$name}: #{$value};
|
|
20
|
+
--#{$prefix}#{$name}-rgb: #{to-rgb($value)};
|
|
21
|
+
--#{$prefix}#{$name}-text-emphasis: #{shade-color($value, 60%)};
|
|
22
|
+
--#{$prefix}#{$name}-bg-subtle: #{tint-color($value, 80%)};
|
|
23
|
+
--#{$prefix}#{$name}-border-subtle: #{tint-color($value, 60%)};
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@if $enable-dark-mode {
|
|
28
|
+
@include color-mode(dark, true) {
|
|
29
|
+
@each $name, $value in $lte-palette {
|
|
30
|
+
--#{$prefix}#{$name}-text-emphasis: #{tint-color($value, 40%)};
|
|
31
|
+
--#{$prefix}#{$name}-bg-subtle: #{shade-color($value, 80%)};
|
|
32
|
+
--#{$prefix}#{$name}-border-subtle: #{shade-color($value, 40%)};
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Utilities
|
|
38
|
+
// --------------------------------------------------------
|
|
39
|
+
// Same shape as Bootstrap's own .bg-* / .text-* / .border-* / .text-bg-* /
|
|
40
|
+
// .link-*, so `.bg-opacity-25`, `.link-underline-opacity-*` etc. compose.
|
|
41
|
+
@each $name, $value in $lte-palette {
|
|
42
|
+
.bg-#{$name} {
|
|
43
|
+
--#{$prefix}bg-opacity: 1;
|
|
44
|
+
background-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity)) !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.text-#{$name} {
|
|
48
|
+
--#{$prefix}text-opacity: 1;
|
|
49
|
+
color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}text-opacity)) !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.border-#{$name} {
|
|
53
|
+
--#{$prefix}border-opacity: 1;
|
|
54
|
+
border-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}border-opacity)) !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.text-bg-#{$name} {
|
|
58
|
+
color: lte-contrast($value) !important;
|
|
59
|
+
background-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.link-#{$name} {
|
|
63
|
+
color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-opacity, 1)) !important;
|
|
64
|
+
text-decoration-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
|
|
65
|
+
|
|
66
|
+
&:hover,
|
|
67
|
+
&:focus {
|
|
68
|
+
color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-opacity, 1)) !important;
|
|
69
|
+
text-decoration-color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-underline-opacity, 1)) !important;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// `.bg-gradient-*` — the AdminLTE 3 class, for the palette AND Bootstrap's
|
|
75
|
+
// theme colours. Bootstrap 5.3 offers the composable `.bg-navy.bg-gradient`;
|
|
76
|
+
// this is that gradient as one class, for v3 markup.
|
|
77
|
+
@each $name, $value in map.merge($theme-colors, $lte-palette) {
|
|
78
|
+
.bg-gradient-#{$name} {
|
|
79
|
+
color: lte-contrast($value) !important;
|
|
80
|
+
background-color: $value !important;
|
|
81
|
+
background-image: var(--#{$prefix}gradient) !important;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Component hooks
|
|
86
|
+
// --------------------------------------------------------
|
|
87
|
+
|
|
88
|
+
// Cards: feed the --lte-card-variant-* variables _cards.scss reads, so
|
|
89
|
+
// `.card-navy`, `.card-navy.card-outline` and `.card.text-bg-navy` work —
|
|
90
|
+
// and so do info-box progress bars, which read the same variables.
|
|
91
|
+
@each $name, $value in $lte-palette {
|
|
92
|
+
.card-#{$name},
|
|
93
|
+
.bg-#{$name},
|
|
94
|
+
.text-bg-#{$name} {
|
|
95
|
+
--#{$lte-prefix}card-variant-bg: #{$value};
|
|
96
|
+
--#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($value)};
|
|
97
|
+
--#{$lte-prefix}card-variant-color: #{lte-contrast($value)};
|
|
98
|
+
--#{$lte-prefix}card-variant-color-rgb: #{to-rgb(lte-contrast($value))};
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Callouts: same subtle / emphasis tokens as the theme-colour callouts
|
|
103
|
+
@each $name, $value in $lte-palette {
|
|
104
|
+
.callout-#{$name} {
|
|
105
|
+
--#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
|
|
106
|
+
--#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
|
|
107
|
+
--#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
|
|
108
|
+
--#{$lte-prefix}callout-link: var(--#{$prefix}#{$name}-text-emphasis);
|
|
109
|
+
--#{$lte-prefix}callout-code-color: var(--#{$prefix}#{$name}-text-emphasis);
|
|
110
|
+
--#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Direct chat
|
|
115
|
+
@each $name, $value in $lte-palette {
|
|
116
|
+
.direct-chat-#{$name} {
|
|
117
|
+
--#{$lte-prefix}direct-chat-color: #{lte-contrast($value)};
|
|
118
|
+
--#{$lte-prefix}direct-chat-bg: #{$value};
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Buttons carrying a palette background (`.btn.bg-navy`, the v3 idiom):
|
|
123
|
+
// a hover / active shade so they don't look inert
|
|
124
|
+
@each $name, $value in $lte-palette {
|
|
125
|
+
.btn.bg-#{$name},
|
|
126
|
+
.btn.text-bg-#{$name},
|
|
127
|
+
.btn.bg-gradient-#{$name} {
|
|
128
|
+
&:hover,
|
|
129
|
+
&:focus-visible {
|
|
130
|
+
background-color: #{shade-color($value, 10%)} !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:active,
|
|
134
|
+
&.active {
|
|
135
|
+
background-color: #{shade-color($value, 15%)} !important;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Cascade order
|
|
141
|
+
// --------------------------------------------------------
|
|
142
|
+
// This sheet loads AFTER adminlte.css, so `.bg-navy { --bs-bg-opacity: 1 }`
|
|
143
|
+
// above would otherwise beat Bootstrap's earlier `.bg-opacity-25`. Re-emit the
|
|
144
|
+
// opacity modifiers so they still win.
|
|
145
|
+
@each $key, $val in (10: .1, 25: .25, 50: .5, 75: .75, 100: 1) {
|
|
146
|
+
.bg-opacity-#{$key} {
|
|
147
|
+
--#{$prefix}bg-opacity: #{$val};
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.border-opacity-#{$key} {
|
|
151
|
+
--#{$prefix}border-opacity: #{$val};
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@each $key, $val in (25: .25, 50: .5, 75: .75, 100: 1) {
|
|
156
|
+
.text-opacity-#{$key} {
|
|
157
|
+
--#{$prefix}text-opacity: #{$val};
|
|
158
|
+
}
|
|
159
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
@use "sass:list";
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
//
|
|
5
|
+
// Colors: Variables
|
|
6
|
+
//
|
|
7
|
+
// The extended palette shipped by `adminlte-colors.css`. Everything here is
|
|
8
|
+
// `!default`, so a project compiling its own Sass can set any of it before
|
|
9
|
+
// importing `adminlte-colors.scss` — see docs/colors.html.
|
|
10
|
+
//
|
|
11
|
+
|
|
12
|
+
// The palette
|
|
13
|
+
// --------------------------------------------------------
|
|
14
|
+
// Designed in OKLCH (see scripts/palette.mjs) rather than picked one by one:
|
|
15
|
+
//
|
|
16
|
+
// • Each chromatic colour is the LIGHTEST value whose white text still reaches
|
|
17
|
+
// ≥ 4.6:1 (WCAG AA), which puts all of them at OKLCH L ≈ .55–.59 — the same
|
|
18
|
+
// weight as Bootstrap's primary / success / danger — so `.text-bg-*`, small
|
|
19
|
+
// boxes, badges and sidebars all take white text and read as one family.
|
|
20
|
+
// • Hues sit ≥ 17° from every Bootstrap theme colour (danger 21°, warning 85°,
|
|
21
|
+
// success 157°, info 218°, primary 260°) and ≥ 20° from each other, so nothing
|
|
22
|
+
// collides with `.text-bg-primary` & co.
|
|
23
|
+
// • Chroma is capped at 0.20 (parity with primary .23 / danger .20). Teal, sky,
|
|
24
|
+
// olive and amber sit at the sRGB gamut limit for this lightness.
|
|
25
|
+
// • navy, steel, slate, graphite and midnight are cool-tinted neutrals
|
|
26
|
+
// (h ≈ 255–287°) meant for sidebars and headers.
|
|
27
|
+
//
|
|
28
|
+
// `npm run palette -- --check` verifies contrast and hue separation.
|
|
29
|
+
$lte-palette: (
|
|
30
|
+
"orange": #c84e10, // oklch(.58 .17 42) burnt orange — warm accent that isn't "danger"
|
|
31
|
+
"amber": #a56710, // oklch(.57 .12 67) ochre — warm neutral, pairs with navy/graphite
|
|
32
|
+
"olive": #5f7f0f, // oklch(.55 .13 126) moss — earthy green, 31° from success
|
|
33
|
+
"teal": #12827d, // oklch(.55 .09 190) blue-green — the calm data colour
|
|
34
|
+
"sky": #127caf, // oklch(.56 .12 237) the classic AdminLTE blue, remade at 4.6:1
|
|
35
|
+
"indigo": #6f60ea, // oklch(.58 .20 283) blue-violet — brand-forward, 23° from primary
|
|
36
|
+
"violet": #9553db, // oklch(.58 .20 303) purple
|
|
37
|
+
"fuchsia": #b347be, // oklch(.59 .20 324) magenta — emphasis, sparingly
|
|
38
|
+
"pink": #cd388d, // oklch(.59 .20 350) deep pink — v3 "maroon", designed
|
|
39
|
+
"navy": #1d2d4c, // oklch(.30 .06 263) sidebar navy — deep, cool, not black
|
|
40
|
+
"steel": #3a4860, // oklch(.40 .05 261) mid-dark blue-grey — the sidebar tone many admin kits use
|
|
41
|
+
"slate": #566577, // oklch(.50 .03 253) mid neutral — grey-blue for headers and cards
|
|
42
|
+
"graphite": #32363c, // oklch(.33 .01 258) near-black cool grey for quiet sidebars
|
|
43
|
+
"midnight": #1e1d2d // oklch(.24 .03 287) near-black with a violet cast — full-dark chrome
|
|
44
|
+
) !default;
|
|
45
|
+
|
|
46
|
+
// Your own colours
|
|
47
|
+
// --------------------------------------------------------
|
|
48
|
+
// Merged over `$lte-palette`, so a brand colour gets every token, utility and
|
|
49
|
+
// component hook the shipped colours get — and an existing name is overridden:
|
|
50
|
+
// $lte-palette-custom: ("brand": #0f766e, "sky": #0369a1);
|
|
51
|
+
// Aim for a colour whose white text reaches 4.5:1 (UI/colors.html has a checker).
|
|
52
|
+
$lte-palette-custom: () !default;
|
|
53
|
+
|
|
54
|
+
// Aliases
|
|
55
|
+
// --------------------------------------------------------
|
|
56
|
+
// Extra names that generate the same classes as an existing palette entry.
|
|
57
|
+
// Empty by default; AdminLTE 3 projects can restore their old class names with
|
|
58
|
+
// $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink");
|
|
59
|
+
$lte-palette-aliases: () !default;
|
|
60
|
+
|
|
61
|
+
// Contrast rule
|
|
62
|
+
// --------------------------------------------------------
|
|
63
|
+
// Minimum contrast ratio `color-contrast()` uses when picking the automatic
|
|
64
|
+
// text colour of `.text-bg-*`, `.bg-gradient-*`, `.card-*` headers and
|
|
65
|
+
// `.direct-chat-*`. Bootstrap's default (4.5, WCAG AA for normal text). Every
|
|
66
|
+
// shipped palette colour clears it with white text; the knob exists for custom
|
|
67
|
+
// palettes — `3` is WCAG AA for large text and UI components.
|
|
68
|
+
$lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
|
|
69
|
+
|
|
70
|
+
// Resolve custom colours and aliases into the palette
|
|
71
|
+
// --------------------------------------------------------
|
|
72
|
+
@if list.length($lte-palette-custom) > 0 {
|
|
73
|
+
$lte-palette: map.merge($lte-palette, $lte-palette-custom);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@each $alias, $target in $lte-palette-aliases {
|
|
77
|
+
@if not map.has-key($lte-palette, $target) {
|
|
78
|
+
@error "adminlte-colors: alias `#{$alias}` points to `#{$target}`, which is not in $lte-palette.";
|
|
79
|
+
}
|
|
80
|
+
$lte-palette: map.merge($lte-palette, ($alias: map.get($lte-palette, $target)));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@function lte-contrast($color) {
|
|
84
|
+
@return color-contrast($color, $min-contrast-ratio: $lte-palette-min-contrast-ratio);
|
|
85
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Mixin: search field in the chrome
|
|
3
|
+
//
|
|
4
|
+
// One treatment for the navbar search and the sidebar filter. Colours are all
|
|
5
|
+
// theme-relative (`--bs-emphasis-color-rgb`, `--bs-body-color`), so the field
|
|
6
|
+
// is a soft translucent glass on any coloured or dark header / sidebar and a
|
|
7
|
+
// soft grey on a white one — it never fights the `text-bg-*` behind it.
|
|
8
|
+
//
|
|
9
|
+
|
|
10
|
+
@mixin lte-search-field() {
|
|
11
|
+
--#{$lte-prefix}search-field-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .06);
|
|
12
|
+
--#{$lte-prefix}search-field-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .09);
|
|
13
|
+
--#{$lte-prefix}search-field-focus-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .1);
|
|
14
|
+
--#{$lte-prefix}search-field-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .1);
|
|
15
|
+
--#{$lte-prefix}search-field-focus-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .35);
|
|
16
|
+
--#{$lte-prefix}search-field-focus-ring: 0 0 0 .2rem rgba(var(--#{$prefix}emphasis-color-rgb), .12);
|
|
17
|
+
--#{$lte-prefix}search-field-color: var(--#{$prefix}body-color);
|
|
18
|
+
--#{$lte-prefix}search-field-placeholder-color: var(--#{$prefix}secondary-color);
|
|
19
|
+
--#{$lte-prefix}search-field-icon-color: var(--#{$prefix}secondary-color);
|
|
20
|
+
|
|
21
|
+
.form-control {
|
|
22
|
+
padding: $lte-search-field-padding-y $lte-search-field-padding-x;
|
|
23
|
+
font-size: $lte-search-field-font-size;
|
|
24
|
+
color: var(--#{$lte-prefix}search-field-color);
|
|
25
|
+
background-color: var(--#{$lte-prefix}search-field-bg);
|
|
26
|
+
border-color: var(--#{$lte-prefix}search-field-border-color);
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
@include border-radius($border-radius-pill);
|
|
29
|
+
@include transition(background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out);
|
|
30
|
+
|
|
31
|
+
&::placeholder {
|
|
32
|
+
color: var(--#{$lte-prefix}search-field-placeholder-color);
|
|
33
|
+
opacity: 1;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:hover {
|
|
37
|
+
background-color: var(--#{$lte-prefix}search-field-hover-bg);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&:focus {
|
|
41
|
+
background-color: var(--#{$lte-prefix}search-field-focus-bg);
|
|
42
|
+
border-color: var(--#{$lte-prefix}search-field-focus-border-color);
|
|
43
|
+
box-shadow: var(--#{$lte-prefix}search-field-focus-ring);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
package/src/ts/adminlte.ts
CHANGED
|
@@ -10,7 +10,7 @@ import SidebarSearch from './sidebar-search.js'
|
|
|
10
10
|
import { initAccessibility } from './accessibility.js'
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* AdminLTE v4.
|
|
13
|
+
* AdminLTE v4.4.1
|
|
14
14
|
* Author: Colorlib
|
|
15
15
|
* Website: AdminLTE.io <https://adminlte.io>
|
|
16
16
|
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|