foundation/stylus/foundation/components/section.styl

You may also want to checkout:

//
// Section Variables
//
$include-html-section-classes ?= $include-html-classes;

// We use these to set padding and hover factor
$section-title-padding ?= emCalc(15px);
$section-content-padding ?= emCalc(15px);
$section-function-factor ?= 10%;

// These style the titles
$section-title-color ?= #333;
$section-title-bg ?= #efefef;
$section-title-bg-active ?= darken($section-title-bg, $section-function-factor);
$section-title-bg-active-tabs ?= #fff;
$section-title-bg-hover ?= darken($section-title-bg, ($section-function-factor / 2));

// Want to control border size, here ya go!
$section-border-size ?= 1px;
$section-border-style ?= solid;
$section-border-color ?= #ccc;

// Font controls
$section-font-size ?= emCalc(14px);

// Control the color of the background and some size options
$section-content-bg ?= #fff;
$section-vertical-nav-min-width ?= emCalc(200px);
$section-vertical-tabs-title-width ?= emCalc(200px);
$section-bottom-margin ?= emCalc(20px);

$title-selector ?= ".title";
$content-selector ?= ".content";


//
// Section Mixins
//

// We use this mixin to create the basic container styles for sections when they act like accordions
section-container($base-style=true, $section-type=accordion) {

  // We can set this to false to not include these styles to avoid repeated CSS on classes.
  if $base-style {
    width: 100%;
    display: block;
    margin-bottom: $section-bottom-margin;
  }

  // Accordion container border styles
  if $section-type == accordion {
    border: $section-border-size $section-border-style $section-border-color;
    border-top: none;
  } else if $section-type == tabs {
  // Tabs container border styles
    border: 0;
    position: relative;
  } else if $section-type == vertical-tabs {
  // Vertical Tabs container border styles
    border: $section-border-size $section-border-style $section-border-color;
    position: relative;
  } else if $section-type == vertical-nav {
  // Vertical Nav container border styles
    border: 0;
    position: relative;
  } else if $section-type == horizontal-nav {
  // Horizontal Nav container border styles
    position: relative;
    background: $section-title-bg;
    border: $section-border-size $section-border-style $section-border-color;
  }
}

