roadui/widget/navbar/src/navbar.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Navbar Base

@navbar-height: 49px;

.am-navbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: @navbar-height;
  line-height: @navbar-height;
  z-index: @z-index-navbar;

  ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .am-navbar-nav {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    overflow: hidden;
    // display: flex;
    display: table;

    li {
      // flex: 1;
      display: table-cell;
      width: 1%;
      float: none;
    }
  }

  .hook-am-navbar;
}

.am-navbar-nav {
  position: relative;
  z-index: @z-index-navbar + 5;

  a {
    display: inline-block;
    width: 100%;
    height: @navbar-height;
    line-height: 20px;

    img {
      display: block;
      vertical-align: middle;
      height: 24px;
      width: 24px;
      margin: 4px auto 0
    }

    [class*="@{ns}icon"] {
      width: 24px;
      height: 24px;
      margin: 4px auto 0;
      display: block;
      line-height: 24px;

      &:before {
        font-size: 22px;
        vertical-align: middle;
      }
    }

    .am-navbar-label {
      padding-top: 2px;
      line-height: 1;
      font-size: 12px;
      .text-overflow(block);
    }
  }

  .hook-am-navbar-nav;
}

.am-navbar-more {
  [class*="@{ns}icon-"] {
    transition: 0.15s;
  }

  &.am-active {
    [class*="@{ns}icon-"] {
      transform: rotateX(-180deg);
    }
  }
}

// more actions
.am-navbar-actions {
  position: absolute;
  bottom: 49px;
  right: 0;
  left: 0;
  z-index: @z-index-navbar - 1;
  opacity: 0;
  transition: .3s;
  transform: translate(0, 100%);

  &.am-active {
    opacity: 1;
    transform: translate(0, 0);
  }

  li {
    line-height: 42px;
    position: relative;

    a {
      display: block;
      width: 100%;
      height: 40px;
      box-shadow: inset 0 1px rgba(220, 220, 220, 0.25);
      padding-left: 20px;
      padding-right: 36px;

      :after {
        font-family: "FontAwesome", sans-serif;
        content: @fa-var-angle-right;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 20px;
      }

      img {
        vertical-align: middle;
        height: 20px;
        width: 20px;
        display: inline;
      }
    }
  }

  .hook-am-navbar-actions;
}

#am-navbar-qrcode {
  width: 220px;
  height: 220px;
  margin-left: -110px;

  .am-modal-bd {
    padding: 10px;
  }

  canvas {
    display: block;
    width: 200px;
    height: 200px;
  }
}

// 给body 增加的className
.am-with-fixed-navbar {
  padding-bottom: @navbar-height + 5;
}

.hook-am-navbar() {}
.hook-am-navbar-nav() {}
.hook-am-navbar-actions() {}

// TODO: 1. 使用 Flexbox
//       2. 单图标的情形