amis-ui 2.6.0 → 2.7.0

package/scss/components/_menu.scss

@@ -0,0 +1,1153 @@
+@mixin popup-dark {
+  & > .#{$ns}Nav-Menu {
+    background-color: var(--Menu-dark-backgroundColor);
+
+    .#{$ns}Nav-Menu-item {
+      color: var(--Menu-dark-fontColor);
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        color: var(--Menu-dark-fontColor);
+      }
+
+      &-active {
+        background-color: var(--Menu-dark-backgroundColor);
+        color: var(--Menu-dark-fontColor-onHover);
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onHover);
+        }
+      }
+
+      &-selected {
+        background-color: var(--Menu-dark-backgroundColor);
+        color: var(--Menu-dark-ancestor-fontColor-onActive) !important;
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-ancestor-fontColor-onActive) !important;
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-dark {
+      .#{$ns}Nav-Menu-submenu-title {
+        color: var(--Menu-dark-fontColor);
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-submenu-arrow {
+          color: var(--Menu-dark-fontColor);
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-active {
+      .#{$ns}Nav-Menu-submenu-title {
+        background-color: var(--Menu-dark-backgroundColor);
+        color: var(--Menu-dark-fontColor-onActive);
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onActive);
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-selected {
+      .#{$ns}Nav-Menu-submenu-title {
+        background-color: var(--Menu-dark-backgroundColor);
+        color: var(--Menu-dark-ancestor-fontColor-onActive);
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-ancestor-fontColor-onActive);
+        }
+      }
+    }
+  }
+}
+
+@mixin selected-indicator($themeColor) {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    border-right: 3px solid $themeColor;
+    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),
+      -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+}
+
+.#{$ns}Nav-Menu {
+  --Menu-width--collapsed: var(--Layout-aside-width-collapsed);
+  --Menu-fontSize: var(--Nav-item-fontSize);
+  --Menu-fontSize--collapsed: var(--Nav-item-collapsed-fontSize);
+  --Menu-fontWeight: var(--Nav-item-fontWeight);
+  --Menu-fontColor-onDisabled: var(--Nav-item-fontColor-onDisabled);
+  --Menu-item-height--vertical: #{px2rem(40px)};
+  --Menu-item-height--horizontal: var(--Nav-Item-height--horizontal);
+  --Menu-Submenu-title-paddingX: var(--Layout-paddingX);
+  --Menu-Submenu-item-paddingX: var(--Nav-Item-Badge-paddingRight);
+
+  --Menu-icon-size: var(--Layout-icon-size);
+
+  --Menu-light-backgroundColor: var(--Layout-light-backgroundColor);
+  --Menu-light-backgroundColor-onHover: var(--Layout-light-bgColor-onHover);
+  --Menu-light-fontColor: var(--Layout-light-fontColor);
+  --Menu-light-fontColor-onHover: var(--Layout-fontColor--onHover);
+  --Menu-light-ancestor-fontColor-onActive: var(--Layout-light-fontColor);
+  --Menu-light-fontColor-onActive: var(--Layout-fontColor--onActive);
+  --Menu-light-groupTitle-fontColor: #d8d8d8;
+  --Menu-light-selectedIndicator-color: var(--Layout-fontColor--info);
+
+  --Menu-dark-backgroundColor: var(--Layout-dark-backgroundColor);
+  --Menu-dark-backgroundColor-onHover: var(--Layout-fontColor--info);
+  --Menu-dark-fontColor: var(--Layout-dark-fontColor);
+  --Menu-dark-fontColor-onHover: var(--Layout-fontColor--onHover);
+  --Menu-dark-ancestor-fontColor-onActive: var(--Layout-fontColor--onActive);
+  --Menu-dark-fontColor-onActive: var(--Layout-dark-fontColor);
+  --Menu-dark-groupTitle-fontColor: #d8d8d8;
+  --Menu-dark-selectedIndicator-color: var(--Layout-dark-selected-color);
+
+  outline: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0; // Override default ul/ol
+  padding-right: 0; // Override default ul/ol in RTL direction
+  list-style: none;
+  color: var(--Menu-light-fontColor);
+  background-color: var(--Menu-light-backgroundColor);
+
+  &.#{$ns}Nav-Menu-dark {
+    color: var(--Menu-dark-fontColor);
+    background-color: var(--Menu-dark-backgroundColor);
+  }
+
+  &.#{$ns}Nav-Menu-light {
+    color: var(--Menu-light-fontColor);
+    background-color: var(--Menu-light-backgroundColor);
+  }
+
+  &-horizontal {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &-submenu {
+    &-hidden {
+      display: none;
+    }
+  }
+
+  &-overflow-item {
+    flex: none;
+  }
+
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  &-collapse {
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+  }
+
+  &-collapsed {
+    width: var(--Menu-width--collapsed);
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-root.#{$ns}Nav-Menu-collapsed {
+    .#{$ns}Nav-Menu-item {
+      padding: 0;
+      text-align: center;
+    }
+  }
+
+  &-item-link {
+    display: block;
+    height: var(--Nav-Item-height);
+    flex-grow: 1;
+  }
+
+  &-item-divider {
+    border-bottom: 1px solid #e6e6e8;
+
+    &-dark {
+      border-bottom: 1px solid #3a3e47;
+    }
+  }
+
+  &-item-icon {
+    margin-right: var(--gap-sm);
+    font-size: var(--Menu-icon-size);
+    width: var(--Menu-icon-size);
+    color: var(--Menu-light-fontColor);
+    display: inline-block;
+    line-height: var(--Menu-item-height--vertical);
+    position: relative;
+    top: 1.5px;
+
+    img {
+      height: var(--Tabs-linkFontSize);
+      vertical-align: middle;
+    }
+
+    &-collapsed {
+      font-size: var(--Menu-fontSize--collapsed);
+      margin-right: 0;
+    }
+
+    &-svg {
+      &-collapsed {
+        font-size: var(--Menu-fontSize--collapsed);
+        margin-right: 0;
+        height: var(--Menu-item-height--vertical);
+      }
+    }
+
+    .#{$ns}Nav-Menu-dark & {
+      color: var(--Menu-dark-fontColor);
+    }
+
+    .#{$ns}Nav-Menu-light & {
+      color: var(--Menu-light-fontColor);
+    }
+  }
+
+  &-item-label {
+    opacity: 0.95;
+    font-size: var(--Menu-fontSize);
+    color: var(--Menu-light-fontColor);
+    font-weight: var(--Menu-fontWeight);
+    padding: 0;
+    text-align: left;
+    display: inline-block;
+    max-width: var(--Menu-width);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    user-select: none;
+
+    &-collapsed {
+      font-size: var(--Menu-fontSize--collapsed);
+      font-weight: 600;
+    }
+
+    .#{$ns}Nav-Menu-dark & {
+      color: var(--Menu-dark-fontColor);
+    }
+
+    .#{$ns}Nav-Menu-light & {
+      color: var(--Menu-light-fontColor);
+    }
+  }
+
+  &-item-dragBar {
+    color: var(--Nav-Item-Drag-color);
+    position: absolute;
+    left: 0;
+    visibility: hidden;
+  }
+
+  &-item-group-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  &-item-group-title {
+    color: var(--Menu-light-groupTitle-fontColor);
+    line-height: 1.5;
+    padding: 8px 10px;
+    border-bottom: 1px solid #dedede;
+
+    &.#{$ns}Nav-Menu-dark {
+      color: var(--Menu-dark-groupTitle-fontColor);
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      color: var(--Menu-light-groupTitle-fontColor);
+    }
+  }
+
+  &-item-active,
+  &-submenu-active {
+    background-color: var(--Menu-light-backgroundColor);
+    color: var(--Menu-light-fontColor-onActive);
+
+    .#{$ns}Nav-Menu-dark & {
+      background-color: var(--Menu-dark-backgroundColor);
+      color: var(--Menu-dark-fontColor-onActive);
+    }
+
+    .#{$ns}Nav-Menu-light & {
+      background-color: var(--Menu-light-backgroundColor);
+      color: var(--Menu-light-fontColor-onActive);
+    }
+  }
+
+  &-item-selected {
+    background-color: var(--Menu-light-backgroundColor);
+    // fix chrome render bug
+    transform: translateZ(0);
+
+    .#{$ns}Nav-Menu-item-icon,
+    .#{$ns}Nav-Menu-item-label {
+      color: var(--Menu-light-fontColor-onActive) !important;
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      background-color: var(--Menu-dark-backgroundColor-onHover);
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Menu-item-label {
+        color: var(--Menu-dark-fontColor-onActive) !important;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      background-color: var(--Menu-light-backgroundColor-onHover);
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        color: var(--Menu-light-fontColor-onActive) !important;
+      }
+    }
+  }
+
+  &-item,
+  &-submenu {
+    .#{$ns}Badge {
+      position: static;
+    }
+    .#{$ns}Nav-Menu-item-wrap {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-item-extra {
+    position: relative;
+  }
+
+  &-inline {
+    .#{$ns}Nav-Menu-item-selected {
+      background-color: var(--Menu-light-backgroundColor-onHover);
+      @include selected-indicator(var(--Menu-light-selectedIndicator-color));
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        color: var(--Menu-light-fontColor-onActive) !important;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      .#{$ns}Nav-Menu-item-selected {
+        background-color: var(--Menu-dark-backgroundColor-onHover);
+        @include selected-indicator(var(--Menu-dark-selectedIndicator-color));
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onActive) !important;
+        }
+      }
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      .#{$ns}Nav-Menu-item-selected {
+        background-color: var(--Menu-light-backgroundColor-onHover);
+        @include selected-indicator(var(--Menu-light-selectedIndicator-color));
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-light-fontColor-onActive) !important;
+        }
+      }
+    }
+  }
+
+  &-root.#{$ns}Nav-Menu-vertical {
+    > .#{$ns}Nav-Menu-item-selected {
+      background-color: var(--Menu-light-backgroundColor-onHover);
+      @include selected-indicator(var(--Menu-light-selectedIndicator-color));
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        color: var(--Menu-light-fontColor-onActive);
+      }
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      > .#{$ns}Nav-Menu-item-selected {
+        background-color: var(--Menu-dark-backgroundColor-onHover);
+        @include selected-indicator(var(--Menu-dark-selectedIndicator-color));
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onActive);
+        }
+      }
+
+      > .#{$ns}Nav-Menu-submenu-selected {
+        & > .#{$ns}Nav-Menu-submenu-title {
+          background-color: var(--Menu-dark-backgroundColor-onHover);
+          @include selected-indicator(var(--Menu-dark-selectedIndicator-color));
+        }
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onActive);
+        }
+      }
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      > .#{$ns}Nav-Menu-item-selected {
+        background-color: var(--Menu-light-backgroundColor-onHover);
+        @include selected-indicator(var(--Menu-light-selectedIndicator-color));
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-light-fontColor-onActive);
+        }
+      }
+
+      > .#{$ns}Nav-Menu-submenu-selected {
+        & > .#{$ns}Nav-Menu-submenu-title {
+          background-color: var(--Menu-light-backgroundColor-onHover);
+          @include selected-indicator(
+            var(--Menu-light-selectedIndicator-color)
+          );
+        }
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-light-fontColor-onActive);
+        }
+      }
+    }
+  }
+
+  .#{$ns}Nav-Menu-dark {
+    .#{$ns}Nav-Menu-submenu-selected {
+      background-color: transparent;
+
+      & > .#{$ns}Nav-Menu-submenu-title {
+        color: var(--Menu-dark-ancestor-fontColor-onActive);
+
+        & > .#{$ns}Nav-Menu-item-label,
+        & > .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-dark-ancestor-fontColor-onActive);
+        }
+
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-dark-ancestor-fontColor-onActive);
+        }
+      }
+    }
+  }
+
+  .#{$ns}Nav-Menu-light {
+    .#{$ns}Nav-Menu-submenu-selected {
+      & > .#{$ns}Nav-Menu-submenu-title {
+        color: var(--Menu-light-ancestor-fontColor-onActive);
+
+        & > .#{$ns}Nav-Menu-item-label,
+        & > .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-light-ancestor-fontColor-onActive);
+        }
+
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-light-ancestor-fontColor-onActive);
+        }
+      }
+    }
+  }
+
+  & > li.#{$ns}Nav-Menu-submenu {
+    padding: 0;
+  }
+
+  &-horizontal.#{$ns}Nav-Menu-sub,
+  &-vertical.#{$ns}Nav-Menu-sub,
+  &-vertical-left.#{$ns}Nav-Menu-sub,
+  &-vertical-right.#{$ns}Nav-Menu-sub {
+    min-width: 160px;
+    margin-top: 0;
+    border-radius: 2px;
+    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
+      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
+
+    .#{$ns}Nav-Menu-item-selected {
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        color: var(--Menu-light-fontColor-onActive);
+      }
+    }
+
+    .#{$ns}Nav-Menu-dark & {
+      .#{$ns}Nav-Menu-item-selected {
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-dark-fontColor-onActive);
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-light & {
+      .#{$ns}Nav-Menu-item-selected {
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-light-fontColor-onActive);
+        }
+      }
+    }
+  }
+
+  &-item,
+  &-submenu-title {
+    margin: 0;
+    position: relative;
+    padding: 0;
+    line-height: var(--Nav-Item-height);
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--Menu-light-fontColor);
+
+    &:hover {
+      .#{$ns}Nav-Menu-item-label,
+      .#{$ns}Nav-Menu-item-icon {
+        color: var(--Menu-light-fontColor-onHover);
+      }
+
+      .#{$ns}Nav-Menu-item-dragBar {
+        visibility: visible;
+      }
+    }
+
+    .#{$ns}Nav-Menu-dark & {
+      color: var(--Menu-dark-fontColor);
+      background-color: var(--Menu-dark-backgroundColor);
+
+      &:hover {
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-dark-fontColor-onHover);
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-light & {
+      color: var(--Menu-light-fontColor);
+      background-color: var(--Menu-light-backgroundColor);
+
+      &:hover {
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-item-icon {
+          color: var(--Menu-light-fontColor-onHover);
+        }
+      }
+    }
+
+    .#{$ns}Nav-Menu-rtl & {
+      padding: 7px 16px 7px 7px;
+    }
+
+    // Disabled state sets text to gray and nukes hover/tab effects
+    &.#{$ns}Nav-Menu-item-disabled,
+    &.#{$ns}Nav-Menu-submenu-disabled {
+      color: #777 !important;
+    }
+  }
+
+  &-collapsed > &-item,
+  &-collapsed > &-submenu-title,
+  &-collapsed > .#{$ns}Nav-Menu-submenu > &-submenu-title {
+    text-overflow: initial;
+  }
+
+  & > &-item-divider {
+    height: 1px;
+    margin: 0 16px 4px 16px;
+    overflow: hidden;
+    padding: 0;
+    line-height: 0;
+    background-color: #ebebeb;
+  }
+
+  &-submenu {
+    &-popup {
+      position: absolute;
+      z-index: 1500;
+
+      .#{$ns}Nav-Menu-item {
+        padding: 0 var(--Menu-Submenu-item-paddingX);
+      }
+    }
+
+    > .#{$ns}Nav-Menu {
+      background-color: var(--Menu-light-backgroundColor);
+    }
+
+    &.#{$ns}Nav-Menu-submenu-dark > .#{$ns}Nav-Menu {
+      background-color: var(--Menu-dark-backgroundColor);
+    }
+  }
+
+  &-submenu-popup-dark {
+    @include popup-dark();
+  }
+
+  .#{$ns}Nav-Menu-submenu-title,
+  .#{$ns}Nav-Menu-item {
+    cursor: pointer;
+
+    .anticon {
+      width: 14px;
+      height: 14px;
+      margin-right: 8px;
+      top: -1px;
+
+      .#{$ns}Nav-Menu-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &-overflow {
+    &-item-rest {
+      .#{$ns}Nav-Menu-submenu-title {
+        margin: 0;
+      }
+
+      .#{$ns}Nav-Menu-item-icon {
+        display: initial;
+        position: static;
+      }
+    }
+  }
+
+  &-horizontal {
+    height: var(--Menu-item-height--horizontal);
+    background-color: var(--Menu-light-backgroundColor);
+    border: none;
+    white-space: nowrap;
+    overflow: hidden;
+    width: auto;
+
+    .#{$ns}Nav-Menu-item-tooltip-wrap {
+      display: inline-block;
+      zoom: 1;
+      vertical-align: middle;
+    }
+
+    .#{$ns}Nav-Menu-overflow-item.#{$ns}Nav-Menu-overflow-item-rest
+      > .#{$ns}Nav-Menu-submenu-title {
+      .#{$ns}Nav-Menu-overflowedIcon {
+        margin-right: 0;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      background-color: var(--Menu-dark-backgroundColor);
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      background-color: var(--Menu-light-backgroundColor);
+    }
+
+    & > .#{$ns}Nav-Menu-item-tooltip-wrap > .#{$ns}Nav-Menu-item,
+    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
+      padding: 0 20px;
+      height: var(--Menu-item-height--horizontal);
+
+      .#{$ns}Nav-Menu-item-link {
+        height: var(--Menu-item-height--horizontal);
+      }
+
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-item-label {
+        line-height: var(--Menu-item-height--horizontal);
+      }
+
+      .#{$ns}Nav-Menu-item-label {
+        padding: 0;
+        top: 0;
+      }
+    }
+
+    .#{$ns}Nav-Menu-item.#{$ns}Nav-Menu-item-selected {
+      &:after {
+        content: ' ';
+        width: 100%;
+        height: 2px;
+        background: var(--Menu-dark-ancestor-fontColor-onActive);
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+    }
+
+    & > .#{$ns}Nav-Menu-submenu,
+    & > .#{$ns}Nav-Menu-item {
+      margin: 0;
+      border-bottom: 2px solid transparent;
+      display: inline-block;
+      vertical-align: bottom;
+
+      &-active {
+        background-color: var(--Menu-light-backgroundColor);
+        color: var(--Menu-light-fontColor-onActive);
+      }
+
+      &-selected {
+        border-bottom: 2px solid var(--Menu-light-fontColor-onActive);
+        background-color: transparent;
+
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-item-label {
+          color: var(--Menu-light-fontColor-onActive);
+        }
+      }
+    }
+
+    &:after {
+      content: '\20';
+      display: block;
+      height: 0;
+      clear: both;
+    }
+
+    .#{$ns}Nav-Menu-submenu-arrow {
+      display: inline-block;
+      font-size: px2rem(9px);
+      vertical-align: baseline;
+      text-align: center;
+      text-transform: none;
+      text-rendering: auto;
+      line-height: px2rem(20px);
+      margin-left: 5px;
+      color: var(--Menu-light-fontColor);
+
+      & > svg {
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      & > .#{$ns}Nav-Menu-submenu,
+      & > .#{$ns}Nav-Menu-item {
+        &-active {
+          background-color: var(--Menu-dark-backgroundColor);
+          color: var(--Menu-dark-fontColor-onActive);
+        }
+
+        &-selected {
+          border-bottom: 2px solid var(--Menu-dark-selectedIndicator-color);
+
+          .#{$ns}Nav-Menu-item-icon,
+          .#{$ns}Nav-Menu-item-label {
+            color: var(--Menu-dark-fontColor-onActive);
+          }
+        }
+      }
+
+      .#{$ns}Nav-Menu-submenu-arrow {
+        color: var(--Menu-dark-fontColor);
+      }
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      & > .#{$ns}Nav-Menu-submenu,
+      & > .#{$ns}Nav-Menu-item {
+        &-active {
+          background-color: var(--Menu-light-backgroundColor);
+          color: var(--Menu-light-fontColor-onActive);
+        }
+
+        &-selected {
+          border-bottom: 2px solid var(--Menu-light-selectedIndicator-color);
+
+          .#{$ns}Nav-Menu-item-icon,
+          .#{$ns}Nav-Menu-item-label {
+            color: var(--Menu-light-fontColor-onActive);
+          }
+        }
+      }
+
+      .#{$ns}Nav-Menu-submenu-arrow {
+        color: var(--Menu-light-fontColor);
+      }
+    }
+  }
+
+  &-vertical,
+  &-vertical-left,
+  &-vertical-right,
+  &-inline {
+    & > .#{$ns}Nav-Menu-item,
+    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
+      .#{$ns}Nav-Menu-rtl & {
+        padding: 12px 24px 12px 8px;
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-arrow {
+      display: inline-block;
+      font-size: px2rem(9px);
+      vertical-align: baseline;
+      text-align: center;
+      text-transform: none;
+      text-rendering: auto;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: var(--Menu-Submenu-title-paddingX);
+      line-height: var(--Menu-item-height--vertical);
+      transform: rotate(-90deg);
+
+      & > svg {
+        text-align: center;
+        vertical-align: middle;
+      }
+
+      .#{$ns}Nav-Menu-rtl &,
+      .#{$ns}Nav-Menu-submenu-rtl & {
+        right: auto;
+        left: 16px;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-expand-before {
+      .#{$ns}Nav-Menu-submenu-title {
+        .#{$ns}Nav-Menu-item-wrap {
+          padding-right: 0;
+          padding-left: var(--Menu-Submenu-title-paddingX);
+        }
+      }
+
+      .#{$ns}Nav-Menu-submenu-arrow {
+        right: auto;
+      }
+    }
+
+    &.#{$ns}Nav-Menu-dark {
+      .#{$ns}Nav-Menu-submenu-arrow {
+        color: var(--Menu-dark-fontColor);
+      }
+    }
+
+    &.#{$ns}Nav-Menu-light {
+      .#{$ns}Nav-Menu-submenu-arrow {
+        color: var(--Menu-light-fontColor);
+      }
+    }
+  }
+
+  &-vertical-right,
+  &-horizontal {
+    .#{$ns}Nav-Menu-item {
+      padding: 0 var(--Menu-Submenu-title-paddingX) 0
+        calc(var(--Menu-Submenu-title-paddingX) - 1px);
+    }
+  }
+
+  &-inline,
+  &-horizontal {
+    .#{$ns}Nav-Menu-submenu-arrow {
+      cursor: pointer;
+      transition: transform 0.3s;
+      transform: rotate(0deg);
+    }
+
+    & .#{$ns}Nav-Menu-submenu-open > .#{$ns}Nav-Menu-submenu-title {
+      .#{$ns}Nav-Menu-submenu-arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-collapsed {
+    .#{$ns}Nav-Menu-item {
+      &-wrap {
+        overflow: hidden;
+      }
+    }
+
+    // .#{$ns}Nav-Menu-submenu {
+    //   .#{$ns}Nav-Menu-submenu-title {
+    //     padding: 0 var(--Menu-Submenu-title-paddingX) 0
+    //       calc(var(--Menu-Submenu-title-paddingX) - 1px);
+    //     text-align: center;
+    //   }
+    // }
+
+    .#{$ns}Nav-Menu-submenu-vertical.#{$ns}Nav-Menu-submenu {
+      .#{$ns}Nav-Menu-submenu-title {
+        padding: 0 var(--Menu-Submenu-title-paddingX) 0
+          calc(var(--Menu-Submenu-title-paddingX) - 1px);
+        text-align: center;
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-arrow {
+      display: none !important;
+    }
+  }
+
+  &-submenu-vertical.#{$ns}Nav-Menu-submenu,
+  &-submenu-vertical-left.#{$ns}Nav-Menu-submenu,
+  &-submenu-vertical-right.#{$ns}Nav-Menu-submenu {
+    padding: 0;
+
+    .#{$ns}Nav-Menu-submenu-title {
+      padding: 0 var(--Menu-Submenu-item-paddingX);
+    }
+
+    .#{$ns}Nav-Menu-submenu-rtl & {
+      direction: rtl;
+    }
+  }
+
+  &-sub.#{$ns}Nav-Menu-inline {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    & > .#{$ns}Nav-Menu-item,
+    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .#{$ns}Nav-Menu-rtl & {
+        padding-left: 0;
+      }
+    }
+
+    &
+      > .#{$ns}Nav-Menu-submenu.#{$ns}Nav-Menu-submenu-dark.#{$ns}Nav-Menu-submenu-selected
+      > .#{$ns}Nav-Menu-submenu-title {
+      color: var(--Menu-dark-ancestor-fontColor-onActive);
+
+      .#{$ns}Nav-Menu-item-label,
+      .#{$ns}Nav-Menu-item-icon {
+        color: var(--Menu-dark-ancestor-fontColor-onActive);
+      }
+    }
+  }
+
+  @mixin item-disabled {
+    cursor: not-allowed;
+    color: var(--Menu-fontColor-onDisabled) !important;
+    pointer-events: none;
+  }
+
+  .#{$ns}Nav-Menu-item-disabled,
+  .#{$ns}Nav-Menu-submenu-disabled {
+    @include item-disabled();
+
+    &.#{$ns}Nav-Menu-item {
+      @include item-disabled();
+
+      .#{$ns}Nav-Menu-item-link {
+        @include item-disabled();
+      }
+    }
+
+    .#{$ns}Nav-Menu-submenu-title {
+      @include item-disabled();
+      & > .#{$ns}Nav-Menu-item-icon,
+      & > .#{$ns}Nav-Menu-item-label,
+      & > .#{$ns}Nav-Menu-submenu-arrow {
+        @include item-disabled();
+      }
+    }
+
+    .#{$ns}Nav-Menu-item-icon,
+    .#{$ns}Nav-Menu-item-label,
+    .#{$ns}Nav-Menu-submenu-arrow {
+      @include item-disabled();
+    }
+  }
+
+  @mixin effect {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    transform-origin: 0 0;
+  }
+
+  &-open {
+    &-slide-up-enter,
+    &-slide-up-appear {
+      @include effect;
+      opacity: 0;
+      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+      animation-play-state: paused;
+    }
+
+    &-slide-up-leave {
+      @include effect;
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+      animation-play-state: paused;
+    }
+
+    &-slide-up-enter &-slide-up-enter-active,
+    &-slide-up-appear &-slide-up-appear-active {
+      animation-name: rcMenuOpenSlideUpIn;
+      animation-play-state: running;
+    }
+
+    &-slide-up-leave &-slide-up-leave-active {
+      animation-name: rcMenuOpenSlideUpOut;
+      animation-play-state: running;
+    }
+
+    @keyframes rcMenuOpenSlideUpIn {
+      0% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(0);
+      }
+      100% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+      }
+    }
+    @keyframes rcMenuOpenSlideUpOut {
+      0% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+      }
+      100% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(0);
+      }
+    }
+
+    &-zoom-enter,
+    &-zoom-appear {
+      opacity: 0;
+      @include effect;
+      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+      animation-play-state: paused;
+    }
+
+    &-zoom-leave {
+      @include effect;
+      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+      animation-play-state: paused;
+    }
+
+    &-zoom-enter &-zoom-enter-active,
+    &-zoom-appear &-zoom-appear-active {
+      animation-name: rcMenuOpenZoomIn;
+      animation-play-state: running;
+    }
+
+    &-zoom-leave &-zoom-leave-active {
+      animation-name: rcMenuOpenZoomOut;
+      animation-play-state: running;
+    }
+
+    &-zoom-enter,
+    &-zoom-appear,
+    &-zoom-leave {
+      .#{$ns}Nav-Menu-submenu-rtl &,
+      .#{$ns}Nav-Menu-submenu-rtl & {
+        transform-origin: top right !important;
+      }
+    }
+
+    @keyframes rcMenuOpenZoomIn {
+      0% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+    }
+    @keyframes rcMenuOpenZoomOut {
+      0% {
+        transform: scale(1, 1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+    }
+  }
+}
+
+.#{$ns}Nav-Menu-overflow-menu-dark {
+  @include popup-dark();
+}
+
+.#{$ns}Nav-Menu-item-tooltip {
+  font-size: var(--Layout-tooltip-fontSize);
+  color: var(--Layout-light-fontColor);
+  background: var(--Layout-light-backgroundColor);
+  border: none;
+  border-radius: var(--Tooltip--attr-borderRadius);
+  box-shadow: 0px 4px 6px 0px rgb(8 14 26 / 6%),
+    0px 1px 10px 0px rgb(8 14 26 / 5%), 0px 2px 4px -1px rgb(8 14 26 / 4%);
+
+  .#{$ns}Tooltip-body {
+    &,
+    span {
+      color: var(--Layout-light-fontColor);
+    }
+  }
+
+  .#{$ns}Tooltip-arrow {
+    &:after {
+      left: px2rem(4px);
+    }
+    &:before {
+      display: none;
+    }
+  }
+
+  &.#{$ns}Nav-Menu-item-tooltip-dark {
+    background: var(--Layout-dark-tooltip-backgroundColor);
+
+    .#{$ns}Tooltip-body {
+      &,
+      span {
+        color: var(--Layout-dark-fontColor);
+      }
+    }
+  }
+}