zent/css/elevator.css

一套前端设计语言和基于React的实现

.zent-elevator__links-wrapper {
  background-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(var(--theme-rgb-section-bg, var(--theme-rgb-stroke-9, 255, 255, 255)), 0.9);
  display: inline-block;
  padding: 12px 8px;
  max-width: 118px;
  box-sizing: border-box;
}
.zent-elevator__links-wrapper .zent-elevator__links-content {
  position: relative;
}
.zent-elevator__links-wrapper .zent-elevator__links-content::before {
  background-color: #f7f7f7;
  background-color: var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7));
  content: "";
  display: inline-block;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.zent-elevator__links-wrapper .zent-elevator__links-content .zent-elevator__link {
  color: #999;
  color: var(--theme-hint-color, var(--theme-stroke-3, #999));
  position: relative;
  font-size: 12px;
  line-height: 1;
  padding-left: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 100ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zent-elevator__links-wrapper .zent-elevator__links-content .zent-elevator__link:last-child {
  margin-bottom: 0;
}
.zent-elevator__links-wrapper .zent-elevator__links-content .zent-elevator__link:hover {
  color: #155bd4;
  color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-elevator__links-wrapper .zent-elevator__links-content .zent-elevator__link--active {
  color: #155bd4;
  color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-elevator__links-wrapper .zent-elevator__links-content .zent-elevator__link--active::before {
  background-color: #155bd4;
  background-color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
  content: "";
  display: inline-block;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}