提交 1ce31fbb 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新菜单样式

上级 a0818077
@import './radio-group.scss'; @import './radio-group.scss';
\ No newline at end of file @import './menu.scss';
\ No newline at end of file
.el-menu--horizontal {
.el-menu-item, .el-submenu__title {
background-color: var(--app-color-black) !important;
color: var(--app-color-white) !important;
&:hover, &.is-active {
background: #202027 !important;
}
}
>.el-menu-item {
height: 64px;
&.is-active {
background: #202027 !important;
border-bottom: 4px solid var(--app-color-yellow);
border-bottom-color: var(--app-color-yellow) !important;
}
}
>.el-submenu {
.el-submenu__title {
height: 64px;
}
&.is-active, &.is-opened {
.el-submenu__title {
border-bottom: 4px solid var(--app-color-yellow);
border-bottom-color: var(--app-color-yellow) !important;
}
}
}
.el-submenu__icon-arrow {
display: none;
}
&.app-popper-menu {
.el-menu--popup {
padding: 0;
.el-menu-item, .el-submenu__title {
height: 40px;
padding: 0 12px;
border-bottom: 1px solid var(--app-color-gray-250);
border-bottom-color: var(--app-color-gray-250) !important;
}
}
}
}
\ No newline at end of file
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
--app-color-light-tint: #f5f6f9; --app-color-light-tint: #f5f6f9;
// 安永黑 // 安永黑
--app-color-black: #232425; --app-color-black: #2E2E38;
// 安永灰1 // 安永灰1
--app-color-gray-100: #747480; --app-color-gray-100: #747480;
// 安永灰2 // 安永灰2
......
...@@ -20,66 +20,6 @@ ...@@ -20,66 +20,6 @@
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #4276a4;
.el-menu-item:hover, .el-menu-item:hover {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu_title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item.is-active{
border-left: 4px solid #d64635;
background: #3c6c95 !important;
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #4276a4;
}
}
.el-submenu__title, .el-menu-item {
color: #c9dff5;
i {
color: #c9dff5;
}
}
.el-submenu__title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item {
border-top: 1px solid #4276a4;
background: #4276a4;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #4276a4;
background: #4276a4;
> .el-menu {
border-top: 1px solid #4276a4;
background: #4276a4;
}
}
}
.ivu-menu-light{
background: #4276a4;
}
.ivu-menu-submenu-title{
color: #f5f5f5;
}
.sider-top{
color:#fff;
}
div.ivu-divider{ div.ivu-divider{
background-color: #c9dff5; background-color: #c9dff5;
} }
......
...@@ -19,62 +19,12 @@ ...@@ -19,62 +19,12 @@
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #20222A;
.el-menu-item:hover, .el-menu-item:hover {
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu__title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item.is-active{
border-left: 4px solid #409EFF;
background: #060708 !important;
color:white;
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #20222A;
}
}
.el-submenu__title, .el-menu-item {
color: #b4bcc8;
i {
color: #b4bcc8;
}
}
.el-menu-item {
border-top: 1px solid #20222A;
background: #20222A;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #20222A;
background: #20222A;
> .el-menu {
border-top: 1px solid #20222A;
background: #20222A;
}
}
}
.ivu-menu-light{
background: #20222A;
}
.ivu-menu-submenu-title{
color: #fff;
}
.sider-top{ .sider-top{
color:#fff; color:#fff;
} }
div.ivu-divider{ div.ivu-divider{
background-color: #b4bcc8; background-color: #b4bcc8;
} }
} }
/*** END:默认Dark Blue主题 ***/ /*** END:默认Dark Blue主题 ***/
\ No newline at end of file
...@@ -19,59 +19,6 @@ ...@@ -19,59 +19,6 @@
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6;
.el-menu-item:hover, .el-menu-item:hover,.el-menu-item.is-active {
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-submenu__title:hover{
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-menu-item.is-active{
border-left: 4px solid #1890ff;
background: #fff !important;
}
.el-submenu.is-opened, .el-submenu:hover{
> .el-submenu__title {
background: #f6f6f6;
}
}
.el-submenu__title, .el-menu-item {
color: #666666;
i {
color: #666666;
}
}
.el-menu-item {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
> .el-menu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
}
}
.ivu-menu-light{
background: #f6f6f6;
}
.ivu-menu-submenu-title{
color: #000;
}
.sider-top{
color:#000;
}
div.ivu-divider{ div.ivu-divider{
background-color: #b3b3b3; background-color: #b3b3b3;
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册