zurb-foundation 4.2.3 → 4.3.0

data/scss/foundation/components/_pagination.scss

@@ -4,18 +4,18 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use these to control the pagination container
-$pagination-height: emCalc(24px) !default;
-$pagination-margin: emCalc(-5px) !default;
+$pagination-height: emCalc(24) !default;
+$pagination-margin: emCalc(-5) !default;
 
 // We use these to set the list-item properties
 $pagination-li-float: $default-float;
-$pagination-li-height: emCalc(24px) !default;
+$pagination-li-height: emCalc(24) !default;
 $pagination-li-font-color: #222 !default;
-$pagination-li-font-size: emCalc(14px) !default;
-$pagination-li-margin: emCalc(5px) !default;
+$pagination-li-font-size: emCalc(14) !default;
+$pagination-li-margin: emCalc(5) !default;
 
 // We use these for the pagination anchor links
-$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px) !default;
+$pagination-link-pad: emCalc(1, 7, 1) !default;
 $pagination-link-font-color: #999 !default;
 $pagination-link-active-bg: darken(#fff, 10%) !default;
 
@@ -64,6 +64,8 @@ $pagination-link-current-active-bg: $primary-color !default;
       &:focus { background: $pagination-link-current-active-bg; }
     }
   } @else {
+    height: auto;
+    padding: $pagination-link-pad;
     background: $pagination-link-current-background;
     color: $pagination-link-current-font-color;
     font-weight: $pagination-link-current-font-weight;

data/scss/foundation/components/_panels.scss

@@ -13,8 +13,8 @@ $panel-function-factor: 10% !default;
 $panel-border-color: darken($panel-bg, $panel-function-factor) !default;
 
 // We use these to set default inner padding and bottom margin
-$panel-margin-bottom: emCalc(20px) !default;
-$panel-padding: emCalc(20px) !default;
+$panel-margin-bottom: emCalc(20) !default;
+$panel-padding: emCalc(20) !default;
 
 // We use these to set default font colors
 $panel-font-color: #333 !default;
@@ -52,7 +52,7 @@ $panel-header-adjust: true !default;
 
       // reset header line-heights for panels
       h1,h2,h3,h4,h5,h6 {
-        line-height: 1; margin-bottom: emCalc(20px) / 2;
+        line-height: 1; margin-bottom: emCalc(20) / 2;
         &.subheader { line-height: 1.4; }
       }
     }

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

@@ -7,46 +7,46 @@ $include-html-pricing-classes: $include-html-classes !default;
 $price-table-border: solid 1px #ddd !default;
 
 // We use this to control the bottom margin of the pricing table
-$price-table-margin-bottom: emCalc(20px) !default;
+$price-table-margin-bottom: emCalc(20) !default;
 
 // We use these to control the title styles
 $price-title-bg: #ddd !default;
-$price-title-padding: emCalc(15px) emCalc(20px) !default;
+$price-title-padding: emCalc(15, 20) !default;
 $price-title-align: center !default;
 $price-title-color: #333 !default;
 $price-title-weight: bold !default;
-$price-title-size: emCalc(16px) !default;
+$price-title-size: emCalc(16) !default;
 
 // We use these to control the price styles
 $price-money-bg: #eee !default;
-$price-money-padding: emCalc(15px) emCalc(20px) !default;
+$price-money-padding: emCalc(15, 20) !default;
 $price-money-align: center !default;
 $price-money-color: #333 !default;
 $price-money-weight: normal !default;
-$price-money-size: emCalc(20px) !default;
+$price-money-size: emCalc(20) !default;
 
 // We use these to control the description styles
 $price-bg: #fff !default;
 $price-desc-color: #777 !default;
-$price-desc-padding: emCalc(15px) !default;
+$price-desc-padding: emCalc(15) !default;
 $price-desc-align: center !default;
-$price-desc-font-size: emCalc(12px) !default;
+$price-desc-font-size: emCalc(12) !default;
 $price-desc-weight: normal !default;
 $price-desc-line-height: 1.4 !default;
 $price-desc-bottom-border: dotted 1px #ddd !default;
 
 // We use these to control the list item styles
 $price-item-color: #333 !default;
-$price-item-padding: emCalc(15px) !default;
+$price-item-padding: emCalc(15) !default;
 $price-item-align: center !default;
-$price-item-font-size: emCalc(14px) !default;
+$price-item-font-size: emCalc(14) !default;
 $price-item-weight: normal !default;
 $price-item-bottom-border: dotted 1px #ddd !default;
 
 // We use these to control the CTA area styles
 $price-cta-bg: #f5f5f5 !default;
 $price-cta-align: center !default;
-$price-cta-padding: emCalc(20px) emCalc(20px) 0 !default;
+$price-cta-padding: emCalc(20, 20, 0) !default;
 
 //
 // Pricing Table Mixins

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

