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(collapsed) {
      @include b(menu-list) {
        @include b(menu-item) {
          @include m(selected) {
            &::before {
              opacity: 0;
            }
          }
          @include e(header) {
            opacity: 0;
          }
        }
      }
      @include b(submenu) {
        @include m(selected-inside) {
          @include b(submenu-item) {
            @include e(icon) {
              fill: $--primary-6;
            }
          }
        }
        @include b(submenu-item) {
          @include e(icon) {
            fill: $--n-text-color;
          }
          @include e(header) {
            opacity: 0;
          }
          &::after {
            transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
            opacity: 0;
          }
        }
      }
    }
    @include b(menu-list) {
      @include once {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      @include b(menu-item-wrapper) {
        list-style: none;
      }
      @include b(menu-item) {
        @include once {
          cursor: pointer;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
          position: relative;
          height: 48px;
          display: flex;
          align-items: center;
          font-size: 14px;
          list-style: none;
          line-height: 1.5;
          @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 e(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;
          }
          @include m(selected) {
            &::before {
              opacity: .9;
            }
          }
          @include m(disabled) {
            opacity: 0.45;
            cursor: not-allowed;
          }
        }
        @include e(icon) {
          fill: $--n-secondary-text-color;
        }
        @include e(header) {
          color: $--n-secondary-text-color;
        }
        &:hover {
          @include e(icon) {
            fill: $--primary-6;
          }
          @include e(header) {
            color: $--primary-6;
          }
        }
        @include m(selected) {
          background-color: $--menu-item-background-color;
          @include e(icon) {
            fill: $--primary-6;
          }
          @include e(header) {
            color: $--primary-6;
          }
        }
        // &::before {
        //   background-image: $--menu-item-background-image;
        //   background-position: $--menu-item-background-position;
        //   @include once {
        //     content: "";
        //     background-size: 300%;
        //     position: absolute;
        //     left: 0;
        //     right: 0;
        //     top: 0;
        //     bottom: 0;
        //     z-index: 0;
        //     transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
        //     opacity: 0; 
        //   }
        // }
      }
    }
    @include b(submenu) {
      @include m(selected-inside) {
        @include b(submenu-item) {
          @include e(header) {
            color: $--primary-6
          }
          @include e(icon) {
            fill: $--primary-6
          }
        }
      }
      @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(submenu-item) {
        @include e(header) {
          color: $--n-text-color;
        }
        @include e(icon) {
          fill: $--n-text-color;
        }
        @include once {
          display: flex;
          flex-wrap: nowrap;
          font-weight: 500;
          font-size: 14px;
          transition: color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
          height: 48px;
          display: flex;
          align-items: center;
          position: relative;
          @include e(icon) {
            transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
            padding-right: 8px;
            box-sizing: content-box;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }
          @include e(header) {
            transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
            opacity: 1;
            flex-grow: 1;
            opacity: 1;
          }
          @include m(collapsed) {
            &::after {
              transform: rotate(225deg);
            }
          }
          @include m(disabled) {
            opacity: 0.45;
            cursor: not-allowed;
          }
        }
        &:hover {
          @include e(icon) {
            fill: $--primary-6;
          }
          @include e(header) {
            color: $--primary-6;
          }
        }
        /** ::after is the arrow of submenu */
        &::after {
          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-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: color .3s $--n-ease-in-out-cubic-bezier;
        }        
      }
    }
  }
}