bfend/lib/components/layout/aside.component.less

Admin template base on ng-zorro-antd

@import "../../../styles/theme";

.bf-aside {
  display: block;
  border-right: 1px solid @layout-split-border-color;

  .ant-layout-sider-children {
    overflow-x: hidden;
    overflow-y: auto;
    height: ~"calc(100vh - @{layout-header-height})";
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.bf-aside_collapsed {
  margin-left: -200px;
  opacity: 0;
}

.bf-aside-group {
  margin-bottom: 20px;
}

.bf-aside-group__title {
  font-size: 14px;
  font-weight: normal;
  padding: 20px 0 10px 10px;
  color: lighten(@layout-aside-foreground, 20%);
  cursor: default;
  user-select: none;
}

.bf-aside-menu, .bf-aside-menu__item {
  margin: 0;
  padding: 0;
  list-style: none;
  color: @layout-aside-foreground;
  user-select: none;
}

.bf-aside-menu__item {
  position: relative;

  // 子菜单
  &_has-children {
    > .bf-aside-menu {
      display: none;
      .bf-aside-menu__title {
        padding-left: 38px;
      }
    }
  }

  // 展开
  &_explosed {
    > .bf-aside-menu {
      display: block;
    }
  }
}

.bf-aside-menu__arrow {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 9px;
  height: 9px;
  transform: rotate(0);
  transition: transform, color .3s cubic-bezier(.645, .045, .355, 1), ease-in-out;

  > svg {
    width: 9px;
    height: 9px;
  }
}

.bf-aside-menu__arrow_up {
  transform: rotate(180deg);
}

.bf-aside-highlight() {
  &:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: @primary-color;
  }
}

.bf-aside-menu__title {
  line-height: 20px;
  color: @layout-aside-foreground;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  position: relative;

  > a {
    color: @layout-aside-foreground;
    &:focus {
      text-decoration: none;
    }
  }

  &:hover {
    color: @layout-aside-highlight;
    background: @layout-aside-highlight-background;

    > a {
      color: @layout-aside-highlight;
    }

    &:after {
      color: @layout-aside-highlight;
    }
  }
}

.bf-aside-menu__text {
  position: relative;
  z-index: 1;
  display: block;
  padding: 8px 16px;
}

.bf-aside-menu__icon {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.bf-aside-menu__icon + .bf-aside-menu__text {
  padding-left: 40px;
}

.bf-aside-menu__title .ant-badge {
  position: absolute;
  right: 12px;
  top: 9px;
  transform: scale(0.7)
}

.bf-aside-menu__item_active {
  .bf-aside-highlight();
  background: darken(@layout-aside-background, 2%);

  > .bf-aside-menu__title,
  > .bf-aside-menu__title > .bf-aside-menu__text {
    color: @layout-aside-highlight;
    background: @layout-aside-highlight-background;
  }
}

.bf-aside-menu__item_hidden {
  display: none;
}