zarm/lib/action-sheet/style/index.css

基于 React 的移动端UI库

.za-action-sheet {
  --background: var(--za-action-sheet-background, #fff);
  --border-radius: var(--za-action-sheet-border-radius, 14px);
  --spacing-margin: var(--za-action-sheet-spacing-margin, 8px);
  --item-height: var(--za-action-sheet-item-height, 56px);
  --item-font-size: var(--za-action-sheet-item-font-size, 20px);
  --item-font-weight: var(--za-action-sheet-item-font-weight, 500);
  --item-active-background: var(--za-action-sheet-item-active-background, var(--za-background-active));
  --item-opacity-disabled: var(--za-action-sheet-item-opacity-disabled, var(--za-opacity-disabled));
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-theme-primary));
  --cancel-text-color: var(--za-action-sheet-cancel-text-color, var(--za-theme-primary));
  --cancel-margin-top: var(--za-action-sheet-cancel-margin-top, 8px);
}
.za-action-sheet--spacing {
  margin: var(--spacing-margin);
}
.za-action-sheet--spacing .za-action-sheet__actions, .za-action-sheet--spacing .za-action-sheet__cancel {
  border-radius: var(--border-radius);
}

.za-action-sheet__actions, .za-action-sheet__cancel {
  overflow: hidden;
  background: var(--background);
}

.za-action-sheet__cancel {
  margin-top: var(--cancel-margin-top);
}
.za-action-sheet__cancel .za-action-sheet__item {
  color: var(--cancel-text-color);
}

.za-action-sheet__item {
  position: relative;
  display: block;
  height: var(--item-height);
  line-height: var(--item-height);
  font-size: var(--item-font-size);
  color: var(--item-text-color);
  text-align: center;
}
.za-action-sheet__item:not(.za-action-sheet__item--disabled):active {
  background: var(--item-active-background);
}
.za-action-sheet__item:not(:first-of-type):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-action-sheet__item:not(:first-of-type):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-action-sheet__item:not(:first-of-type):after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-action-sheet__item--bold {
  font-weight: var(--item-font-weight);
}

.za-action-sheet__item--disabled {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-color-text-disabled));
  cursor: not-allowed;
  pointer-events: none;
}

.za-action-sheet__item--default {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-color-text));
}

.za-action-sheet__item--danger {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-theme-danger));
}