maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix sidebar color variant

Browse source
This commit is contained in:
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>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,6 +11,8 @@
<title>AdminLTE v4</title>
<!-- 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"> -->
<!-- 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="./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">
@ -46,17 +50,13 @@
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar shadow">
<aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
<div class="brand-container">
<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>
</a>
<span class="brand-icons mx-2">
<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>
<a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
</div>
<!-- Sidebar -->
<div class="sidebar">

96
scss/_brand-container.scss
View file

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

4
scss/_mixins.scss
View file

@ -6,5 +6,7 @@
@import "mixins/scrollbar";
@import "mixins/brand-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";

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
.nav-sidebar {
// All levels

44
scss/_sidebar-collapse.scss
View file

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