@@ -4,7 +4,7 @@
 $include-html-media-classes: $include-html-classes !default;
 
 // We use this to se the prog bar height
-$progress-bar-height: emCalc(25px) !default;
+$progress-bar-height: emCalc(25) !default;
 $progress-bar-color: transparent !default;
 
 // We use these to control the border styles
@@ -14,8 +14,8 @@ $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;
 
 // We use these to control the margin & padding
-$progress-bar-pad: emCalc(2px) !default;
-$progress-bar-margin-bottom: emCalc(10px) !default;
+$progress-bar-pad: emCalc(2) !default;
+$progress-bar-margin-bottom: emCalc(10) !default;
 
 // We use these to set the meter colors
 $progress-meter-color: $primary-color !default;

data/scss/foundation/components/_reveal.scss

@@ -1,9 +1,9 @@
-$include-html-reveal-classes: $include-html-classes !default;
-
 //
 // Reveal Variables
 //
 
+$include-html-reveal-classes: $include-html-classes !default;
+
 // We use these to control the style of the reveal overlay.
 $reveal-overlay-bg: rgba(#000, .45) !default;
 $reveal-overlay-bg-old: #000 !default;
@@ -12,13 +12,13 @@ $reveal-overlay-bg-old: #000 !default;
 $reveal-modal-bg: #fff !default;
 $reveal-position-top: 50px !default;
 $reveal-default-width: 80% !default;
-$reveal-modal-padding: emCalc(20px) !default;
+$reveal-modal-padding: emCalc(20) !default;
 $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
 
 // We use these to style the reveal close button
-$reveal-close-font-size: emCalc(22px) !default;
-$reveal-close-top: emCalc(8px) !default;
-$reveal-close-side: emCalc(11px) !default;
+$reveal-close-font-size: emCalc(22) !default;
+$reveal-close-top: emCalc(8) !default;
+$reveal-close-side: emCalc(11) !default;
 $reveal-close-color: #aaa !default;
 $reveal-close-weight: bold !default;
 
@@ -119,7 +119,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
   @media #{$small} {
 
     .#{$reveal-modal-class} {
-      @include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
+      @include reveal-modal-style(false, emCalc(30), false, $box-shadow: false, $top-offset: emCalc(100));
 
       &.tiny  { @include reveal-modal-base(false, 30%); }
       &.small { @include reveal-modal-base(false, 40%); }

data/scss/foundation/components/_section.scss

@@ -4,16 +4,17 @@
 $include-html-section-classes: $include-html-classes !default;
 
 // We use these to set padding and hover factor
-$section-title-padding: emCalc(15px) !default;
-$section-content-padding: emCalc(15px) !default;
+$section-title-padding: emCalc(15) !default;
+$section-content-padding: emCalc(15) !default;
 $section-function-factor: 10% !default;
 
 // These style the titles
 $section-title-color: #333 !default;
+$section-title-color-active: #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;
+$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;
@@ -21,333 +22,370 @@ $section-border-style: solid !default;
 $section-border-color: #ccc !default;
 
 // Font controls
-$section-font-size: emCalc(14px) !default;
+$section-font-size: emCalc(14) !default;
 
 // Control the color of the background and some size options
 $section-content-bg: #fff !default;
-$section-vertical-nav-min-width: emCalc(200px) !default;
-$section-vertical-tabs-title-width: emCalc(200px) !default;
-$section-bottom-margin: emCalc(20px) !default;
+$section-vertical-nav-min-width: emCalc(200) !default;
+$section-vertical-tabs-title-width: emCalc(200) !default;
+$section-bottom-margin: emCalc(20) !default;
 
 $title-selector: ".title" !default;
 $content-selector: ".content" !default;
-
+$active-region-selector: ".active" !default;
 
 //
 // Section Mixins
 //
 
-// 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) {
+// basic styles for sections.js: positions
+@mixin section-container-base($section-type: accordion) {
+  width: 100%;
+  position: relative;
+  display: block;
+  margin-bottom: $section-bottom-margin;
 
-  /// 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;
+  @if $section-type != accordion {
+    &:not([data-section-resized]):not([data-section-small-style]) {
+      visibility: hidden;
+    }
+  }
+  
+  @if $section-type != tabs {
+  	&[data-section-small-style] {
+      width: 100% !important; // override inline style
+
+	  & > [data-section-region], & > section, & > .section { 
+        padding: 0 !important; // override inline style
+        margin: 0 !important; // override inline style
+        & > [data-section-title], & > #{$title-selector}{
+          width: 100% !important; // override inline style
+        }
+      }
+	}
   }
+}
+
+// foundation styles for sections
+@mixin section-container-style($section-type: accordion) {
 
   // Accordion container border styles
   @if $section-type == accordion {
-    border: $section-border-size $section-border-style $section-border-color;
-    border-top: none;
+    border-top: $section-border-size $section-border-style $section-border-color;
   }
 
   // Tabs container border styles
   @else if $section-type == tabs {
-    border: 0;
-    position: relative;
+	border: none;
   }
 
   // Vertical Tabs container border styles
   @else if $section-type == vertical-tabs {
-    border: $section-border-size $section-border-style $section-border-color;
-    position: relative;
+    border: none;
   }
 
   // Vertical Nav container border styles
   @else if $section-type == vertical-nav {
-    border: 0;
-    position: relative;
+    border: none;
   }
 
   // Horizontal Nav container border styles
   @else if $section-type == horizontal-nav {
-    position: relative;
     background: $section-title-bg;
     border: $section-border-size $section-border-style $section-border-color;
   }
-
 }
 
