zarm/lib/modal/style/index.css

基于 React 的移动端UI库

.za-modal {
  --background: var(--za-modal-background, rgb(242, 242, 242));
  --border-radius: var(--za-modal-border-radius, 14px);
  --shadow: var(--za-modal-shadow, 0 7px 21px var(--za-color-shadow));
  --title-font-size: var(--za-modal-title-font-size, 17px);
  --title-font-weight: var(--za-modal-title-font-weight, 500);
  --title-text-color: var(--za-modal-title-text-color, var(--za-color-text));
  --close-size: var(--za-modal-close-size, 20px);
  --close-color: var(--za-modal-close-color, #ccc);
  --close-active-color: var(--za-modal-close-active-color, #999);
  --body-font-size: var(--za-modal-body-font-size, 13px);
  --body-text-color: var(--za-modal-body-text-color, var(--za-color-text));
  --body-padding: var(--za-modal-body-padding, 16px);
  --button-height: var(--za-modal-button-height, 44px);
  --button-font-size: var(--za-modal-button-font-size, 17px);
  --button-font-weight: var(--za-modal-button-font-weight, 500);
  --button-text-color: var(--za-modal-button-text-color, var(--za-theme-primary));
  --button-background: var(--za-modal-button-background, transparent);
  --button-active-background: var(--za-modal-button-active-background, var(--za-background-active));
  --button-disabled-opacity: var(--za-modal-button-disabled-opacity, var(--za-opacity-disabled));
  -webkit-overflow-scrolling: touch;
}
.za-modal .za-popup {
  position: relative;
  background: var(--background);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.za-modal--radius .za-popup {
  border-radius: var(--border-radius);
}

.za-modal__body {
  position: relative;
  font-size: var(--body-font-size);
  color: var(--body-text-color);
  padding: var(--body-padding);
  user-select: auto;
}
.za-modal__body .za-modal__title {
  text-align: center;
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  color: var(--title-text-color);
  margin-bottom: 6px;
}

.za-modal__body .za-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--close-color);
  font-size: var(--close-size);
  margin: var(--body-padding);
  cursor: pointer;
}
.za-modal__body .za-modal__close:hover {
  color: var(--close-active-color);
}

.za-modal__action {
  position: relative;
  display: flex;
  align-items: stretch;
}
.za-modal__action: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-modal__action: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-modal__action:after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-modal__button {
  position: relative;
  display: block;
  width: 100%;
  height: var(--button-height);
  line-height: var(--button-height);
  background: var(--button-background);
  font-size: var(--button-font-size);
  color: var(--button-text-color);
  text-align: center;
}
.za-modal__button:active {
  background: var(--button-active-background);
}
.za-modal__button: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-left-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-modal__button: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-modal__button:not(:first-of-type):after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-modal__button--bold {
  font-weight: var(--button-font-weight);
}

.za-modal__button--disabled {
  --item-text-color: var(--za-modal-item-text-color, var(--za-color-text));
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
  pointer-events: none;
}

.za-modal__button--default {
  --button-text-color: var(--za-modal-button-text-color, var(--za-color-text));
}

.za-modal__button--danger {
  --button-text-color: var(--za-modal-button-text-color, var(--za-theme-danger));
}

.za-alert .za-modal__body, .za-confirm .za-modal__body {
  text-align: center;
}