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

Fix sidebar color variant

pull/3698/head
Daniel 2021-05-16 03:05:23 +05:30
parent 060f9082a6
commit e54b4b6d3a
11 changed files with 292 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -1,5 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,6 +11,8 @@
<title>AdminLTE v4</title> <title>AdminLTE v4</title>
<!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css --> <!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> --> <!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
<!-- For RTL verison -->
<!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
<link rel="stylesheet" href="dist/css/adminlte.css"> <link rel="stylesheet" href="dist/css/adminlte.css">
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@ -46,17 +50,13 @@
<!-- /.navbar --> <!-- /.navbar -->
<!-- Main Sidebar Container --> <!-- Main Sidebar Container -->
<aside class="main-sidebar shadow"> <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
<div class="brand-container"> <div class="brand-container">
<a href="#" class="brand-link"> <a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
<span class="brand-text fw-light">AdminLTE 4</span> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </a>
<span class="brand-icons mx-2"> <a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<!-- <a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a> -->
<!-- <a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a> -->
</span>
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar"> <div class="sidebar">

72
scss/_brand-container.scss
View File

@ -2,30 +2,27 @@
// Core: Brand // Core: Brand
// //
@include brand-variant($sidebar-dark-bg, $sidebar-dark-color); // @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
.brand-container { .brand-container {
// grid-area: main-brand;
display: grid; display: grid;
grid-template-areas: "brand-link sidebar-mini-icon"; grid-template-areas: "brand-link pushmenu";
grid-auto-flow: column;
justify-content: space-between; justify-content: space-between;
font-size: $navbar-brand-font-size; font-size: $navbar-brand-font-size;
transition: width $transition-speed $transition-fn;
padding: $brand-link-padding-y $sidebar-padding-x; padding: $brand-link-padding-y $sidebar-padding-x;
white-space: nowrap; white-space: nowrap;
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%); overflow: hidden;
// min-width: $sidebar-width;
// max-width: $sidebar-width;
// height: min-content;
// @include transition($sidebar-transition);
// z-index: $zindex-main-brand;
.brand-link { .brand-link {
grid-area: brand-link; grid-area: brand-link;
&:hover {
color: $white;
text-decoration: none;
} }
.brand-image { .brand-image {
grid-area: brand-img;
float: left; float: left;
line-height: .8; line-height: .8;
margin-left: .8rem; margin-left: .8rem;
@ -34,54 +31,45 @@
max-height: 33px; max-height: 33px;
width: auto; width: auto;
} }
}
.brand-text { .pushmenu {
grid-area: brand-text; grid-area: pushmenu;
color: $sidebar-dark-color; }
.sidebar-bg-dark & {
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
.brand-link,
.pushmenu {
color: rgba($white, .8);
&:hover { &:hover {
color: $white; color: $white;
text-decoration: none; }
} }
} }
// .brand-icons { .sidebar-bg-light & {
// display: inline-flex; border-bottom: $brand-link-border-buttom solid $gray-300;
// > * { .brand-link,
// color: $gray-400; .pushmenu {
// } color: rgba($black, .8);
// }
.sidebar-full-icon, &:hover {
.header-full-icon { color: $black;
display: none; }
} }
.sidebar-mini-icon {
grid-area: sidebar-mini-icon;
color: $gray-400;
} }
} }
.sidebar-collapse:not(.sidebar-hover) { .sidebar-collapse:not(.sidebar-hover) {
.brand-container { .brand-container {
grid-template-areas: "sidebar-mini-icon brand-link";
justify-content: center; justify-content: center;
// min-width: $sidebar-mini-width;
// max-width: $sidebar-mini-width;
.brand-link { .brand-link {
display: none; width: 0;
} }
} }
} }
// @include media-breakpoint-down(md) {
// .main-brand {
// min-width: unset;
// max-width: unset;
// .sidebar-mini-icon {
// display: none;
// }
// }
// }

2
scss/_layout-fixed.scss
View File

@ -16,7 +16,7 @@
top: auto; top: auto;
.sidebar { .sidebar {
height: subtract(100vh, add($main-header-height-inner, $main-header-bottom-border-width / 2)); height: subtract(100vh, add($main-header-height-inner, $main-header-bottom-border-width));
} }
} }

