mirror of https://github.com/ColorlibHQ/AdminLTE
Daniel
4 years ago
parent
096b586f9c
commit
bb8be82e5b
@ -1,10 +1,11 @@
|
||||
# https://github.com/browserslist/browserslist#readme
|
||||
|
||||
>= 0.2%
|
||||
>= 0.5%
|
||||
last 2 major versions
|
||||
not dead
|
||||
Chrome >= 60
|
||||
Firefox >= 60
|
||||
Firefox ESR
|
||||
Edge >= 16
|
||||
Explorer >= 10
|
||||
iOS >= 9
|
||||
Safari >= 9
|
||||
iOS >= 12
|
||||
Safari >= 12
|
||||
not Explorer <= 11
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
{
|
||||
"files": [
|
||||
{
|
||||
"path": "./dist/css/adminlte.css",
|
||||
"maxSize": "25 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/adminlte.min.css",
|
||||
"maxSize": "23 kB"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": [
|
||||
"plugin:import/errors",
|
||||
"plugin:import/warnings",
|
||||
"plugin:unicorn/recommended",
|
||||
"xo",
|
||||
"xo/browser"
|
||||
],
|
||||
"rules": {
|
||||
"capitalized-comments": "off",
|
||||
"indent": [
|
||||
"error",
|
||||
2,
|
||||
{
|
||||
"MemberExpression": "off",
|
||||
"SwitchCase": 1
|
||||
}
|
||||
],
|
||||
"max-params": [
|
||||
"warn",
|
||||
5
|
||||
],
|
||||
"multiline-ternary": [
|
||||
"error",
|
||||
"always-multiline"
|
||||
],
|
||||
"new-cap": [
|
||||
"error",
|
||||
{
|
||||
"properties": false
|
||||
}
|
||||
],
|
||||
"no-eq-null": "off",
|
||||
"no-negated-condition": "off",
|
||||
"no-console": "error",
|
||||
"object-curly-spacing": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"prefer-object-spread": "off",
|
||||
"semi": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"unicorn/filename-case": "off",
|
||||
"unicorn/no-null": "off",
|
||||
"unicorn/prevent-abbreviations": "off"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"extends": [
|
||||
"xo-typescript"
|
||||
],
|
||||
"rules": {
|
||||
"@typescript-eslint/indent": [
|
||||
"error",
|
||||
2,
|
||||
{
|
||||
"MemberExpression": "off",
|
||||
"SwitchCase": 1
|
||||
}
|
||||
],
|
||||
"@typescript-eslint/semi": [
|
||||
"error",
|
||||
"never"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-twbs-bootstrap/scss"
|
||||
],
|
||||
"rules": {
|
||||
"declaration-no-important": null,
|
||||
"function-disallowed-list": [
|
||||
"calc",
|
||||
"lighten",
|
||||
"darken"
|
||||
],
|
||||
"order/properties-order": null,
|
||||
"selector-max-class": null,
|
||||
"selector-max-combinators": null,
|
||||
"selector-max-compound-selectors": null,
|
||||
"selector-max-id": null,
|
||||
"selector-max-specificity": null,
|
||||
"selector-max-type": null,
|
||||
"selector-no-qualifying-type": null
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": false,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"sourceType": "script"
|
||||
},
|
||||
"extends": "../../.eslintrc.json",
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"strict": "error",
|
||||
"unicorn/prefer-module": "off"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
'use strict'
|
||||
|
||||
const esbuild = require('esbuild')
|
||||
|
||||
esbuild.build({
|
||||
entryPoints: ['dist/js/adminlte.js'],
|
||||
bundle: false,
|
||||
minify: true,
|
||||
sourcemap: true,
|
||||
outfile: 'dist/js/adminlte.min.js'
|
||||
}).catch(error => console.error(error))
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
'use strict'
|
||||
|
||||
const esbuild = require('esbuild')
|
||||
const { getTarget } = require('./getTarget')
|
||||
|
||||
const pkg = require('../../package')
|
||||
const year = new Date().getFullYear()
|
||||
const banner = `/*!
|
||||
* AdminLTE v${pkg.version} (${pkg.homepage})
|
||||
* Copyright 2014-${year} ${pkg.author}
|
||||
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
|
||||
*/`
|
||||
|
||||
esbuild.build({
|
||||
entryPoints: ['build/ts/adminlte.ts'],
|
||||
bundle: true,
|
||||
minify: false,
|
||||
sourcemap: true,
|
||||
banner: {
|
||||
js: banner
|
||||
},
|
||||
target: getTarget(['es', 'chrome', 'edge', 'firefox', 'ios', 'safari']),
|
||||
outfile: 'dist/js/adminlte.js'
|
||||
}).catch(error => console.error(error))
|
||||
@ -0,0 +1,39 @@
|
||||
'use strict'
|
||||
|
||||
const browserslist = require('browserslist')
|
||||
|
||||
function getBuildTargets(targ) {
|
||||
const SUPPORTED_BUILD_TARGETS = targ !== 'default' ?
|
||||
targ :
|
||||
[
|
||||
'es',
|
||||
'chrome',
|
||||
'edge',
|
||||
'firefox',
|
||||
'ios',
|
||||
'node',
|
||||
'safari'
|
||||
]
|
||||
|
||||
const getEveryTar = browserslist().reverse()
|
||||
const sep = ' '
|
||||
const targets = []
|
||||
let singleTar = ''
|
||||
let i = 0
|
||||
|
||||
for (const tar of getEveryTar) {
|
||||
for (const selTar of SUPPORTED_BUILD_TARGETS) {
|
||||
if (tar.startsWith(selTar + sep) && !singleTar.startsWith(selTar)) {
|
||||
i++
|
||||
singleTar = tar.replace(sep, '')
|
||||
targets[i] = singleTar
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return targets.filter(Boolean)
|
||||
}
|
||||
|
||||
module.exports.getTarget = targ => {
|
||||
return getBuildTargets(targ)
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
'use strict'
|
||||
|
||||
module.exports = {
|
||||
map: {
|
||||
inline: false,
|
||||
annotation: true,
|
||||
sourcesContent: true
|
||||
},
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
cascade: false
|
||||
})
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
//
|
||||
// Color system (PCS - prefers-color-scheme)
|
||||
//
|
||||
|
||||
$white-alt: $white !default;
|
||||
$gray-100-alt: $gray-100 !default;
|
||||
$gray-200-alt: $gray-200 !default;
|
||||
$gray-300-alt: $gray-300 !default;
|
||||
$gray-400-alt: $gray-400 !default;
|
||||
$gray-500-alt: $gray-500 !default;
|
||||
$gray-600-alt: $gray-600 !default;
|
||||
$gray-700-alt: $gray-700 !default;
|
||||
$gray-800-alt: $gray-800 !default;
|
||||
$gray-900-alt: $gray-900 !default;
|
||||
$black-alt: $black !default;
|
||||
|
||||
// stylelint-disable
|
||||
$grays-alt: () !default;
|
||||
$grays-alt: map-merge((
|
||||
"100": $gray-100-alt,
|
||||
"200": $gray-200-alt,
|
||||
"300": $gray-300-alt,
|
||||
"400": $gray-400-alt,
|
||||
"500": $gray-500-alt,
|
||||
"600": $gray-600-alt,
|
||||
"700": $gray-700-alt,
|
||||
"800": $gray-800-alt,
|
||||
"900": $gray-900-alt
|
||||
), $grays-alt);
|
||||
// stylelint-enable
|
||||
|
||||
$blue-alt: #0d6efd !default;
|
||||
$indigo-alt: #6610f2 !default;
|
||||
$purple-alt: #6f42c1 !default;
|
||||
$pink-alt: #d63384 !default;
|
||||
$red-alt: #dc3545 !default;
|
||||
$orange-alt: #fd7e14 !default;
|
||||
$yellow-alt: #ffc107 !default;
|
||||
$green-alt: #198754 !default;
|
||||
$teal-alt: #20c997 !default;
|
||||
$cyan-alt: #0dcaf0 !default;
|
||||
|
||||
// stylelint-disable
|
||||
$colors-alt: () !default;
|
||||
$colors-alt: map-merge((
|
||||
"blue": $blue-alt,
|
||||
"indigo": $indigo-alt,
|
||||
"purple": $purple-alt,
|
||||
"pink": $pink-alt,
|
||||
"red": $red-alt,
|
||||
"orange": $orange-alt,
|
||||
"yellow": $yellow-alt,
|
||||
"green": $green-alt,
|
||||
"teal": $teal-alt,
|
||||
"cyan": $cyan-alt,
|
||||
"white": $white-alt,
|
||||
"gray": $gray-600-alt,
|
||||
"gray-dark": $gray-800-alt
|
||||
), $colors-alt);
|
||||
// stylelint-enable
|
||||
|
||||
// Color scheme
|
||||
|
||||
$primary-alt: $blue-alt !default;
|
||||
$secondary-alt: $gray-600-alt !default;
|
||||
$success-alt: $green-alt !default;
|
||||
$info-alt: $cyan-alt !default;
|
||||
$warning-alt: $yellow-alt !default;
|
||||
$danger-alt: $red-alt !default;
|
||||
$light-alt: $gray-100-alt !default;
|
||||
$dark-alt: $gray-800-alt !default;
|
||||
|
||||
// stylelint-disable
|
||||
$theme-colors-alt: () !default;
|
||||
$theme-colors-alt: map-merge((
|
||||
"primary": $primary-alt,
|
||||
"secondary": $secondary-alt,
|
||||
"success": $success-alt,
|
||||
"info": $info-alt,
|
||||
"warning": $warning-alt,
|
||||
"danger": $danger-alt,
|
||||
"light": $light-alt,
|
||||
"dark": $dark-alt
|
||||
), $theme-colors-alt);
|
||||
// stylelint-enable
|
||||
|
||||
//
|
||||
@ -0,0 +1,136 @@
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
// stylelint-disable
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
), $grays);
|
||||
// stylelint-enable
|
||||
|
||||
$blue: #0d6efd !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #d63384 !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #198754 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #0dcaf0 !default;
|
||||
|
||||
// stylelint-disable
|
||||
$colors: () !default;
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800
|
||||
), $colors);
|
||||
// stylelint-enable
|
||||
|
||||
// Color scheme
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
// stylelint-disable
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
), $theme-colors);
|
||||
// stylelint-enable
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-reduced-motion: true !default;
|
||||
$enable-smooth-scroll: true !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-button-pointers: true !default;
|
||||
$enable-rfs: true !default;
|
||||
$enable-validation-icons: true !default;
|
||||
$enable-negative-margins: false !default;
|
||||
$enable-deprecation-messages: true !default;
|
||||
$enable-important-utilities: true !default;
|
||||
|
||||
// Prefix for :root CSS variables
|
||||
|
||||
$variable-prefix: bs- !default;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: $white !default;
|
||||
$body-color: $gray-900 !default;
|
||||
$body-text-align: null !default;
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: $primary !default;
|
||||
$link-decoration: none !default;
|
||||
$link-shade-percentage: 20% !default;
|
||||
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
|
||||
$link-hover-decoration: null !default;
|
||||
|
||||
$stretched-link-pseudo-element: after !default;
|
||||
$stretched-link-z-index: 1 !default;
|
||||
|
||||
//
|
||||
@ -0,0 +1,41 @@
|
||||
//
|
||||
// Core: Brand
|
||||
//
|
||||
|
||||
// .brand-container {
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
.brand-container {
|
||||
display: flex;
|
||||
font-size: $navbar-brand-font-size;
|
||||
padding: $brand-link-padding-y $sidebar-padding-x;
|
||||
white-space: nowrap;
|
||||
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// TODO: crete utility for opacity for image
|
||||
.brand-image {
|
||||
float: left;
|
||||
line-height: .8;
|
||||
margin-left: .8rem;
|
||||
margin-right: .5rem;
|
||||
margin-top: -3px;
|
||||
max-height: 33px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
color: $sidebar-dark-color;
|
||||
}
|
||||
|
||||
.sidebar-mini-icon {
|
||||
color: $gray-400;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
//
|
||||
// Core: Layout
|
||||
//
|
||||
|
||||
.wrapper {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: clip;
|
||||
|
||||
.sidebar-rtl {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.layout-fixed & .sidebar {
|
||||
// stylelint-disable-next-line
|
||||
height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
|
||||
}
|
||||
.layout-fixed.text-sm & .sidebar {
|
||||
// stylelint-disable-next-line
|
||||
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
background-color: $main-bg;
|
||||
color: $main-color;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
z-index: $zindex-content-wrapper;
|
||||
@include transition($sidebar-transition);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-close .main-sidebar {
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
.layout-fixed {
|
||||
.main-sidebar {
|
||||
bottom: 0;
|
||||
float: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
.content-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
body:not(.sidebar-close).layout-fixed {
|
||||
.content-wrapper {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
&.sidebar-collapse .content-wrapper {
|
||||
margin-left: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @debug $sidebar-fixed;
|
||||
// @debug $sidebar-fixed;
|
||||
|
||||
@include dark-mode() {
|
||||
.content-wrapper {
|
||||
background-color: $main-bg-alt;
|
||||
color: $main-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,24 @@
|
||||
//
|
||||
// Core: Main Footer
|
||||
//
|
||||
|
||||
.main-footer {
|
||||
background-color: $main-footer-bg;
|
||||
border-top: $main-footer-border-top;
|
||||
color: $main-footer-color;
|
||||
padding: $main-footer-padding;
|
||||
|
||||
.text-sm &,
|
||||
&.text-sm {
|
||||
padding: $main-footer-padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode() {
|
||||
.main-footer {
|
||||
background-color: $main-footer-bg-alt;
|
||||
border-top-color: tint-color($dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,31 @@
|
||||
//
|
||||
// Core: Main Header
|
||||
//
|
||||
|
||||
.main-header {
|
||||
background-color: $white;
|
||||
border-bottom: $main-header-bottom-border;
|
||||
z-index: $zindex-main-header;
|
||||
|
||||
.nav-link {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode() {
|
||||
.main-header {
|
||||
background-color: $dark-alt;
|
||||
border-bottom-color: tint-color($dark-alt, 10%);
|
||||
|
||||
.nav-link {
|
||||
color: $gray-400-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,86 @@
|
||||
//
|
||||
// Core: Main Sidebar
|
||||
//
|
||||
|
||||
// Default Sidebar Theme
|
||||
@include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color);
|
||||
|
||||
.main-sidebar {
|
||||
@include transition($sidebar-transition);
|
||||
z-index: $zindex-sidebar;
|
||||
min-width: $sidebar-width;
|
||||
max-width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
:not(.layout-fixed).main-sidebar {
|
||||
margin-left: -#{$sidebar-width};
|
||||
|
||||
.sidebar-open & {
|
||||
transform: translateX($sidebar-width);
|
||||
|
||||
.sidebar-mini-icon {
|
||||
display: none;
|
||||
transition: display $transition-speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $sidebar-padding-y;
|
||||
padding-left: $sidebar-padding-x;
|
||||
padding-right: $sidebar-padding-x;
|
||||
padding-top: $sidebar-padding-y;
|
||||
@include scrollbar-color-gray();
|
||||
@include scrollbar-width-none();
|
||||
|
||||
&:hover {
|
||||
@include scrollbar-width-thin();
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar navigation menu
|
||||
.nav-sidebar {
|
||||
// All levels
|
||||
.nav-link > .right,
|
||||
.nav-link > span > .right {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: .7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
padding-left: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
font-size: .9rem;
|
||||
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
|
||||
}
|
||||
|
||||
// Tree view menu
|
||||
.nav-treeview {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-open > .nav-treeview {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,11 @@
|
||||
//
|
||||
// General: Mixins
|
||||
//
|
||||
|
||||
@import "mixins/animations";
|
||||
@import "mixins/dark-mode";
|
||||
@import "mixins/scrollbar";
|
||||
@import "mixins/sidebar-theme";
|
||||
@import "mixins/miscellaneous";
|
||||
|
||||
//
|
||||
@ -0,0 +1,128 @@
|
||||
//
|
||||
// Core: Sidebar Mini
|
||||
//
|
||||
|
||||
.sidebar-mini.sidebar-collapse {
|
||||
.main-sidebar {
|
||||
min-width: $sidebar-mini-width;
|
||||
max-width: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.nav-sidebar .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link span {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link span,
|
||||
.brand-link {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar-mini-icon {
|
||||
order: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&.layout-fixed.sidebar-hover {
|
||||
.main-sidebar {
|
||||
min-width: $sidebar-width;
|
||||
max-width: $sidebar-width;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link span,
|
||||
.brand-link {
|
||||
margin-left: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.sidebar-mini-icon {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse:not(.layout-fixed) {
|
||||
.sidebar {
|
||||
overflow: visible;
|
||||
|
||||
.nav-sidebar .nav-item:hover {
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
animation: none;
|
||||
z-index: $zindex-sidebar + 12;
|
||||
visibility: visible;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: $sidebar-width;
|
||||
left: $sidebar-mini-width;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
padding: inherit;
|
||||
padding-left: 1rem;
|
||||
margin-left: -1rem;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-is-opening {
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link span,
|
||||
.brand-link {
|
||||
margin-left: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-is-collapsing {
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link span,
|
||||
.brand-link {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,22 @@
|
||||
// Utilities
|
||||
|
||||
// util-opacity
|
||||
$utilities: (
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
values: (
|
||||
0: 0,
|
||||
20: .2,
|
||||
30: .3,
|
||||
40: .4,
|
||||
50: .5,
|
||||
60: .6,
|
||||
70: .7,
|
||||
80: .8,
|
||||
90: .9,
|
||||
100: 1,
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
//
|
||||
@ -0,0 +1,9 @@
|
||||
// MAIN FOOTER
|
||||
// --------------------------------------------------------
|
||||
$main-footer-bg-alt: $dark !default;
|
||||
|
||||
// Body background (Affects main content background only)
|
||||
$main-bg-alt: tint-color($dark-alt, 7.5%) !default;
|
||||
$main-color-alt: $white !default;
|
||||
|
||||
//
|
||||
@ -0,0 +1,119 @@
|
||||
// Variables for AdminLTE
|
||||
|
||||
// LAYOUT
|
||||
// --------------------------------------------------------
|
||||
|
||||
$font-size-root: 1rem !default;
|
||||
|
||||
// TRANSITIONS SETTINGS
|
||||
// --------------------------------------------------------
|
||||
|
||||
// Transition global options
|
||||
$transition-speed: .3s !default;
|
||||
$transition-fn: ease-in-out !default;
|
||||
|
||||
// Sidebar
|
||||
// --------------------------------------------------------
|
||||
$sidebar-width: 250px !default;
|
||||
$sidebar-padding-x: .5rem !default;
|
||||
$sidebar-padding-y: 0 !default;
|
||||
$sidebar-custom-height: 4rem !default;
|
||||
$sidebar-custom-height-lg: 6rem !default;
|
||||
$sidebar-custom-height-xl: 8rem !default;
|
||||
$sidebar-custom-padding-x: .85rem !default;
|
||||
$sidebar-custom-padding-y: .5rem !default;
|
||||
$sidebar-transition: min-width $transition-speed $transition-fn,
|
||||
max-width $transition-speed $transition-fn,
|
||||
margin-left $transition-speed $transition-fn,
|
||||
margin-right $transition-speed $transition-fn,
|
||||
transform $transition-speed $transition-fn;
|
||||
|
||||
// SIDEBAR SKINS
|
||||
// --------------------------------------------------------
|
||||
|
||||
// Dark sidebar
|
||||
$sidebar-dark-bg: $dark !default;
|
||||
$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
|
||||
$sidebar-dark-color: #c2c7d0 !default;
|
||||
$sidebar-dark-hover-color: $white !default;
|
||||
$sidebar-dark-active-color: $white !default;
|
||||
$sidebar-dark-submenu-bg: transparent !default;
|
||||
$sidebar-dark-submenu-color: #c2c7d0 !default;
|
||||
$sidebar-dark-submenu-hover-color: $white !default;
|
||||
$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
|
||||
$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
|
||||
$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
|
||||
|
||||
// Light sidebar
|
||||
$sidebar-light-bg: $white !default;
|
||||
$sidebar-light-hover-bg: rgba($black, .1) !default;
|
||||
$sidebar-light-color: $gray-800 !default;
|
||||
$sidebar-light-hover-color: $gray-900 !default;
|
||||
$sidebar-light-active-color: $black !default;
|
||||
$sidebar-light-submenu-bg: transparent !default;
|
||||
$sidebar-light-submenu-color: #777 !default;
|
||||
$sidebar-light-submenu-hover-color: $black !default;
|
||||
$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
|
||||
$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
|
||||
$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
|
||||
|
||||
// SIDEBAR MINI
|
||||
// --------------------------------------------------------
|
||||
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
|
||||
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
|
||||
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
|
||||
|
||||
// CONTROL SIDEBAR
|
||||
// --------------------------------------------------------
|
||||
$control-sidebar-width: $sidebar-width !default;
|
||||
|
||||
// MAIN HEADER
|
||||
// --------------------------------------------------------
|
||||
$main-header-bottom-border-width: $border-width !default;
|
||||
$main-header-bottom-border-color: $gray-300 !default;
|
||||
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
|
||||
$main-header-link-padding-y: $navbar-padding-y !default;
|
||||
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
|
||||
$main-header-height: add($main-header-height-inner, $main-header-bottom-border-width) !default;
|
||||
$nav-link-sm-padding-y: .35rem !default;
|
||||
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
|
||||
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
|
||||
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
|
||||
|
||||
// MAIN FOOTER
|
||||
// --------------------------------------------------------
|
||||
$main-footer-padding: 1rem !default;
|
||||
$main-footer-padding-sm: $main-footer-padding * .812 !default;
|
||||
$main-footer-border-top-width: 1px !default;
|
||||
$main-footer-border-top-color: $gray-300 !default;
|
||||
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
|
||||
$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
|
||||
$main-footer-height: add($main-footer-height-inner, $main-footer-border-top-width) !default;
|
||||
$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
|
||||
$main-footer-height-sm: add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
|
||||
$main-footer-bg: $white !default;
|
||||
$main-footer-color: tint-color($gray-700, 25%) !default;
|
||||
|
||||
// BRAND LINK
|
||||
// --------------------------------------------------------
|
||||
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
|
||||
$brand-link-border-buttom: 1px;
|
||||
|
||||
// Z-INDEX
|
||||
// --------------------------------------------------------
|
||||
$zindex-main-header: $zindex-fixed + 4 !default;
|
||||
$zindex-sidebar: $zindex-fixed + 8 !default;
|
||||
$zindex-main-footer: $zindex-fixed + 2 !default;
|
||||
$zindex-control-sidebar: $zindex-fixed + 1 !default;
|
||||
$zindex-toasts: $zindex-sidebar + 2 !default;
|
||||
$zindex-content-wrapper: $zindex-sidebar - 2 !default;
|
||||
$zindex-preloader: $zindex-toasts + 2 !default;
|
||||
|
||||
// Body background (Affects main content background only)
|
||||
$main-bg: #f4f6f9 !default;
|
||||
$main-color: $black !default;
|
||||
|
||||
// Dark mode
|
||||
$enable-dark-mode: true !default;
|
||||
|
||||
//
|
||||
@ -0,0 +1,24 @@
|
||||
/*!
|
||||
* AdminLTE v4.0.0-alpha.1
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
*/
|
||||
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-variables";
|
||||
@import "utilities";
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap-variables-alt";
|
||||
@import "variables";
|
||||
@import "variables-alt";
|
||||
@import "mixins";
|
||||
|
||||
@import "parts/core";
|
||||
|
||||
//
|
||||
@ -0,0 +1,119 @@
|
||||
//
|
||||
// Mixins: Animation
|
||||
//
|
||||
|
||||
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(2px, 1px) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-1px, -2px) rotate(-2deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-3px, 0) rotate(3deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(0, 2px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-1px, 2px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-3px, 1px) rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(2px, 1px) rotate(-2deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-1px, -1px) rotate(4deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 2px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(1px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,7 @@
|
||||
@mixin dark-mode {
|
||||
@if $enable-dark-mode {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
//
|
||||
// Mixins: Miscellaneous
|
||||
//
|
||||
|
||||
// ETC
|
||||
// @mixin translate($x, $y) {
|
||||
// transform: translate($x, $y);
|
||||
// }
|
||||
|
||||
// Different radius each side
|
||||
// @mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
|
||||
// border-radius: $top-left $top-right $bottom-left $bottom-right;
|
||||
// }
|
||||
|
||||
// @mixin calc($property, $expression) {
|
||||
// #{$property}: calc(#{$expression});
|
||||
// }
|
||||
|
||||
@mixin rotate($value) {
|
||||
transform: rotate($value);
|
||||
}
|
||||
|
||||
// @mixin animation($animation) {
|
||||
// animation: $animation;
|
||||
// }
|
||||
|
||||
// Gradient background
|
||||
// @mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {
|
||||
// background-color: $color;
|
||||
// background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
|
||||
// }
|
||||
|
||||
//
|
||||
@ -0,0 +1,38 @@
|
||||
//
|
||||
// Mixins: Scrollbar
|
||||
//
|
||||
|
||||
@mixin scrollbar-color-gray() {
|
||||
scrollbar-color: #a9a9a9 transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #a9a9a9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-thin() {
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-none() {
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,45 @@
|
||||
//
|
||||
// Mixins: Sidebar Theme
|
||||
//
|
||||
|
||||
@mixin sidebar-theme(
|
||||
$sidebar-bg,
|
||||
$sidebar-color
|
||||
) {
|
||||
|
||||
.wrapper {
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
color: $sidebar-color;
|
||||
background-color: $sidebar-bg;
|
||||
}
|
||||
|
||||
// Sidebar navigation menu
|
||||
.nav-sidebar {
|
||||
// All levels
|
||||
.nav-link {
|
||||
color: $sidebar-color;
|
||||
|
||||
&:hover,
|
||||
.active {
|
||||
color: color-constract($sidebar-dark-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapse:not(.layout-fixed) {
|
||||
.sidebar {
|
||||
.nav-sidebar .nav-item:hover {
|
||||
.nav-link:not(.active) {
|
||||
span {
|
||||
background-color: $sidebar-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,12 @@
|
||||
//
|
||||
// Part: Core
|
||||
//
|
||||
|
||||
@import "../layout";
|
||||
@import "../main-header";
|
||||
@import "../main-footer";
|
||||
@import "../main-sidebar";
|
||||
@import "../sidebar-mini";
|
||||
@import "../brand";
|
||||
|
||||
//
|
||||
@ -0,0 +1,9 @@
|
||||
import PushMenu from './push-menu'
|
||||
import Treeview from './treeview'
|
||||
|
||||
export {
|
||||
PushMenu,
|
||||
Treeview
|
||||
}
|
||||
|
||||
//
|
||||
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE treeview.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
windowReady
|
||||
} from './util/index'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const CLASS_NAME_MENU_OPEN = 'menu-open'
|
||||
|
||||
const SELECTOR_NAV_ITEM = '.nav-item'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class Treeview {
|
||||
toggle(treeviewMenu: Element): void {
|
||||
const navItem = treeviewMenu.closest(SELECTOR_NAV_ITEM)
|
||||
if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
||||
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
|
||||
} else {
|
||||
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
|
||||
|
||||
windowReady(() => {
|
||||
for (const btn of button) {
|
||||
btn.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
|
||||
const treeviewMenu = event.target as Element
|
||||
|
||||
const data = new Treeview()
|
||||
data.toggle(treeviewMenu)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export default Treeview
|
||||
|
||||
//
|
||||
@ -0,0 +1,198 @@
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE pushmenu.ts
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
windowReady
|
||||
} from './util/index'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
|
||||
const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
|
||||
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
|
||||
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
|
||||
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
|
||||
const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
|
||||
const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
|
||||
const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm'
|
||||
const CLASS_NAME_SIDEBAR_HOVER = 'sidebar-hover'
|
||||
|
||||
const SELECTOR_SIDEBAR = '.sidebar'
|
||||
// const SELECTOR_MAIN_SIDEBAR = '.main-sidebar'
|
||||
// const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
|
||||
const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]'
|
||||
const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]'
|
||||
const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}`
|
||||
const SELECTOR_CONTENT = '.content'
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class PushMenu {
|
||||
sidebarOpening(): void {
|
||||
const bodyClass = document.body.classList
|
||||
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
|
||||
setTimeout(() => {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
sidebarColllapsing(): void {
|
||||
const bodyClass = document.body.classList
|
||||
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
|
||||
setTimeout(() => {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
expand(): void {
|
||||
this.sidebarOpening()
|
||||
const bodyClass = document.body.classList
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
|
||||
}
|
||||
|
||||
collapse(): void {
|
||||
this.sidebarColllapsing()
|
||||
const bodyClass = document.body.classList
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
|
||||
}
|
||||
|
||||
close(): void {
|
||||
const bodyClass = document.body.classList
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
|
||||
// if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
|
||||
// }
|
||||
}
|
||||
|
||||
toggleFull(): void {
|
||||
const bodyClass = document.body.classList
|
||||
|
||||
if (bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
|
||||
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
|
||||
}
|
||||
}
|
||||
|
||||
toggleMini(): void {
|
||||
const bodyClass = document.body.classList
|
||||
|
||||
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
|
||||
}
|
||||
|
||||
if (bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
}
|
||||
|
||||
toggle(state: string): void {
|
||||
if (state === 'full') {
|
||||
this.toggleFull()
|
||||
} else if (state === 'mini') {
|
||||
this.toggleMini()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
windowReady(() => {
|
||||
function addSidebaBreakPoint() {
|
||||
const widthOutput: number = window.innerWidth
|
||||
const bodyClass = document.body.classList
|
||||
if (widthOutput >= 576) {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_SM)
|
||||
} else {
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_SM)
|
||||
}
|
||||
}
|
||||
|
||||
addSidebaBreakPoint()
|
||||
|
||||
window.addEventListener('resize', addSidebaBreakPoint)
|
||||
|
||||
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
|
||||
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
|
||||
|
||||
for (const btn of fullBtn) {
|
||||
btn.addEventListener('click', () => {
|
||||
const data = new PushMenu()
|
||||
data.toggle('full')
|
||||
})
|
||||
}
|
||||
|
||||
for (const btn of miniBtn) {
|
||||
btn.addEventListener('click', () => {
|
||||
const data = new PushMenu()
|
||||
data.toggle('mini')
|
||||
})
|
||||
}
|
||||
|
||||
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
|
||||
|
||||
selSidebar?.addEventListener('mouseover', () => {
|
||||
const bodyClass = document.body.classList
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_HOVER)
|
||||
})
|
||||
|
||||
selSidebar?.addEventListener('mouseout', () => {
|
||||
const bodyClass = document.body.classList
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_HOVER)
|
||||
})
|
||||
|
||||
function removeOverlaySidebar() {
|
||||
const bodyClass = document.body.classList
|
||||
if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
|
||||
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
|
||||
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
|
||||
}
|
||||
}
|
||||
|
||||
let selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
|
||||
let selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
|
||||
selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT)
|
||||
selContentWrapper?.addEventListener('touchstart', removeOverlaySidebar)
|
||||
selContentWrapper?.addEventListener('click', removeOverlaySidebar)
|
||||
})
|
||||
|
||||
selContentWrapper?.addEventListener('touchstart', removeOverlaySidebar)
|
||||
selContentWrapper?.addEventListener('click', removeOverlaySidebar)
|
||||
|
||||
window.addEventListener('resize', removeOverlaySidebar)
|
||||
})
|
||||
|
||||
export default PushMenu
|
||||
|
||||
//
|
||||
@ -0,0 +1,20 @@
|
||||
const domReady = (callBack: () => void): void => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', callBack)
|
||||
} else {
|
||||
callBack()
|
||||
}
|
||||
}
|
||||
|
||||
const windowReady = (callBack: () => void): void => {
|
||||
if (document.readyState === 'complete') {
|
||||
callBack()
|
||||
} else {
|
||||
window.addEventListener('load', callBack)
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
domReady,
|
||||
windowReady
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AdminLTE v4</title>
|
||||
<link rel="stylesheet" href="dist/css/adminlte.css">
|
||||
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body class="sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<!-- Main Sidebar Container -->
|
||||
<nav class="main-sidebar">
|
||||
<div class="brand-container">
|
||||
<a href="#" class="brand-link">
|
||||
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
|
||||
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||
</a>
|
||||
<a class="sidebar-mini-icon" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Sidebar Menu -->
|
||||
<nav class="mt-2">
|
||||
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active">
|
||||
<i class="nav-icon fas fa-th"></i>
|
||||
<span>
|
||||
Simple Link
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-circle"></i>
|
||||
<span>
|
||||
Level 1
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<span>
|
||||
Level 2
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-dot-circle"></i>
|
||||
<span>
|
||||
Level 3
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<span>
|
||||
Level 2
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-th"></i>
|
||||
<span>
|
||||
Simple Link
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</nav>
|
||||
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand">
|
||||
<div class="container-fluid">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="index3.html" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</main>
|
||||
<!-- /.content -->
|
||||
|
||||
<!-- Main Footer -->
|
||||
<footer class="main-footer">
|
||||
<!-- To the right -->
|
||||
<div class="float-end d-none d-sm-inline">
|
||||
Anything you want
|
||||
</div>
|
||||
<!-- Default to the left -->
|
||||
<strong>Copyright © 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="dist/js/adminlte.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noUnusedLocals": true,
|
||||
"noImplicitAny": true,
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"strictBindCallApply": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictPropertyInitialization": true
|
||||
},
|
||||
"include": [
|
||||
"build/ts/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist",
|
||||
"node_modules",
|
||||
"plugins"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in new issue