@import (reference) '../../../design/index.less';
|
|
.active-style() {
|
color: @white;
|
background: linear-gradient(
|
118deg,
|
rgba(@primary-color, 0.8),
|
rgba(@primary-color, 1)
|
) !important;
|
}
|
|
.active-menu-style() {
|
.ant-menu-item-selected,
|
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
|
.active-style();
|
}
|
}
|
|
.basic-menu {
|
width: 100%;
|
|
&-wrap {
|
height: 100%;
|
}
|
|
// collapsed show title start
|
.show-title {
|
max-width: unset !important;
|
opacity: 1 !important;
|
}
|
|
&.collapsed-show-title.ant-menu-inline-collapsed {
|
.basic-menu-item__level1 {
|
padding: 2px 0;
|
}
|
|
& > li[role='menuitem']:not(.ant-menu-submenu),
|
& > li > .ant-menu-submenu-title {
|
display: flex;
|
margin-top: 10px;
|
font-size: 12px;
|
flex-direction: column;
|
align-items: center;
|
line-height: 24px;
|
}
|
|
& > li > .ant-menu-submenu-title {
|
line-height: 24px;
|
}
|
}
|
|
// collapsed show title end
|
.ant-menu-submenu-title {
|
> .basic-menu__name {
|
.basic-menu__tag {
|
float: right;
|
margin-top: @app-menu-item-height / 2;
|
transform: translate(0%, -50%);
|
}
|
}
|
}
|
|
.ant-menu-item {
|
transition: unset;
|
|
> .basic-menu__name {
|
.basic-menu__tag {
|
float: right;
|
margin-top: @app-menu-item-height / 2;
|
transform: translate(0%, -50%);
|
}
|
}
|
}
|
|
&__tag {
|
display: inline-block;
|
padding: 2px 4px;
|
margin-right: 4px;
|
font-size: 12px;
|
line-height: 14px;
|
color: #fff;
|
border-radius: 2px;
|
|
&.dot {
|
width: 8px;
|
height: 8px;
|
padding: 0;
|
border-radius: 50%;
|
}
|
|
&.primary {
|
background: @primary-color;
|
}
|
|
&.error {
|
background: @error-color;
|
}
|
|
&.success {
|
background: @success-color;
|
}
|
|
&.warn {
|
background: @warning-color;
|
}
|
}
|
// scrollbar -s tart
|
&__content {
|
/* 滚动槽 */
|
&::-webkit-scrollbar {
|
width: 4px;
|
height: 4px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: rgba(0, 0, 0, 0);
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: rgba(255, 255, 255, 0.2);
|
border-radius: 3px;
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: @border-color-dark;
|
}
|
}
|
// scrollbar end
|
|
&__sidebar-hor {
|
// overflow: hidden;
|
|
&.ant-menu-horizontal {
|
display: flex;
|
border: 0;
|
align-items: center;
|
|
.basic-menu-item__level1 {
|
margin-right: 2px;
|
}
|
|
&.ant-menu-light {
|
.basic-menu-item__level1 {
|
&.top-active-menu {
|
color: @primary-color;
|
border-bottom: 3px solid @primary-color;
|
}
|
}
|
|
.ant-menu-item {
|
&.basic-menu-item__level1 {
|
height: @header-height;
|
line-height: @header-height;
|
}
|
}
|
|
.ant-menu-submenu:hover,
|
.ant-menu-item-open,
|
.ant-menu-submenu-open,
|
.ant-menu-item-selected,
|
.ant-menu-submenu-selected,
|
.ant-menu-item:hover,
|
.ant-menu-item-active,
|
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
.ant-menu-submenu-active,
|
.ant-menu-submenu-title:hover {
|
color: @primary-color !important;
|
border-bottom: 3px solid @primary-color;
|
}
|
|
.ant-menu-submenu {
|
&:hover {
|
border-bottom: 3px solid @primary-color;
|
}
|
|
&.ant-menu-selected,
|
&.ant-menu-submenu-selected {
|
border-bottom: 3px solid @primary-color;
|
}
|
}
|
}
|
|
&.ant-menu-dark {
|
background: transparent;
|
|
.ant-menu-submenu:hover,
|
.ant-menu-item-open,
|
.ant-menu-submenu-open,
|
.ant-menu-item-selected,
|
.ant-menu-submenu-selected,
|
.ant-menu-item:hover,
|
.ant-menu-item-active,
|
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
.ant-menu-submenu-active,
|
.ant-menu-submenu-title:hover {
|
color: #fff;
|
background: @top-menu-active-bg-color !important;
|
}
|
|
.ant-menu-item:hover,
|
.ant-menu-item-active,
|
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
.ant-menu-submenu-active,
|
.ant-menu-submenu-title:hover {
|
background: @top-menu-active-bg-color;
|
}
|
|
.basic-menu-item__level1 {
|
background: transparent;
|
|
&.top-active-menu {
|
color: @white;
|
background: @top-menu-active-bg-color;
|
border-radius: 2px 2px 0 0;
|
}
|
|
&.ant-menu-item-selected,
|
&.ant-menu-submenu-selected {
|
background: @top-menu-active-bg-color !important;
|
}
|
}
|
|
.ant-menu-item,
|
.ant-menu-submenu {
|
&.basic-menu-item__level1,
|
.ant-menu-submenu-title {
|
height: @header-height;
|
line-height: @header-height;
|
}
|
}
|
}
|
}
|
}
|
|
&:not(.basic-menu__sidebar-hor).ant-menu-inline-collapsed {
|
.basic-menu-item__level1 {
|
> div {
|
align-items: center;
|
}
|
}
|
}
|
|
&.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) {
|
// Reset menu item row height
|
.ant-menu-item:not(.basic-menu-item__level1),
|
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
|
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
|
height: @app-menu-item-height;
|
margin: 0;
|
line-height: @app-menu-item-height;
|
}
|
}
|
|
// 层级样式
|
&.ant-menu-dark:not(.basic-menu__sidebar-hor) {
|
overflow-x: hidden;
|
background: @sider-dark-bg-color;
|
.active-menu-style();
|
|
.ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
|
.ant-menu-submenu-selected.basic-menu-menu-item__level1 {
|
color: @white;
|
}
|
|
.basic-menu-item__level1 {
|
background-color: @sider-dark-bg-color;
|
|
> .ant-menu-sub > li {
|
background-color: @sider-dark-lighten-1-bg-color;
|
}
|
}
|
|
.basic-menu-item__level2:not(.ant-menu-item-selected),
|
.ant-menu-sub {
|
background-color: @sider-dark-lighten-1-bg-color;
|
}
|
|
.basic-menu-item__level3:not(.ant-menu-item-selected) {
|
background-color: @sider-dark-lighten-2-bg-color;
|
}
|
|
.ant-menu-submenu-title {
|
display: flex;
|
height: @app-menu-item-height;
|
// margin: 0;
|
align-items: center;
|
}
|
|
&.ant-menu-inline-collapsed {
|
.ant-menu-submenu-selected,
|
.ant-menu-item-selected {
|
background: @sider-dark-darken-bg-color !important;
|
}
|
}
|
}
|
|
&.ant-menu-light:not(.basic-menu__sidebar-hor) {
|
overflow-x: hidden;
|
border-right: none;
|
|
// .ant-menu-item-selected {
|
// background: fade(@primary-color, 18%);
|
// }
|
|
.ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
|
.ant-menu-submenu-selected.basic-menu-menu-item__level1 {
|
color: @primary-color;
|
}
|
}
|
|
// 关键字的颜色
|
&__keyword {
|
color: lighten(@primary-color, 20%);
|
}
|
|
// 激活的子菜单样式
|
.ant-menu-item.ant-menu-item-selected {
|
position: relative;
|
}
|
|
&.basic-menu__second.ant-menu-inline-collapsed:not(.basic-menu__sidebar-hor) {
|
// Reset menu item row height
|
.ant-menu-item,
|
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
|
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
|
display: flex;
|
height: @app-menu-item-height * 1.4;
|
padding: 6px 0 !important;
|
margin: 0;
|
line-height: @app-menu-item-height;
|
align-items: center;
|
}
|
}
|
}
|
|
// 触发器样式
|
.ant-layout-sider {
|
&-dark {
|
.ant-layout-sider-trigger {
|
color: darken(@white, 25%);
|
background: @trigger-dark-bg-color;
|
|
&:hover {
|
color: @white;
|
background: @trigger-dark-hover-bg-color;
|
}
|
}
|
}
|
|
&-light {
|
.ant-layout-sider-trigger {
|
color: @text-color-base;
|
border-top: 1px solid @border-color-light;
|
}
|
}
|
}
|
|
.ant-menu-dark {
|
&.ant-menu-submenu-popup {
|
> ul {
|
background: @sider-dark-bg-color;
|
}
|
|
.active-menu-style();
|
}
|
}
|
|
.hide-title {
|
.ant-menu-inline-collapsed > .ant-menu-item,
|
.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
|
.ant-menu-inline-collapsed
|
> .ant-menu-item-group
|
> .ant-menu-item-group-list
|
> .ant-menu-submenu
|
> .ant-menu-submenu-title,
|
.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
|
padding-right: 20px !important;
|
padding-left: 20px !important;
|
}
|
|
.ant-menu-inline-collapsed {
|
.basic-menu-item__level1 {
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|