+//basic styles for section.js: section region positions
+@mixin section-base($section-type: accordion) {
 
-@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) {
-
-  // Default Styles
-  > #{$title-selector} {
-    background-color: $title-bg;
-    cursor: $cursor-pointer-value;
+  & > [data-section-title], & > #{$title-selector} {
     margin-bottom: 0;
-
-    a {
-      padding: $title-padding;
+	a {
+	  width: 100%;
       display: inline-block;
-      color: $title-color;
-      font-size: $title-font-size;
       white-space: nowrap;
     }
-    &:hover { background-color: $title-bg-hover; }
   }
 
-  #{$content-selector} {
+  & > [data-section-content], & > #{$content-selector} {
     display: none;
-    padding: $content-padding;
-    background-color: $content-bg;
+  }
 
-    &>*:last-child { margin-bottom: 0; }
-    &>*:first-child { padding-top: 0; }
-    &>*:last-child:not(.flex-video) { padding-bottom: 0; }
+  &#{$active-region-selector} {
+    & > [data-section-content], & > #{$content-selector} { display: block; }    
   }
 
-  &.active {
-    & > #{$content-selector} { display: block; }
-    & > #{$title-selector} { background: $title-bg-active;
-      a { color: $title-color-active; }
-    }
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
   }
 
   // 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%; }
-    }
+	margin: 0;
+    & > [data-section-title], & > #{$title-selector} { width: 100%; }
   }
 
   // Styles for when tabs
   @else if $section-type == 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;
+    & > [data-section-title], & > #{$title-selector} {
+	  width: auto;
       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; }
+	  #{$default-float}: 0;
     }
   }
 
   // Styles for when Vertical Tabs
   @else if $section-type == 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;
+    & > [data-section-title], & > #{$title-selector} {
+	  position: absolute;
+	  top:0;
+      #{$default-float}: 0;
       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
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width;
+
+      & > [data-section-title], & > #{$title-selector} {
+        width: $section-vertical-tabs-title-width;     
       }
-      &:last-child #{$title-selector} { border-bottom: 0; }
     }
   }
 
   // Styles for when Vertical Nav
   @else if $section-type == vertical-nav {
-    padding-top: 0 !important;
-    position: relative;
+	
+	position: relative;
+    display: inline-block;
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
+    }
 
-    > #{$title-selector} {
-      border-top: none;
-      border: $section-border-style $section-border-size $section-border-color;
+	& > [data-section-content], & > #{$content-selector} {
+	    position: absolute;
+	    top:0;
+		#{$default-float}: 0;
+		z-index: 999;
+		min-width: $section-vertical-nav-min-width;
+	}
+  }
 
-      a {
-        display: block;
-        width: 100%;
-      }
+  // Styles for when Horizontal Nav
+  @else if $section-type == horizontal-nav {
+
+	position: relative;
+	float: #{$default-float};
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
     }
-    #{$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;
-      }
+
+	& > [data-section-content], & > #{$content-selector} {
+	  width: auto;
+	  position: absolute;
+	  top: 0;
+      #{$default-float}: 0;
+	  z-index: 999;
+	  min-width: $section-vertical-nav-min-width;
+	}
+  }
+}
+
+//foundation styles for section regions
+@mixin section-style($section-type:accordion, $title-selector: $title-selector, $content-selector: $content-selector, $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-active, $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) {
+
+  // Default Styles
+  & > #{$title-selector} {
+    background-color: $title-bg;
+    cursor: $cursor-pointer-value;
+	border: $section-border-style $section-border-size $section-border-color;
+	a {
+      padding: $title-padding;
+      color: $title-color;
+      font-size: $title-font-size;
+	  background: none;
     }
+    &:hover { background-color: $title-bg-hover; }
   }
 
-  // Styles for when Horizontal Nav
-  @else if $section-type == 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;
+  & > #{$content-selector} {
+    padding: $content-padding;
+    background-color: $content-bg;
+	border: $section-border-style $section-border-size $section-border-color;
+
+    &>*:last-child { margin-bottom: 0; }
+    &>*:first-child { padding-top: 0; }
+    &>*:last-child:not(.flex-video) { padding-bottom: 0; }
+  }
 
