zurb-foundation 4.0.8 → 4.0.9

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.0.8)
+    zurb-foundation (4.0.9)
       sass (>= 3.2.0)
 
 GEM

data/docs/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 4.0.9- March 19, 2013
+* Added `auto` option to `Foundation.section.js.
+* Fixes dropdown positioning for split buttons.
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.8...v4.0.9).
+
 ### 4.0.8- March 15, 2013
 * Added paragraph `text-rendering` variable: `$paragraph-text-rendering`.
 * Changed blockgrid to use clearfix instead of overflow.

data/docs/components/section.html.erb

@@ -11,7 +11,7 @@
 
         <div class="row">
           <div class="large-3 columns">
-            <div class="section-container vertical-nav" data-section>
+            <div class="section-container vertical-nav" data-section="vertical-nav">
               <section class="section">
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
@@ -39,7 +39,7 @@
             </div>
           </div>
           <div class="large-9 columns">
-            <div class="section-container horizontal-nav" data-section>
+            <div class="section-container horizontal-nav" data-section="horizontal-nav">
               <section class="section">
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
@@ -65,7 +65,7 @@
                 </div>
               </section>
             </div>
-            <div class="section-container tabs" data-section data-options="deep_linking: true;">
+            <div class="section-container auto" data-section data-options="deep_linking: true;">
               <section class="section">
                 <p class="title"><a href="#panel1">Section 1</a></p>
                 <div class="content" data-slug="panel1">
@@ -124,8 +124,10 @@
         <h3>Build With Predefined HTML Classes</h3>
         <p>There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragragh) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
 
+        <p>If you want to use ZURB's default styles for section elements you can apply the <code>auto</code>, <code>tabs</code>, <code>accordion</code>, <code>vertical-nav</code>, or <code>horizontal-nav</code> classes. By default, section elements will be an accordion on mobile and tabs on desktops and tablets. If you want to adjust this behavior and force a particular format for your section, you will need to set <code>data-section</code> equal to the format you want to force as shown in the variations below.</p>
+
 <%= code_example '
-<div class="section-container" data-section>
+<div class="section-container auto" data-section>
   <section class="section">
     <p class="title"><a href="#panel1">Section 1</a></p>
     <div class="content">
@@ -139,10 +141,15 @@
     </div>
   </section>
 </div>', :html %>
+        <p>This example will automatically switch between tabs and accordion based on the resolution of the device.</p>
 
         <p>The class options:</p>
         <ul class="disc">
-
+          <li>auto</li>
+          <li>tabs</li>
+          <li>accordion</li>
+          <li>vertical-nav</li>
+          <li>horizontal-nav</li>
         </ul>
 
         <p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>section from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
@@ -153,7 +160,7 @@
         <h6>Accordion</h6>
         <p>Adding an <code>accordion</code> class to the section container will show an accordion on both small and large screens.</p>
 <%= code_example '
-<div class="section-container accordion" data-section>
+<div class="section-container accordion" data-section="accordion">
   <section class="section">
     <p class="title"><a href="#">Section 1</a></p>
     <div class="content">
@@ -168,10 +175,10 @@
   </section>
 </div>', :html %>
 
-        <h6>Tabs/Accordion</h6>
-        <p>Adding a <code>tabs</code> class to the section container will enable tabs on large screens and show an accordion on small screens.</p>
+        <h6>Tabs</h6>
+        <p>Adding a <code>tabs</code> class to the section container will enable tabs on both small and large screens.</p>
 <%= code_example '
-<div class="section-container tabs" data-section>
+<div class="section-container tabs" data-section="tabs">
   <section class="section">
     <p class="title"><a href="#">Section 1</a></p>
     <div class="content">
@@ -196,7 +203,7 @@
 <%= code_example '
 <div class="row">
   <div class="large-3 columns">
-    <div class="section-container vertical-nav" data-section>
+    <div class="section-container vertical-nav" data-section="vertical-nav">
       <section class="section">
         <p class="title"><a href="#">Section 1</a></p>
         <div class="content">
@@ -236,7 +243,7 @@
         <p>Use the <code>side-nav</code> class on the list to apply the Foundation navigation styles</p>
 
 <%= code_example '
-<div class="section-container horizontal-nav" data-section>
+<div class="section-container horizontal-nav" data-section="horizontal-nav">
   <section class="section">
     <p class="title"><a href="#">Section 1</a></p>
     <div class="content">
@@ -269,7 +276,7 @@
         <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
 
         <%= code_example '
-<div class="section-container" data-section data-options="deep_linking: true">
+<div class="section-container auto" data-section data-options="deep_linking: true">
   <section class="section">
     <p class="title"><a href="#section1">Section 1</a></p>
     <div class="content" data-slug="section1">
@@ -316,7 +323,7 @@ $section-bottom-margin:          emCalc(20px);
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You don't need ths JS to create sections with Foundation. The only reason you'll need to include <code>foundation.section.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the sections plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+        <p>You'll need to include <code>zepto.js</code> and <code>foundation.js</code> above the sections plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
 
         <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
 
@@ -325,7 +332,7 @@ $section-bottom-margin:          emCalc(20px);
         <p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
 
 <%= code_example '
-<div class="section-container" data-section>
+<div class="section-container auto" data-section>
   <section class="section">
     <p class="title"><a href="#panel1">Section 1</a></p>
     <div class="content">

data/js/foundation/foundation.dropdown.js

@@ -6,7 +6,7 @@
   Foundation.libs.dropdown = {
     name : 'dropdown',
 
-    version : '4.0.6',
+    version : '4.0.9',
 
     settings : {
       activeClass: 'open'
@@ -97,10 +97,18 @@
           top: position.top + this.outerHeight(target)
         });
       } else {
+        if ($(window).width() > this.outerWidth(dropdown) + target.offset().left) {
+          var left = position.left;
+        } else {
+          if (!dropdown.hasClass('right')) {
+            dropdown.addClass('right');
+          }
+          var left = position.left - (this.outerWidth(dropdown) - this.outerWidth(target));
+        }
         dropdown.attr('style', '').css({
           position : 'absolute',
           top: position.top + this.outerHeight(target),
-          left: position.left
+          left: left
         });
       }
 

data/js/foundation/foundation.reveal.js

@@ -6,7 +6,7 @@
   Foundation.libs.reveal = {
     name: 'reveal',
 
-    version : '4.0.6',
+    version : '4.0.9',
 
     locked : false,
 
@@ -88,29 +88,35 @@
         var modal = $(this.scope);
       }
 
-      var open_modal = $('.reveal-modal.open');
+      if (!modal.hasClass('open')) {
+        var open_modal = $('.reveal-modal.open');
 
-      if (typeof modal.data('css-top') === 'undefined') {
-        modal.data('css-top', parseInt(modal.css('top'), 10))
-          .data('offset', this.cache_offset(modal));
-      }
+        if (typeof modal.data('css-top') === 'undefined') {
+          modal.data('css-top', parseInt(modal.css('top'), 10))
+            .data('offset', this.cache_offset(modal));
+        }
 
-      modal.trigger('open');
+        modal.trigger('open');
 
-      if (open_modal.length < 1) {
-        this.toggle_bg(modal);
+        if (open_modal.length < 1) {
+          this.toggle_bg(modal);
+        }
+        this.hide(open_modal, this.settings.css.open);
+        this.show(modal, this.settings.css.open);
       }
-
-      this.toggle_modals(open_modal, modal);
     },
 
     close : function (modal) {
-      var modal = modal || $(this.scope);
-      this.locked = true;
-      var open_modal = $('.reveal-modal.open').not(modal);
-      modal.trigger('close');
-      this.toggle_bg(modal);
-      this.toggle_modals(open_modal, modal);
+
+      var modal = modal || $(this.scope),
+          open_modals = $('.reveal-modal.open');
+
+      if (open_modals.length > 0) {
+        this.locked = true;
+        modal.trigger('close');
+        this.toggle_bg(modal);
+        this.hide(open_modals, this.settings.css.close);
+      }
     },
 
     close_targets : function () {
@@ -123,20 +129,8 @@
       return base;
     },
 
-    toggle_modals : function (open_modal, modal) {
-      if (open_modal.length > 0) {
-        this.hide(open_modal, this.settings.css.close);
-      }
-
-      if (modal.filter(':visible').length > 0) {
-        this.hide(modal, this.settings.css.close);
-      } else {
-        this.show(modal, this.settings.css.open);
-      }
-    },
-
     toggle_bg : function (modal) {
-      if (this.settings.bg.length === 0) {
+      if ($('.reveal-modal-bg').length === 0) {
         this.settings.bg = $('<div />', {'class': this.settings.bgClass})
           .insertAfter(modal);
       }

data/js/foundation/foundation.section.js

@@ -6,7 +6,7 @@
   Foundation.libs.section = {
     name: 'section',
 
-    version : '4.0.8',
+    version : '4.0.9',
 
     settings : {
       deep_linking: false,
@@ -55,7 +55,7 @@
       $(document)
         .on('click.fndtn.section', function (e) {
           if ($(e.target).closest('.title').length < 1) {
-            $('[data-section].vertical-nav, [data-section].horizontal-nav')
+            $('[data-section="vertical-nav"], [data-section="horizontal-nav"]')
               .find('section, .section')
               .removeClass('active')
               .attr('style', '');
@@ -167,15 +167,19 @@
     },
 
     is_vertical : function (el) {
-      return el.hasClass('vertical-nav');
+      return /vertical-nav/i.test(el.data('section'));
     },
 
     is_horizontal : function (el) {
-      return el.hasClass('horizontal-nav');
+      return /horizontal-nav/i.test(el.data('section'));
     },
 
     is_accordion : function (el) {
-      return el.hasClass('accordion');
+      return /accordion/i.test(el.data('section'));
+    },
+
+    is_tabs : function (el) {
+      return /tabs/i.test(el.data('section'));
     },
 
     set_active_from_hash : function () {
@@ -244,7 +248,7 @@
 
     small : function (el) {
       var settings = $.extend({}, this.settings, this.data_options(el));
-      if (el && el.hasClass('tabs')) {
+      if (this.is_tabs(el)) {
         return false;
       }
       if (el && this.is_accordion(el)) {

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.0.8"
+  VERSION = "4.0.9"
 end

data/scss/foundation/components/_dropdown.scss

@@ -80,12 +80,21 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
       z-index: 99;
     }
     &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1,$f-dropdown-border-color,bottom);
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
       position: absolute;
       top: -(($f-dropdown-triangle-size + 1) * 2);
       left: $f-dropdown-triangle-side-offset - 1;
       z-index: 98;
     }
+
+    &.right:before {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset;
+    }
+    &.right:after {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset - 1;
+    }
   }
 
   @if $max-width { max-width: $max-width; }
@@ -134,4 +143,4 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
     &.large   { max-width: 800px; }
   }
 
-}
+}

data/scss/foundation/components/_section.scss

@@ -203,11 +203,13 @@ $section-bottom-margin:          emCalc(20px) !default;
 @if $include-html-section-classes {
 
   /* Sections */
-  .section-container {
+  .section-container, .section-container.auto {
     @include section-container;
 
     section,
-    .section { @include section; }
+    .section {
+      @include section;
+    }
   }
 
   .section-container.tabs {
@@ -219,6 +221,12 @@ $section-bottom-margin:          emCalc(20px) !default;
 
   @media #{$small} {
 
+    .section-container.auto {
+      @include section-container(false, tabs);
+
+      section,
+      .section { @include section(tabs); }
+    }
     .section-container.accordion .section {
       padding-top: 0 !important;
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.0.8
+  version: 4.0.9
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-15 00:00:00.000000000 Z
+date: 2013-03-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -229,7 +229,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2268811908877619416
+      hash: -1567269957682062365
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -238,7 +238,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2268811908877619416
+      hash: -1567269957682062365
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23