tu-view-plus
Version:
74 lines (68 loc) • 1.4 kB
CSS
.tu-divider {
background-color: var(--tu-color-line, rgba(128, 128, 128, 0.18));
position: relative;
}
.tu-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 16px 0;
}
.tu-divider--vertical {
display: inline-block;
min-width: 1px;
max-width: 1px;
height: 1em;
vertical-align: middle;
margin: 0 12px;
}
.tu-divider.is-with-text {
display: table;
background-color: transparent;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
.tu-divider.is-with-text::before {
content: "";
position: relative;
top: 50%;
display: table-cell;
width: 50%;
border-top: 1px solid var(--tu-color-line, rgba(128, 128, 128, 0.18));
transform: translateY(50%);
}
.tu-divider.is-with-text::after {
content: "";
position: relative;
top: 50%;
display: table-cell;
width: 50%;
border-top: 1px solid var(--tu-color-line, rgba(128, 128, 128, 0.18));
transform: translateY(50%);
}
.tu-divider__text {
display: inline-block;
padding: 0 12px;
color: var(--tu-color-text, #71757f);
font-size: var(--tu-font-size, 14px);
line-height: 1;
}
.tu-divider.is-left::before {
width: 5%;
}
.tu-divider.is-left::after {
width: 95%;
}
.tu-divider.is-center::before {
width: 50%;
}
.tu-divider.is-center::after {
width: 50%;
}
.tu-divider.is-right::before {
width: 95%;
}
.tu-divider.is-right::after {
width: 5%;
}