@ustack/uskin/css/components/navbar.less

A graceful framework which provides developers another chance to build an amazing site.

/**
 *  TODO: use flex to avoid minimal dimension style bug (overlapping)
 *
 */
@nav_bg_color: @color_grey_400;
@nav_item_border_color: @color_info;
@nav_item_color: @color_font_800;
@nav_item_selected_color: #fff;

.navbar {
  height: 50px;
  background-color: @nav_bg_color;

  .nav-left {
    float: left;
    margin-left: 20px;
  }

  .nav-right {
    float: right;
    margin-right: 20px;
  }

  .nav-item {
    // border-right: 1px solid @nav_item_border_color;
    display: block;
    float: left;
    line-height: 50px;
    color: @nav_item_color;

    a {
      display: block;
      padding: 0 20px;
    }

    &:first-child {
      // border-left: 1px solid @nav_item_border_color;
    }

    &.selected {
      background-color: @nav_item_border_color;
      color:@nav_item_selected_color;
      cursor: default;

      a {
        color: @nav_item_selected_color;
        cursor: default;
      }
    }
  }
}