naive-ui/styles/Menu.scss

@import './mixins/mixins.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) {
        @include once {
          display: flex;
        }
        @include b(menu-item-content) {
          @include once {
            padding: 0 20px;
            border-bottom: 2px solid transparent;
          }
          @include m(selected, child-selected) {
            @include once {
              background-color: transparent !important;
            }
            border-bottom: 2px solid $--menu-horizontal-border-color;
          }
          @include not-m(disabled) {
            &:hover {
              border-bottom: 2px solid $--menu-horizontal-border-color;
            }
            @include m(hover) {
              border-bottom: 2px solid $--menu-horizontal-border-color;
            }
          }
        }
      }
    }
    @include m(collapsed) {
      @include b(menu-list) {
        @include b(menu-item-content) {
          @include once {
            @include b(menu-item-content-header) {
              opacity: 0;
            }
            @include e(arrow) {
              opacity: 0;
            }
          }
          @include e(icon) {
            @include b(icon) {
              fill: map-get($--menu-item-content-icon-color, 'collapsed');
              stroke: map-get($--menu-item-content-icon-color, 'collapsed');
            }
          }
        }
      }
    }
    @include b(menu-list) {
      @include once {
        list-style: none;
        margin: 0;
        padding: 0;
        @include b(menu-item) {
          list-style: none;
        }
        @include b(submenu) {
          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-content) {
        @include once {
          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 m(disabled) {
            opacity: 0.45;
            cursor: not-allowed;
          }
          @include m(collapsed) {
            @include e(arrow) {
              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;
              transform: rotate(225deg);
            }
          }
          @include m(uncollapsable) {
            cursor: default;
          }
        }
        @include e(icon) {
          @include once {
            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: map-get($--menu-item-content-icon-color, 'default');
            stroke: map-get($--menu-item-content-icon-color, 'default');
          }
        }
        @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) {
          @include once {
            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;
            white-space: nowrap;
          }
          color: map-get($--menu-item-content-text-color, 'default');
          @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: map-get($--menu-item-content-extra-text-color, 'default');
          }
        }
        @include not-m(disabled) {
          & {
            @include not-m(uncollapsable) {
              &:hover {
                @include e(icon) {
                  @include b(icon) {
                    fill: map-get($--menu-item-content-icon-color, 'hover');
                    stroke: map-get($--menu-item-content-icon-color, 'hover');
                  }
                }
                @include b(menu-item-content-header) {
                  color:  map-get($--menu-item-content-text-color, 'hover');
                  @include e(extra) {
                    color:  map-get($--menu-item-content-extra-text-color, 'selected');
                  }
                }
              }
              @include m(hover) {
                @include e(icon) {
                  @include b(icon) {
                    fill: map-get($--menu-item-content-icon-color, 'hover');
                    stroke: map-get($--menu-item-content-icon-color, 'hover');
                  }
                }
                @include b(menu-item-content-header) {
                  color:  map-get($--menu-item-content-text-color, 'hover');
                  @include e(extra) {
                    color:  map-get($--menu-item-content-extra-text-color, 'selected');
                  }
                }
              }
            }
          }
        }
        @include m(selected) {
          background-color: $--menu-item-background-color;
          @include e(icon) {
            @include b(icon) {
              fill: map-get($--menu-item-content-icon-color, 'selected');
              stroke: map-get($--menu-item-content-icon-color, 'selected');
            }
          }
          @include b(menu-item-content-header) {
            color: map-get($--menu-item-content-text-color, 'selected');
            @include e(extra) {
              color: map-get($--menu-item-content-extra-text-color, 'selected');
            }
          }
        }
        @include m(child-selected) {
          @include b(menu-item-content-header) {
            color: map-get($--menu-item-content-text-color, 'child-selected');
            @include e(extra) {
              color: map-get($--menu-item-content-extra-text-color, 'child-selected');
            }
          }
          @include e(icon) {
            @include b(icon) {
              fill: map-get($--menu-item-content-icon-color, 'child-selected');
              stroke: map-get($--menu-item-content-icon-color, 'child-selected');
            }
          }
        }
      }
    }
    @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;
        }        
      }
    }
  }
}