github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

layout rework

pull/4926/head
Daniel 2023-02-16 21:45:54 +05:30
parent 9a0d675a6d
commit 034bda7138
40 changed files with 478 additions and 665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@ -19,8 +19,8 @@
"path": "."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
</div>
<div class="content">
<div class="app-content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="row">
@ -346,13 +346,13 @@
</div><!-- /.container-fluid -->
</div>
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."

12
src/index2.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@ -18,8 +18,8 @@
"path": "."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -34,7 +34,7 @@
</div>
</div>
</div>
<div class="content">
<div class="app-content">
<div class="container-fluid">
<!-- Info boxes -->
<div class="row">
@ -821,13 +821,13 @@
</div><!-- /.container-fluid -->
</div>
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."

12
src/index3.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@ -19,8 +19,8 @@
"path": "."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
</div>
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
@ -283,13 +283,13 @@
</div><!-- /.container-fluid -->
</div>
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."

12
src/pages/UI/timeline.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<!-- Timelime example -->
<div class="row">
@ -145,13 +145,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/forms/general.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row g-4">
<!-- Start column -->
@ -80,13 +80,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/layout/fixed-sidebar.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
@ -70,13 +70,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/layout/layout-rtl.html
View File

@ -8,7 +8,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -19,8 +19,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -36,7 +36,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
@ -71,13 +71,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/layout/sidebar-mini.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
@ -70,13 +70,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/layout/unfixed-sidebar.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
@ -70,13 +70,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/tables/simple.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
@ -319,13 +319,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/widgets/cards.html
View File

@ -7,7 +7,7 @@
})
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -18,8 +18,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -35,7 +35,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<h4 class="mb-2">Cards</h4>
@ -295,13 +295,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/widgets/info-box.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -19,8 +19,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -36,7 +36,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<h5 class="mb-2">Info Box</h5>
<div class="row">
@ -346,13 +346,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

12
src/pages/widgets/small-box.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@ -19,8 +19,8 @@
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
@ -36,7 +36,7 @@
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="app-content">
<div class="container-fluid">
<!-- Small Box (Stat card) -->
<h5 class="mb-2">Small Box</h5>
@ -107,13 +107,13 @@
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."

4
src/partials/_scripts.html
View File

