zurb-foundation 4.2.3 → 4.3.0

data/scss/foundation/components/_side-nav.scss

@@ -4,17 +4,17 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use this to control padding.
-$side-nav-padding: emCalc(14px) 0 !default;
+$side-nav-padding: emCalc(14, 0) !default;
 
 // We use these to control list styles.
 $side-nav-list-type: none !default;
 $side-nav-list-position: inside !default;
-$side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
+$side-nav-list-margin: emCalc(0, 0, 7, 0) !default;
 
 // We use these to control link styles.
 $side-nav-link-color: $primary-color !default;
 $side-nav-link-color-active: lighten(#000, 30%) !default;
-$side-nav-font-size: emCalc(14px) !default;
+$side-nav-font-size: emCalc(14) !default;
 $side-nav-font-weight: bold !default;
 
 // We use these to control border styles

data/scss/foundation/components/_split-buttons.scss

@@ -14,28 +14,28 @@ $split-button-padding-tny: $button-tny * 9 !default;
 $split-button-span-width-tny: $button-tny * 6.5 !default;
 $split-button-pip-size-tny: $button-tny !default;
 $split-button-pip-top-tny: $button-tny * 2 !default;
-$split-button-pip-default-float-tny: emCalc(-5px) !default;
+$split-button-pip-default-float-tny: emCalc(-5) !default;
 
 // We use these to control small split buttons
 $split-button-padding-sml: $button-sml * 7 !default;
 $split-button-span-width-sml: $button-sml * 5 !default;
 $split-button-pip-size-sml: $button-sml !default;
 $split-button-pip-top-sml: $button-sml * 1.5 !default;
-$split-button-pip-default-float-sml: emCalc(-9px) !default;
+$split-button-pip-default-float-sml: emCalc(-9) !default;
 
 // We use these to control medium split buttons
 $split-button-padding-med: $button-med * 6.4 !default;
 $split-button-span-width-med: $button-med * 4 !default;
-$split-button-pip-size-med: $button-med - emCalc(3px) !default;
+$split-button-pip-size-med: $button-med - emCalc(3) !default;
 $split-button-pip-top-med: $button-med * 1.5 !default;
-$split-button-pip-default-float-med: emCalc(-9px) !default;
+$split-button-pip-default-float-med: emCalc(-9) !default;
 
 // We use these to control large split buttons
 $split-button-padding-lrg: $button-lrg * 6 !default;
 $split-button-span-width-lrg: $button-lrg * 3.75 !default;
-$split-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
-$split-button-pip-top-lrg: $button-lrg + emCalc(5px) !default;
-$split-button-pip-default-float-lrg: emCalc(-9px) !default;
+$split-button-pip-size-lrg: $button-lrg - emCalc(6) !default;
+$split-button-pip-top-lrg: $button-lrg + emCalc(5) !default;
+$split-button-pip-default-float-lrg: emCalc(-9) !default;
 
 
 //

data/scss/foundation/components/_sub-nav.scss

@@ -4,11 +4,11 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use these to control margin and padding
-$sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
-$sub-nav-list-padding-top: emCalc(4px) !default;
+$sub-nav-list-margin: emCalc(-4, 0, 18) !default;
+$sub-nav-list-padding-top: emCalc(4) !default;
 
 // We use this to control the definition
-$sub-nav-font-size: emCalc(14px) !default;
+$sub-nav-font-size: emCalc(14) !default;
 $sub-nav-font-color: #999 !default;
 $sub-nav-font-weight: normal !default;
 $sub-nav-text-decoration: none !default;
@@ -18,7 +18,7 @@ $sub-nav-border-radius: 1000px !default;
 $sub-nav-active-font-weight: bold !default;
 $sub-nav-active-bg: $primary-color !default;
 $sub-nav-active-color: #fff !default;
-$sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
+$sub-nav-active-padding: emCalc(3, 9) !default;
 $sub-nav-active-cursor: default !default;
 
 //
@@ -32,14 +32,14 @@ $sub-nav-active-cursor: default !default;
   margin: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
   margin-#{$opposite-direction}: 0;
-  margin-#{$default-float}: emCalc(-9px);
+  margin-#{$default-float}: emCalc(-9);
 
   dt,
   dd {
     float: $default-float;
     display: inline;
-    margin-#{$default-float}: emCalc(9px);
-    margin-bottom: emCalc(10px);
+    margin-#{$default-float}: emCalc(9);
+    margin-bottom: emCalc(10);
     font-weight: $sub-nav-font-weight;
     font-size: $font-size;
 

data/scss/foundation/components/_switch.scss

@@ -14,7 +14,7 @@ $switch-height-tny: 22px !default;
 $switch-height-sml: 28px !default;
 $switch-height-med: 36px !default;
 $switch-height-lrg: 44px !default;
-$switch-bottom-margin: emCalc(20px) !default;
+$switch-bottom-margin: emCalc(20) !default;
 
 // We use these to control default font sizes for our classes.
 $switch-font-size-tny: 11px !default;
@@ -35,7 +35,7 @@ $switch-positive-color: lighten($success-color, 50%) !default;
 $switch-negative-color: #f5f5f5 !default;
 
 // Outline Style for tabbing through switches
-$switch-label-outline:            1px dotted #888 !default;
+$switch-label-outline: 1px dotted #888 !default;
 
 
 //
@@ -142,7 +142,7 @@ $switch-label-outline:            1px dotted #888 !default;
   height: $height;
 
   label {
-    padding: 0 emCalc($switch-label-side-padding);
+    padding: emCalc(0, $switch-label-side-padding);
     line-height: $line-height;
     font-size: emCalc($font-size);
   }
@@ -251,7 +251,7 @@ $switch-label-outline:            1px dotted #888 !default;
       // Make the switch completely round, like a pill
       &.round { @include radius(1000px);
         span:last-child { @include radius(999px); }
-        label { padding: 0 emCalc($switch-label-side-padding + 3px); }
+        label { padding: emCalc(0, $switch-label-side-padding + 3); }
       }
 
     }

data/scss/foundation/components/_tables.scss

@@ -14,20 +14,20 @@ $table-border-color: #ddd !default;
 
 // These control the table head styles
 $table-head-bg: #f5f5f5 !default;
-$table-head-font-size: emCalc(14px) !default;
+$table-head-font-size: emCalc(14) !default;
 $table-head-font-color: #222 !default;
 $table-head-font-weight: bold !default;
-$table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px) !default;
+$table-head-padding: emCalc(8, 10, 10) !default;
 
 // These control the row padding and font styles
