zarm/lib/picker/style/index.css

基于 React 的移动端UI库

.za-picker {
  --header-height: var(--za-picker-header-height, 45px);
  --header-font-size: var(--za-picker-header-font-size, 16px);
  --header-background: var(--za-picker-header-background, #f7f7f7);
  --header-title-text-color: var(--za-picker-header-title-text-color, var(--za-color-text));
  --header-confirm-text-color: var(--za-picker-header-confirm-text-color, var(--za-theme-primary));
  --header-cancel-text-color: var(--za-picker-header-cancel-text-color, var(--za-color-text-caption));
  --background: var(--za-picker-background, #fff);
  --content-background: var(--za-picker-content-background, #fff);
  --content-padding: var(--za-picker-content-padding, 16px);
  --content-mask-start-background: var(--za-picker-content-mask-start-background, rgba(255, 255, 255, 0.4));
  --content-mask-end-background: var(--za-picker-content-mask-end-background, rgba(255, 255, 255, 0.8));
  --wheel-item-rows: var(--za-picker-wheel-item-rows, 5);
  --wheel-item-height: var(--za-picker-wheel-item-height, 34px);
  --wheel-item-font-size: var(--za-picker-wheel-item-font-size, 20px);
  --wheel-item-text-color: var(--za-picker-wheel-item-text-color, var(--za-color-text));
  --wheel-item-disabled-text-color: var(--za-picker-wheel-item-disabled-text-color, var(--za-color-text-disabled));
  --wheel-item-selected-background: var(--za-picker-wheel-item-selected-background, rgba(116, 116, 128, 0.08));
  --wheel-item-selected-border-radius: var(--za-picker-wheel-item-selected-border-radius, 7px);
  ---wheel-item-rows: var(--za-picker--wheel-item-rows, var(--wheel-item-rows));
  ---wheel-item-height: var(--za-picker--wheel-item-height, var(--wheel-item-height));
  ---wheel-item-font-size: var(--za-picker--wheel-item-font-size, var(--wheel-item-font-size));
  ---wheel-item-text-color: var(--za-picker--wheel-item-text-color, var(--wheel-item-text-color));
  ---wheel-item-disabled-text-color: var(--za-picker--wheel-item-disabled-text-color, var(--wheel-item-disabled-text-color));
  ---wheel-item-selected-background: var(--za-picker--wheel-item-selected-background, var(--wheel-item-selected-background));
  ---wheel-item-selected-border-radius: var(--za-picker--wheel-item-selected-border-radius, var(--wheel-item-selected-border-radius));
  background: var(--background);
}
.za-picker .za-picker-view {
  --background: var(--za-picker-view-background, var(--content-background));
  --padding: var(--za-picker-view-padding, var(--content-padding));
  --mask-start-background: var(--za-picker-view-mask-start-background, var(--content-mask-start-background));
  --mask-end-background: var(--za-picker-view-mask-end-background, var(--content-mask-end-background));
  --wheel-item-rows: var(--za-picker-view-wheel-item-rows, var(---wheel-item-rows));
  --wheel-item-height: var(--za-picker-view-wheel-item-height, var(---wheel-item-height));
  --wheel-item-font-size: var(--za-picker-view-wheel-item-font-size, var(---wheel-item-font-size));
  --wheel-item-text-color: var(--za-picker-view-wheel-item-text-color, var(---wheel-item-text-color));
  --wheel-item-disabled-text-color: var(--za-picker-view-wheel-item-disabled-text-color, var(---wheel-item-disabled-text-color));
  --wheel-item-selected-background: var(--za-picker-view-wheel-item-selected-background, var(---wheel-item-selected-background));
  --wheel-item-selected-border-radius: var(--za-picker-view-wheel-item-selected-border-radius, var(---wheel-item-selected-border-radius));
}
.za-picker__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: var(--header-height);
  line-height: var(--header-height);
  font-size: var(--header-font-size);
  background: var(--header-background);
}
.za-picker__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-picker__header:after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-picker__header:after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-picker__body {
  width: 100%;
  height: 100%;
  flex: 1;
}

.za-picker__cancel, .za-picker__confirm {
  flex: 1;
  padding: 0 20px;
  cursor: pointer;
}

.za-picker__cancel {
  text-align: left;
  color: var(--header-cancel-text-color);
}

.za-picker__confirm {
  text-align: right;
  color: var(--header-confirm-text-color);
}

.za-picker__title {
  color: var(--header-title-text-color);
}