shu-c-view/packages/theme-default/horizontal-menu.less

rollup 打包vue组件库框架

/* 水平横向菜单布局 */
.base-horizontal-menu {
  position: relative;
  height: 40px;
  height: 100%;
  list-style: none;
}

.base-horizontal-menu ul {
  padding: 0;
  margin: 0;
  white-space: nowrap;
  list-style: none;
}

.base-horizontal-menu li {
  display: block;
  float: left;
  padding: 0 20px;
  font-size: 14px;
  line-height: 40px;
  color: #333;
  cursor: pointer;
}

.base-horizontal-menu li.selected {
  color: #fff;
  background: #bfdbfe;
}

.base-horizontal-menu__view-more>a {
  display: inline-block;
  padding: 0 20px;
  font-size: 14px;
  line-height: 40px;
  color: #333;
  text-decoration: none;
}

.base-horizontal-menu__view-more>a:hover {
  color: #333;
  text-decoration: none;
}

.base-horizontal-menu li a:hover {
  color: #fff;
  text-decoration: none;
  background: #bfdbfe;
}

.base-horizontal-menu__view-more {
  position: relative;
  display: none;
}

.base-horizontal-menu__view-more>ul {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1000;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  background: #fff; // #f1941c;
  box-shadow: 2px 2px 4px #777;
}

.base-horizontal-menu__view-more>ul>li {
  display: block;
  float: none;
  width: 150px;
  padding: 0;
  clear: both;
  text-align: center;

  &::after {
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background: #dcdfe6;
  }
}

.base-horizontal-menu li:hover {
  color: #fff;
  text-decoration: none;
  background: #bfdbfe;
}

.base-horizontal-menu__view-more a.active {
  // background: #e5601d;
  // color: #89b1d4;
}