-$table-row-padding: emCalc(9px) emCalc(10px) !default;
-$table-row-font-size: emCalc(14px) !default;
+$table-row-padding: emCalc(9, 10) !default;
+$table-row-font-size: emCalc(14) !default;
 $table-row-font-color: #222 !default;
-$table-line-height: emCalc(18px) !default;
+$table-line-height: emCalc(18) !default;
 
 // These are for controlling the display and margin of tables
 $table-display: table-cell !default;
-$table-margin-bottom: emCalc(20px) !default;
+$table-margin-bottom: emCalc(20) !default;
 
 
 //

data/scss/foundation/components/_tooltips.scss

@@ -10,16 +10,16 @@ $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
 $has-tip-font-color-hover: $primary-color !default;
 $has-tip-cursor-type: help !default;
 
-$tooltip-padding: emCalc(8px) !default;
+$tooltip-padding: emCalc(8) !default;
 $tooltip-bg: #000 !default;
-$tooltip-font-size: emCalc(15px) !default;
+$tooltip-font-size: emCalc(15) !default;
 $tooltip-font-weight: bold !default;
 $tooltip-font-color: #fff !default;
 $tooltip-line-height: 1.3 !default;
-$tooltip-close-font-size: emCalc(10px) !default;
+$tooltip-close-font-size: emCalc(10) !default;
 $tooltip-close-font-weight: normal !default;
 $tooltip-close-font-color: #888 !default;
