206 lines
4.8 KiB
SCSS
206 lines
4.8 KiB
SCSS
//
|
|
// Dark Sidenav
|
|
//
|
|
|
|
|
|
|
|
body{
|
|
&.dark-topbar{
|
|
.topbar {
|
|
.topbar-left {
|
|
background-color: $brand-dark-bg;
|
|
.logo {
|
|
.logo-lg{
|
|
display: none;
|
|
&.logo-light{
|
|
display: inline-block;
|
|
height: 14px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.navbar-custom {
|
|
background: $bg-dark-navbar;
|
|
.nav-link {
|
|
color: $header-item-dark-color;
|
|
}
|
|
.topbar-nav {
|
|
li {
|
|
&.show {
|
|
.nav-link {
|
|
background-color: lighten($bg-dark-navbar, 3%);
|
|
color: $body-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-menu-mobile {
|
|
color: $vertical-menu-btn-dark-color !important;
|
|
}
|
|
|
|
/* Notification */
|
|
|
|
.notification-list {
|
|
.noti-icon {
|
|
color: $noti-icon-dark-color;
|
|
}
|
|
.noti-icon-badge {
|
|
border: 2px solid rgba($white, 0.6);
|
|
}
|
|
}
|
|
|
|
// Search
|
|
.app-search .form-control,
|
|
.app-search .form-control:focus {
|
|
border: 1px solid $topbar-search-border-dark-color;
|
|
color: $topbar-search-dark-color;
|
|
background: $bg-dark-navbar;
|
|
}
|
|
|
|
.app-search input.form-control::-webkit-input-placeholder {
|
|
color: darken($gray-400, 8%);
|
|
}
|
|
|
|
.app-search input.form-control:-moz-placeholder {
|
|
color: darken($gray-400, 8%);
|
|
}
|
|
|
|
.app-search input.form-control::-moz-placeholder {
|
|
color: darken($gray-400, 8%);
|
|
}
|
|
|
|
.app-search input.form-control:-ms-input-placeholder {
|
|
color: darken($gray-400, 8%);
|
|
}
|
|
|
|
.app-search a {
|
|
background: $topbar-search-border-dark-color;
|
|
border: 1px solid $topbar-search-border-dark-color;
|
|
color: $gray-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
body{
|
|
&.dark-sidenav{
|
|
.topbar {
|
|
.topbar-left {
|
|
background-color: $brand-dark-bg;
|
|
.logo {
|
|
.logo-lg{
|
|
display: none;
|
|
&.logo-light{
|
|
display: inline-block;
|
|
height: 14px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.left-sidenav {
|
|
background-color: $bg-dark-leftbar;
|
|
}
|
|
|
|
.left-sidenav-menu {
|
|
li {
|
|
> a {
|
|
color: $menu-item-dark-color;
|
|
|
|
&:hover {
|
|
color: $menu-sub-item-hover-dark-color;
|
|
i{
|
|
color: $leftbar-icon-hover-dark-color;
|
|
}
|
|
span{
|
|
i{
|
|
color: $menu-item-hover-dark-color
|
|
}
|
|
}
|
|
}
|
|
i {
|
|
color: $leftbar-icon-dark-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ul {
|
|
|
|
li {
|
|
> a {
|
|
color: $menu-sub-item-dark-color;
|
|
&:hover {
|
|
color: $menu-sub-item-hover-dark-color;
|
|
i{
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mm-active {
|
|
.mm-active{
|
|
>a{
|
|
color: $menu-sub-item-active-dark-color;
|
|
background: $bg-dark-leftbar;
|
|
box-shadow: 3px 0 20px 0 rgba($black, 0.15);
|
|
&.active{
|
|
color: $menu-sub-item-active-dark-color;
|
|
background-color: transparent;
|
|
}
|
|
i{
|
|
color: $primary;
|
|
}
|
|
}
|
|
.mm-show{
|
|
li{
|
|
a.active{
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> a {
|
|
color: $menu-item-active-color;
|
|
background: linear-gradient(14deg, $primary 0%, rgba($primary, .6));
|
|
i{
|
|
color: $menu-item-active-dark-color;
|
|
}
|
|
}
|
|
.nav-item.active{
|
|
a.nav-link.active{
|
|
background-color:transparent;
|
|
color: $menu-nav-item-active-dark-color;
|
|
i{
|
|
color: $menu-nav-item-active-dark-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.menu-arrow {
|
|
i {
|
|
width: 15px;
|
|
color: $menu-arrow-dark-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|