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
|
# https://github.com/browserslist/browserslist#readme
|
||||||
|
|
||||||
>= 0.2%
|
>= 0.5%
|
||||||
last 2 major versions
|
last 2 major versions
|
||||||
not dead
|
not dead
|
||||||
|
Chrome >= 60
|
||||||
|
Firefox >= 60
|
||||||
Firefox ESR
|
Firefox ESR
|
||||||
Edge >= 16
|
iOS >= 12
|
||||||
Explorer >= 10
|
Safari >= 12
|
||||||
iOS >= 9
|
not Explorer <= 11
|
||||||
Safari >= 9
|
|
||||||
|
|||||||
@ -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