@opensig/opendesign/lib/option/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>

.o-option {
  --option-color: var(--o-color-info2);
  --option-color-hover: var(--o-color-info2);
  --option-color-active: var(--o-color-primary1);
  --option-color-disabled: var(--o-color-info4);
  --option-bg-color: transparent;
  --option-bg-color-hover: var(--o-color-control2-light);
  --option-bg-color-active: var(--o-color-control3-light);
  --option-bg-color-disabled: transparent;
  --option-text-size: var(--o-font_size-text1);
  --option-text-height: var(--o-line_height-text1);
  --option-padding: 7px 12px;
  --option-gap: 2px;
  --option-radius: var(--o-radius_control-s);
}

.o-option-multiple {
  --option-bg-color-active: transparent;
}

.o-options-popup {
  --popup-shadow: var(--o-shadow-2);
  --popup-bg-color: var(--o-color-control-light);
  --popup-radius: var(--o-radius_control-m);
  --popup-bd: none;
  --popup-padding: 0;
  --popup-min-width: 64px;
}

.o-option-list {
  --option-list-padding-default: 3px 4px;
  --option-list-max-height-default: 302px;
}

.o-option-group {
  --option-group-color: var(--o-color-info3);
  --option-group-text-size: var(--o-font_size-tip1);
  --option-group-text-height: var(--o-line_height-tip1);
  --option-group-gap: 8px;
  --option-group-name-padding: 2px 8px;
}

.o-option {
  padding: calc(var(--option-gap) / 2) 0;
}

.o-option-item {
  display: flex;
  align-items: center;
  padding: var(--option-padding);
  color: var(--option-color);
  background-color: var(--option-bg-color);
  font-size: var(--option-text-size);
  line-height: var(--option-text-height);
  border-radius: var(--option-radius);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;
}
@media (hover: hover) {
  .o-option-item:hover, .o-option-item.o-option-multiple:hover {
    background-color: var(--option-bg-color-hover);
    color: var(--option-color-hover);
  }
}
.o-option-item.active {
  font-weight: 500;
  color: var(--option-color-active);
  background-color: var(--option-bg-color-active);
}

.o-option-disabled, .o-option-disabled:hover, .o-option-disabled:active, .o-option-disabled.o-option-multiple:hover {
  cursor: not-allowed;
  color: var(--option-color-disabled);
  background-color: var(--option-bg-color-disabled);
}

.o-option-list {
  padding: var(--option-list-padding, var(--option-list-padding-default));
  --scroller-padding: 0;
}

.o-options-container {
  max-height: var(--option-list-max-height, var(--option-list-max-height-default));
  overflow: auto;
}

.o-option-group {
  color: var(--option-group-color);
  font-size: var(--option-group-text-size);
  line-height: var(--option-group-text-height);
}
.o-option-group + .o-option-group {
  margin-top: var(--option-group-gap);
}

.o-option-group-name {
  padding: var(--option-group-name-padding);
}

@media (max-width: 1440px) {
  .o-option {
    --option-text-size: var(--o-font_size-tip1);
    --option-text-height: var(--o-line_height-tip1);
    --option-padding: 6px 12px;
  }
}