zurb-foundation 4.0.4 → 4.0.5

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.0.4"
+  VERSION = "4.0.5"
 end

data/scss/foundation/_foundation-global.scss

@@ -83,6 +83,7 @@ $include-print-styles: true !default;
 
 // We use this to create equal side border radius on elements.
 @mixin side-radius($side, $radius) {
+  @include radius(0);
   @if $side == left {
     -moz-border-radius-bottomleft: $radius;
     -moz-border-radius-topleft: $radius;
@@ -174,6 +175,9 @@ $small-screen: emCalc(768px) !default;
 $medium-screen: emCalc(1280px) !default;
 $large-screen: emCalc(1440px) !default;
 
+$screen: "only screen" !default;
 $small: "only screen and (min-width:"#{$small-screen}")" !default;
 $medium: "only screen and (min-width:"#{$medium-screen}")" !default;
 $large: "only screen and (min-width:"#{$large-screen}")" !default;
+$landscape: "only screen and (orientation: landscape)" !default;
+$portrait: "only screen and (orientation: portrait)" !default;

data/scss/foundation/components/_block-grid.scss

@@ -35,8 +35,9 @@ $block-grid-media-queries: true !default;
     &>li {
       width: 100%/$per-row;
       padding: 0 $spacing $spacing;
+
+      &:nth-of-type(#{$per-row}n+1) { clear: both; }
     }
-    &:nth-of-type(#{$per-row}n+1) { clear: both; }
   }
 
 }
@@ -57,10 +58,9 @@ $block-grid-media-queries: true !default;
   @media #{$small} {
     @for $i from 1 through $block-grid-elements {
       .large-block-grid-#{($i)} {
-        @if      $i == 2 { @include block-grid(2,15px,false); }
-        @else if $i == 3 { @include block-grid(3,12px,false); }
-        @else { @include block-grid($i,$block-grid-default-spacing,false); }
+        @include block-grid($i,$block-grid-default-spacing,false);
       }
     }
+    [class*="small-block-grid-"] > li { clear: none !important; }
   }
 }

data/scss/foundation/components/_button-groups.scss

@@ -34,12 +34,12 @@ $button-bar-margin-right: emCalc(10px) !default;
 
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
-    &:first-child > a { @include side-radius($default-float, $button-radius); }
-    &:last-child > a { @include side-radius($default-opposite, $button-radius); }
+    &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
+    &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $button-radius); }
   }
   @else if $radius {
-    &:first-child > a { @include side-radius($default-float, $radius); }
-    &:last-child > a { @include side-radius($default-opposite, $radius); }
+    &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
+    &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $radius); }
   }
 
   // We use this to make the buttons even width across their container

data/scss/foundation/components/_buttons.scss

@@ -13,6 +13,7 @@ $button-display:          inline-block !default;
 $button-margin-bottom:    emCalc(20px) !default;
 
 // We use these to control button text styles.
+$button-font-family:      inherit !default;
 $button-font-color:       #fff !default;
 $button-font-color-alt:   #333 !default;
 $button-font-med:         emCalc(16px) !default;
@@ -47,7 +48,7 @@ $button-disabled-opacity: 0.6 !default;
     border-style: $button-border-style;
     border-width: $button-border-width;
     cursor: pointer;
-    font-family: inherit;
+    font-family: $button-font-family;
     font-weight: $button-font-weight;
     line-height: 1;
     margin: 0 0 $button-margin-bottom;

data/scss/foundation/components/_custom-forms.scss