// We use this mixin to create the styles for sections as accordions.
section($section-type = accordion, $title-selector = ".title", $content-selector = ".content", $title-padding = $section-title-padding, $title-color = $section-title-color, $title-font-size = $section-font-size, $title-bg = $section-title-bg, $title-bg-hover = $section-title-bg-hover, $title-bg-active = $section-title-bg-active, $title-color-active = $section-title-color, $content-bg = $section-content-bg, $content-padding = $section-content-padding, $border-size = $section-border-size, $border-style = $section-border-style, $border-color = $section-border-color) {

  // Default Styles
  > {$title-selector} {
    background-color: $title-bg;
    cursor: $cursor-pointer-value;
    margin-bottom: 0;

    a {
      padding: $title-padding;
      display: inline-block;
      color: $title-color;
      font-size: $title-font-size;
      white-space: nowrap;
    }
    &:hover { background-color: $title-bg-hover; }
  }

  {$content-selector} {
    display: none;
    padding: $content-padding;
    background-color: $content-bg;

    &>*:last-child { margin-bottom: 0; }
    &>*:first-child { padding-top: 0; }
    &>*:last-child { padding-bottom: 0; }
  }

  &.active {
    & > {$content-selector} { display: block; }
    & > {$title-selector} { background: $title-bg-active;
      a { color: $title-color-active; }
    }
  }

  // Style for when Accordion
  if $section-type == accordion {
    // border-top: $section-border-size $section-border-style $section-border-color;
    position: relative;

    > {$title-selector} {
      top: 0;
      width: 100%;
      margin: 0;
      border-top: $section-border-style $section-border-size $section-border-color;

      a { width: 100%; }
    }

  } else if $section-type == tabs {
  // Styles for when tabs
    border: 0;
    position: static;

    > {$title-selector} {
      width: auto;
      border: $section-border-style $section-border-size $section-border-color;
      border-{$opposite-direction}: 0;
      border-bottom: 0;
      position: absolute;
      top: 0;
      z-index: 1;

      a { width: 100%; }
    }
    &:last-child {$title-selector} {
      border-{$opposite-direction}: $section-border-style $section-border-size $section-border-color;
    }

    {$content-selector} {
      border: $section-border-style $section-border-size $section-border-color;
      position: absolute;
      z-index: 10;
      display: none;
      top: -1px;
    }

    &.active {
      & > {$title-selector} {
        z-index: 11;
        border-bottom: 0;
        background-color: $title-bg-active;
      }
      & > {$content-selector} { position: relative; }
    }

  } else if $section-type == vertical-tabs {
  // Styles for when Vertical Tabs
    padding-top: 0 !important;
    border: 0;
    position: static;

    > {$title-selector} {
      position: absolute;
      border-top: $section-border-style $section-border-size $section-border-color;
      width: $section-vertical-tabs-title-width;
    }
    &:first-child {$title-selector} { border-top: 0; }

    {$content-selector} {
      // Display all content blocks to account for the scrollbar
      // in the outerWidth measurements. JavaScript will toggle the active tabs.
      display: block;
      position: relative;
      left: $section-vertical-tabs-title-width;
      border-left: $section-border-style $section-border-size $section-border-color;
      z-index: 10;
    }

    &.active {
      & > {$title-selector} {
        background-color: $title-bg-active;
        width: $section-vertical-tabs-title-width + emCalc(1px); // Cover the content's left border
        border-right: solid 0 transparent;
        z-index: 11; // Put active title on top of the content
      }
      &:last-child {$title-selector} { border-bottom: 0; }
    }

  } else if $section-type == vertical-nav {
  // Styles for when Vertical Nav
    padding-top: 0 !important;
    position: relative;

    > {$title-selector} {
      border-top: none;
      border: $section-border-style $section-border-size $section-border-color;

      a {
        display: block;
        width: 100%;
      }
    }
    {$content-selector} { display: none; }
    &:first-child {$title-selector} { border-bottom: none; }

    &.active {
      & > {$content-selector} {
        display: block;
        position: absolute;
        {$default-float}: 100%;
        top: 0px;
        z-index: 999;
        min-width: $section-vertical-nav-min-width;
        border: $section-border-style $section-border-size $section-border-color;
      }
    }

  } else if $section-type == horizontal-nav {
  // Styles for when Horizontal Nav
    padding-top: 0;
    border: 0;
    position: static;

    > {$title-selector} {
      width: auto;
      border: $section-border-style $section-border-size $section-border-color;
      border-{$default-float}: 0;
      top: -1px;
      position: absolute;
      z-index: 1;

      a { width: 100%; }
    }

    {$content-selector} { display: none; }

    &.active {
      & > {$content-selector} {
        display: block;
        position: absolute;
        z-index: 999;
        {$default-float}: 0;
        top: -2px;
        min-width: $section-vertical-nav-min-width;
        border: $section-border-style $section-border-size $section-border-color;
      }
    }
  }
}


if $include-html-section-classes != false {

  /* Sections */
  .section-container, .section-container.auto {
    section-container(accordion);

    &>section,
    &>.section {
      section(accordion);
    }
  }

  .section-container.tabs {
    section-container(false, tabs);

    &>section,
    &>.section {
    	section(tabs, $title-bg-active = $section-title-bg-active-tabs); 
    }
  }

  @media $small {

    .section-container.auto {
      section-container(false, tabs);

      &>section,
      &>.section {
      	section(tabs, $title-bg-active = $section-title-bg-active-tabs); 
      }
    }
    .section-container.accordion .section {
      padding-top: 0 !important;
    }

    .section-container.vertical-tabs {
      section-container(false, vertical-tabs);

      section,
      .section {
        section(vertical-tabs);
      }
    }

    .section-container.vertical-nav {
      section-container(false, vertical-nav);

      &>section,
      &>.section {
      	section(vertical-nav); 
      }
    }

    .section-container.horizontal-nav {
      section-container(false, horizontal-nav);

      &>section,
      &>.section {
      	section(horizontal-nav); 
      }
    }
  }

  // Change all variations to expanded accordions when no JS is detected.
  .no-js .section-container {
    &.auto,
    &.accordion,
    &.tabs,
    &.vertical-tabs,
    &.vertical-nav,
    &.horizontal-nav {
      section-container(accordion);

      &>section,
      &>.section {
        section(accordion);
        {$title-selector} {
          position: static;
          width: 100%;
          border-left: 0;
          border-right: 0;
        }

        {$content-selector} {
          position: static;
          display: block;
          width: 100%;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
        }
      }

    }
  }

}