Drupal Admin Tabs Styling

tabs.scss

//
// _config.scss
//
$tabs-config: (
  wrap: (
    background: #fafafa,
    border: #efefef
  ),
  link: (
    color: #251923,
    background: #efefef,
    hover-color: #ffffff,
    hover-background: #251923
  ),
  alt-colors: #b6c4c5 #575642 #4c4650 #251923
);

//
// _functions.scss
//
@function tabs($key, $sub-key: null) {
  @if map-has-key($tabs-config, $key) {
    $val: map-get($tabs-config, $key);

    @if $sub-key and map-has-key($val, $sub-key) {
      $val: map-get($val, $sub-key);
    }

    @return $val;
  }

  @warn "Unknown '#{$key}' in '$tabs-config'.";
  @return null;
}

//
// _tabs.scss
//
ul.primary {
  font-size: 16px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: tabs(wrap, background);
  border-bottom: 1px solid tabs(wrap, border);

  li {
    list-style: none;
    float: left;
    margin-bottom: 0;

    a {
      padding: 8px 18px;
      background: tabs(link, background);
      border-top: 5px solid #ffd204;
      display: block;
      color: tabs(link, color);
      font-weight: normal;
      text-decoration: none;

      &:hover,
      &:active {
        background: tabs(link, hover-background);
        color: tabs(link, hover-color);
      }
    }
  }

  $alt-colors: tabs(alt-colors);

  @for $i from 1 through length($alt-colors) {

    li:nth-child(#{length($alt-colors)}n + #{$i}) {

      a {
        border-top: 5px solid nth($alt-colors, $i);

        &:hover,
        &:active {
          background: nth($alt-colors, $i);
          color: #ffffff;
        }
      }
    }
  }
}