.shrinkable-menu {
|
height: 100%;
|
width: 100%;
|
}
|
|
// 收缩 默认暗蓝
|
.shrink-menu-content {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.shrink-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
min-width: 60px;
|
width: 100%;
|
height: 45px;
|
}
|
|
.ivu-select-dropdown {
|
margin: 0 0 0 5px;
|
|
.ivu-dropdown-item {
|
padding: 10px 16px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
// 激活颜色
|
.shrink-menu-icon-darkblue,
|
.shrink-menu-icon-dark {
|
.active {
|
color: #fff !important;
|
}
|
}
|
|
.shrink-menu-icon-light {
|
.active {
|
color: #2d8cf0 !important;
|
}
|
}
|
|
// 默认暗蓝
|
.darkblue-menu {
|
|
// 背景色
|
.ivu-menu-darkblue {
|
background: #17233d;
|
}
|
|
// 一级和二级 字体色
|
.ivu-menu-item,
|
.ivu-menu-submenu-title {
|
color: hsla(0, 0%, 100%, .65);
|
|
&:hover {
|
color: #fff;
|
}
|
}
|
|
// 打开 变深
|
.ivu-menu-opened {
|
background: #001529;
|
}
|
|
// 一级打开 不变
|
.ivu-menu-opened {
|
.ivu-menu-submenu-title {
|
color: #fff;
|
background: #17233d;
|
}
|
}
|
|
.ivu-menu-submenu-title {
|
&:hover {
|
color: #fff;
|
background: #17233d;
|
}
|
}
|
|
// 单个
|
.ivu-menu-item-active:not(.ivu-menu-submenu),
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
|
color: #2d8cf0;
|
}
|
|
.ivu-menu-item-active:not(.ivu-menu-submenu),
|
.ivu-menu-item-active:not(.ivu-menu-submenu):hover,
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
|
background: #001529;
|
}
|
|
// 激活
|
.ivu-menu-submenu .ivu-menu-item-active,
|
.ivu-menu-submenu .ivu-menu-item-active:hover {
|
color: #fff;
|
background: #2d8cf0;
|
}
|
|
// 激活
|
.ivu-menu-item-active .ivu-menu-submenu-title {
|
color: #fff;
|
}
|
|
// 收缩
|
.shrink-menu-content {
|
.shrink-icon {
|
color: hsla(0, 0%, 100%, .65);
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #fff;
|
background: #001529;
|
}
|
}
|
|
.ivu-select-dropdown {
|
background: #17233d;
|
|
.ivu-dropdown-item {
|
color: hsla(0, 0%, 100%, .65);
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #fff;
|
background: #17233d;
|
}
|
}
|
|
.ivu-dropdown-item-selected,
|
.ivu-dropdown-item-selected:hover {
|
color: #fff;
|
background: #2d8cf0;
|
}
|
}
|
}
|
}
|
|
// 分割线--------------------------------------------
|
|
// light
|
.light-menu {
|
|
// 一级打开 变蓝
|
.ivu-menu-opened {
|
.ivu-menu-submenu-title {
|
color: #2d8cf0;
|
}
|
}
|
|
// 激活
|
.ivu-menu-item-active .ivu-menu-submenu-title {
|
color: #2d8cf0;
|
}
|
|
// 收缩
|
.shrink-menu-content {
|
.shrink-icon {
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #2d8cf0;
|
background: #f3f3f3;
|
}
|
}
|
|
.ivu-select-dropdown {
|
|
// f3f3f3
|
.ivu-dropdown-item {
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #2d8cf0;
|
background: #fff;
|
}
|
}
|
}
|
}
|
}
|
|
// 分割线--------------------------------------------
|
|
// dark灰蓝
|
.dark-menu {
|
|
// 收缩
|
.shrink-menu-content {
|
.shrink-icon {
|
color: hsla(0, 0%, 100%, .7);
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #fff;
|
background: hsla(0, 0%, 100%, .2);
|
}
|
}
|
}
|
}
|
|
// 分割线--------------------------------------------
|
|
// 暗黑
|
.black-menu {
|
|
// 背景色
|
.ivu-menu-black {
|
background: #1f1f1f;
|
}
|
|
// 一级和二级 字体色
|
.ivu-menu-item,
|
.ivu-menu-submenu-title {
|
color: hsla(0, 0%, 100%, .65);
|
|
&:hover {
|
color: #fff;
|
}
|
}
|
|
// 打开 变深
|
.ivu-menu-opened {
|
background: #141414;
|
}
|
|
// 一级打开 不变
|
.ivu-menu-opened {
|
.ivu-menu-submenu-title {
|
color: #fff;
|
background: #1f1f1f;
|
}
|
}
|
|
.ivu-menu-submenu-title {
|
&:hover {
|
color: #fff;
|
background: #1f1f1f;
|
}
|
}
|
|
// 单个
|
.ivu-menu-item-active:not(.ivu-menu-submenu),
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
|
color: #2d8cf0;
|
}
|
|
.ivu-menu-item-active:not(.ivu-menu-submenu),
|
.ivu-menu-item-active:not(.ivu-menu-submenu):hover,
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
|
.ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
|
background: #141414;
|
}
|
|
// 激活
|
.ivu-menu-submenu .ivu-menu-item-active,
|
.ivu-menu-submenu .ivu-menu-item-active:hover {
|
color: #fff;
|
background: #2d8cf0;
|
}
|
|
// 激活
|
.ivu-menu-item-active .ivu-menu-submenu-title {
|
color: #fff;
|
}
|
|
// 收缩
|
.shrink-menu-content {
|
.shrink-icon {
|
color: hsla(0, 0%, 100%, .65);
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #fff;
|
background: #141414;
|
}
|
}
|
|
.ivu-select-dropdown {
|
background: #1f1f1f;
|
|
.ivu-dropdown-item {
|
color: hsla(0, 0%, 100%, .65);
|
transition: all .2s ease-in-out;
|
|
&:hover {
|
color: #fff;
|
background: #1f1f1f;
|
}
|
}
|
|
.ivu-dropdown-item-selected,
|
.ivu-dropdown-item-selected:hover {
|
color: #fff;
|
background: #2d8cf0;
|
}
|
}
|
}
|
}
|
