@opensig/opendesign/lib/menu/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

@charset "UTF-8";
.o-menu {
  --menu-width: 240px;
  --menu-bg-color: transparent;
  --menu-indicator-width: 1px;
  --menu-indicator-bg-color: var(--o-color-control4);
  --menu-max-row: 1;
  --menu-color: var(--o-color-info2);
  --menu-color-disabled: var(--o-color-info4);
  --menu-color-selected: var(--o-color-primary1);
  --menu-bg-color-hover: var(--o-color-control2-light);
  --menu-bg-color-selected: var(--o-color-control3-light);
  --menu-icon-color: currentColor;
  --menu-icon-color-selected: currentColor;
  --menu-base-indent: calc(var(--menu-icon-size) + var(--menu-icon-gap));
}

.o-menu-medium {
  --menu-item-padding-v: 8px;
  --menu-padding-h: 8px;
  --menu-radius: var(--o-radius_control-xs);
  --menu-text-size: var(--o-font_size-tip1);
  --menu-text-height: var(--o-line_height-tip1);
  --menu-icon-size: var(--o-icon_size_control-m);
  --menu-icon-gap: 8px;
  --menu-arrow-size: var(--o-icon_size_control-m);
}
.o-menu-medium .o-sub-menu[data-level="0"] > .o-sub-menu-title, .o-menu-medium .o-menu-item[data-level="0"] {
  --menu-item-padding-v: 11px;
  --menu-text-size: var(--o-font_size-text1);
  --menu-text-height: var(--o-line_height-text1);
}

.o-menu-small {
  --menu-item-padding-v: 4px;
  --menu-padding-h: 4px;
  --menu-radius: var(--o-radius_control-xs);
  --menu-text-size: var(--o-font_size-tip1);
  --menu-text-height: var(--o-line_height-tip1);
  --menu-icon-size: var(--o-icon_size_control-xs);
  --menu-icon-gap: 4px;
  --menu-arrow-size: var(--o-icon_size_control-xs);
}

.o-menu-item,
.o-sub-menu {
  --menu-level-indent: calc(var(--menu-padding-h) + (var(--menu-base-indent)) * (var(--menu-level)));
}

.o-menu-arrow-left .o-sub-menu {
  --menu-level-indent: calc((var(--menu-base-indent)) * (var(--menu-level)));
}
.o-menu-arrow-left .o-menu-item {
  --menu-level-indent: calc((var(--menu-base-indent)) * (var(--menu-level)) + var(--menu-arrow-size) + var(--menu-icon-gap));
}

.o-menu-popover {
  --menu-popover-width: 240px;
}

.o-menu-arrow-left {
  --menu-max-row: 2;
  --sub-menu-base-indent: calc(var(--menu-arrow-size) + var(--menu-icon-gap));
  --menu-item-base-indent: calc(20px + var(--menu-icon-gap));
}

.o-menu-arrow-left.o-menu-small {
  --menu-item-base-indent: 24px;
}

.o-menu > .o-menu-item {
  --menu-item-level-indent: var(--menu-padding-h);
}

.o-menu {
  width: var(--menu-width);
  background-color: var(--menu-bg-color);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--menu-color);
}

/* 项目样式 */
.o-sub-menu-title,
.o-menu-item {
  font-size: var(--menu-text-size);
  line-height: var(--menu-text-height);
  padding: var(--menu-item-padding-v) var(--menu-padding-h) var(--menu-item-padding-v) var(--menu-level-indent);
  margin: 1px 0;
  border-radius: var(--menu-radius);
  cursor: pointer;
  transition: all var(--o-duration-s) var(--o-easing-standard);
  display: flex;
  align-items: flex-start;
}
@media (hover: hover) {
  .o-sub-menu-title:hover,
  .o-menu-item:hover {
    background-color: var(--menu-bg-color-hover);
  }
}

.o-sub-menu-selected > .o-sub-menu-title,
.o-sub-menu-associated-selected > .o-sub-menu-title,
.o-menu-item-selected {
  font-weight: 600;
  color: var(--menu-color-selected);
  --menu-icon-color: var(--menu-icon-color-selected);
}

.o-menu-item-selected {
  background-color: var(--menu-bg-color-selected);
}
@media (hover: hover) {
  .o-menu-item-selected:hover {
    background-color: var(--menu-bg-color-selected);
  }
}

.o-sub-menu-title {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.o-sub-menu-title-icon,
.o-menu-item-icon {
  color: var(--menu-icon-color);
  margin-right: var(--menu-icon-gap);
  font-size: var(--menu-icon-size);
  height: var(--menu-text-height);
  width: var(--menu-icon-size);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-sub-menu-title-content,
.o-menu-item-content {
  margin-right: auto;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--menu-max-row);
}

.o-sub-menu-arrow {
  height: var(--menu-text-height);
  font-size: var(--menu-arrow-size);
  width: var(--menu-arrow-size);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0);
  transition: transform var(--o-duration-m2) var(--o-easing-standard);
}
.o-sub-menu-expanded > .o-sub-menu-title > .o-sub-menu-arrow {
  transform: rotate(-180deg);
}

.o-sub-menu-children {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: all var(--o-duration-m2) var(--o-easing-standard);
}
.o-sub-menu-children.expanded {
  grid-template-rows: 1fr;
}

.o-sub-menu-children-wrap {
  min-height: 0;
  min-width: 0;
  position: relative;
}

.o-menu-item-disabled {
  cursor: not-allowed;
  color: var(--menu-color-disabled);
}

/* 层级指示线 */
.o-menu-arrow-left .o-sub-menu:not([data-level="0"]) .o-sub-menu-children.expanded {
  position: relative;
}
.o-menu-arrow-left .o-sub-menu:not([data-level="0"]) .o-sub-menu-children.expanded::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--menu-arrow-size) / 2 + var(--menu-level-indent));
  width: var(--menu-indicator-width);
  background-image: linear-gradient(to right, var(--menu-indicator-bg-color), var(--menu-indicator-bg-color));
  background-size: var(--menu-indicator-width) 100%;
  z-index: 0;
}
.o-menu-arrow-left .o-sub-menu-arrow + .o-sub-menu-title-icon, .o-menu-arrow-left .o-sub-menu-arrow + .o-sub-menu-title-content {
  margin-left: var(--menu-icon-gap);
}

.o-menu-popover {
  max-width: var(--menu-popover-width);
  word-wrap: break-word;
}

/* 0-1680 */
@media (min-width: 0px) and (max-width: 1680px) {
  .o-menu-medium {
    --menu-item-padding-v: 4px;
    --menu-icon-size: var(--o-icon_size_control-s);
    --menu-arrow-size: var(--o-icon_size_control-s);
  }
  .o-menu-medium .o-sub-menu[data-level="0"] > .o-sub-menu-title, .o-menu-medium .o-menu-item[data-level="0"] {
    --menu-item-padding-v: 8px;
    --menu-text-size: var(--o-font_size-tip1);
    --menu-text-height: var(--o-line_height-tip1);
  }
}
/* 0-1200 */
@media (max-width: 1200px) {
  .o-menu-small {
    --menu-text-size: var(--o-font_size-tip2);
    --menu-text-height: var(--o-line_height-tip2);
  }
  .o-menu-small .o-menu-item[data-level="0"],
  .o-menu-small .o-sub-menu[data-level="0"] > .o-sub-menu-title {
    --menu-text-size: var(--o-font_size-tip1);
    --menu-text-height: var(--o-line_height-tip1);
  }
}