zarm/lib/cascader-view/style/index.css

基于 React 的移动端UI库

.za-cascader-view {
  --background: var(--za-cascader-view-background, #fff);
  --padding: var(--za-cascader-view-padding, var(--za-padding-v-sm));
  --tab-text-color: var(--za-cascader-view-tab-text-color, var(--za-color-text-placeholder));
  --tab-active-text-color: var(--za-cascader-view-tab-active-text-color, var(--za-theme-primary));
  --options-height: var(--za-cascader-view-options-height, auto);
  --option-text-color: var(--za-cascader-view-option-text-color, var(--za-color-text));
  --option-active-text-color: var(--za-cascader-view-option-active-text-color, var(--za-theme-primary));
  --option-font-size: var(--za-cascader-view-option-font-size, var(--za-font-size-sm));
  --option-height: var(--za-cascader-view-option-height, 44px);
  background: var(--background);
}
.za-cascader-view__tab-text--unselected {
  color: var(--tab-text-color);
}

.za-cascader-view__content {
  height: var(--options-height);
  overflow-y: scroll;
}
.za-cascader-view__content .za-list-item .za-list-item__wrapper {
  min-height: var(--option-height);
}

.za-cascader-view__content .za-list-item .za-list-item__inner {
  line-height: calc(var(--option-height) - var(--padding) * 2);
}

.za-cascader-view__content-item {
  padding-left: 20px;
  background: var(--background);
  font-size: var(--option-font-size);
  color: var(--option-color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.za-cascader-view__content-item--active {
  color: var(--option-active-text-color);
}

.za-cascader-view-tabs .za-tabs__tab {
  flex: none;
  font-size: var(--option-font-size);
}
.za-cascader-view-tabs .za-tabs__tab--active {
  color: var(--tab-active-text-color);
}

.za-cascader-view-tabs .za-tabs .za-carousel__items {
  transition-duration: 0;
}