w-ui/packages/menubar/src/menubar.less

A Vue.js 2.0 UI Toolkit for mobile

// -----------------------------------------------------------------------------
.top-line(@color, @zindex: 0) {
  content: '';
  position: absolute;
  z-index: @zindex;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid @color;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@menubar-bg: rgba(255, 255, 255, .96);
@menubar-border-color: #C9C9C9;
@menubar-icon-fontsize: .54rem;

.wui {
  &-menubar {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: .104rem 0 .07rem;
    background-color: @menubar-bg;
    &:after {
      .top-line(@menubar-border-color);
    }

    &-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
    }

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &-active {
      color: inherit;
      .wui-tabbar-icon {
        color: inherit;
      }
    }

    &-badge {
      position: absolute;
      top: -.02rem;
      left: 100%;
      z-index: 999;
      margin-left: -.15rem;
    }

    &-dot {
      display: block;
      width: 10px;
      height: 10px;
      background-color: #EF4F4F;
      border-radius: 50%;
      position: absolute;
      top: .02rem;
      left: 100%;
      z-index: 2;
      margin-left: -.11rem;
    }

    &-icon {
      height: @menubar-icon-fontsize * 1.08;
      display: flex;
      align-items: center;
      position: relative;
      img {
        height: 70%;
      }
    }

    &-txt {
      display: inline-block;
      font-size: inherit;
    }
  }
}