@fesjs/fes-design
Version:
fes-design for PC
39 lines (38 loc) • 997 B
CSS
.fes-divider {
position: relative;
display: flex;
width: 100%;
background-color: var(--f-border-color-split);
}
.fes-divider:not(.is-vertical) {
height: 1px;
margin-top: var(--f-padding-large);
margin-bottom: var(--f-padding-large);
}
.fes-divider:not(.is-vertical) .fes-divider-text {
position: absolute;
padding: 0 var(--f-padding-middle);
color: var(--f-head-color);
font-weight: 500;
font-size: calc(var(--f-font-size-base) + 2px);
background-color: var(--f-white);
transform: translateY(-50%);
}
.fes-divider:not(.is-vertical) .fes-divider-text.is-left {
left: var(--f-padding-large);
}
.fes-divider:not(.is-vertical) .fes-divider-text.is-right {
right: var(--f-padding-large);
}
.fes-divider:not(.is-vertical) .fes-divider-text.is-center {
left: 50%;
transform: translate(-50%, -50%);
}
.fes-divider.is-vertical {
position: relative;
display: inline-block;
width: 1px;
height: 1em;
margin: 0 var(--f-padding-xsmall);
vertical-align: middle;
}