@perfma/heaven/es/menu/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@import '~antd/es/menu/style/index.less';
@import '../style/vars.less';

.@{ant-prefix}-menu {
  font-size: 14px;
}
.@{ant-prefix}-menu-item .@{ant-prefix}-menu-item-icon,
.@{ant-prefix}-menu-submenu-title .@{ant-prefix}-menu-item-icon,
.@{ant-prefix}-menu-item .anticon,
.@{ant-prefix}-menu-submenu-title .anticon {
  font-size: 16px !important;
  line-height: 1 !important;
}
.@{ant-prefix}-menu-item .@{ant-prefix}-menu-item-icon + span,
.@{ant-prefix}-menu-submenu-title .@{ant-prefix}-menu-item-icon + span,
.@{ant-prefix}-menu-item .anticon + span,
.@{ant-prefix}-menu-submenu-title .anticon + span {
  margin-left: 8px;
}
.@{ant-prefix}-menu-vertical > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-left > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-right > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-left
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-right
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-inline
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title {
  height: 40px;
  line-height: 40px;
}
.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title {
  height: 40px;
  line-height: 40px;
}
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-submenu-title {
  margin: 0;
}
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-item:not(:last-child),
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-item:not(:last-child),
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item:not(:last-child) {
  margin: 0;
}
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item::after {
  left: 0;
  right: auto;
}
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-vertical-right .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-submenu-title {
  padding: 0 8px 0 16px !important;
}
.@{ant-prefix}-menu.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline
  .@{ant-prefix}-menu-item-only-child {
  padding-left: 40px !important;
}
.@{ant-prefix}-menu.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline {
  > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title {
    padding-left: 40px !important;
  }
  > .@{ant-prefix}-menu-submenu
    > .@{ant-prefix}-menu-sub
    > .@{ant-prefix}-menu-item-only-child {
    padding-left: 64px !important;
  }
}
.@{ant-prefix}-menu-submenu-expand-icon,
.@{ant-prefix}-menu-submenu-arrow {
  right: 8px;
  color: #b6b6b6;
}

// collapsed
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-selected::after,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item-selected::after,
.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-selected::after,
.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-item-selected::after {
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.@{ant-prefix}-menu.@{ant-prefix}-menu-inline-collapsed {
  width: 56px;
}
.@{ant-prefix}-menu.@{ant-prefix}-menu-inline-collapsed
  > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu.@{ant-prefix}-menu-inline-collapsed
  > .@{ant-prefix}-menu-item-group
  > .@{ant-prefix}-menu-item-group-list
  > .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu.@{ant-prefix}-menu-inline-collapsed
  > .@{ant-prefix}-menu-item-group
  > .@{ant-prefix}-menu-item-group-list
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title,
.@{ant-prefix}-menu.@{ant-prefix}-menu-inline-collapsed
  > .@{ant-prefix}-menu-submenu
  > .@{ant-prefix}-menu-submenu-title {
  padding-left: 20px !important;
}

// horizontal
.@{ant-prefix}-menu-horizontal {
  line-height: 56px;
}
.@{ant-prefix}-menu-horizontal > .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-horizontal > .@{ant-prefix}-menu-submenu::after {
  left: 0;
  right: 0;
}

// dark
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark {
  background: #343434;
}
.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-sub,
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-sub {
  background: #2e2e2e;
}
.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-item-group-title,
.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-item > a,
.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-item > span > a {
  color: rgba(255, 255, 255, 0.85);
}
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-dark:not(.@{ant-prefix}-menu-horizontal)
  .@{ant-prefix}-menu-item-selected,
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-item-selected,
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark
  .@{ant-prefix}-menu-submenu-selected,
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark .@{ant-prefix}-menu-submenu-open,
.@{ant-prefix}-menu-submenu-popup.@{ant-prefix}-menu-dark
  .@{ant-prefix}-menu-item-selected {
  background-color: #000000;
}
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-horizontal
  > .@{ant-prefix}-menu-item:hover,
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-horizontal
  > .@{ant-prefix}-menu-submenu:hover {
  background-color: #000000;
  &::after {
    border-bottom-color: #3271fe;
  }
}
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-inline
  .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-vertical
  .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-vertical-left
  .@{ant-prefix}-menu-item::after,
.@{ant-prefix}-menu-dark.@{ant-prefix}-menu-vertical-right
  .@{ant-prefix}-menu-item::after {
  border-right: 3px solid #3271fe;
}
.@{ant-prefix}-menu-horizontal
  > .@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-selected::after,
.@{ant-prefix}-menu-horizontal
  > .@{ant-prefix}-menu-submenu.@{ant-prefix}-menu-submenu-selected::after,
.@{ant-prefix}-menu-horizontal
  > .@{ant-prefix}-menu-submenu.@{ant-prefix}-menu-submenu-open::after {
  border-bottom-color: #3271fe;
}

.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-submenu {
  position: relative;
}
.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-submenu-selected {
  .@{ant-prefix}-menu-submenu-title {
    background-color: #e6f7ff;
  }
}
.@{ant-prefix}-menu-inline-collapsed.@{ant-prefix}-menu-dark
  .@{ant-prefix}-menu-submenu-selected {
  .@{ant-prefix}-menu-submenu-title {
    background-color: #000000;
  }
}

.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-submenu::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-right: 3px solid #3271fe;
  transform: scaleY(0.0001);
  opacity: 0;
  transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  content: '';
}

.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-selected::after,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-item-selected::after,
.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-selected::after,
.@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-item-selected::after,
.@{ant-prefix}-menu-inline .@{ant-prefix}-menu-submenu-selected::after,
.@{ant-prefix}-menu-inline-collapsed
  .@{ant-prefix}-menu-submenu-selected::after {
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.@{ant-prefix}-menu-item .anticon:not(.@{ant-prefix}-menu-item-icon),
.@{ant-prefix}-menu-submenu-title .anticon:not(.@{ant-prefix}-menu-item-icon) {
  font-size: 12px !important;
  line-height: 1 !important;
  transition: transform 0.15s;
}
.@{ant-prefix}-menu-submenu-open {
  .@{ant-prefix}-menu-item .anticon:not(.@{ant-prefix}-menu-item-icon),
  .@{ant-prefix}-menu-submenu-title
    .anticon:not(.@{ant-prefix}-menu-item-icon) {
    transform: rotate(180deg);
  }
}

.@{ant-prefix}-menu-submenu:not(.@{ant-prefix}-menu-submenu-selected)
  .@{ant-prefix}-menu-submenu-title
  .anticon:not(.@{ant-prefix}-menu-item-icon),
.@{ant-prefix}-menu-submenu:not(.@{ant-prefix}-menu-submenu-active)
  .@{ant-prefix}-menu-submenu-title
  .anticon:not(.@{ant-prefix}-menu-item-icon) {
  color: #b6b6b6;
}