-$tooltip-font-size-sml: emCalc(14px) !default;
+$tooltip-font-size-sml: emCalc(14) !default;
 $tooltip-radius: $global-radius !default;
 $tooltip-pip-size: 5px !default;
 

data/scss/foundation/components/_top-bar.scss

@@ -8,14 +8,14 @@ $topbar-bg: #111 !default;
 
 // Height and margin
 $topbar-height: 45px !default;
-$topbar-margin-bottom: emCalc(30px) !default;
+$topbar-margin-bottom: emCalc(30) !default;
 
 // Control Input height for top bar
 $topbar-input-height: 2.45em !default;
 
 // Controlling the styles for the title in the top bar
 $topbar-title-weight: bold !default;
-$topbar-title-font-size: emCalc(17px) !default;
+$topbar-title-font-size: emCalc(17) !default;
 
 // Style the top bar dropdown elements
 $topbar-dropdown-bg: #222 !default;
@@ -30,7 +30,7 @@ $topbar-link-color: #fff !default;
 $topbar-link-color-hover: #fff !default;
 $topbar-link-color-active: #fff !default;
 $topbar-link-weight: bold !default;
-$topbar-link-font-size: emCalc(13px) !default;
+$topbar-link-font-size: emCalc(13) !default;
 $topbar-link-hover-lightness: -30% !default; // Darken by 30%
 $topbar-link-bg-hover: darken($topbar-bg, 3%) !default;
 $topbar-link-bg-active: darken($topbar-bg, 3%) !default;
@@ -38,11 +38,11 @@ $topbar-link-bg-active: darken($topbar-bg, 3%) !default;
 $topbar-dropdown-label-color: #555 !default;
 $topbar-dropdown-label-text-transform: uppercase !default;
 $topbar-dropdown-label-font-weight: bold !default;
-$topbar-dropdown-label-font-size: emCalc(10px) !default;
+$topbar-dropdown-label-font-size: emCalc(10) !default;
 
 // Top menu icon styles
 $topbar-menu-link-transform: uppercase !default;
-$topbar-menu-link-font-size: emCalc(13px) !default;
+$topbar-menu-link-font-size: emCalc(13) !default;
 $topbar-menu-link-weight: bold !default;
 $topbar-menu-link-color: #fff !default;
 $topbar-menu-icon-color: #fff !default;
@@ -51,7 +51,7 @@ $topbar-menu-icon-color-toggled: #888 !default;
 
 // Transitions and breakpoint styles
 $topbar-transition-speed: 300ms !default;
-$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
+$topbar-breakpoint: emCalc(940) !default; // Change to 9999px for always mobile layout
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
 
 // Divider Styles
@@ -68,7 +68,7 @@ $topbar-sticky-class: ".sticky" !default;
     width: 100%;
     background: $topbar-bg;
 
-    .top-bar { margin-bottom: 0; }
+    .top-bar { margin-bottom: $topbar-margin-bottom; }
   }
 
   // Wrapped around .top-bar to make it stick to the top