15
scss/_main-sidebar.scss
View File

@ -2,21 +2,6 @@
// Core: Main Sidebar // Core: Main Sidebar
// //
// Default Sidebar Variant
@include sidebar-variant(
$sidebar-dark-bg,
$sidebar-dark-hover-bg,
$sidebar-dark-color,
$sidebar-dark-hover-color,
$sidebar-dark-active-color,
$sidebar-dark-submenu-bg,
$sidebar-dark-submenu-color,
$sidebar-dark-submenu-hover-color,
$sidebar-dark-submenu-hover-bg,
$sidebar-dark-submenu-active-color,
$sidebar-dark-submenu-active-bg
);
.main-sidebar { .main-sidebar {
grid-area: main-sidebar; grid-area: main-sidebar;
@include transition($sidebar-transition); @include transition($sidebar-transition);

4
scss/_mixins.scss
View File

@ -6,5 +6,7 @@
@import "mixins/scrollbar"; @import "mixins/scrollbar";
@import "mixins/brand-variant"; @import "mixins/brand-variant";
@import "mixins/header-variant"; @import "mixins/header-variant";
@import "mixins/sidebar-variant"; @import "mixins/sidebar-color";
@import "mixins/nav-treeview-dark";
@import "mixins/nav-treeview-light";
@import "mixins/miscellaneous"; @import "mixins/miscellaneous";

36
scss/_nav-sidebar.scss
View File

@ -1,3 +1,39 @@
.sidebar-bg-dark {
@include nav-treeview-dark (
$sidebar-dark-bg,
$sidebar-dark-hover-bg,
$sidebar-dark-color,
$sidebar-dark-hover-color,
$sidebar-dark-active-color,
$sidebar-dark-submenu-bg,
$sidebar-dark-submenu-color,
$sidebar-dark-submenu-hover-color,
$sidebar-dark-submenu-hover-bg,
$sidebar-dark-submenu-active-color,
$sidebar-dark-submenu-active-bg
);
}
.sidebar-bg-light {
@include nav-treeview-light (
$sidebar-light-bg,
$sidebar-light-hover-bg,
$sidebar-light-color,
$sidebar-light-hover-color,
$sidebar-light-active-color,
$sidebar-light-submenu-bg,
$sidebar-light-submenu-color,
$sidebar-light-submenu-hover-color,
$sidebar-light-submenu-hover-bg,
$sidebar-light-submenu-active-color,
$sidebar-light-submenu-active-bg
);
}
.sidebar-color-primary {
@include sidebar-color($primary);
}
// Sidebar navigation menu // Sidebar navigation menu
.nav-sidebar { .nav-sidebar {
// All levels // All levels

44
scss/_sidebar-collapse.scss
View File

@ -25,7 +25,6 @@
white-space: nowrap; white-space: nowrap;
} }
.sidebar .user-panel > .info,
.nav-sidebar .nav-link p, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: -10px; margin-left: -10px;
@ -45,7 +44,6 @@
display: inline-block; display: inline-block;
} }
.sidebar .user-panel > .info,
.nav-sidebar .nav-link p, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: 0; margin-left: 0;
@ -89,26 +87,24 @@
// } // }
// } // }
.sidebar-is-opening { // .sidebar-is-opening {
.sidebar .user-panel > .info, // .nav-sidebar .nav-link p,
.nav-sidebar .nav-link p, // .brand-link {
.brand-link { // margin-left: 0;
margin-left: 0; // animation-name: fadeIn;
animation-name: fadeIn; // animation-duration: $transition-speed;
animation-duration: $transition-speed; // animation-fill-mode: both;
animation-fill-mode: both; // visibility: visible;
visibility: visible; // }
} // }
}
.sidebar-is-collapsing { // .sidebar-is-collapsing {
.sidebar .user-panel > .info, // .nav-sidebar .nav-link p,
.nav-sidebar .nav-link p, // .brand-link {
.brand-link { // margin-left: -10px;
margin-left: -10px; // animation-name: fadeOut;
animation-name: fadeOut; // animation-duration: $transition-speed;
animation-duration: $transition-speed; // animation-fill-mode: both;
animation-fill-mode: both; // visibility: visible;
visibility: visible; // }
} // }
}

86
scss/mixins/_nav-treeview-dark.scss Normal file
View File

