_tabs.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group tabs
////

/// Default margin of the tab bar.
/// @type Number
$tab-margin: 0 !default;

/// Default background color of a tab bar.
/// @type Color
$tab-background: $white !default;

/// active background color of a tab bar.
/// @type Color
$tab-background-active: $light-gray !default;

/// Font size of tab items.
/// @type Number
$tab-item-font-size: rem-calc(12) !default;

/// Default background color on hover for items in a Menu.
$tab-item-background-hover: $white !default;

/// Default padding of a tab item.
/// @type Number
$tab-item-padding: 1.25rem 1.5rem !default;

/// Maximum number of `expand-n` classes to include in the CSS.
/// @type Number
$tab-expand-max: 6 !default;

/// Default background color of tab content.
/// @type Color
$tab-content-background: $white !default;

/// Default border color of tab content.
/// @type Color
$tab-content-border: $light-gray !default;

/// Default text color of tab content.
/// @type Color
$tab-content-color: foreground($tab-background, $primary-color) !default;

/// Default padding for tab content.
/// @type Number | List
$tab-content-padding: 1rem !default;

/// Adds styles for a tab container. Apply this to a `<ul>`.
@mixin tabs-container {
  @include clearfix;
  margin: $tab-margin;
  list-style-type: none;
  background: $tab-background;
  border: 1px solid $tab-content-border;
}

/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
@mixin tabs-container-vertical {
  > li {
    width: auto;
    float: none;
    display: block;
  }
}

/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
@mixin tabs-title {
  float: #{$global-left};

  > a {
    display: block;
    padding: $tab-item-padding;
    line-height: 1;
    font-size: $tab-item-font-size;

    &:hover {
      background: $tab-item-background-hover;
    }

    &:focus,
    &[aria-selected='true'] {
      background: $tab-background-active;
    }
  }
}

/// Adds styles for the wrapper that surrounds a tab group's content panes.
@mixin tabs-content {
  background: $tab-content-background;
  transition: all 0.5s ease;
  border: 1px solid $tab-content-border;
  border-top: 0;
}

/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
@mixin tabs-content-vertical {
  border: 1px solid $tab-content-border;
  border-#{$global-left}: 0;
}

/// Adds styles for an individual tab content panel within the tab content container.
@mixin tabs-panel {
  display: none;
  padding: $tab-content-padding;

  &.is-active {
    display: block;
  }
}

@mixin foundation-tabs {
  .tabs {
    @include tabs-container;
  }

  // Vertical
  .tabs.vertical {
    @include tabs-container-vertical;
  }

  // Simple
  .tabs.simple {
    > li > a {
      padding: 0;

      &:hover {
        background: transparent;
      }
    }
  }

  // Primary color
  .tabs.primary {
    background: $primary-color;

    > li > a {
      color: foreground($primary-color);

      &:hover,
      &:focus {
        background: smart-scale($primary-color);
      }
    }
  }

  .tabs-title {
    @include tabs-title;
  }

  .tabs-content {
    @include tabs-content;
  }

  .tabs-content.vertical {
    @include tabs-content-vertical;
  }

  .tabs-panel {
    @include tabs-panel;
  }
}