@opensig/opendesign/lib/cascader/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-cascader {
  --cascader-height: 200px;
}

.o-cascader-options {
  --cascader-options-bd-clor: var(--o-color-control1-light);
  --cascader-options-gap: 8px;
}

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

.o-cascader {
  height: var(--cascader-height);
}

.o-cascader-panel {
  position: relative;
  display: inline-flex;
  height: calc(var(--cascader-height) - 2 * var(--scroller-padding));
}

.o-cascader-options {
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--cascader-options-gap) / 2);
  min-width: 144px;
  max-width: 192px;
  height: 100%;
  overflow-y: auto;
}
.o-cascader-options + .o-cascader-options {
  border-left: 1px solid var(--cascader-options-bd-clor);
}
.o-cascader-options:first-child {
  padding-left: 0;
}
.o-cascader-options:last-child {
  padding-right: 0;
}

.o-cascader-option {
  display: flex;
  align-items: center;
  padding: var(--cascader-option-padding);
  color: var(--cascader-option-color);
  border-radius: var(--cascader-option-radius);
  background-color: var(--cascader-option-bg-color);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;
}
@media (hover: hover) {
  .o-cascader-option:hover {
    color: var(--cascader-option-color-hover);
    background-color: var(--cascader-option-bg-color-hover);
  }
}

.o-cascader-option + .o-cascader-option {
  margin-top: var(--cascader-option-gap);
}

.o-cascader-option-label {
  font-size: var(--cascader-option-text-size);
  line-height: var(--cascader-option-text-height);
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.o-cascader-option-arrow {
  font-size: var(--cascader-option-icon-size);
  margin-left: auto;
}

.o-cascader-option-selected {
  color: var(--cascader-option-color-selected);
  background-color: var(--cascader-option-bg-color-selected);
  font-weight: 500;
}
@media (hover: hover) {
  .o-cascader-option-selected:hover {
    color: var(--cascader-option-color-selected);
    background-color: var(--cascader-option-bg-color-selected);
  }
}