@ -0,0 +1,86 @@
@mixin nav-treeview-dark(
$sidebar-bg,
$sidebar-hover-bg,
$sidebar-color,
$sidebar-hover-color,
$sidebar-active-color,
$sidebar-submenu-bg,
$sidebar-submenu-color,
$sidebar-submenu-hover-color,
$sidebar-submenu-hover-bg,
$sidebar-submenu-active-color,
$sidebar-submenu-active-bg
) {
// Sidebar background color
background-color: $sidebar-bg;
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active {
color: $sidebar-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
background-color: $sidebar-hover-bg;
color: $sidebar-hover-color;
}
> .nav-link.active {
color: $sidebar-hover-color;
}
// First Level Submenu
> .nav-treeview {
background-color: $sidebar-submenu-bg;
}
}
// Section Heading
.nav-header {
background-color: inherit; //darken($sidebar-bg, 3%);
color: tint-color($sidebar-color, 5%);
}
// All links within the sidebar menu
.sidebar {
a {
color: $sidebar-color;
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $sidebar-submenu-color;
&:hover,
&:focus {
background-color: $sidebar-submenu-hover-bg;
color: $sidebar-submenu-hover-color;
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
background-color: $sidebar-submenu-active-bg;
color: $sidebar-submenu-active-color;
}
}
}
}
}

88
scss/mixins/_nav-treeview-light.scss Normal file
View File

@ -0,0 +1,88 @@
@mixin nav-treeview-light(
$sidebar-bg,
$sidebar-hover-bg,
$sidebar-color,
$sidebar-hover-color,
$sidebar-active-color,
$sidebar-submenu-bg,
$sidebar-submenu-color,
$sidebar-submenu-hover-color,
$sidebar-submenu-hover-bg,
$sidebar-submenu-active-color,
$sidebar-submenu-active-bg
) {
// Sidebar background color
background-color: $sidebar-bg;
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active,
&:focus {
color: $sidebar-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
background-color: $sidebar-hover-bg;
color: $sidebar-hover-color;
}
> .nav-link.active {
color: $sidebar-active-color;
}
// First Level Submenu
> .nav-treeview {
background-color: $sidebar-submenu-bg;
}
}
// Section Heading
.nav-header {
background-color: inherit;
color: shade-color($sidebar-color, 5%);
}
// All links within the sidebar menu
.sidebar {
a {
color: $sidebar-color;
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $sidebar-submenu-color;
&:hover,
&:focus {
background-color: $sidebar-submenu-hover-bg;
color: $sidebar-submenu-hover-color;
}
}
> .nav-link.active {
&,
&:hover {
background-color: $sidebar-submenu-active-bg;
color: $sidebar-submenu-active-color;
}
}
> .nav-link:hover {
background-color: $sidebar-submenu-hover-bg;
}
}
}
}

9
scss/mixins/_sidebar-color.scss Normal file
View File

@ -0,0 +1,9 @@
// Sidebar Color
@mixin sidebar-color($color) {
.nav-sidebar > .nav-item {
> .nav-link.active {
background-color: $color;
color: color-contrast($color);
}
}
}

55
scss/mixins/_sidebar-variant.scss
View File

@ -1,55 +0,0 @@
//
// Mixins: Sidebar Variant
//
@mixin sidebar-variant(
$sidebar-bg,
$sidebar-hover-bg,
$sidebar-color,
$sidebar-hover-color,
$sidebar-active-color,
$sidebar-submenu-bg,
$sidebar-submenu-color,
$sidebar-submenu-hover-color,
$sidebar-submenu-hover-bg,
$sidebar-submenu-active-color,
$sidebar-submenu-active-bg
) {
.main-sidebar {
background-color: $sidebar-bg;
color: $sidebar-color;
}
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-link {
color: $sidebar-color;
&:hover,
&:focus {
color: $sidebar-hover-color;
}
.active {
color: $sidebar-active-color;
}
}
.nav-treeview {
background-color: $sidebar-bg;
}
}
// .sidebar-collapse:not(.layout-fixed) {
// .sidebar {
// .nav-sidebar .nav-item:hover {
// .nav-link:not(.active) {
// p {
// background-color: $sidebar-bg;
// }
// }
// }
// }
// }
}