naive-ui/styles/Menu.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin() {
  @include b(menu) {
    color: $--menu-item-text-color;
    @include once {
      overflow: hidden;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      @include m(transition-disabled) {
        @include b(menu-item-content) {
          @include e(icon) {
            @include b(icon) {
              transition: none !important;
            }
          }
          @include b(menu-item-content-header) {
            transition: none !important;
            @include e(extra) {
              transition: none !important;
            }
          }
        }
      }
    }
    @include m(horizontal) {
      @include b(menu-list) {
        display: flex;
        @include b(menu-item-content) {
          padding: 0 20px;
          border-bottom: 2px solid transparent;
          @include m(selected, child-selected) {
            background-color: transparent;
            border-bottom: 2px solid $--primary-6;
          }
          @include not-m(disabled) {
            &:hover {
              border-bottom: 2px solid $--primary-6;
            }
            @include m(hover) {
              border-bottom: 2px solid $--primary-6;
            }
          }
        }
      }
    }
    @include m(collapsed) {
      @include b(menu-list) {
        @include b(menu-item-content) {
          @include e(icon) {
            @include b(icon) {
              fill: $--n-text-color;
              stroke: $--n-text-color;
            }
          }
          @include b(menu-item-content-header) {
            opacity: 0;
          }
          @include e(arrow) {
            opacity: 0;
          }
        }
      }
    }
    @include b(menu-list) {
      @include once {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      @include b(menu-item-content) {
        box-sizing: border-box;
        line-height: 1.5;
        height: 48px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
        position: relative;
        font-size: 14px;
        @include e(icon) {
          transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
          box-sizing: content-box;
          flex-shrink: 0;
          padding-right: 8px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          @include b(icon) {
            fill: $--n-secondary-text-color;
            stroke: $--n-secondary-text-color;
          }
        }
        @include e(arrow) {
          border-left: 2px solid  $--menu-submenu-arrow-color;
          border-top: 2px solid  $--menu-submenu-arrow-color;
          @include once {
            content: '';
            height: 6px;
            width: 6px;
            position: absolute;
            right: 24px;
            top: calc(50% - 3px);
            transform: rotate(45deg) ;
            transform-origin: 25% 25%;
            opacity: 1;
            transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier .1s, border-color 0.3s $--n-ease-in-out-cubic-bezier;
          }
        }
        @include b(menu-item-content-header) {
          transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
          opacity: 1;
          flex-grow: 1;
          flex-shrink: 1;
          color: $--n-secondary-text-color;
          white-space: nowrap;
          @include e(extra) {
            @include once {
              white-space: nowrap;
              margin-left: 6px;
              display: inline-block;
              transition: color 0.3s $--n-ease-in-out-cubic-bezier;
            }
            color: $--n-meta-text-color;
          }
        }
        @include m(collapsed) {
          @include e(arrow) {
            transform: rotate(225deg);
          }
        }
        @include not-m(disabled) {
          &:hover {
            @include e(icon) {
              @include b(icon) {
                fill: $--primary-6;
                stroke: $--primary-6;
              }
            }
            @include b(menu-item-content-header) {
              color: $--primary-6;
              @include e(extra) {
                color: $--primary-6;
              }
            }
          }
          @include m(hover) {
            @include e(icon) {
              @include b(icon) {
                fill: $--primary-6;
                stroke: $--primary-6;
              }
            }
            @include b(menu-item-content-header) {
              color: $--primary-6;
              @include e(extra) {
                color: $--primary-6;
              }
            }
          }
        }
        @include m(selected) {
          background-color: $--menu-item-background-color;
          @include e(icon) {
            @include b(icon) {
              fill: $--primary-6;
              stroke: $--primary-6;
            }
          }
          @include b(menu-item-content-header) {
            color: $--primary-6;
            @include e(extra) {
              color: $--primary-6;
            }
          }
        }
        @include m(disabled) {
          opacity: 0.45;
          cursor: not-allowed;
        }
        @include m(child-selected) {
          @include b(menu-item-content-header) {
            color: $--primary-6;
            @include e(extra) {
              color: $--primary-6;
            }
          }
          @include e(icon) {
            @include b(icon) {
              fill: $--primary-6;
              stroke: $--primary-6;
            }
          }
        }
      }
      @include b(menu-item) {
        @include once {
          list-style: none;
        }
      }
    }
    @include b(submenu) {
      @include once {
        cursor: pointer;
        position: relative; 
        @include b(submenu-content) {
          padding: 0;
          list-style: none;
          @include fade-in-height-expand-transition($duration: .2s);
        }
      }
    }
    @include b(menu-item-group) {
      @include b(menu-item-group-title) {
        color: $--menu-item-group-text-color;
        @include once {
          cursor: default;
          height: 40px;
          display: flex;
          align-items: center;
          transition: padding-left .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
        }        
      }
    }
  }
}