mobile-more/es/components/BizDescriptions/index.css

基于 antd-mobile v5 扩展移动端 UI 组件

.momo-descriptions {
  --font-size: var(--momo-descriptions-font-size, 14px);
  --color: var(--momo-descriptions-color, var(--adm-color-text));
  --title-color: var(--momo-descriptions-title-color, var(--color));
  --padding-inner: var(--momo-descriptions-padding-inner, 6px);
  --justify-content: var(--momo-descriptions-justify-content, flex-start);
  --flex-direction: var(--momo-descriptions-flex-direction, row);
  --label-color: var(--momo-descriptions-label-color, var(--color));
  --label-width: var(--momo-descriptions-label-width, auto);
  --label-text-align: var(--momo-descriptions-label-text-align, left);
  --content-color: var(--momo-descriptions-content-color, var(--color));
  --content-text-align: var(--momo-descriptions-content-text-align, left);
}
.momo-descriptions-title {
  margin-bottom: var(--padding-inner);
  padding: var(--padding-inner) 0;
  color: var(--title-color);
  font-weight: 600;
  font-size: calc(var(--font-size) + 2px);
}
.momo-descriptions-item {
  display: flex;
  flex-direction: var(--flex-direction);
  justify-content: var(--justify-content);
  width: 100%;
  padding: var(--padding-inner) 0;
  font-size: var(--font-size);
  line-height: 1.5;
}
.momo-descriptions-item-label {
  flex-shrink: 0;
  width: var(--label-width);
  color: var(--label-color);
  white-space: nowrap;
  text-align: var(--label-text-align);
}
.momo-descriptions-item-content {
  color: var(--content-color);
  text-align: var(--content-text-align);
  word-wrap: break-word;
  word-break: break-all;
}
.momo-descriptions-colon .momo-descriptions-item-label::after {
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
  content: ':';
}