@ -14,7 +14,7 @@
<!-- OPTIONAL SCRIPTS -->
<script>
const SELECTOR_SIDEBAR = '.sidebar'
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave'
@ -22,7 +22,7 @@
document.addEventListener("DOMContentLoaded", function() {
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,

2
src/partials/dashboard/_footer.html
View File

@ -1,5 +1,5 @@
<!-- Main Footer -->
<footer class="main-footer">
<footer class="app-footer">
<!-- To the end -->
<div class="float-end d-none d-sm-inline">
Anything you want

14
src/partials/dashboard/_sidenav.html
View File

@ -1,17 +1,17 @@
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
<div class="brand-container">
<a href="javascript:;" class="brand-link">
<!-- Sidebar Container -->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<div class="sidebar-brand">
<a href="@@path/index.html" class="brand-link">
<img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<a class="pushmenu mx-1 d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
<a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
</div>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-wrapper">
<nav class="mt-2">
<!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<i class="nav-icon fa-solid fa-gauge-high"></i>

2
src/partials/dashboard/_topbar.html
View File

@ -1,5 +1,5 @@
<!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-body">
<nav class="app-header navbar navbar-expand bg-body">
<div class="container-fluid">
<!-- Start navbar links -->
<ul class="navbar-nav">

14
src/scss/_app-footer.scss Normal file
View File

@ -0,0 +1,14 @@
//
// Core: Main Footer
//
.app-footer {
grid-area: #{$lte-prefix}app-footer;
width: inherit;
max-width: 100vw;
padding: $lte-app-footer-padding;
color: $lte-app-footer-color;
background-color: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top;
}

8
src/scss/_main-header.scss → src/scss/_app-header.scss
View File

@ -2,11 +2,11 @@
// Core: Main Header
//
.main-header {
z-index: $lte-zindex-main-header;
grid-area: #{$lte-prefix}main-header;
.app-header {
z-index: $lte-zindex-app-header;
grid-area: #{$lte-prefix}app-header;
max-width: 100vw;
border-bottom: $lte-main-header-bottom-border;
border-bottom: $lte-app-header-bottom-border;
.nav-link {
position: relative;

19
src/scss/_app-main.scss Normal file
View File

@ -0,0 +1,19 @@
.app-main {
grid-area: #{$lte-prefix}app-main;
max-width: 100vw;
padding-bottom: 1rem;
.app-content-header {
padding: 1rem $lte-content-padding-x;
.breadcrumb {
padding: 0;
margin-bottom: 0;
line-height: 2.5rem;
}
}
.app-content {
padding: $lte-content-padding-y $lte-content-padding-x;
}
}

198
src/scss/_app-sidebar.scss Normal file
View File

@ -0,0 +1,198 @@
.app-sidebar {
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg};
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color};
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg};
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
z-index: $lte-zindex-sidebar;
grid-area: #{$lte-prefix}app-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
@include transition($lte-sidebar-transition);
}
.sidebar-wrapper {
padding-top: $lte-sidebar-padding-y;
padding-right: $lte-sidebar-padding-x;
padding-bottom: $lte-sidebar-padding-y;
padding-left: $lte-sidebar-padding-x;
overflow-x: hidden;
overflow-y: auto;
@include scrollbar-color-gray();
@include scrollbar-width-thin();
// Sidebar Menu. First level links
.sidebar-menu > .nav-item {
// links
> .nav-link {
&:active,
&:focus {
color: var(--#{$lte-prefix}sidebar-color);
}
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
// background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-hover-color);
// background-color: var(--#{$lte-prefix}sidebar-hover-bg);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-header-color);
background-color: inherit;
}
// All links within the sidebar menu
a {
color: var(--#{$lte-prefix}sidebar-color);
&:hover,
&:focus {
text-decoration: none;
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
// background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
}
}
> .nav-link:hover {
background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
}
}
}
}
// Sidebar navigation menu
.sidebar-menu {
// All levels
.nav-item {
> .nav-link {
margin-bottom: .2rem;
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: none #{"/*rtl:rotate(180deg)*/"};
}
}
}
// All levels
.nav-link > .nav-arrow,
.nav-link > p > .nav-arrow {
position: absolute;
top: .7rem;
right: 1rem;
}
.nav-link {
position: relative;
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
@include transition(width $lte-transition-fn $lte-transition-speed);
@include border-radius($border-radius);
p {
display: inline;
padding-left: .5rem;
margin: 0;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
font-size: .9rem;
}
// Tree view menu
.nav-treeview {
display: none;
padding: 0;
list-style: none;
}
.menu-open {
> .nav-treeview {
display: block;
}
> .nav-link {
.nav-arrow {
transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
}
}
}
}
.hold-transition {
.app-sidebar {
@include transition(none !important);
animation: none !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
&.app-sidebar,
.app-sidebar {
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg-dark};
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg-dark};
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color-dark};
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg-dark};
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color-dark};
}
}
}

10
src/scss/_wrapper.scss → src/scss/_app-wrapper.scss
View File

