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

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

// Mixins


// Variables
@tabs_height: 48px;
@tabs_border_bottom: 3px solid @color_grey;

@tab_margin_left: 8px;
@tab_hover_border_bottom: 3px solid @color_info_200;

@tab_selected_font_color: @color_info;
@tab_selected_border_bottom: 3px solid @color_info;

@tab_link_height: 35px;
@tab_link_font_size: 16px;
@tab_link_font_color: @color_font_700;
@tab_link_padding: 6px 12px 4px;

@tab_mini_font_color: @color_font_800;
@tab_mini_bg_color: @color_grey;
@tab_mini_hover_bg_color: @color_info_200;
@tab_mini_font_selected_color: @color_font;
@tab_mini_selected_bg_color: #fff;

.tabs {
  height: @tabs_height;
  border-bottom: @tabs_border_bottom;
  font-size: 0;
  box-sizing: border-box;

  .tab {
    display: inline-block;

    &:not(:first-child) {
      margin-left: @tab_margin_left;
    }
    &:hover,
    &:active {
      border-bottom: @tab_hover_border_bottom;
    }
    &.selected {
      border-bottom: @tab_selected_border_bottom;
      a {
        color: @tab_selected_font_color;
        cursor: default;
      }
    }
    &.sole {
      border-bottom: @tabs_border_bottom;
      a {
        color: @tab_selected_font_color;
        cursor: default;
      }
    }
    &.disabled {
      border-bottom: @tabs_border_bottom;
      a {
        cursor: not-allowed!important;
      }
    }

    a {
      user-select: none;
      display: inline-block;
      padding: @tab_link_padding;
      height: @tab_link_height;
      line-height: @tab_link_height;
      font-size: @tab_link_font_size;
      color: @tab_link_font_color;
      cursor: pointer;
    }
  }
}

.tabs-mini {
  padding-left: 70px;
  height: 36px;
  background-color: @tab_mini_bg_color;
  border: none;
  font-size: 12px;

  .tab {
    display: inline-block;
    margin-top: 6px;
    height: 30px;
    line-height: 30px;
    .border-top-radius(2px);

    &:hover {
      background-color: @tab_mini_hover_bg_color;
    }

    &.selected {
      background-color: @tab_mini_selected_bg_color;
      a {
        color: @tab_mini_font_selected_color;
        cursor: default;
      }
    }

    &.disabled {
      a {
        cursor: not-allowed!important;
        background-color: @tab_mini_bg_color;
        cursor: default;
      }
    }

    a {
      user-select: none;
      display: block;
      padding: 0 16px;
      color: @tab_mini_font_color;
      cursor: pointer;
    }
  }
}