|
@@ -1,129 +1,12 @@
|
|
|
@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();
|
|
|
- }
|
|
|
+.app-top-menu-popup {
|
|
|
+ min-width: 150px;
|
|
|
}
|
|
|
|
|
|
.@{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;
|
|
|
}
|
|
@@ -179,117 +62,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.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;
|
|
@@ -300,63 +72,3 @@
|
|
|
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;
|
|
|
- }
|
|
|
-}
|