@ -2,13 +2,13 @@
// Core: Layout
//
.wrapper {
.app-wrapper {
position: relative;
display: grid;
grid-template-areas:
"#{$lte-prefix}main-sidebar #{$lte-prefix}main-header"
"#{$lte-prefix}main-sidebar #{$lte-prefix}content-wrapper"
"#{$lte-prefix}main-sidebar #{$lte-prefix}main-footer";
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-header"
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
grid-template-rows: min-content 1fr min-content;
grid-gap: 0;
align-content: stretch;
@ -17,6 +17,6 @@
min-height: 100vh;
}
:not(.layout-mobile) .wrapper {
:not(.layout-mobile) .app-wrapper {
grid-template-columns: auto 1fr;
}

72
src/scss/_brand-container.scss
View File

@ -1,72 +0,0 @@
//
// Core: Brand
//
.brand-container {
display: grid;
grid-template-areas: "#{$lte-prefix}brand-link #{$lte-prefix}pushmenu";
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
grid-area: #{$lte-prefix}brand-link;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.pushmenu {
grid-area: #{$lte-prefix}pushmenu;
}
.sidebar-bg-dark & {
border-bottom: $lte-brand-link-border-buttom solid $gray-700;
.brand-link,
.pushmenu {
color: rgba($white, .8);
&:hover {
color: $white;
}
}
}
.sidebar-bg-light & {
border-bottom: $lte-brand-link-border-buttom solid $gray-300;
.brand-link,
.pushmenu {
color: rgba($black, .8);
&:hover {
color: $black;
}
}
}
}
.sidebar-collapse:not(.sidebar-is-hover) {
.brand-container {
justify-content: center;
.brand-link {
width: 0;
}
}
}

9
src/scss/_content-header.scss
View File

@ -1,9 +0,0 @@
.content-header {
padding: 1rem $lte-content-padding-x;
.breadcrumb {
padding: 0;
margin-bottom: 0;
line-height: 2.5rem;
}
}

5
src/scss/_content-wrapper.scss
View File

@ -1,5 +0,0 @@
.content-wrapper {
grid-area: #{$lte-prefix}content-wrapper;
max-width: 100vw;
padding-bottom: 1rem;
}

3
src/scss/_content.scss
View File

@ -1,3 +0,0 @@
.content {
padding: $lte-content-padding-y $lte-content-padding-x;
}

24
src/scss/_layout-fixed.scss
View File

@ -1,6 +1,6 @@
@include media-breakpoint-up($lte-sidebar-breakpoint) {
.layout-fixed {
.main-sidebar {
.app-sidebar {
position: fixed;
top: auto;
bottom: 0;
@ -8,30 +8,30 @@
float: none;
max-height: 100vh;
.sidebar {
height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width));
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
}
}
.main-header,
.content-wrapper,
.main-footer {
.app-header,
.app-main,
.app-footer {
margin-left: var(--#{$lte-prefix}sidebar-width);
@include transition($lte-transition-speed $lte-transition-fn);
}
&.sidebar-collapse {
.main-header,
.content-wrapper,
.main-footer {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width;
}
}
&.sidebar-close {
.main-header,
.content-wrapper,
.main-footer {
.app-header,
.app-main,
.app-footer {
margin-left: 0;
}
}

10
src/scss/_layout-mobile.scss
View File

@ -1,14 +1,14 @@
@include media-breakpoint-down($lte-sidebar-breakpoint) {
.wrapper {
.main-sidebar {
.app-wrapper {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
max-height: 100vh;
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
.sidebar {
height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width));
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
overflow-x: hidden;
overflow-y: auto;
}
@ -16,7 +16,7 @@
}
.sidebar-open {
.main-sidebar {
.app-sidebar {
margin-left: 0;
}
}

14
src/scss/_main-footer.scss
View File

@ -1,14 +0,0 @@
//
// Core: Main Footer
//
.main-footer {
grid-area: #{$lte-prefix}main-footer;
width: inherit;
max-width: 100vw;
padding: $lte-main-footer-padding;
color: $lte-main-footer-color;
background-color: $lte-main-footer-bg;
border-top: $lte-main-footer-border-top;
}

220
src/scss/_main-sidebar.scss
View File

@ -1,220 +0,0 @@
//
// Core: Main Sidebar
//
.main-sidebar {
@include transition($lte-sidebar-transition);
z-index: $lte-zindex-sidebar;
grid-area: #{$lte-prefix}main-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
.nav-sidebar > .nav-item {
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
}
}
@each $color, $value in $theme-colors {
.sidebar-color-#{$color} {
--#{$lte-prefix}sidebar-menu-active-bg: #{$value};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($value)};
}
}
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
--#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
--#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
--#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
--#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
--#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
--#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
--#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
--#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
--#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-dark-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active {
color: var(--#{$lte-prefix}sidebar-dark-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-dark-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-dark-color);
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-dark-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg);
}
}
}
}
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
--#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
--#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
--#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
--#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
--#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
--#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
--#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
--#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
--#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
--#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-light-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
color: var(--#{$lte-prefix}sidebar-light-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-light-active-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-light-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-light-color);
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-light-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover {
color: var(--#{$lte-prefix}sidebar-light-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-active-bg);
}
}
> .nav-link:hover {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
}
}
.hold-transition {
.main-sidebar {
@include transition(none !important);
animation: none !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
}
}
}

65
src/scss/_nav-sidebar.scss
View File

@ -1,65 +0,0 @@
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-item {
> .nav-link {
margin-bottom: .2rem;
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: none #{"/*rtl:rotate(180deg)*/"};
}
}
}
// All levels
.nav-link > .nav-arrow,
.nav-link > p > .nav-arrow {
position: absolute;
top: .7rem;
right: 1rem;
}
.nav-link {
position: relative;
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
@include transition(width $lte-transition-fn $lte-transition-speed);
p {
display: inline;
padding-left: .5rem;
margin: 0;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
font-size: .9rem;
}
// Tree view menu
.nav-treeview {
display: none;
padding: 0;
list-style: none;
}
.menu-open {
> .nav-treeview {
display: block;
}
}
.menu-open,
.menu-is-opening {
> .nav-link {
.nav-arrow {
transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
}
}
}
}