@@ -324,6 +324,9 @@ $topbar-sticky-class: ".sticky" !default;
         a {
           font-weight: normal;
           padding: 8px $topbar-height / 3;
+          &.parent-link {
+            font-weight: $topbar-link-weight;
+          }
         }
 
         &.title h5 { margin-bottom: 0;
@@ -369,7 +372,7 @@ $topbar-sticky-class: ".sticky" !default;
       input,
       .button {
         line-height: 2em;
-        font-size: emCalc(14px);
+        font-size: emCalc(14);
         height: 2em;
         padding: 0 10px;
         position: relative;
@@ -382,6 +385,7 @@ $topbar-sticky-class: ".sticky" !default;
     .contain-to-grid .top-bar {
       max-width: $row-width;
       margin: 0 auto;
+      margin-bottom: $topbar-margin-bottom;
     }
 
     .top-bar-section {
@@ -423,7 +427,7 @@ $topbar-sticky-class: ".sticky" !default;
           & > .dropdown { visibility: hidden; }
         }
 
-        &.hover {
+        &.hover, &.not-click:hover {
           & > .dropdown {
             visibility: visible;
           }
@@ -501,7 +505,7 @@ $topbar-sticky-class: ".sticky" !default;
     // Degrade gracefully when Javascript is disabled. Displays dropdown and changes 
     // background & text color on hover.
     .no-js .top-bar-section {
-	  ul li {    
+	  ul li {
         // Apply the hover link color when it has that class
         &:hover > a {
           background: $topbar-link-bg-hover;

data/scss/foundation/components/_type.scss

@@ -14,11 +14,11 @@ $header-bottom-margin: .5em !default;
 $header-text-rendering: optimizeLegibility !default;
 
 // We use these to control header font sizes
-$h1-font-size: emCalc(44px) !default;
-$h2-font-size: emCalc(37px) !default;
-$h3-font-size: emCalc(27px) !default;
-$h4-font-size: emCalc(23px) !default;
-$h5-font-size: emCalc(18px) !default;
+$h1-font-size: emCalc(44) !default;
+$h2-font-size: emCalc(37) !default;
+$h3-font-size: emCalc(27) !default;
+$h4-font-size: emCalc(23) !default;
+$h5-font-size: emCalc(18) !default;
 $h6-font-size: 1em !default;
 
 // These control how subheaders are styled.
@@ -37,8 +37,8 @@ $paragraph-font-family: inherit !default;
 $paragraph-font-weight: normal !default;
 $paragraph-font-size: 1em !default;
 $paragraph-line-height: 1.6 !default;
-$paragraph-margin-bottom: emCalc(20px) !default;
-$paragraph-aside-font-size: emCalc(14px) !default;
+$paragraph-margin-bottom: emCalc(20) !default;
+$paragraph-aside-font-size: emCalc(14) !default;
 $paragraph-aside-line-height: 1.35 !default;
 $paragraph-aside-font-style: italic !default;
 $paragraph-text-rendering: optimizeLegibility !default;
@@ -57,21 +57,21 @@ $anchor-font-color-hover: darken($primary-color, 5%) !default;
 $hr-border-width: 1px !default;
 $hr-border-style: solid !default;
 $hr-border-color: #ddd !default;
-$hr-margin: emCalc(20px) !default;
+$hr-margin: emCalc(20) !default;
 
 // We use these to style lists
 $list-style-position: outside !default;
 $list-side-margin: 0 !default;
-$list-nested-margin: emCalc(20px) !default;
+$list-nested-margin: emCalc(20) !default;
 $definition-list-header-weight: bold !default;
 $definition-list-header-margin-bottom: .3em !default;
-$definition-list-margin-bottom: emCalc(12px) !default;
+$definition-list-margin-bottom: emCalc(12) !default;
 
 // We use these to style blockquotes
 $blockquote-font-color: lighten($header-font-color, 30%) !default;
-$blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px) !default;
+$blockquote-padding: emCalc(9, 20, 0, 19) !default;
 $blockquote-border: 1px solid #ddd !default;
-$blockquote-cite-font-size: emCalc(13px) !default;
+$blockquote-cite-font-size: emCalc(13) !default;
 $blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
 $blockquote-cite-link-color: $blockquote-cite-font-color !default;
 
@@ -79,8 +79,8 @@ $blockquote-cite-link-color: $blockquote-cite-font-color !default;
 $acronym-underline: 1px dotted #ddd !default;
 
 // We use these to control padding and margin
-$microformat-padding: emCalc(10px) emCalc(12px) !default;
-$microformat-margin: 0 0 emCalc(20px) 0 !default;
+$microformat-padding: emCalc(10, 12) !default;
+$microformat-margin: emCalc(0, 0, 20, 0) !default;
 
 // We use these to control the border styles
 $microformat-border-width: 1px !default;
@@ -89,13 +89,13 @@ $microformat-border-color: #ddd !default;
 
 // We use these to control full name font styles
 $microformat-fullname-font-weight: bold !default;
-$microformat-fullname-font-size: emCalc(15px) !default;
+$microformat-fullname-font-size: emCalc(15) !default;
 
 // We use this to control the summary font styles
 $microformat-summary-font-weight: bold !default;
 
 // We use this to control abbr padding
-$microformat-abbr-padding: 0 emCalc(1px) !default;
+$microformat-abbr-padding: emCalc(0, 1) !default;
 
 // We use this to control abbr font styles
 $microformat-abbr-font-weight: bold !default;
@@ -108,7 +108,7 @@ $microformat-abbr-font-decoration: none !default;
 
 // These will throw a deprecation warning if used within a media query.
 %lead {
-  font-size: $paragraph-font-size + emCalc(3.5px);
+  font-size: $paragraph-font-size + emCalc(3.5);
   line-height: 1.6;
 }
 
@@ -186,7 +186,7 @@ $microformat-abbr-font-decoration: none !default;
     text-rendering: $header-text-rendering;
     margin-top: $header-top-margin;
     margin-bottom: $header-bottom-margin;
-    line-height: $header-line-height - emCalc(3px);
+    line-height: $header-line-height - emCalc(3);
 
     small {
       font-size: $small-font-size;
@@ -195,10 +195,10 @@ $microformat-abbr-font-decoration: none !default;
     }
   }
 
-  h1 { font-size: $h1-font-size - emCalc(10px); }
-  h2 { font-size: $h2-font-size - emCalc(10px); }
-  h3 { font-size: $h3-font-size - emCalc(5px); }
-  h4 { font-size: $h4-font-size - emCalc(5px); }
+  h1 { font-size: $h1-font-size - emCalc(10); }
+  h2 { font-size: $h2-font-size - emCalc(10); }
+  h3 { font-size: $h3-font-size - emCalc(5); }
+  h4 { font-size: $h4-font-size - emCalc(5); }
   h5 { font-size: $h5-font-size; }
   h6 { font-size: $h6-font-size; }
 
@@ -208,7 +208,7 @@ $microformat-abbr-font-decoration: none !default;
     border: $hr-border-style $hr-border-color;
     border-width: $hr-border-width 0 0;
     clear: both;
-    margin: $hr-margin 0 ($hr-margin - emCalc(1px));
+    margin: $hr-margin 0 ($hr-margin - emCalc(1));
     height: 0;
   }
 

data/templates/project/index.html

@@ -4,14 +4,14 @@
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en" <% if template[:options][:rtl] %>dir="rtl"<% end %>> <!--<![endif]-->
 
 <head>
-	<meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
+	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <title>Foundation 4</title>
 
   <% if template[:options][:customizer_used] %>
-  <link rel="stylesheet" href="<%= css_dir %>/foundation.css" />
+  <link rel="stylesheet" href="<%= css_dir %>/foundation.css">
   <% else %>
-  <link rel="stylesheet" href="<%= css_dir %>/app.css" />
+  <link rel="stylesheet" href="<%= css_dir %>/app.css">
   <% end %>
 
   <script src="<%= javascripts_dir %>/vendor/custom.modernizr.js"></script>

data/templates/project/scss/app.scss

@@ -12,6 +12,14 @@
 
 // @import "foundation/components/global"; // *always required
 // @import "foundation/components/grid";
+
+//
+// Use this grid if you want to start using the new Foundation 5 grid early.
+// It will change breakpoints to min-width: 640px and 1024px.
+//
+// @import "foundation/components/grid-5";
+//
+
 // @import "foundation/components/visibility";
 // @import "foundation/components/block-grid";
 // @import "foundation/components/type";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.2.3
+  version: 4.3.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-26 00:00:00.000000000 Z
+date: 2013-07-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -70,6 +70,7 @@ files:
 - docs/_sidebar.html.erb
 - docs/changelog.html.erb
 - docs/compile.rb
+- docs/components/abide.html.erb
 - docs/components/alert-boxes.html.erb
 - docs/components/block-grid.html.erb
 - docs/components/breadcrumbs.html.erb
@@ -111,12 +112,22 @@ files:
 - docs/config/deploy.rb
 - docs/controller.rb
 - docs/css/_coderay.scss
+- docs/css/_footer.scss
+- docs/css/_offcanvas.scss
 - docs/css/_settings.scss
 - docs/css/docs.scss
 - docs/css/normalize.scss
 - docs/css/qunit-composite.css
 - docs/css/qunit.css
 - docs/faq.html.erb
+- docs/fonts/ProximaNova-Reg-webfont.eot
+- docs/fonts/ProximaNova-Reg-webfont.svg
+- docs/fonts/ProximaNova-Reg-webfont.ttf
+- docs/fonts/ProximaNova-Reg-webfont.woff
+- docs/fonts/proximanovacond-bold-webfont.eot
+- docs/fonts/proximanovacond-bold-webfont.svg
+- docs/fonts/proximanovacond-bold-webfont.ttf
+- docs/fonts/proximanovacond-bold-webfont.woff
 - docs/img/demos/demo1-th.jpg
 - docs/img/demos/demo1.jpg
 - docs/img/demos/demo2-th.jpg
@@ -132,14 +143,26 @@ files:
 - docs/img/demos/interchange/med.jpg
 - docs/img/demos/interchange/small.jpg
 - docs/img/demos/interchange/smallest.jpg
+- docs/img/demos/orbit/demo1.jpg
+- docs/img/demos/orbit/demo2.jpg
+- docs/img/demos/orbit/demo3.jpg
 - docs/img/favicons/apple-touch-icon-114x114-precomposed.png
 - docs/img/favicons/apple-touch-icon-144x144-precomposed.png
 - docs/img/favicons/apple-touch-icon-72x72-precomposed.png
 - docs/img/favicons/apple-touch-icon-precomposed.png
 - docs/img/favicons/favicon.ico
+- docs/img/icons/footer-icons.png
+- docs/img/icons/footer-top-icons.png
+- docs/img/icons/social.png
+- docs/img/offcanvas/footer-icons.png
+- docs/img/offcanvas/menu-wht.png
+- docs/img/offcanvas/search.png
+- docs/img/offcanvas/zurb-logo.png
+- docs/img/offcanvas/zurb-wht.png
 - docs/index.html.erb
 - docs/javascript.html.erb
 - docs/js/docs.js
+- docs/js/jquery.offcanvas.js
 - docs/js/qunit-composite.js
 - docs/js/qunit.js
 - docs/js/tests/tabs/simple_tabs.html
@@ -153,6 +176,7 @@ files:
 - docs/sass.html.erb
 - docs/support.html.erb
 - foundation.gemspec
+- js/foundation/foundation.abide.js
 - js/foundation/foundation.alerts.js
 - js/foundation/foundation.clearing.js
 - js/foundation/foundation.cookie.js
@@ -196,6 +220,7 @@ files:
 - scss/foundation/components/_flex-video.scss
 - scss/foundation/components/_forms.scss
 - scss/foundation/components/_global.scss
+- scss/foundation/components/_grid-5.scss
 - scss/foundation/components/_grid.scss
 - scss/foundation/components/_inline-lists.scss
 - scss/foundation/components/_joyride.scss
@@ -243,7 +268,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2423571560475878438
+      hash: 3735898453351484891
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -252,7 +277,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2423571560475878438
+      hash: 3735898453351484891
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23