Merge pull request #4 from zurb/master

Update Foundation
foundation · Apr 18, 2014 · 1c612e9 · 1c612e9
2 parents 2a5a361 + 2344a82
commit 1c612e9
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 23 deletions.
diff --git a/doc/includes/accordion/examples_accordion_grid.html b/doc/includes/accordion/examples_accordion_grid.html
@@ -1,6 +1,6 @@
-<dl class="accordion" data-accordion>
-  <ul class="small-block-grid-1 medium-block-grid-3">
-    <li>
+<ul class="small-block-grid-1 medium-block-grid-3">
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel1c">Accordion 1</a>
         <div id="panel1c" class="content">
@@ -19,8 +19,10 @@
           Panel 3. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-    <li>
+    </dl>
+  </li>
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel4c">Accordion 4</a>
         <div id="panel4c" class="content">
@@ -39,6 +41,6 @@
           Panel 6. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-  </ul>
-</dl>
+    </dl>
+  </li>
+</ul>
diff --git a/doc/pages/components/accordion.html b/doc/pages/components/accordion.html
@@ -31,6 +31,27 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<h3>Distributed accordion groups</h3>
+
+You can name the accordion so that it can be spread across different parent containers.  In this example the accordion is named *myAccordionGroup* and it is split between different columns in a block grid.  This allows the accordion to be responsive to screen width.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+{{> examples_accordion_grid}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    {{> examples_accordion_grid}}
+  </div>
+</div>
+
+***
+
 ## Customize With Sass
 
 Accordions can be easily customized with the Sass variables provided in the `_settings.scss` file.

diff --git a/doc/pages/components/equalizer.html b/doc/pages/components/equalizer.html
@@ -133,8 +133,8 @@ <h4>Rendered HTML</h4>
 ```js
 $(document).foundation({
   equalizer:
-    // specify if Equalizer should make elements equal height on the small media query range
-    equalize_on_small: false
+    // specify if Equalizer should make elements equal height once they become stacked
+    equalize_on_stack: false
 });
 ```
 {{/markdown}}

diff --git a/js/foundation/foundation.accordion.js b/js/foundation/foundation.accordion.js
@@ -21,16 +21,20 @@
       var S = this.S;
       S(this.scope)
       .off('.fndtn.accordion')
-      .on('click.fndtn.accordion', '[' + this.attr_name() + '] dd > a', function (e) {
+      .on('click.fndtn.accordion', '[' + this.attr_name() + '] > dd > a', function (e) {
         var accordion = S(this).closest('[' + self.attr_name() + ']'),
             target = S('#' + this.href.split('#')[1]),
             siblings = S('dd > .content', accordion),
             aunts = $('dd', accordion),
+            groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
             settings = accordion.data(self.attr_name(true) + '-init'),
             active_content = S('dd > .content.' + settings.active_class, accordion);
         e.preventDefault();
 
-        if (! S(this).closest('dl').is(accordion)) { return; }
+        if (accordion.attr(self.attr_name())) {
+          siblings = siblings.add('[' + groupSelector + '] dd > .content');
+          aunts = aunts.add('[' + groupSelector + '] dd');
+        }
 
         if (settings.toggleable && target.is(active_content)) {
           target.parent('dd').toggleClass(settings.active_class, false);

diff --git a/js/foundation/foundation.equalizer.js b/js/foundation/foundation.equalizer.js
@@ -10,7 +10,7 @@
       use_tallest: true,
       before_height_change: $.noop,
       after_height_change: $.noop,
-      equalize_on_small: false
+      equalize_on_stack: false
     },
 
     init : function (scope, method, options) {
@@ -42,7 +42,7 @@
         }
       });
 
-      if (settings.equalize_on_small === false) {
+      if (settings.equalize_on_stack === false) {
         if (isStacked) return;
       };
 

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
@@ -152,7 +152,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
   // Alignment options
   @if $alignment == right {
-    float: none;
+    float: none !important;
     text-align: right;
   }
   @else if $alignment == inline {

diff --git a/spec/accordion/grid.html b/spec/accordion/grid.html
@@ -1,6 +1,6 @@
-<dl class="accordion" data-accordion>
-  <ul class="small-block-grid-1 medium-block-grid-3">
-    <li>
+<ul class="small-block-grid-1 medium-block-grid-3">
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel1c">Accordion 1</a>
         <div id="panel1c" class="content">
@@ -19,8 +19,10 @@
           Panel 3. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-    <li>
+    </dl>
+  </li>
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel4c">Accordion 4</a>
         <div id="panel4c" class="content">
@@ -39,6 +41,6 @@
           Panel 6. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-  </ul>
-</dl>
+    </dl>
+  </li>
+</ul>