<commit_before>// ┌──────┐
// │ Tabs │
// └──────┘
//  ↳ http://esri.github.io/calcite-web/patterns/#tabs
//  ↳ patterns → _tabs.md

@mixin tab-nav(){
  @include clearfix();
}

@mixin tab-title() {
  @include box-sizing(border-box);
  @include font-size(-2);
  @include transition(background, $transition);
  padding: $baseline/4 $baseline/2;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: $off-white;
  border: 1px solid $lighter-gray;
  border-left: none;
  cursor: pointer;
  &:first-child {
    border-left: 1px solid $lighter-gray;
  }
  &:focus {
    outline: none;
  }
  &:hover, &:focus {
    background-color: mix($white, $off-white);
    text-decoration: none;
    @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
    background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
  }
  &.is-active {
    border-bottom: 1px solid $white;
    background-color: $white;
    &:hover {
      background-color: $white;
    }
  }
}

@mixin tab-contents() {
  @include box-sizing(border-box);
  border: 1px solid $lighter-gray;
  margin-top: -1px;
}

@mixin tab-section() {
  @include box-sizing(border-box);
  background-color: $white;
  display: none;
  padding: $baseline/2;
  &.is-active {
    display: block;
  }
  pre {
    margin: 0;
  }
}

@mixin tabs-gray() {
  .tab-title    {
    background-color: $white;
    &.is-active {
      background-color: $off-white;
      border-bottom: 1px solid $off-white;
    }
  }
  .tab-section  {
    background-color: $off-white;
  }
  pre code {
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

@mixin tabs-transparent() {
  .tab-title    {
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid $lighter-gray;
    &:hover {
      border-bottom: 1px solid $lighter-gray;
    }
    &.is-active {
      @include transition(backround, $transition);
      background-color: transparent;
      border: 1px solid $lighter-gray;
      border-bottom: 1px solid $white;
    }
  }
  .tab-contents {
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  .tab-section  {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin tabs-translucent() {
  .tab-title    {
    background-color: rgba(255,255,255,0.7);
    border: 1px solid transparent;
    border-bottom: none;
    color: $off-black;
    margin-right: 2px;
    margin-bottom: 1px;
    &:hover {
      background-color: rgba(255,255,255,0.8);
      background-image: none;
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
      background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
    }
    &.is-active {
      background-color: rgba(255,255,255,0.8);
      background-image: none;
      border-bottom: none;
      padding-bottom: 0.5rem;
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
      background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
    }
  }
  .tab-contents {
    border: none;
  }
  .tab-section  {
    background-color: rgba(255,255,255,0.8);
  }
}

@mixin tabs-dark() {
  .tab-title    {
    background-color: rgba(0,0,0,0.7);
    color: $white;
    &:hover {
      background-color: rgba(0,0,0,0.8);
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $white 96%, $white 100%), webkit moz o);<commit_msg>fix tab section wiggle on transluscent tabs<commit_after>// ┌──────┐
// │ Tabs │
// └──────┘
//  ↳ http://esri.github.io/calcite-web/patterns/#tabs
//  ↳ patterns → _tabs.md

@mixin tab-nav(){
  @include clearfix();
}

@mixin tab-title() {
  @include box-sizing(border-box);
  @include font-size(-2);
  @include transition(background, $transition);
  padding: $baseline/4 $baseline/2;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: $off-white;
  border: 1px solid $lighter-gray;
  border-left: none;
  cursor: pointer;
  &:first-child {
    border-left: 1px solid $lighter-gray;
  }
  &:focus {
    outline: none;
  }
  &:hover, &:focus {
    background-color: mix($white, $off-white);
    text-decoration: none;
    @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
    background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
  }
  &.is-active {
    border-bottom: 1px solid $white;
    background-color: $white;
    &:hover {
      background-color: $white;
    }
  }
}

@mixin tab-contents() {
  @include box-sizing(border-box);
  border: 1px solid $lighter-gray;
  margin-top: -1px;
}

@mixin tab-section() {
  @include box-sizing(border-box);
  background-color: $white;
  display: none;
  padding: $baseline/2;
  &.is-active {
    display: block;
  }
  pre {
    margin: 0;
  }
}

@mixin tabs-gray() {
  .tab-title    {
    background-color: $white;
    &.is-active {
      background-color: $off-white;
      border-bottom: 1px solid $off-white;
    }
  }
  .tab-section  {
    background-color: $off-white;
  }
  pre code {
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

@mixin tabs-transparent() {
  .tab-title    {
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid $lighter-gray;
    &:hover {
      border-bottom: 1px solid $lighter-gray;
    }
    &.is-active {
      @include transition(backround, $transition);
      background-color: transparent;
      border: 1px solid $lighter-gray;
      border-bottom: 1px solid $white;
    }
  }
  .tab-contents {
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  .tab-section  {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin tabs-translucent() {
  .tab-title    {
    background-color: $transparent-white;
    border: none;
    color: $off-black;
    margin-right: 2px;
    margin-bottom: 3px;
    &:hover {
      background-color: $opaque-white;
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
      background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
    }
    &.is-active {
      background-color: $opaque-white;
      padding-bottom: 0.5rem;
      margin-bottom: 0;
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%), webkit moz o);
      background-image:linear-gradient(to top, transparent 94%, $blue 96%, $blue 100%);
    }
  }
  .tab-contents {
    border: none;
  }
  .tab-section  {
    background-color: $opaque-white;
  }
}

@mixin tabs-dark() {
  .tab-title    {
    background-color: rgba(0,0,0,0.7);
    color: $white;
    &:hover {
      background-color: rgba(0,0,0,0.8);
      @include prefixer(background-image,linear-gradient(to top, transparent 94%, $white 96%, $white 100%), webkit moz o);
{'fraction_non_alphanumeric': 0.15902097902097903, 'fraction_numerical': 0.02937062937062937, 'mean_word_length': 2.916210295728368, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1676425', 'n_tokens_mistral': 2755, 'n_tokens_neox': 2536, 'n_words': 567}