|
|
@@ -1,6 +1,8 @@
|
|
|
+$nav-body-background-color: #484A69;
|
|
|
$nav-font-size: 16px;
|
|
|
$nav-font-color: #EEEEF2;
|
|
|
$nav-font-color-over: #fff;
|
|
|
+$menu-body-background-color: #65678C;
|
|
|
|
|
|
.x-navpanel {
|
|
|
overflow: visible;
|
|
|
@@ -18,7 +20,7 @@ $nav-font-color-over: #fff;
|
|
|
overflow: visible;
|
|
|
|
|
|
.x-autocontainer-outerCt {
|
|
|
- background-color: #484A69;
|
|
|
+ background-color: $nav-body-background-color;
|
|
|
|
|
|
.x-autocontainer-innerCt {
|
|
|
|
|
|
@@ -38,7 +40,6 @@ $nav-font-color-over: #fff;
|
|
|
outline: none !important;
|
|
|
|
|
|
.x-navitem-body {
|
|
|
- background: #505275;
|
|
|
|
|
|
.nav-inner-wrap {
|
|
|
position: relative;
|
|
|
@@ -74,22 +75,17 @@ $nav-font-color-over: #fff;
|
|
|
}
|
|
|
.x-navitem-over {
|
|
|
.x-navitem-body {
|
|
|
- background: #474968;
|
|
|
- box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.50);
|
|
|
+ background: #65678C;
|
|
|
|
|
|
.nav-inner-wrap {
|
|
|
|
|
|
- &:after {
|
|
|
+ &:before {
|
|
|
content: ' ';
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border: 8px solid transparent;
|
|
|
- border-right-color: #595B7E;
|
|
|
- border-left: none;
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 22px;
|
|
|
- z-index: 999999;
|
|
|
+ width: 8px;
|
|
|
+ height: 60px;
|
|
|
+ background: #34baf6;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
|
|
|
.nav-inner-icon {
|
|
|
@@ -118,6 +114,7 @@ $nav-font-color-over: #fff;
|
|
|
position: absolute;
|
|
|
z-index: 9999;
|
|
|
top: 0;
|
|
|
+ border-left: 1px solid $nav-body-background-color;
|
|
|
background: white;
|
|
|
overflow: hidden;
|
|
|
|
|
|
@@ -133,23 +130,34 @@ $nav-font-color-over: #fff;
|
|
|
flex-direction: column;
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
- .menu-content {
|
|
|
+ .menu-title {
|
|
|
border-left: 1px solid #A4ABBC;
|
|
|
&:before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 2px;
|
|
|
height: 22px;
|
|
|
- margin-left: -2px;
|
|
|
- background: #484A69;
|
|
|
+ margin-left: -31px;
|
|
|
+ background: $menu-body-background-color;
|
|
|
}
|
|
|
+ }
|
|
|
+ .menu-content {
|
|
|
+ border-left: 1px solid #A4ABBC;
|
|
|
+ // &:before {
|
|
|
+ // content: '';
|
|
|
+ // position: absolute;
|
|
|
+ // width: 2px;
|
|
|
+ // height: 22px;
|
|
|
+ // margin-left: -2px;
|
|
|
+ // background: $menu-body-background-color;
|
|
|
+ // }
|
|
|
&:after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 2px;
|
|
|
height: 22px;
|
|
|
margin-left: -2px;
|
|
|
- background: #484A69;
|
|
|
+ background: $menu-body-background-color;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
@@ -157,7 +165,7 @@ $nav-font-color-over: #fff;
|
|
|
|
|
|
.menu-title {
|
|
|
padding-left: 30px;
|
|
|
- background: #484A69;
|
|
|
+ background: $menu-body-background-color;
|
|
|
|
|
|
.menu-title-text {
|
|
|
height: 40px;
|
|
|
@@ -172,7 +180,7 @@ $nav-font-color-over: #fff;
|
|
|
|
|
|
.menu-content {
|
|
|
height: 100%;
|
|
|
- background: #484A69;
|
|
|
+ background: $menu-body-background-color;
|
|
|
|
|
|
.menuitem {
|
|
|
padding-left: 25px;
|
|
|
@@ -198,7 +206,7 @@ $nav-font-color-over: #fff;
|
|
|
color: #fff;
|
|
|
display: none;
|
|
|
padding: 3px 6px;
|
|
|
- border-radius: 3px;
|
|
|
+ // border-radius: 3px;
|
|
|
margin-right: 5px;
|
|
|
height: 24px;
|
|
|
margin-top: 5px;
|
|
|
@@ -209,9 +217,18 @@ $nav-font-color-over: #fff;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
- border-radius: 4px;
|
|
|
+ // border-radius: 4px;
|
|
|
background-color: #595B7E;
|
|
|
|
|
|
+ &:before {
|
|
|
+ content: ' ';
|
|
|
+ position: absolute;
|
|
|
+ width: 6px;
|
|
|
+ height: 34px;
|
|
|
+ background: #34baf6;
|
|
|
+ margin-left: -25px;
|
|
|
+ }
|
|
|
+
|
|
|
.item-icon {
|
|
|
display: block;
|
|
|
}
|
zhuth