zurb-foundation 4.1.5 → 4.1.6

data/scss/foundation/components/_keystrokes.scss

@@ -1,6 +1,7 @@
 //
 // Keystroke Variables
 //
+$include-html-type-classes: $include-html-classes !default;
 
 // We use these to control text styles.
 $keystroke-font:            "Consolas", "Menlo", "Courier", monospace !default;
@@ -44,7 +45,7 @@ $keystroke-radius:          $global-radius !default;
 }
 
 
-@if $include-html-media-classes != false {
+@if $include-html-type-classes != false {
 
   /* Keystroke Characters */
   .keystroke,

data/scss/foundation/components/_labels.scss

@@ -1,6 +1,7 @@
 //
 // Label Variables
 //
+$include-html-label-classes: $include-html-classes !default;
 
 // We use these to style the labels
 $label-padding:     emCalc(3px) emCalc(10px) emCalc(4px) !default;

data/scss/foundation/components/_magellan.scss

@@ -1,6 +1,8 @@
 //
 // Magellan Variables
 //
+$include-html-magellan-classes: $include-html-classes !default;
+
 $magellan-bg: #fff !default;
 $magellan-padding: 10px !default;
 

data/scss/foundation/components/_orbit.scss

@@ -1,4 +1,5 @@
 // Orbit Settings
+$include-html-orbit-classes: $include-html-classes !default;
 
 // We use these to control the caption styles
 $orbit-container-bg: #f5f5f5 !default;
@@ -27,183 +28,186 @@ $orbit-slide-number-padding: emCalc(5px) !default;
 // Margin for when Orbit is stacked on small screens
 $stack-on-small-margin-bottom: emCalc(20px) !default;
 
-
-.orbit-container {
-  overflow: hidden;
-  width: 100%;
-  position: relative;
-  background: $orbit-container-bg;
-
-  .orbit-slides-container {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+@if $include-html-orbit-classes != false {
+  
+  .orbit-container {
+    overflow: hidden;
+    width: 100%;
     position: relative;
-
-    img { display: block; }
-
-    &>* {
+    background: $orbit-container-bg;
+  
+    .orbit-slides-container {
+      list-style: none;
+      margin: 0;
+      padding: 0;
       position: relative;
-      float: $default-float;
-      height: 100%;
-
-      .orbit-caption {
-        position: absolute;
-        bottom: 0;
-        background-color: $orbit-caption-bg-old;
-        background-color: $orbit-caption-bg;
-        color: #fff;
-        width: 100%;
-        padding: 10px 14px;
-        font-size: emCalc(14px);
-
-        * { color: $orbit-caption-font-color; }
+  
+      img { display: block; }
+  
+      &>* {
+        position: relative;
+        float: $default-float;
+        height: 100%;
+  
+        .orbit-caption {
+          position: absolute;
+          bottom: 0;
+          background-color: $orbit-caption-bg-old;
+          background-color: $orbit-caption-bg;
+          color: #fff;
+          width: 100%;
+          padding: 10px 14px;
+          font-size: emCalc(14px);
+  
+          * { color: $orbit-caption-font-color; }
+        }
       }
     }
-  }
-
-  .orbit-slide-number {
-    position: absolute;
-    top: 10px;
-    #{$default-float}: 10px;
-    font-size: 12px;
-    span { font-weight: 700; padding: $orbit-slide-number-padding;}
-    color: $orbit-slide-number-font-color;
-    background: $orbit-slide-number-bg;
-  }
-
-  .orbit-timer {
-    position: absolute;
-    top: 10px;
-    #{$opposite-direction}: 10px;
-    height: 6px;
-    width: 100px;
-    .orbit-progress {
-      height: 100%;
-      background-color: $orbit-timer-bg-old;
-      background-color: $orbit-timer-bg;
-      display: block;
-      width: 0%;
-    }
-
-    & > span {
-      display: none;
+  
+    .orbit-slide-number {
       position: absolute;
       top: 10px;
-      #{$opposite-direction}: 0px;
-      width: 11px;
-      height: 14px;
-      border: solid 4px #000;
-      border-top: none;
-      border-bottom: none;
+      #{$default-float}: 10px;
+      font-size: 12px;
+      span { font-weight: 700; padding: $orbit-slide-number-padding;}
+      color: $orbit-slide-number-font-color;
+      background: $orbit-slide-number-bg;
     }
-
-    &.paused {
+  
+    .orbit-timer {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 10px;
+      height: 6px;
+      width: 100px;
+      .orbit-progress {
+        height: 100%;
+        background-color: $orbit-timer-bg-old;
+        background-color: $orbit-timer-bg;
+        display: block;
+        width: 0%;
+      }
+  
       & > span {
-        #{$opposite-direction}: -6px;
-        top: 9px;
+        display: none;
+        position: absolute;
+        top: 10px;
+        #{$opposite-direction}: 0px;
         width: 11px;
         height: 14px;
-        border: inset 8px;
-        border-right-style: solid;
-        border-color: transparent transparent transparent #000;
+        border: solid 4px #000;
+        border-top: none;
+        border-bottom: none;
+      }
+  
+      &.paused {
+        & > span {
+          #{$opposite-direction}: -6px;
+          top: 9px;
+          width: 11px;
+          height: 14px;
+          border: inset 8px;
+          border-right-style: solid;
+          border-color: transparent transparent transparent #000;
+        }
       }
     }
-  }
-
-  &:hover .orbit-timer > span { display: block; }
-
-  // Let's get those controls to be right in the center on each side
-  .orbit-prev,
-  .orbit-next {
-    position: absolute;
-    top: 50%;
-    margin-top: -25px;
-    background-color: $orbit-nav-bg-old;
-    background-color: $orbit-nav-bg;
-    width: 50px;
-    height: 60px;
-    line-height: 50px;
-    color: white;
-    text-indent: -9999px !important;
-
-    & > span {
+  
+    &:hover .orbit-timer > span { display: block; }
+  
+    // Let's get those controls to be right in the center on each side
+    .orbit-prev,
+    .orbit-next {
       position: absolute;
       top: 50%;
-      margin-top: -16px;
-      display: block;
-      width: 0;
-      height: 0;
-      border: inset 16px;
-    }
-  }
-  .orbit-prev { #{$default-float}: 0;
-    & > span {
-      border-#{$opposite-direction}-style: solid;
-      border-color: transparent;
-      border-#{$opposite-direction}-color: #fff;
-    }
-    &:hover > span {
-      border-#{$opposite-direction}-color: #ccc;
+      margin-top: -25px;
+      background-color: $orbit-nav-bg-old;
+      background-color: $orbit-nav-bg;
+      width: 50px;
+      height: 60px;
+      line-height: 50px;
+      color: white;
+      text-indent: -9999px !important;
+  
+      & > span {
+        position: absolute;
+        top: 50%;
+        margin-top: -16px;
+        display: block;
+        width: 0;
+        height: 0;
+        border: inset 16px;
+      }
     }
-  }
-  .orbit-next { #{$opposite-direction}: 0;
-    & > span {
-      border-color: transparent;
-      border-#{$default-float}-style: solid;
-      border-#{$default-float}-color: #fff;
-      #{$default-float}: 50%;
-      margin-#{$default-float}: -8px;
+    .orbit-prev { #{$default-float}: 0;
+      & > span {
+        border-#{$opposite-direction}-style: solid;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: #fff;
+      }
+      &:hover > span {
+        border-#{$opposite-direction}-color: #ccc;
+      }
     }
-    &:hover > span {
-      border-#{$default-float}-color: #ccc;
+    .orbit-next { #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-style: solid;
+        border-#{$default-float}-color: #fff;
+        #{$default-float}: 50%;
+        margin-#{$default-float}: -8px;
+      }
+      &:hover > span {
+        border-#{$default-float}-color: #ccc;
+      }
     }
   }
-}
-
-.orbit-bullets {
-  margin: 0 auto 30px auto;
-  overflow: hidden;
-  position: relative;
-  top: 10px;
-
-  li {
-    display: block;
-    width: 18px;
-    height: 18px;
-    background: $orbit-bullet-nav-color;
-    float: $default-float;
-    margin-#{$opposite-direction}: 6px;
-    border: solid 2px $orbit-bullet-nav-color-active;
-    @include radius(1000px);
-
-    &.active {
-      background: $orbit-bullet-nav-color-active;
+  
+  .orbit-bullets {
+    margin: 0 auto 30px auto;
+    overflow: hidden;
+    position: relative;
+    top: 10px;
+  
+    li {
+      display: block;
+      width: 18px;
+      height: 18px;
+      background: $orbit-bullet-nav-color;
+      float: $default-float;
+      margin-#{$opposite-direction}: 6px;
+      border: solid 2px $orbit-bullet-nav-color-active;
+      @include radius(1000px);
+  
+      &.active {
+        background: $orbit-bullet-nav-color-active;
+      }
+  
+      &:last-child { margin-#{$opposite-direction}: 0; }
     }
-
-    &:last-child { margin-#{$opposite-direction}: 0; }
-  }
-}
-
-.touch {
-  .orbit-container {
-    .orbit-prev,
-    .orbit-next { display: none; }
   }
-
-  .orbit-bullets { display: none; }
-}
-
-
-@media #{$small} {
-
+  
   .touch {
     .orbit-container {
       .orbit-prev,
-      .orbit-next { display: inherit; }
+      .orbit-next { display: none; }
     }
-
-    .orbit-bullets { display: block; }
+  
+    .orbit-bullets { display: none; }
+  }
+  
+  
+  @media #{$small} {
+  
+    .touch {
+      .orbit-container {
+        .orbit-prev,
+        .orbit-next { display: inherit; }
+      }
+  
+      .orbit-bullets { display: block; }
+    }
+  
   }
 
-}
+}

data/scss/foundation/components/_pagination.scss

@@ -1,6 +1,7 @@
 //
 // Pagination Variables
 //
+$include-html-nav-classes: $include-html-classes !default;
 
 // We use these to control the pagination container
 $pagination-height:                      emCalc(24px) !default;

data/scss/foundation/components/_panels.scss

@@ -1,6 +1,7 @@
 //
 // Panel Variables
 //
+$include-html-panel-classes: $include-html-classes !default;
 
 // We use these to control the background and border styles
 $panel-bg:              darken(#fff, 5%) !default;

data/scss/foundation/components/_pricing-tables.scss

@@ -1,6 +1,7 @@
 //
 // Pricing Table Variables
 //
+$include-html-pricing-classes: $include-html-classes !default;
 
 // We use this to control the border color
 $price-table-border:        solid 1px #ddd !default;

data/scss/foundation/components/_progress-bars.scss

@@ -1,6 +1,7 @@
 //
 // Progress Bar Variables
 //
+$include-html-media-classes: $include-html-classes !default;
 
 // We use this to se the prog bar height
 $progress-bar-height: emCalc(25px) !default;

data/scss/foundation/components/_reveal.scss

@@ -1,4 +1,5 @@
 // NEED TO FINISH THE LOGIC HERE
+$include-html-reveal-classes: $include-html-classes !default;
 
 //
 // Reveal Variables
@@ -126,6 +127,6 @@ $reveal-border-color:    #666 !default;
 
   // Reveal Print Styles
   @media print {
-    div:not(.reveal-modal) { display: none; }
+    .reveal-modal {background: #fff !important;}
   }
 }

data/scss/foundation/components/_section.scss

@@ -1,21 +1,27 @@
 //
 // Section Variables
 //
+$include-html-section-classes: $include-html-classes !default;
 
 // We use these to set padding and hover factor
-$section-padding:                emCalc(15px) !default;
-$section-function-factor:        10% !default;
+$section-title-padding:             emCalc(15px) !default;
+$section-content-padding:           emCalc(15px) !default;
+$section-function-factor:           10% !default;
 
 // These style the titles
-$section-title-color:            #333 !default;
-$section-title-bg:               #efefef !default;
-$section-title-bg-active:        darken($section-title-bg, $section-function-factor) !default;
-$section-title-bg-active-tabs:   #fff !default;
+$section-title-color:               #333 !default;
+$section-title-bg:                  #efefef !default;
+$section-title-bg-active:           darken($section-title-bg, $section-function-factor) !default;
+$section-title-bg-active-tabs:      #fff !default;
+$section-title-bg-hover:            darken($section-title-bg, $section-function-factor/2) !default;
 
 // Want to control border size, here ya go!
-$section-border-size:            1px !default;
-$section-border-style:           solid !default;
-$section-border-color:           #ccc !default;
+$section-border-size:               1px !default;
+$section-border-style:              solid !default;
+$section-border-color:              #ccc !default;
+
+// Font controls
+$section-font-size:                 emCalc(14px) !default;
 
 // Control the color of the background and some size options
 $section-content-bg:                #fff !default;
@@ -31,7 +37,7 @@ $section-bottom-margin:             emCalc(20px) !default;
 // We use this mixin to create the basic container styles for sections when they act like accordions
 @mixin 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.
+  /// We can set this to false to not include these styles to avoid repeated CSS on classes.
   @if $base-style {
     width: 100%;
     display: block;
@@ -58,7 +64,8 @@ $section-bottom-margin:             emCalc(20px) !default;
 
   // Vertical Nav container border styles
   @else if $section-type == vertical-nav {
-
+    border: 0;
+    position: relative;
   }
 
   // Horizontal Nav container border styles
@@ -67,161 +74,169 @@ $section-bottom-margin:             emCalc(20px) !default;
     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.
-@mixin section($section-type:accordion) {
+}
 
-  // Accordion styles
-  @if $section-type == accordion {
 
-    border-top: $section-border-size $section-border-style $section-border-color;
-    position: relative;
+@mixin 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, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
 
-    .title {
-      top: 0;
-      cursor: pointer;
-      width: 100%;
-      margin: 0;
-      background-color: $section-title-bg;
+  // Default Styles
+  > #{$title-selector} {
+    background-color: $title-bg;
+    cursor: pointer;
+    margin-bottom: 0;
 
-      a {
-        padding: $section-padding;
-        display: inline-block;
-        color: $section-title-color;
-        font-size: emCalc(14px);
-        white-space: nowrap;
-        width: 100%;
-      }
-      &:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
+    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 {
-      display: none;
-      padding: $section-padding;
-      background-color: $section-content-bg;
-
-      &>*:last-child { margin-bottom: 0; }
-      &>*:first-child { padding-top: 0; }
-      &>*:last-child { padding-bottom: 0; }
-    }
+  #{$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 { display: block; }
-      & > .title { background: $section-title-bg-active; }
+  &.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%; }
+    }
   }
 
-  // Tab Styles
+  // Styles for when tabs
   @else if $section-type == tabs {
-    padding-top: 0;
     border: 0;
     position: static;
 
-    .title {
+    > #{$title-selector} {
       width: auto;
-      border: $section-border-size $section-border-style $section-border-color;
+      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 { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
+    &:last-child #{$title-selector} { border-#{$opposite-direction}: $section-border-style $section-border-size $section-border-color; }
 
-    .content {
-      border: $section-border-size $section-border-style $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 {
-        background-color: $section-title-bg-active-tabs;
+      & > #{$title-selector} {
         z-index: 11;
         border-bottom: 0;
+        background-color: $title-bg-active;
       }
-      & > .content { position: relative; }
+      & > #{$content-selector} { position: relative; }
     }
   }
 
+  // Styles for when Vertical Tabs
   @else if $section-type == vertical-tabs {
     padding-top: 0 !important;
     border: 0;
     position: static;
-    background-color: $section-title-bg;
 
-    .title {
+    > #{$title-selector} {
       position: absolute;
-      border-top: $section-border-size $section-border-style $section-border-color;
+      border-top: $section-border-style $section-border-size $section-border-color;
       width: $section-vertical-tabs-title-width;
     }
+    &:first-child #{$title-selector} { border-top: 0; }
 
-    &:first-child .title { border-top: 0; }
-
-    .content {
+    #{$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-size $section-border-style $section-border-color;
+      border-left: $section-border-style $section-border-size $section-border-color;
       z-index: 10;
     }
 
     &.active {
-
-      & > .title {
-        background-color: $section-title-bg-active-tabs;
-        width: $section-vertical-tabs-title-width + emCalc(2px); // Cover the content's left border
-        border-right: 0;
+      & > #{$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 {
-        border-bottom: $section-border-size $section-border-style $section-border-color;
-      }
+      &:last-child #{$title-selector} { border-bottom: 0; }
     }
   }
 
-  // Vertical Nav Styles
+  // Styles for when Vertical Nav
   @else if $section-type == vertical-nav {
-
     padding-top: 0 !important;
+    position: relative;
 
-    .title a { display: block; width: 100%; }
+    > #{$title-selector} {
+      border-top: none;
+      border: $section-border-style $section-border-size $section-border-color;
 
-    .content { display: none; }
+      a {
+        display: block;
+        width: 100%;
+      }
+    }
+    #{$content-selector} { display: none; }
+    &:first-child #{$title-selector} { border-bottom: none; }
 
     &.active {
-      & > .content {
+      & > #{$content-selector} {
         display: block;
         position: absolute;
         #{$default-float}: 100%;
-        top: -1px;
+        top: 0px;
         z-index: 999;
         min-width: $section-vertical-nav-min-width;
-        border: $section-border-size $section-border-style $section-border-color;
+        border: $section-border-style $section-border-size $section-border-color;
       }
     }
   }
 
-  // Horizontal Nav Styles
+  // Styles for when Horizontal Nav
   @else if $section-type == horizontal-nav {
     padding-top: 0;
     border: 0;
     position: static;
 
-    .title {
+    > #{$title-selector} {
       width: auto;
-      border: $section-border-size $section-border-style $section-border-color;
+      border: $section-border-style $section-border-size $section-border-color;
       border-#{$default-float}: 0;
       top: -1px;
       position: absolute;
@@ -230,40 +245,40 @@ $section-bottom-margin:             emCalc(20px) !default;
       a { width: 100%; }
     }
 
-    .content { display: none; }
+    #{$content-selector} { display: none; }
 
     &.active {
-      & > .content {
+      & > #{$content-selector} {
         display: block;
         position: absolute;
         z-index: 999;
         #{$default-float}: 0;
         top: -2px;
         min-width: $section-vertical-nav-min-width;
-        border: $section-border-size $section-border-style $section-border-color;
+        border: $section-border-style $section-border-size $section-border-color;
       }
     }
   }
+
 }
 
 
+
 @if $include-html-section-classes != false {
 
   /* Sections */
   .section-container, .section-container.auto {
-    @include section-container;
+    @include section-container(accordion);
 
     &>section,
-    &>.section {
-      @include section;
-    }
+    &>.section { @include section(accordion); }
   }
 
   .section-container.tabs {
     @include section-container(false, tabs);
 
     &>section,
-    &>.section { @include section(tabs); }
+    &>.section { @include section(tabs, $title-bg-active:#fff); }
   }
 
   @media #{$small} {
@@ -272,7 +287,7 @@ $section-bottom-margin:             emCalc(20px) !default;
       @include section-container(false, tabs);
 
       &>section,
-      &>.section { @include section(tabs); }
+      &>.section { @include section(tabs, $title-bg-active:#fff); }
     }
     .section-container.accordion .section {
       padding-top: 0 !important;
@@ -286,7 +301,7 @@ $section-bottom-margin:             emCalc(20px) !default;
     }
 
     .section-container.vertical-nav {
-      @include section-container(false);
+      @include section-container(false, vertical-nav);
 
       &>section,
       &>.section { @include section(vertical-nav); }