-      a { width: 100%; }
+  &#{$active-region-selector} {
+	& > #{$title-selector} { 
+	  background: $title-bg-active;
+      a { color: $title-color-active; }
     }
+  }
+
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
+  }
 
-    #{$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;
+  // Style for when Accordion
+  @if $section-type == accordion {
+    & > #{$title-selector} { border-top: none; }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+
+	&#{$active-region-selector} > #{$title-selector} {
+      border-bottom: 0;
+	}
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width - emCalc(1px);
+
+      & > #{$title-selector} {
+        background-color: $title-bg-active;  
       }
     }
   }
-
 }
 
+@mixin section-container($base-style:true, $section-type:accordion)  {
+  @include section-container-base($section-type);
+  @include section-container-style($section-type);
+}
 
+@mixin section($section-type:accordion, $title-selector:$title-selector, $content-selector: $content-selector, $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-active, $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) {
+  @include section-base($section-type);
+  @include section-style($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color);
+}
 
 @if $include-html-section-classes != false {
 
   /* Sections */
-  .section-container, .section-container.auto {
-    @include section-container(accordion);
 
-    &>section,
-    &>.section { @include section(accordion); }
+  [data-section=''], [data-section='auto'], .section-container.auto,
+  [data-section='vertical-tabs'], .section-container.vertical-tabs,
+  [data-section='vertical-nav'], .section-container.vertical-nav,
+  [data-section='horizontal-nav'], .section-container.horizontal-nav,
+  [data-section='accordion'], .section-container.accordion {
+	@include section-container-base(accordion);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(accordion);
+    }
   }
 
-  .section-container.tabs {
-    @include section-container(false, tabs);
+  .section-container.auto,
+  .section-container.vertical-tabs,
+  .section-container.vertical-nav,
+  .section-container.horizontal-nav,
+  .section-container.accordion {
+	@include section-container-style(accordion);
+	& > section, & > .section { 
+      @include section-style(accordion);
+    }
+  }
 
-    &>section,
-    &>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
+  [data-section='tabs'], .section-container.tabs {
+	@include section-container-base(tabs);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(tabs);
+    }
   }
 
-  @media #{$small} {
+  .section-container.tabs {
+	@include section-container-style(tabs);
+	& > section, & > .section { 
+      @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+    }
+  }
 
-    .section-container.auto {
-      @include section-container(false, tabs);
+  @media #{$small} {
 
-      &>section,
-      &>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
+    [data-section=''], [data-section='auto'], .section-container.auto {
+	  @include section-container-base(tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(tabs);
+      }
     }
-    .section-container.accordion .section {
-      padding-top: 0 !important;
+
+	.section-container.auto {
+	  @include section-container-style(tabs);
+	  & > section, & > .section { 
+        @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+      }
     }
 
-    .section-container.vertical-tabs {
-      @include section-container(false, vertical-tabs);
+	[data-section='vertical-tabs'], .section-container.vertical-tabs {
+	  @include section-container-base(vertical-tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-tabs);
+      }
+    }
 
-      section,
-      .section { @include section(vertical-tabs); }
+	.section-container.vertical-tabs {
+	  @include section-container-style(vertical-tabs);
+	  & > section, & > .section { 
+        @include section-style(vertical-tabs);
+      }
     }
 
-    .section-container.vertical-nav {
-      @include section-container(false, vertical-nav);
+	[data-section='vertical-nav'], .section-container.vertical-nav {
+	  @include section-container-base(vertical-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-nav);
+      }
+    }
 
-      &>section,
-      &>.section { @include section(vertical-nav); }
+	.section-container.vertical-nav {
+	  @include section-container-style(vertical-nav);
+	  & > section, & > .section { 
+        @include section-style(vertical-nav);
+      }
     }
 
-    .section-container.horizontal-nav {
-      @include section-container(false, horizontal-nav);
+	[data-section='horizontal-nav'], .section-container.horizontal-nav {
+	  @include section-container-base(horizontal-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(horizontal-nav);
+      }
+    }
 
-      &>section,
-      &>.section { @include section(horizontal-nav); }
+	.section-container.horizontal-nav {
+	  @include section-container-style(horizontal-nav);
+	  & > section, & > .section { 
+        @include section-style(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 {
-      @include section-container(accordion);
-
-      &>section,
-      &>.section { @include 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;
-        }
+  .no-js {
+    [data-section], .section-container {
+	  @include section-container-base(accordion);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(accordion);
+      }
+    }
+	.section-container {
+      @include section-container-style(accordion);
+	  & > section, & > .section { 
+        @include section-style(accordion);
       }
-
     }
   }
-
 }