mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
64 lines (63 loc) • 2 kB
CSS
.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-title-help {
margin-left: 4px;
color: var(--adm-color-weak);
cursor: pointer;
}
.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-label-help {
margin-left: 3px;
color: var(--adm-color-weak);
cursor: pointer;
}
.momo-descriptions-item-content {
flex: 1;
align-self: center;
color: var(--content-color);
text-align: var(--content-text-align);
word-wrap: break-word;
word-break: break-all;
}
.momo-descriptions-item-content > [class*='momo-field-'] {
vertical-align: top;
}
.momo-descriptions-colon .momo-descriptions-item-label::after {
position: relative;
top: -0.5px;
margin: 0 8px 0 2px;
content: ':';
}