363 lines
8.6 KiB
Plaintext
363 lines
8.6 KiB
Plaintext
@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
|
|
@basic-menu-content-prefix-cls: ~'@{namespace}-basic-menu-item-content';
|
|
@basic-menu-tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
|
|
|
|
.active-style() {
|
|
color: @white;
|
|
// background: @primary-color !important;
|
|
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-prefix-cls} {
|
|
width: 100%;
|
|
|
|
// &__expand-icon {
|
|
// position: absolute;
|
|
// top: calc(50% - 6px);
|
|
// right: 16px;
|
|
// width: 10px;
|
|
// transform-origin: none;
|
|
// opacity: 0.45;
|
|
|
|
// span[role='img'] {
|
|
// margin-right: 0;
|
|
// font-size: 11px;
|
|
// }
|
|
|
|
// &--collapsed {
|
|
// opacity: 0;
|
|
// }
|
|
// }
|
|
|
|
// collapsed show title start
|
|
.@{basic-menu-content-prefix-cls}--show-title {
|
|
max-width: unset !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
&--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-title {
|
|
padding-right: 16px !important;
|
|
padding-left: 16px !important;
|
|
}
|
|
}
|
|
|
|
&--collapsed-show-title.ant-menu-inline-collapsed {
|
|
.@{basic-menu-prefix-cls}-item__level1 {
|
|
padding: 2px 0;
|
|
justify-content: center !important;
|
|
|
|
&.ant-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60px !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
line-height: 60px !important;
|
|
|
|
> span {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > 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;
|
|
}
|
|
.@{basic-menu-content-prefix-cls}-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.@{basic-menu-content-prefix-cls}--show-title {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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-title {
|
|
padding-right: 16px !important;
|
|
padding-left: 16px !important;
|
|
}
|
|
|
|
.@{basic-menu-content-prefix-cls}-wrapper {
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
|
|
&__icon {
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
|
|
.ant-menu-item {
|
|
transition: unset;
|
|
}
|
|
|
|
&__sidebar-hor {
|
|
&.ant-menu-horizontal {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.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-prefix-cls}-item__level1 {
|
|
background: transparent;
|
|
|
|
&.ant-menu-item-selected,
|
|
&.ant-menu-submenu-selected {
|
|
background: @top-menu-active-bg-color !important;
|
|
}
|
|
}
|
|
|
|
.ant-menu-item,
|
|
.ant-menu-submenu {
|
|
&.@{basic-menu-prefix-cls}-item__level1,
|
|
.ant-menu-submenu-title {
|
|
height: @header-height;
|
|
line-height: @header-height;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ant-menu-dark:not(.@{basic-menu-prefix-cls}__sidebar-hor):not(.@{basic-menu-prefix-cls}__second) {
|
|
// Reset menu item row height
|
|
.ant-menu-item:not(.@{basic-menu-prefix-cls}-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-item.@{basic-menu-prefix-cls}-item__level1 {
|
|
height: @app-menu-item-height;
|
|
line-height: @app-menu-item-height;
|
|
}
|
|
}
|
|
|
|
// 层级样式
|
|
&.ant-menu-dark:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
|
|
overflow: hidden;
|
|
background: @sider-dark-bg-color;
|
|
.active-menu-style();
|
|
|
|
.ant-menu-item.ant-menu-item-selected.@{basic-menu-prefix-cls}-menu-item__level1,
|
|
.ant-menu-submenu-selected.@{basic-menu-prefix-cls}-menu-item__level1 {
|
|
color: @white;
|
|
}
|
|
|
|
.@{basic-menu-prefix-cls}-item__level1 {
|
|
background-color: @sider-dark-bg-color;
|
|
|
|
> .ant-menu-sub > li {
|
|
background-color: @sider-dark-lighten-1-bg-color;
|
|
}
|
|
}
|
|
|
|
.@{basic-menu-prefix-cls}-item__level2:not(.ant-menu-item-selected),
|
|
.ant-menu-sub {
|
|
background-color: @sider-dark-lighten-1-bg-color;
|
|
}
|
|
|
|
.@{basic-menu-prefix-cls}-item__level3:not(.ant-menu-item-selected) {
|
|
background-color: @sider-dark-lighten-2-bg-color;
|
|
|
|
.ant-menu-item {
|
|
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 {
|
|
position: relative;
|
|
font-weight: 500;
|
|
color: @white;
|
|
background: @sider-dark-darken-bg-color !important;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: @primary-color;
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ant-menu-light:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
|
|
// overflow: hidden;
|
|
border-right: none;
|
|
|
|
.ant-menu-item.ant-menu-item-selected.@{basic-menu-prefix-cls}-menu-item__level1,
|
|
.ant-menu-submenu-selected.@{basic-menu-prefix-cls}-menu-item__level1 {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
|
|
&.@{basic-menu-prefix-cls}__second.ant-menu-inline-collapsed:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
|
|
// Reset menu item row height
|
|
.@{basic-menu-prefix-cls}-item__level1 {
|
|
display: flex;
|
|
height: @app-menu-item-height * 1.4;
|
|
padding: 6px 0 !important;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: @app-menu-item-height;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
> div {
|
|
padding: 6px 0 !important;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.@{basic-menu-content-prefix-cls}__name {
|
|
display: inline-block;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-menu-submenu,
|
|
.ant-menu-submenu-inline {
|
|
transition: unset;
|
|
}
|
|
|
|
.ant-menu-inline.ant-menu-sub {
|
|
box-shadow: unset !important;
|
|
transition: unset;
|
|
}
|
|
}
|
|
|
|
.ant-menu-dark {
|
|
&.ant-menu-submenu-popup {
|
|
> ul {
|
|
background: @sider-dark-bg-color;
|
|
}
|
|
.active-menu-style();
|
|
}
|
|
}
|
|
|
|
// collapsed show title end
|
|
.ant-menu-item,
|
|
.ant-menu-submenu-title {
|
|
> .@{basic-menu-content-prefix-cls}__name {
|
|
width: 100%;
|
|
|
|
.@{basic-menu-tag-prefix-cls} {
|
|
float: right;
|
|
margin-top: @app-menu-item-height / 2;
|
|
transform: translate(0%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{basic-menu-tag-prefix-cls} {
|
|
position: absolute;
|
|
top: calc(50% - 8px);
|
|
right: 30px;
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
margin-right: 4px;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
|
|
&--dot {
|
|
top: calc(50% - 4px);
|
|
width: 6px;
|
|
height: 6px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&--primary {
|
|
background: @primary-color;
|
|
}
|
|
|
|
&--error {
|
|
background: @error-color;
|
|
}
|
|
|
|
&--success {
|
|
background: @success-color;
|
|
}
|
|
|
|
&--warn {
|
|
background: @warning-color;
|
|
}
|
|
}
|