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

基于 React 的移动端UI库

.za-picker-view {
  --background: var(--za-picker-view-background, #fff);
  --padding: var(--za-picker-view-padding, 16px);
  --mask-start-background: var(--za-picker-view-mask-start-background, rgba(255, 255, 255, 0.4));
  --mask-end-background: var(--za-picker-view-mask-end-background, rgba(255, 255, 255, 0.8));
  --wheel-item-rows: var(--za-picker-view-wheel-item-rows, 5);
  --wheel-item-height: var(--za-picker-view-wheel-item-height, 34px);
  --wheel-item-font-size: var(--za-picker-view-wheel-item-font-size, 20px);
  --wheel-item-text-color: var(--za-picker-view-wheel-item-text-color, var(--za-color-text));
  --wheel-item-disabled-text-color: var(--za-picker-view-wheel-item-disabled-text-color, var(--za-color-text-disabled));
  --wheel-item-selected-background: var(--za-picker-view-wheel-item-selected-background, rgba(116, 116, 128, 0.08));
  --wheel-item-selected-border-radius: var(--za-picker-view-wheel-item-selected-border-radius, 7px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  padding: var(--padding);
  background: var(--background);
}
.za-picker-view .za-wheel {
  --item-rows: var(--za-wheel-item-rows, var(--wheel-item-rows));
  --item-height: var(--za-wheel-item-height, var(--wheel-item-height));
  --item-font-size: var(--za-wheel-item-font-size, var(--wheel-item-font-size));
  --item-text-color: var(--za-wheel-item-text-color, var(--wheel-item-text-color));
  --item-disabled-text-color: var(--za-wheel-item-disabled-text-color, var(--wheel-item-disabled-text-color));
}
.za-picker-view:before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(100% - var(--padding) * 2);
  height: var(--wheel-item-height);
  left: var(--padding);
  margin-top: calc(var(--wheel-item-height) / -2);
  background: var(--wheel-item-selected-background);
  border-radius: var(--wheel-item-selected-border-radius);
}
.za-picker-view__mask {
  width: 100%;
  height: calc((100% - var(--wheel-item-height)) / 2);
  pointer-events: none;
  transform: translateZ(0);
}
.za-picker-view__mask--top {
  position: absolute;
  top: 0;
  background: linear-gradient(to top, var(--mask-start-background), var(--mask-end-background));
}

.za-picker-view__mask--bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, var(--mask-start-background), var(--mask-end-background));
}

.za-picker-view__content {
  flex: 1;
  display: flex;
  width: 100%;
}