Fix sidebar color variant
This commit is contained in:
parent
060f9082a6
commit
e54b4b6d3a
11 changed files with 292 additions and 157 deletions
14
index.html
14
index.html
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
86
scss/mixins/_nav-treeview-dark.scss
Normal 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
88
scss/mixins/_nav-treeview-light.scss
Normal 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
9
scss/mixins/_sidebar-color.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
Loading…
Reference in a new issue