@@ -45,6 +45,7 @@ $custom-dropdown-width-large:           434px !default;
 
 /* Custom Checkbox and Radio Inputs */
 form.custom {
+
   .custom {
     display: inline-block;
     width: 16px;
@@ -57,7 +58,6 @@ form.custom {
     &.radio { @include radius(1000px); }
 
     &.checkbox {
-      z-index: -1;
       &:before {
         content: "";
         display: block;

data/scss/foundation/components/_forms.scss

@@ -11,6 +11,7 @@ $label-font-size:                    emCalc(14px) !default;
 $label-font-weight:                  500 !default;
 $label-font-color:                   lighten(#000, 30%) !default;
 $label-bottom-margin:                emCalc(3px) !default;
+$input-font-family:                  inherit !default;
 $input-font-color:                   rgba(0,0,0,0.75) !default;
 $input-font-size:                    emCalc(14px) !default;
 $input-bg-color:                     #fff !default;
@@ -78,7 +79,7 @@ $input-error-message-font-color-alt: #333 !default;
 // We use this mixin to give all basic form elements their style
 @mixin form-element() {
   background-color: $input-bg-color;
-  font-family: inherit;
+  font-family: $input-font-family;
   border: $input-border-width $input-border-style $input-border-color;
   -webkit-box-shadow: $input-box-shadow;
   box-shadow: $input-box-shadow;
@@ -265,8 +266,6 @@ label { @include form-label;
 .postfix.button.radius { @include side-radius(right, $global-radius); }
 .prefix.button.round { @include side-radius(left, 1000px); }
 .postfix.button.round { @include side-radius(right, 1000px); }
-.prefix.button.round { @include side-radius(left, 1000px); }
-.postfix.button.round { @include side-radius(right, 1000px); }
 
 /* Separate prefix and postfix styles when on span so buttons keep their own */
 span.prefix { @include prefix();
@@ -334,4 +333,4 @@ label.error { @include form-label-error-color; }
 .error small,
 small.error {
   @include form-error-message;
-}
+}

data/scss/foundation/components/_global.scss

@@ -22,6 +22,9 @@ body {
   -webkit-font-smoothing: $font-smoothing;
 }
 
+// Override outline from normalize, we don't like it
+a:focus { outline: none; }
+
 // Grid Defaults to get images and embeds to work properly
 img,
 object,
@@ -40,16 +43,16 @@ img { -ms-interpolation-mode: bicubic; }
 }
 
 // Miscellaneous useful HTML classes
-.left         { float: left; }
-.right        { float: right; }
-.text-left    { text-align: left; }
-.text-right   { text-align: right; }
-.text-center  { text-align: center; }
-.text-justify { text-align: justify; }
+.left         { float: left !important; }
+.right        { float: right !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.text-center  { text-align: center !important; }
+.text-justify { text-align: justify !important; }
 .hide         { display: none; }
 
-// Get rid of gap under images by making them display: block; by default
-img { display: block; }
+// Get rid of gap under images by making them display: inline-block; by default
+img { display: inline-block; }
 
 //
 // Global resets for forms

data/scss/foundation/components/_magellan.scss

@@ -1,8 +1,13 @@
+//
+// Magellan Variables
+//
+$magellan-bg: #fff !default;
+
 @if $include-html-classes {
 
   [data-magellan-expedition] {
-    background: #fff;
-    z-index: 999;
+    background: $magellan-bg;
+    z-index: 997;
     min-width: 100%;
     padding: 10px;
 

data/scss/foundation/components/_orbit.scss

@@ -1,6 +1,7 @@
 // Orbit Settings
 
 // We use these to control the caption styles
+$orbit-container-bg: #f5f5f5 !default;
 $orbit-caption-bg-old-browser: #000 !default;
 $orbit-caption-bg-old: rgb(0,0,0) !default;
 $orbit-caption-bg: rgba(0,0,0,0.6) !default;
@@ -23,12 +24,15 @@ $orbit-slide-number-bg: rgb(0,0,0) !default;
 $orbit-slide-number-font-color: #fff !default;
 $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: #f5f5f5;
+  background: $orbit-container-bg;
 
   .orbit-slides-container {
     list-style: none;
@@ -177,6 +181,7 @@ $orbit-slide-number-padding: emCalc(5px) !default;
   .orbit-bullets { display: none; }
 }
 
+
 @media #{$small} {
 
   .touch {
@@ -188,6 +193,4 @@ $orbit-slide-number-padding: emCalc(5px) !default;
     .orbit-bullets { display: block; }
   }
 
-
-
 }

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

@@ -4,6 +4,7 @@
 
 // We use this to se the prog bar height
 $progress-bar-height: emCalc(25px) !default;
+$progress-bar-color: transparent !default;
 
 // We use these to control the border styles
 $progress-bar-border-color: darken(#fff, 20%) !default;
@@ -28,13 +29,14 @@ $progress-meter-alert-color: $alert-color !default;
 
 // We use this to set up the progress bar container
 @mixin progress-container {
+  background-color: $progress-bar-color;
   height: $progress-bar-height;
   border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
   padding: $progress-bar-pad;
   margin-bottom: $progress-bar-margin-bottom;
 }
 
-@mixin progress-meter($bg:$primary-color) {
+@mixin progress-meter($bg:$progress-meter-color) {
   background: $bg;
   height: 100%;
   display: block;
@@ -51,9 +53,9 @@ $progress-meter-alert-color: $alert-color !default;
     .meter {
       @include progress-meter;
     }
-    &.secondary .meter { @include progress-meter($bg:$secondary-color); }
-    &.success .meter { @include progress-meter($bg:$success-color); }
-    &.alert .meter { @include progress-meter($bg:$alert-color); }
+    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
+    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
+    &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
 
     &.radius { @include radius($global-radius);
       .meter { @include radius($global-radius - 1); }

data/scss/foundation/components/_section.scss

@@ -53,6 +53,13 @@ $section-bottom-margin:          emCalc(20px) !default;
   @else if $section-type == vertical-nav {
 
   }
+
+  // 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;
+  }
 }
 
 // We use this mixin to create the styles for sections as accordions.
@@ -108,10 +115,10 @@ $section-bottom-margin:          emCalc(20px) !default;
     position: static;
 
     .title {
-      top: 1px;
       width: auto;
       border: $section-border-size $section-border-style $section-border-color;
       border-right: 0;
+      border-bottom: 0;
       position: absolute;
       z-index: 1;
 
@@ -123,6 +130,7 @@ $section-bottom-margin:          emCalc(20px) !default;
       border: $section-border-size $section-border-style $section-border-color;
       position: absolute;
       z-index: 10;
+      top: -1px;
     }
 
     &.active {
@@ -157,6 +165,38 @@ $section-bottom-margin:          emCalc(20px) !default;
       }
     }
   }
+
+  // Horizontal Nav Styles
+  @else if $section-type == horizontal-nav {
+    padding-top: 0;
+    border: 0;
+    position: static;
+
+    .title {
+      width: auto;
+      border: $section-border-size $section-border-style $section-border-color;
+      border-left: 0;
+      top: -1px;
+      position: absolute;
+      z-index: 1;
+
+      a { width: 100%; }
+    }
+
+    .content { display: none; }
+
+    &.active {
+      .content {
+        display: block;
+        position: absolute;
+        z-index: 999;
+        left: 0;
+        top: -2px;
+        min-width: $section-vertical-nav-min-width;
+        border: $section-border-size $section-border-style $section-border-color;
+      }
+    }
+  }
 }
 
 
@@ -183,6 +223,13 @@ $section-bottom-margin:          emCalc(20px) !default;
       .section { @include section(vertical-nav); }
     }
 
+    .section-container.horizontal-nav {
+      @include section-container(false, horizontal-nav);
+
+      section,
+      .section { @include section(horizontal-nav); }
+    }
+
     .section-container.tabs {
       @include section-container(false, tabs);
 

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

@@ -106,7 +106,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
   // Menu toggle button on small devices
   .toggle-topbar {
     position: absolute;
-    right: 0;
+    #{$default-opposite}: 0;
     top: 0;
 
     a {
@@ -123,10 +123,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
     // Adding the class "menu-icon" will add the 3-line icon people love and adore.
     &.menu-icon {
-      right: $topbar-height / 3;
+      #{$default-opposite}: $topbar-height / 3;
       top: 50%;
       margin-top: -16px;
-      padding-left: 40px;
+      padding-#{$default-float}: 40px;
 
       a {
         text-indent: -48px;
@@ -138,7 +138,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
         span {
           position: absolute;
-          right: 0;
+          #{$default-opposite}: 0;
           display: block;
           width: 16px;
           height: 0;
@@ -208,8 +208,9 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     & > a {
       display: block;
       width: 100%;
-      padding: 12px 0 12px $topbar-height / 3;
-      color: $topbar-link-color;
+      color: $topbar-dropdown-link-color;
+      padding: 12px 0 12px 0;
+      padding-#{$default-float}: $topbar-height / 3;
       font-size: $topbar-link-font-size;
       font-weight: $topbar-link-weight;
       background: $topbar-dropdown-bg;
@@ -263,7 +264,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
         margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
         position: absolute;
         top: 50%;
-        right: 0;
+        #{$default-opposite}: 0;
       }
     }
 
@@ -321,7 +322,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
   .top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
     .toggle-topbar { display: none; }
 
-    .title-area { float: left; }
+    .title-area { float: $default-float; }
     .name h1 a { width: auto; }
 
     input,
@@ -349,7 +350,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
       display: inline;
 
       li {
-        float: left;
+        float: $default-float;
         .js-generated { display: none; }
       }
     }
@@ -390,7 +391,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
             border: none;
             content: "\00bb";
             margin-top: -7px;
-            right: 5px;
+            #{$default-opposite}: 5px;
           }
         }
       }
@@ -398,7 +399,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     }
 
     .dropdown {
-      left: 0;
+      #{$default-float}: 0;
       top: auto;
       background: transparent;
 
@@ -417,7 +418,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
         // Second Level Dropdowns
         .dropdown {
-          left: 100%;
+          #{$default-float}: 100%;
           top: 0;
         }
       }
@@ -426,8 +427,8 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     & > ul > .divider {
       border-bottom: none;
       border-top: none;
-      border-right: solid 1px lighten($topbar-bg, 10%);
-      border-left: solid 1px darken($topbar-bg, 10%);
+      border-#{$default-opposite}: solid 1px lighten($topbar-bg, 10%);
+      border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
       clear: none;
       height: $topbar-height;
       width: 0px;