acud
Version:
acg react 组件库
127 lines (126 loc) • 3.31 kB
CSS
/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-divider {
margin: 0;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.acud-divider-vertical {
position: relative;
top: -0.06em;
display: inline-block;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
border-top: 0;
border-left: 1px solid rgba(0, 0, 0, 0.06);
}
.acud-divider-horizontal {
display: flex;
clear: both;
width: 100%;
min-width: 100%;
margin: 24px 0;
}
.acud-divider-horizontal.acud-divider-with-text {
display: flex;
margin: 16px 0;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
font-size: 14px;
white-space: nowrap;
text-align: center;
border-top: 0;
border-top-color: rgba(0, 0, 0, 0.06);
}
.acud-divider-horizontal.acud-divider-with-text::before,
.acud-divider-horizontal.acud-divider-with-text::after {
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid transparent;
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: '';
}
.acud-divider-horizontal.acud-divider-with-text-left::before {
top: 50%;
width: 5%;
}
.acud-divider-horizontal.acud-divider-with-text-left::after {
top: 50%;
width: 95%;
}
.acud-divider-horizontal.acud-divider-with-text-right::before {
top: 50%;
width: 95%;
}
.acud-divider-horizontal.acud-divider-with-text-right::after {
top: 50%;
width: 5%;
}
.acud-divider-inner-text {
display: inline-block;
padding: 0 1em;
}
.acud-divider-dashed {
background: none;
border-color: rgba(0, 0, 0, 0.06);
border-style: dashed;
border-width: 1px 0 0;
}
.acud-divider-horizontal.acud-divider-with-text.acud-divider-dashed::before,
.acud-divider-horizontal.acud-divider-with-text.acud-divider-dashed::after {
border-style: dashed none none;
}
.acud-divider-vertical.acud-divider-dashed {
border-width: 0 0 0 1px;
}
.acud-divider-plain.acud-divider-with-text {
color: #151B26;
font-weight: normal;
font-size: 12px;
}
.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left::before {
width: 0;
}
.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left::after {
width: 100%;
}
.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left .acud-divider-inner-text {
padding-left: 0;
}
.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right::before {
width: 100%;
}
.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right::after {
width: 0;
}
.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right .acud-divider-inner-text {
padding-right: 0;
}
.acud-divider-rtl {
direction: rtl;
}
.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-left::before {
width: 95%;
}
.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-left::after {
width: 5%;
}
.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-right::before {
width: 5%;
}
.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-right::after {
width: 95%;
}