acud
Version:
acg react 组件库
147 lines (146 loc) • 3.51 kB
CSS
/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-anchor {
margin: 0;
padding: 0;
position: relative;
padding-left: 2px;
}
.acud-anchor-wrapper {
margin-left: -4px;
padding-left: 4px;
overflow: auto;
background-color: #FFFFFF;
}
.acud-anchor-ink {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.acud-anchor-ink::before {
position: relative;
display: block;
width: 2px;
height: 100%;
margin: 0 auto;
background-color: #E8E9EB;
content: ' ';
}
.acud-anchor-ink-ball {
position: absolute;
left: 50%;
display: none;
width: 2px;
height: 32px;
background-color: #2468F2;
transform: translate(-50%, -50%);
transition: top 0.3s ease-in-out;
}
.acud-anchor-ink-ball.visible {
display: inline-block;
}
.acud-anchor-ink.hover .acud-anchor-ink-ball {
background-color: #528EFF;
}
.acud-anchor-ink.click .acud-anchor-ink-ball {
background-color: #144BCC;
}
.acud-anchor.fixed .acud-anchor-ink .acud-anchor-ink-ball {
display: none;
}
.acud-anchor-link-title {
height: 32px;
line-height: 32px;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", Roboto, 'Arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif;
padding-left: 10px;
position: relative;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all 0.3s;
color: #151B26;
}
.acud-anchor-link-title:hover {
color: #2468F2;
}
.acud-anchor-link-title:focus,
.acud-anchor-link-title:active {
color: #144BCC;
}
.acud-anchor-link-title[disabled],
.acud-anchor-link-title[aria-disabled="true"],
.acud-anchor-link-title[disabled]:hover,
.acud-anchor-link-title[aria-disabled="true"]:hover,
.acud-anchor-link-title[disabled]:focus,
.acud-anchor-link-title[aria-disabled="true"]:focus,
.acud-anchor-link-title[disabled]:active,
.acud-anchor-link-title[aria-disabled="true"]:active {
color: #B8BABF;
}
.acud-anchor-link-title:only-child {
margin-bottom: 0;
}
.acud-anchor-link-title-disabled,
.acud-anchor-link-title-disabled:hover,
.acud-anchor-link-title-disabled:focus,
.acud-anchor-link-title-disabled:active,
.acud-anchor-link-title-disabled:visited {
color: #B8BABF;
cursor: not-allowed;
}
.acud-anchor-link-title-active {
color: #2468F2;
}
.acud-anchor-link-title-active:hover {
color: #528EFF;
}
.acud-anchor-link-title-active:focus,
.acud-anchor-link-title-active:active {
color: #144BCC;
}
.acud-anchor-link-title-active[disabled],
.acud-anchor-link-title-active[aria-disabled="true"],
.acud-anchor-link-title-active[disabled]:hover,
.acud-anchor-link-title-active[aria-disabled="true"]:hover,
.acud-anchor-link-title-active[disabled]:focus,
.acud-anchor-link-title-active[aria-disabled="true"]:focus,
.acud-anchor-link-title-active[disabled]:active,
.acud-anchor-link-title-active[aria-disabled="true"]:active {
color: #B8BABF;
}
.acud-anchor-link .acud-anchor-link {
padding-left: 12px;
}
.acud-anchor-rtl {
direction: rtl;
}
.acud-anchor-rtl.acud-anchor-wrapper {
margin-right: -4px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
.acud-anchor-rtl .acud-anchor-ink {
right: 0;
left: auto;
}
.acud-anchor-rtl .acud-anchor-ink-ball {
right: 50%;
left: 0;
transform: translateX(50%);
}
.acud-anchor-rtl .acud-anchor-link {
padding: 20px 20px 20px 0;
}