@dabapps/roe/src/less/tabs.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.tabs {
  .clearfix();
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: @tab-border;
  position: relative;
  z-index: 1;
}

.tabs + .content-box {
  position: relative;
  z-index: 0;
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tab {
  padding: 0;
  display: inline-block;
  margin: 0;
  margin-bottom: -1px;
  border: @tab-border;
  background-color: @tab-background;
  border-top-left-radius: @border-radius-base;
  border-top-right-radius: @border-radius-base;

  & > a {
    display: block;
    text-decoration: none;
    padding: @padding-base;
  }

  &:not(.active) a:hover {
    text-decoration: underline;
  }

  & + .tab {
    margin-left: -1px;
  }

  &.active {
    background-color: @tab-active-background;
    border-bottom-color: @tab-active-background;
  }
}