PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
$menu_dark_option: $dark_option;
$menu_dark_theme_option: $dark_theme_option;
// Menu Font
$menu-link-ff: $alt-font-family !default;
$menu-link-fs: $fx-sz-15 !default;
$menu-link-fw: $fw-bold !default;
$menu-link-lh: 1.25rem !default;
$menu-link-ls: 0.01em !default;
$menu-link-case: none !default;
$menu-link-gap-y: .625rem !default;
$menu-link-gap-x: $sidebar-gap-x !default;
// Menu Sub/Child Font
$menu-sub-diff: true;
$menu-sub-link-ff: $base-font-family !default;
$menu-sub-link-fs: $fx-sz-14 !default;
$menu-sub-link-fw: $fw-normal !default;
$menu-sub-link-lh: $menu-link-lh !default;
$menu-sub-link-ls: normal !default;
$menu-sub-link-case: none !default;
$menu-sub-link-gap-y: .375rem !default;
$menu-sub-link-gap-x: $menu-link-gap-x !default;
// Link color
$menu-link-color-base: lighten($base-text, 12%) !default;
$menu-link-color-sub: lighten($base-text, 12%) !default;
$menu-link-color-hover: lighten($accent-color, 5%) !default;
$menu-border-color: $border-color !default;
$menu-border-dark-color: rgba($white, .12) !default;
// Menu Icon
$menu-icon-width-base: $menu-icon-width !default;
$menu-icon-font-size: 24px;
$menu-icon-color-base: $base-light !default;
$menu-icon-color-hover: $accent-color !default;
$menu-icon-width-small: $menu-icon-width-sm !default;
$menu-icon-font-size-small: 18px;
// Count
$menu-link-count-gap: .25rem !default;
$menu-link-count-fs: .85em !default;
$menu-link-count-color: $base-light !default;
// Menu Main Style
$menu-main-link-color-base: $base-text !default;
$menu-main-link-color-light: $base-light !default;
$menu-main-link-color-sub: $base-text !default;
$menu-main-link-gap-y: .5rem !default;
$menu-main-link-gap-x: 1.25rem !default;
$menu-main-link-gap-x: 1.25rem !default;
$menu-main-top-link-gap-y: 1.5rem !default;
$menu-main-top-link-gap-x: 1rem !default;
$menu-main-link-fs: $fx-sz-13 !default; // @desktop only
$menu-main-top-link-fs: $fx-sz-14 !default; // @desktop only
$menu-main-ddm-width: 200px !default;
// Menu SM Style
$menu-sm-link-gap-y: .25rem !default;
$menu-sm-link-color: $base-text !default;
$menu-sm-icon-width: 1.375rem;
$menu-sm-link-fs: $fx-sz-12;
$menu-sm-link-lh: 1.125rem;
// Menu Footer Style
$menu-footer-link-gap-y: .25rem !default;
$menu-footer-link-color: $base-light !default;
$menu-footer-icon-width: 1.375rem;
$menu-footer-link-fs: $fx-sz-12;
$menu-footer-link-lh: 1.125rem;
$menu-footer-icon-color: $accent-color;
// Icon
$menu-toggle-icon-ltr: $ni-chevron-right !default;
$menu-toggle-icon-rtl: $ni-chevron-left !default;
$menu-main-toggle-icon: $ni-chevron-down !default;
$menu-main-sub-toggle-icon-ltr: $ni-chevron-right !default;
$menu-main-sub-toggle-icon-rtl: $ni-chevron-left !default;
/////////////////////////
/// Menu Navigation
/////////////////////////
.nk-menu{
li{
a{
vertical-align: middle;
display: flex;
position: relative;
align-items: center;
transition: color .3s, background-color .3s;
}
}
&-item{
padding: 2px 0;
.nk-menu-sub & {
padding: 1px 0;
}
&.has-sub{
position: relative;
}
}
> .nk-menu-item.menu-without-icon > .nk-menu-sub .nk-menu-link{
@if($rtl==false){
padding-left: 0;
}
@if($rtl==true){
padding-right: 0;
}
}
&-link{
@if($rtl==false){
padding: $menu-link-gap-y ($menu-link-gap-x + 16) $menu-link-gap-y $menu-link-gap-x;
}
@if($rtl==true){
padding: $menu-link-gap-y $menu-link-gap-x $menu-link-gap-y ($menu-link-gap-x + 16);
}
color: $menu-link-color-base;
font-family: $menu-link-ff;
font-weight: $menu-link-fw;
font-size: $menu-link-fs;
letter-spacing: $menu-link-ls;
text-transform: $menu-link-case;
line-height: $menu-link-lh;
&:hover,.active > &{
color: $menu-link-color-hover;
.count{
color: $menu-link-color-hover;
}
}
@if($menu-sub-diff==true) {
.nk-menu-sub & {
@if($rtl==false){
padding: $menu-sub-link-gap-y ($menu-sub-link-gap-x + 16) $menu-sub-link-gap-y ($menu-icon-width-base);
}
@if($rtl==true){
padding: $menu-sub-link-gap-y ($menu-icon-width-base) $menu-sub-link-gap-y ($menu-sub-link-gap-x + 16);
}
font-family: $menu-sub-link-ff;
font-weight: $menu-sub-link-fw;
font-size: $menu-sub-link-fs;
letter-spacing: $menu-sub-link-ls;
text-transform: $menu-sub-link-case;
line-height: $menu-sub-link-lh;
color: $menu-link-color-sub;
}
}
&.is-disable{
cursor: default;
&:hover,.active > &{
color: $menu-link-color-base;
.count{
color: $menu-link-color-base;
}
}
}
.is-light & {
color: $base-text;
}
@if($menu_dark_theme_option==true) {
.is-theme & {
color: darken($accent-light, 8%);
}
}
&:hover, .active > & {
.is-light & {
color: $menu-link-color-hover;
}
@if($menu_dark_theme_option==true) {
.is-theme & {
color: $white;
}
}
}
span.small {
color: $base-light;
@if($rtl==false){
margin-left: .5rem;
}
@if($rtl==true){
margin-right: .5rem;
}
}
}
&-icon{
font-weight: normal;
letter-spacing: normal;
width: $menu-icon-width-base;
line-height: 1;
flex-grow: 0;
color: $menu-icon-color-base;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: darken($accent-light, 8%);
}
}
svg,img{
width: $menu-icon-width-base;
}
.icon {
font-size: $menu-icon-font-size;
letter-spacing: normal;
vertical-align: middle;
color: currentColor;
transition: color .4s, background-color .4s;
}
.nk-menu-link:hover &, .nk-menu-item.active > .nk-menu-link & , .nk-menu-item.current-menu > .nk-menu-link & {
color: $menu-link-color-hover;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: $white;
}
}
}
.nk-menu-link.is-disable:hover &{
color: $menu-icon-color-base;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: $accent-light;
}
}
}
}
&-text{
flex-grow: 1;
display: inline-block;
}
&-badge{
border-radius: $border-radius-sm;
padding: 0 .4rem;
font-size: $fx-sz-11;
color: $accent-500;
background: $accent-100;
position: absolute;
top: 50%;
@if($rtl==false){
right: $sidebar-gap-x;
.has-sub &{
right: $sidebar-gap-x + 24px;
}
}
@if($rtl==true){
left: $sidebar-gap-x;
.has-sub &{
left: $sidebar-gap-x + 24px;
}
}
transform: translateY(-50%);
@if($menu_dark_option==true) {
.is-dark & {
color: $accent-400;
background: lighten($sidebar-bg-dark-color, 10%);
}
}
@if($menu_dark_theme_option==true) {
.is-theme & {
color: $accent-300;
background: lighten($sidebar-bg-theme-color, 12%);
}
}
.nk-menu-main .nk-menu-sub & {
color: $accent-500;
background: $accent-100;
}
}
&-heading{
padding: .25rem $sidebar-gap-x 0.5rem;
color: $base-light;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: darken($accent-light, 15%);
}
}
.nk-menu-item + &{
padding-top: 2.5rem;
}
.overline-title {
color: inherit;
}
span{
font-size: $fx-sz-13;
font-weight: $fw-normal;
}
}
&-hr{
margin: 1.25rem 0;
border-bottom: 1px solid $menu-border-color;
@if($menu_dark_option==true) {
.is-dark &{
border-color: $menu-border-dark-color;
}
}
@if($menu_dark_theme_option==true) {
.is-theme &{
border-color: $menu-border-dark-color;
}
}
+ .nk-menu-heading{
padding-top: 1rem;
}
}
&-sub{
padding-bottom: .25rem;
.nk-menu-toggle + &{
display: none;
}
.active > &{
display: block;
}
.nk-menu-link {
&:hover{
color: $accent-color;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: $white;
}
}
}
}
.active > .nk-menu-link {
color: $accent-color;
@if($menu_dark_theme_option==true) {
.is-theme &{
color: $white;
}
}
}
.nk-menu-icon {
width: 24px;
margin-top: -1px;
.icon {
margin-top: -1px;
font-size: 1.2em;
}
}
}
&-toggle{
position: relative;
&:after{
position: absolute;
font-family: $nk-dashlite-font;
@if($rtl==false){
content: $menu-toggle-icon-ltr;
right: 1.25rem;
}
@if($rtl==true){
content: $menu-toggle-icon-rtl;
left: 1.25rem;
}
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
color: $base-light;
transition: transform .3s, color .1s;
@if($menu_dark_option==true or $menu_dark_theme_option==true) {
.is-dark &, .is-theme & {
color: rgba($white, 0.4);
}
}
}
.has-sub.active > &{
&:after{
transform: translateY(-50%) rotate(90deg);
}
}
}
.count{
display: inline-block;
font-size: $menu-link-count-fs;
@if($rtl==false){
margin-left: $menu-link-count-gap;
}
@if($rtl==true){
margin-right: $menu-link-count-gap;
}
color: $menu-link-count-color;
line-height: 1;
}
&-icon-colored {
.nk-menu-icon {
color: $menu-icon-color-hover;
}
}
&-tooltip{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
////////////////////
// Menu Footer
////////////////////
.nk-menu-footer{
display: flex;
.nk-menu{
&-link{
padding-left: 0;
padding-right: 0;
padding-top: .25rem;
padding-bottom: .25rem;
color: $menu-footer-link-color;
font-family: $base-font-family;
font-weight: $fw-medium;
&:hover{
color: $menu-link-color-hover;
}
@if($menu_dark_theme_option==true) {
.is-theme & {
color: $accent-light;
}
}
}
&-icon{
width: $menu-footer-icon-width;
color: $menu-footer-icon-color;
.icon{
font-size: 1rem;
}
}
&-text{
font-size: $menu-footer-link-fs;
line-height: $menu-footer-link-lh;
}
}
}
////////////////////////////
// Sidebar
////////////////////////////
.nk-sidebar{
.nk-menu{
> li {
.nk-menu-sub {
.nk-menu-link {
@if($rtl==false){
padding-left: $sidebar-gap-x + $menu-icon-width-base;
}
@if($rtl==true){
padding-right: $sidebar-gap-x + $menu-icon-width-base;
}
}
.nk-menu-sub{
margin-top: .5rem;
margin-bottom: .5rem;
@if($rtl==false){
margin-left: $sidebar-gap-x + $menu-icon-width-base;
border-left: 1px solid $border-color;
}
@if($rtl==true){
margin-right: $sidebar-gap-x + $menu-icon-width-base;
border-right: 1px solid $border-color;
}
padding-bottom: 0;
.nk-menu-link {
@if($rtl==false){
padding-left: 1rem;
}
@if($rtl==true){
padding-right: 1rem;
}
}
}
}
}
}
@if($menu_dark_option==true or $menu_dark_theme_option==true) {
&.is-dark, &.is-theme{
.nk-menu{
> li {
.nk-menu-sub {
.nk-menu-sub{
border-color: rgba($white, .12);
}
}
}
}
}
}
}
.nk-sidebar{
.nk-menu-toggle:after {
@if($rtl==false){
right: $sidebar-gap-x - 2;
}
@if($rtl==true){
left: $sidebar-gap-x - 2;
}
}
.nk-menu{
> li {
.nk-menu-sub {
.nk-menu-link {
@if($rtl==false){
padding-left: $sidebar-gap-x + $menu-icon-width-base;
}
@if($rtl==true){
padding-right: $sidebar-gap-x + $menu-icon-width-base;
}
}
}
}
}
}
@include media-breakpoint-up(xl){
.nk-sidebar{
.nk-menu{
padding-left: $sidebar-gap-x-fat-tablet;
padding-right: $sidebar-gap-x-fat-tablet;
> li {
.nk-menu-sub {
padding-top: .25rem;
.nk-menu-link {
@if($rtl==false){
padding-left: $sidebar-gap-x + $menu-icon-width-base;
}
@if($rtl==true){
padding-right: $sidebar-gap-x + $menu-icon-width-base;
}
}
}
}
> li{
> a{
border-radius: 40px;
&:hover{
background: $white;
}
}
&:hover,&.active,&.current-menu{
> a{
background: $white;
}
}
}
&-sm, &-footer {
& > li:hover a, & > li.active a, & > li.current-menu a, & > li > a:hover{
background: transparent !important;
}
}
}
@if($menu_dark_option==true) {
&.is-dark{
.nk-menu{
> li {
&:hover > a, &.active > a, &.current-menu > a, > a:hover {
background: lighten($darker, 6%);
}
}
}
}
}
@if($menu_dark_theme_option==true) {
&.is-theme{
.nk-menu{
> li {
&:hover > a, &.active > a, &.current-menu > a, > a:hover {
background: lighten($accent-dark, 6%);
}
}
}
}
}
&.is-light{
.nk-menu{
> li {
&:hover > a, &.active > a, &.current-menu > a, > a:hover {
background: darken($lighter, 2%);
}
}
}
}
}
}
@media (min-width:1560px){
.nk-sidebar{
.nk-menu{
padding-left: $sidebar-gap-x-fat;
padding-right: $sidebar-gap-x-fat;
&-heading{
padding-left: $sidebar-gap-x;
padding-right: $sidebar-gap-x;
}
}
}
}
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E