zarm/lib/list/style/index.css

基于 React 的移动端UI库

.za-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.za-list > *:first-child .za-list-item__wrapper::after {
  content: none;
}

.za-list--unbordered .za-list-item .za-list-item__wrapper:after {
  content: none;
}

.za-list-item {
  --height: var(--za-list-item-height, 44px);
  --padding-horizontal: var(--za-list-item-padding-horizontal, 16px);
  --padding-vertical: var(--za-list-item-padding-vertical, 8px);
  --background: var(--za-list-item-background, #fff);
  --active-background: var(--za-list-item-active-background, var(--za-background-active));
  --separator-color: var(--za-list-item-separator-color, var(--za-border-color));
  --title-font-size: var(--za-list-item-title-font-size, var(--za-font-size-md));
  --title-white-space: var(--za-list-item-title-white-space, nowrap);
  --title-line-height: var(--za-list-item-title-line-height, calc(var(--height) - var(--padding-vertical) * 2));
  --suffix-text-color: var(--za-list-item-suffix-text-color, rgba(0, 0, 0, 0.45));
  --space: var(--za-list-item-space, 5px);
  --arrow-width: var(--za-list-item-arrow-width, var(--za-arrow-width));
  --arrow-color: var(--za-list-item-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-list-item-arrow-size, var(--za-arrow-size));
  --description-font-size: var(--za-list-item-description-font-size, 12px);
  --description-text-color: var(--za-list-item-description-text-color, var(--za-color-text-caption));
  --description-line-height: var(--za-list-item-description-line-height, 16px);
  --inline-title-width: var(--za-list-item-inline-title-width, 100px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: var(--padding-horizontal);
  background: var(--background);
  font-size: var(--title-font-size);
}
.za-list-item a,
.za-list-item a:hover {
  text-decoration: none;
}
.za-list-item__prefix {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: var(--padding-horizontal);
  padding: var(--padding-vertical) 0;
  min-height: var(--height);
}

.za-list-item__wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: var(--height);
  padding: var(--padding-vertical) 0;
  padding-right: var(--padding-horizontal);
}
.za-list-item__wrapper:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--separator-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-list-item__wrapper: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-list-item__wrapper:after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-list-item__inner {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  line-height: var(--title-line-height);
}

.za-list-item__title {
  white-space: var(--title-white-space);
  overflow: hidden;
  text-overflow: ellipsis;
}

.za-list-item__content {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: var(--title-line-height);
}

.za-list-item__suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--title-line-height);
  margin-left: auto;
  padding-left: var(--space);
  color: var(--suffix-text-color);
}

.za-list-item__arrow {
  margin-left: var(--space);
  margin-right: var(--arrow-width);
}
.za-list-item__arrow:after {
  content: "";
  display: inline-block;
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-top: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: rotate(45deg);
}

.za-list-item__description {
  font-size: var(--description-font-size);
  color: var(--description-text-color);
  line-height: var(--description-line-height);
}

.za-list-item--inline .za-list-item__inner {
  align-items: flex-start;
}

.za-list-item--inline .za-list-item__title {
  width: var(--inline-title-width);
  line-height: var(--title-line-height);
}

.za-list-item--link {
  cursor: pointer;
  user-select: none;
  transition-duration: 0.1s;
  transition-property: background, color;
}
.za-list-item--link:active {
  background: var(--active-background);
}