56
src/scss/_sidebar-brand.scss Normal file
View File

@ -0,0 +1,56 @@
//
// Core: Brand
//
.sidebar-brand {
display: flex;
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
flex: 1;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.pushmenu {
flex: 0;
margin-left: auto;
}
.brand-link,
.pushmenu {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
}
}
}
.sidebar-collapse:not(.sidebar-is-hover) {
.sidebar-brand {
.brand-link {
width: 0;
}
.pushmenu {
flex: auto;
}
}
}

2
src/scss/_sidebar-close.scss
View File

@ -1,5 +1,5 @@
.sidebar-close {
.main-sidebar {
.app-sidebar {
// stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
}

35
src/scss/_sidebar-collapse.scss
View File

@ -3,58 +3,56 @@
//
// A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar,
.nav-sidebar > .nav-header,
.nav-sidebar .nav-link {
.sidebar-menu,
.sidebar-menu > .nav-header,
.sidebar-menu .nav-link {
white-space: nowrap;
}
.sidebar-collapse {
.main-sidebar {
.app-sidebar {
min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width;
}
// Make the sidebar headers
.nav-sidebar .nav-header {
.sidebar-menu .nav-header {
display: none;
}
.nav-sidebar {
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
}
}
.nav-sidebar .nav-link p {
.sidebar-menu .nav-link p {
width: 0;
white-space: nowrap;
}
.nav-sidebar .nav-link p,
.sidebar-menu .nav-link p,
.brand-link {
margin-left: -10px;
visibility: hidden;
animation-name: fadeOut;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
&.sidebar-is-hover {
.main-sidebar {
.app-sidebar {
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
}
.nav-sidebar .nav-header {
.sidebar-menu .nav-header {
display: inline-block;
}
.nav-sidebar .nav-link {
.sidebar-menu .nav-link {
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
}
.nav-sidebar .nav-link p,
.sidebar-menu .nav-link p,
.brand-link {
margin-left: 0;
visibility: visible;
@ -63,4 +61,13 @@
animation-fill-mode: both;
}
}
&:not(.sidebar-is-hover) {
.sidebar-menu .nav-link p {
.float-end {
// clear: both;
float: none !important;
}
}
}
}

11
src/scss/_sidebar.scss
View File

@ -1,11 +0,0 @@
.sidebar {
// min-height: 100%;
padding-top: $lte-sidebar-padding-y;
padding-right: $lte-sidebar-padding-x;
padding-bottom: $lte-sidebar-padding-y;
padding-left: $lte-sidebar-padding-x;
overflow-x: hidden;
overflow-y: auto;
@include scrollbar-color-gray();
@include scrollbar-width-thin();
}

21
src/scss/_variables-dark.scss
View File

@ -1,9 +1,14 @@
// Body background (Affects main content background only)
$lte-main-bg-dark: $body-tertiary-bg-dark !default;
$lte-main-color-dark: $body-color-dark !default;
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$lte-sidebar-dark-bg-dark: $dark !default;
// Light sidebar
$lte-sidebar-light-bg-dark: $light !default;
$lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-color-dark: #c2c7d0 !default;
$lte-sidebar-hover-color-dark: $white !default;
$lte-sidebar-active-color-dark: $white !default;
$lte-sidebar-submenu-bg-dark: transparent !default;
$lte-sidebar-submenu-color-dark: $lte-sidebar-color-dark !default;
$lte-sidebar-submenu-hover-color-dark: $white !default;
$lte-sidebar-submenu-hover-bg-dark: $lte-sidebar-hover-bg-dark !default;
$lte-sidebar-submenu-active-color-dark: $white !default;
$lte-sidebar-submenu-active-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-header-color-dark: tint-color(#c2c7d0, 5%) !default;

137
src/scss/_variables.scss
View File

@ -1,13 +1,8 @@
// Custom AdminLTE Variables
// Prefix for :root CSS variables
// Prefix for :root CSS variables and others.
$lte-prefix: lte- !default;
// LAYOUT
// --------------------------------------------------------
$lte-font-size-root: 1rem !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
@ -21,11 +16,6 @@ $lte-sidebar-width: 250px !default;
$lte-sidebar-breakpoint: lg !default;
$lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-custom-height: 4rem !default;
$lte-sidebar-custom-height-lg: 6rem !default;
$lte-sidebar-custom-height-xl: 8rem !default;
$lte-sidebar-custom-padding-x: .85rem !default;
$lte-sidebar-custom-padding-y: .5rem !default;
$lte-sidebar-transition: min-width $lte-transition-speed $lte-transition-fn,
max-width $lte-transition-speed $lte-transition-fn,
margin-left $lte-transition-speed $lte-transition-fn,
@ -34,33 +24,17 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$lte-sidebar-dark-bg: $gray-800 !default;
$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color: #c2c7d0 !default;
$lte-sidebar-dark-hover-color: $white !default;
$lte-sidebar-dark-active-color: $white !default;
$lte-sidebar-dark-submenu-bg: transparent !default;
$lte-sidebar-dark-submenu-color: $lte-sidebar-dark-color !default;
$lte-sidebar-dark-submenu-hover-color: $white !default;
$lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default;
$lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default;
$lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
$lte-sidebar-dark-header-color: tint-color(#c2c7d0, 5%) !default;
// Light sidebar
$lte-sidebar-light-bg: $white !default;
$lte-sidebar-light-hover-bg: rgba($black, .1) !default;
$lte-sidebar-light-color: $gray-800 !default;
$lte-sidebar-light-hover-color: $gray-900 !default;
$lte-sidebar-light-active-color: $black !default;
$lte-sidebar-light-submenu-bg: transparent !default;
$lte-sidebar-light-submenu-color: #777 !default;
$lte-sidebar-light-submenu-hover-color: $black !default;
$lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default;
$lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default;
$lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default;
$lte-sidebar-light-header-color: shade-color($gray-800, 5%) !default;
$lte-sidebar-hover-bg: rgba($black, .1) !default;
$lte-sidebar-color: $gray-800 !default;
$lte-sidebar-hover-color: $gray-900 !default;
$lte-sidebar-active-color: $black !default;
$lte-sidebar-submenu-bg: transparent !default;
$lte-sidebar-submenu-color: #777 !default;
$lte-sidebar-submenu-hover-color: $black !default;
$lte-sidebar-submenu-hover-bg: $lte-sidebar-hover-bg !default;
$lte-sidebar-submenu-active-color: $lte-sidebar-hover-color !default;
$lte-sidebar-submenu-active-bg: $lte-sidebar-submenu-hover-bg !default;
$lte-sidebar-header-color: shade-color($gray-800, 5%) !default;
// SIDEBAR MINI
// --------------------------------------------------------
@ -68,64 +42,39 @@ $lte-sidebar-mini-width: ($nav-link-padding-x + $lte-sidebar-padding-x
$lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$lte-control-sidebar-width: $lte-sidebar-width !default;
// MAIN HEADER
// --------------------------------------------------------
$lte-main-header-bottom-border-width: $border-width !default;
$lte-main-header-bottom-border-color: var(--#{$prefix}border-color) !default;
$lte-main-header-bottom-border: $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
$lte-main-header-link-padding-y: $navbar-padding-y !default;
$lte-main-header-height-inner: ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
$lte-main-header-height: add($lte-main-header-height-inner, $lte-main-header-bottom-border-width) !default;
$lte-nav-link-sm-padding-y: .35rem !default;
$lte-nav-link-sm-height: ($font-size-sm * $line-height-sm + $lte-nav-link-sm-padding-y * 1.785) !default;
$lte-main-header-height-sm-inner: ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
$lte-main-header-height-sm: add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
$lte-app-header-bottom-border-width: $border-width !default;
$lte-app-header-bottom-border-color: var(--#{$prefix}border-color) !default;
$lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
$lte-app-header-link-padding-y: $navbar-padding-y !default;
$lte-app-header-height-inner: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
// Content padding
$lte-content-padding-y: 0 !default;
$lte-content-padding-x: .5rem !default;
// IMAGE SIZES
// --------------------------------------------------------
$lte-img-size-sm: 1.875rem !default;
$lte-img-size-md: 3.75rem !default;
$lte-img-size-lg: 6.25rem !default;
$lte-img-size-push: .625rem !default;
// MAIN FOOTER
// --------------------------------------------------------
$lte-main-footer-padding: 1rem !default;
$lte-main-footer-padding-sm: $lte-main-footer-padding * .812 !default;
$lte-main-footer-border-top-width: 1px !default;
$lte-main-footer-border-top-color: var(--#{$prefix}border-color) !default;
$lte-main-footer-border-top: $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
$lte-main-footer-height-inner: (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
$lte-main-footer-height: add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
$lte-main-footer-height-sm: add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-main-footer-color: var(--#{$prefix}secondary-color) !default;
$lte-app-footer-padding: 1rem !default;
$lte-app-footer-border-top-width: 1px !default;
$lte-app-footer-border-top-color: var(--#{$prefix}border-color) !default;
$lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
// BRAND LINK
// --------------------------------------------------------
$lte-brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y !default;
$lte-brand-link-padding-x: $lte-sidebar-padding-x !default;
$lte-brand-link-border-buttom: 1px !default;
// Cards
// --------------------------------------------------------
$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
$lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
$lte-card-title-font-size: 1.1rem !default;
$lte-card-title-font-size-sm: 1rem !default;
$lte-card-title-font-weight: $font-weight-normal !default;
$lte-card-nav-link-padding-sm-y: .4rem !default;
$lte-card-nav-link-padding-sm-x: .8rem !default;
$lte-card-img-size: $lte-img-size-sm !default;
// PROGRESS BARS
// --------------------------------------------------------
@ -139,41 +88,5 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
// Z-INDEX
// --------------------------------------------------------
$lte-zindex-main-header: $zindex-fixed + 4 !default;
$lte-zindex-app-header: $zindex-fixed + 4 !default;
$lte-zindex-sidebar: $zindex-fixed + 8 !default;
$lte-zindex-main-footer: $zindex-fixed + 2 !default;
$lte-zindex-control-sidebar: $zindex-fixed + 1 !default;
$lte-zindex-toasts: $lte-zindex-sidebar + 2 !default;
$lte-zindex-content-wrapper: $lte-zindex-sidebar - 2 !default;
$lte-zindex-preloader: $lte-zindex-toasts + 2 !default;
// Body background (Affects main content background only)
$lte-main-bg: #f4f6f9 !default;
$lte-main-color: $black !default;
// BUTTON
// --------------------------------------------------------
$lte-button-padding-y-xs: .125rem !default;
$lte-button-padding-x-xs: .25rem !default;
$lte-button-line-height-xs: $line-height-sm !default;
$lte-button-font-size-xs: ($font-size-base * .75) !default;
$lte-button-border-radius-xs: .15rem !default;
// RIBBON
// --------------------------------------------------------
$lte-ribbon-border-size: 3px !default;
$lte-ribbon-line-height: 100% !default;
$lte-ribbon-padding: .375rem 0 !default;
$lte-ribbon-font-size: .8rem !default;
$lte-ribbon-width: 90px !default;
$lte-ribbon-wrapper-size: 70px !default;
$lte-ribbon-top: 10px !default;
$lte-ribbon-right: -2px !default;
$lte-ribbon-lg-wrapper-size: 120px !default;
$lte-ribbon-lg-width: 160px !default;
$lte-ribbon-lg-top: 26px !default;
$lte-ribbon-lg-right: 0 !default;
$lte-ribbon-xl-wrapper-size: 180px !default;
$lte-ribbon-xl-width: 240px !default;
$lte-ribbon-xl-top: 47px !default;
$lte-ribbon-xl-right: 4px !default;

4
src/scss/mixins/_animations.scss
View File

@ -32,20 +32,24 @@
@keyframes fadeIn {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes fadeOut {
from {
visibility: visible;
opacity: 1;
}
to {
visibility: hidden;
opacity: 0;
}
}

16
src/scss/parts/_core.scss
View File

@ -3,18 +3,14 @@
//
@import "../root";
@import "../wrapper";
@import "../main-header";
@import "../brand-container";
@import "../main-sidebar";
@import "../sidebar";
@import "../nav-sidebar";
@import "../app-wrapper";
@import "../app-header";
@import "../app-sidebar";
@import "../sidebar-brand";
@import "../sidebar-collapse";
@import "../sidebar-close";
@import "../content-wrapper";
@import "../content-header";
@import "../content";
@import "../main-footer";
@import "../app-main";
@import "../app-footer";
@import "../layout-fixed";
@import "../layout-mobile";
@import "../dropdown";

12
src/ts/push-menu.ts
View File

@ -30,14 +30,14 @@ const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
const SELECTOR_SIDEBAR = '.sidebar'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const SELECTOR_APP_MAIN = '.app-main'
const Defaults = {
onLayoutMobile: 992
@ -70,7 +70,7 @@ class PushMenu {
navTree.style.removeProperty('height')
}
const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR)
const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU)
const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
if (navItem) {
@ -111,7 +111,7 @@ class PushMenu {
}
sidebarHover(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
if (selSidebar) {
selSidebar.addEventListener('mouseover', () => {
@ -175,7 +175,7 @@ class PushMenu {
this.sidebarHover()
const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_CONTENT_WRAPPER)
const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_APP_MAIN)
if (targetContentWrapper) {
targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)