zurb-foundation 4.0.3 → 4.0.4

data/lib/foundation/version.rb

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

data/scss/foundation.scss

@@ -2,12 +2,11 @@
 @charset "UTF-8";
 
 // This includes all of the foundation global elements that are needed to work with any of the other files.
-//
-// RENAME THIS TO _foundation-global.scss ONCE ALL THE OLD VARIABLES ARE OUT OF THE FILE.
 @import "foundation/foundation-global";
 
 // Foundation Components
 @import
+  "foundation/components/global",
   "foundation/components/grid",
   "foundation/components/visibility",
   "foundation/components/block-grid",

data/scss/foundation/_foundation-global.scss

@@ -84,20 +84,36 @@ $include-print-styles: true !default;
 // We use this to create equal side border radius on elements.
 @mixin side-radius($side, $radius) {
   @if $side == left {
-    -webkit-border-radius: $radius 0 0 $radius;
-    border-radius: $radius 0 0 $radius;
+    -moz-border-radius-bottomleft: $radius;
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
   }
   @else if $side == right {
-    -webkit-border-radius: 0 $radius $radius 0;
-    border-radius: 0 $radius $radius 0;
+    -moz-border-radius-topright: $radius;
+    -moz-border-radius-bottomright: $radius;
+    -webkit-border-top-right-radius: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
   @else if $side == top {
-    -webkit-border-radius: $radius $radius 0 0;
-    border-radius: $radius $radius 0 0;
+    -moz-border-radius-topright: $radius;
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-top-right-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
   }
   @else if $side == bottom {
-    -webkit-border-radius: 0 0 $radius $radius;
-    border-radius: 0 0 $radius $radius;
+    -moz-border-radius-bottomright: $radius;
+    -moz-border-radius-bottomleft: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }
 
@@ -153,71 +169,6 @@ $include-print-styles: true !default;
   &:after { clear: both; }
 }
 
-
-// Set box-sizing globally to handle padding and border widths
-*,
-*:before,
-*:after {
-  @include box-sizing(border-box);
-}
-
-html,
-body { font-size: $em-base; }
-
-// Default body styles
-body {
-  background: $body-bg;
-  color: $body-font-color;
-  padding: 0;
-  margin: 0;
-  font-family: $body-font-family;
-  font-weight: $body-font-weight;
-  font-style: $body-font-style;
-  line-height: 1;
-  position: relative;
-  -webkit-font-smoothing: $font-smoothing;
-}
-
-// Grid Defaults to get images and embeds to work properly
-img,
-object,
-embed { max-width: 100%; height: auto; }
-
-object,
-embed { height: 100%; }
-img { -ms-interpolation-mode: bicubic; }
-
-#map_canvas,
-.map_canvas {
-  img,
-  embed,
-  object { max-width: none !important;
-  }
-}
-
-// 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; }
-.hide         { display: none; }
-
-// Get rid of gap under images by making them display: block; by default
-img { display: block; }
-
-//
-// Global resets for forms
-//
-
-// Make sure textarea takes on height automatically
-textarea { height: auto; min-height: 50px; }
-
-// Make select elements 100% width by default
-select { width: 100%; }
-
-
 // Media Queries
 $small-screen: emCalc(768px) !default;
 $medium-screen: emCalc(1280px) !default;
@@ -225,4 +176,4 @@ $large-screen: emCalc(1440px) !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;
+$large: "only screen and (min-width:"#{$large-screen}")" !default;

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

@@ -46,7 +46,7 @@ $block-grid-media-queries: true !default;
   @media only screen {
     [class*="block-grid-"] { @include block-grid; }
 
-    @for $i from 2 through $block-grid-elements {
+    @for $i from 1 through $block-grid-elements {
       .small-block-grid-#{($i)} {
         @include block-grid($i,$block-grid-default-spacing,false);
       }
@@ -55,7 +55,7 @@ $block-grid-media-queries: true !default;
 
   /* Foundation Block Grids for above small breakpoint */
   @media #{$small} {
-    @for $i from 2 through $block-grid-elements {
+    @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); }

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

@@ -1,14 +1,24 @@
+//
+// Button Group Variables
+//
+$button-bar-margin-right: emCalc(10px) !default;
+
 //
 // Button Group Mixins
 //
 
 // We use this to add styles for a button group container
-@mixin button-group-container($styles:true) {
+@mixin button-group-container($styles:true, $float:false) {
   @if $styles {
     list-style: none;
-    margin: 0 0 $button-margin-bottom;
+    margin: 0;
     @include clearfix();
   }
+  @if $float {
+    float: #{$default-float};
+    margin-#{$default-opposite}: $button-bar-margin-right;
+    & div { overflow: hidden; }
+  }
 }
 
 // We use this to control styles for button groups
@@ -56,4 +66,9 @@
     }
   }
 
+  .button-bar {
+    @include clearfix;
+    .button-group { @include button-group-container($styles:false,$float:true); }
+  }
+
 }

data/scss/foundation/components/_buttons.scss

@@ -157,7 +157,7 @@ $button-disabled-opacity: 0.6 !default;
 
   // Default styles applied outside of media query
   .button {
-    @include button-base($display:block);
+    @include button-base;
     @include button-size;
     @include button-style;
 
@@ -168,7 +168,7 @@ $button-disabled-opacity: 0.6 !default;
     &.large  { @include button-size($padding:$button-lrg); }
     &.small  { @include button-size($padding:$button-sml); }
     &.tiny   { @include button-size($padding:$button-tny); }
-    &.expand { @include button-size($padding:false, $full-width:true); }
+    &.expand { @include button-size($full-width:true); }
 
     &.left-align  { text-align: left; text-indent: emCalc(12px); }
     &.right-align { text-align: right; padding-right: emCalc(12px); }

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

@@ -30,11 +30,14 @@ $custom-dropdown-font-size:             emCalc(14px) !default;
 $custom-dropdown-color-selected:        #eeeeee !default;
 $custom-dropdown-font-color-selected:   #000 !default;
 $custom-dropdown-shadow:                0 2px 2px 0px rgba(0,0,0,0.1) !default;
-$custom-dropdown-offset-top:            none !default;
+$custom-dropdown-offset-top:            auto !default;
 $custom-dropdown-list-padding:          emCalc(4px) !default;
 $custom-dropdown-left-padding:          emCalc(6px) !default;
 $custom-dropdown-right-padding:         emCalc(38px) !default;
 $custom-dropdown-list-item-min-height:  emCalc(24px) !default;
+$custom-dropdown-width-small:           134px !default;
+$custom-dropdown-width-medium:          254px !default;
+$custom-dropdown-width-large:           434px !default;
 
 // We decided not to make a mixin for the custom forms because
 // they rely on a very specific class naming structure.
@@ -171,14 +174,14 @@ form.custom {
       @include box-sizing(content-box);
     }
 
-    &.small { max-width: 134px !important; }
-    &.medium { max-width: 254px !important; }
-    &.large { max-width: 434px !important; }
+    &.small { max-width: $custom-dropdown-width-small; }
+    &.medium { max-width: $custom-dropdown-width-medium; }
+    &.large { max-width: $custom-dropdown-width-large; }
     &.expand { width: 100% !important; }
 
-    &.open.small ul { max-width: 134px !important; @include box-sizing(border-box); }
-    &.open.medium ul { max-width: 254px !important; @include box-sizing(border-box); }
-    &.open.large ul { max-width: 634px !important; @include box-sizing(border-box); }
+    &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
+    &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
+    &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
   }
 
   .custom.dropdown ul {

data/scss/foundation/components/_forms.scss

@@ -160,6 +160,8 @@ $input-error-message-font-color-alt: #333 !default;
   @if $is-button {
     padding-#{$default-float}: 0;
     padding-#{$default-opposite}: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     text-align: center;
     line-height: emCalc(34px);
   }
@@ -183,6 +185,8 @@ $input-error-message-font-color-alt: #333 !default;
   @if $is-button {
     padding-#{$default-float}: 0;
     padding-#{$default-opposite}: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     text-align: center;
     line-height: emCalc(34px);
   }
@@ -259,6 +263,10 @@ label { @include form-label;
 .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
 .prefix.button.radius { @include side-radius(left, $global-radius); }
 .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();
@@ -268,6 +276,26 @@ span.postfix { @include postfix();
   &.radius { @include side-radius(right, $global-radius); }
 }
 
+/* Input groups will automatically style first and last elements of the group */
+.input-group {
+  &.radius {
+    &>*:first-child,  &>*:first-child * {
+    	@include side-radius(left, $global-radius);
+    }
+    &>*:last-child, &>*:last-child * {
+    	@include side-radius(right, $global-radius);
+    }
+  }
+  &.round {
+  	&>*:first-child,  &>*:first-child * {
+  		@include side-radius(left, 1000px);
+  	}
+  	&>*:last-child, &>*:last-child * {
+  		@include side-radius(right, 1000px);
+  	}
+  }
+}
+
 /* We use this to get basic styling on all basic form elements */
 input[type="text"],
 input[type="password"],

data/scss/foundation/components/_global.scss

@@ -0,0 +1,62 @@
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+html,
+body { font-size: $em-base; }
+
+// Default body styles
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  padding: 0;
+  margin: 0;
+  font-family: $body-font-family;
+  font-weight: $body-font-weight;
+  font-style: $body-font-style;
+  line-height: 1;
+  position: relative;
+  -webkit-font-smoothing: $font-smoothing;
+}
+
+// Grid Defaults to get images and embeds to work properly
+img,
+object,
+embed { max-width: 100%; height: auto; }
+
+object,
+embed { height: 100%; }
+img { -ms-interpolation-mode: bicubic; }
+
+#map_canvas,
+.map_canvas {
+  img,
+  embed,
+  object { max-width: none !important;
+  }
+}
+
+// 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; }
+.hide         { display: none; }
+
+// Get rid of gap under images by making them display: block; by default
+img { display: block; }
+
+//
+// Global resets for forms
+//
+
+// Make sure textarea takes on height automatically
+textarea { height: auto; min-height: 50px; }
+
+// Make select elements 100% width by default
+select { width: 100%; }

data/scss/foundation/components/_orbit.scss

@@ -53,7 +53,7 @@ $orbit-slide-number-padding: emCalc(5px) !default;
         padding: 10px 14px;
         font-size: emCalc(14px);
 
-        * { color: #fff; }
+        * { color: $orbit-caption-font-color; }
       }
     }
   }

data/scss/foundation/components/_section.scss

@@ -64,9 +64,6 @@ $section-bottom-margin:          emCalc(20px) !default;
     border-top: $section-border-size $section-border-style $section-border-color;
     position: relative;
 
-    *>:first-child { padding-top: 0; }
-    *>:last-child { padding-bottom: 0; }
-
     .title {
       top: 0;
       cursor: pointer;
@@ -90,9 +87,12 @@ $section-bottom-margin:          emCalc(20px) !default;
       padding: $section-padding;
       background-color: $section-content-bg;
 
-      *:last-child { margin-bottom: 0; }
+      &>*:last-child { margin-bottom: 0; }
+      &>*:first-child { padding-top: 0; }
+      &>*:last-child { padding-bottom: 0; }
     }
 
+
     &.active {
       .content { display: block; }
       .title { background: $section-title-bg-active; }

data/scss/foundation/components/_switch.scss

@@ -102,19 +102,27 @@ $switch-label-outline:            1px dotted #888 !default;
     @include single-transition(all, $transition-speed, $transition-ease);
   }
 
-  // Change text alignment for the second label
-  input:last-of-type + label { text-align: right; }
-
   // When a label isn't :checked, we hide it as it slides away.
   input:not(:checked) + label { opacity: 0; }
 
   // Controlling the position of the labels as they are toggled.
-  input:checked { display: none; }
-  input { left: 0; }
-  input:first-of-type + label { left: -50%; }
-  input:first-of-type:checked + label { left: 0%; }
-  input:last-of-type + label { right: -50%; left: auto; }
-  input:last-of-type:checked + label { right: 0%; left: auto; }
+  input:checked { display: none !important; }
+  input { left: 0; display: block !important; }
+
+  // Left Label alignment and position changes, including fixes for while inside a custom form
+  input:first-of-type + label,
+  input:first-of-type + span + label { left: -50%; }
+  input:first-of-type:checked + label,
+  input:first-of-type:checked + span + label { left: 0%; }
+
+  // Right Label alignment and position changes, including fixes for while inside a custom form
+  input:last-of-type + label,
+  input:last-of-type + span + label { right: -50%; left: auto; text-align: right; }
+  input:last-of-type:checked + label,
+  input:last-of-type:checked + span + label { right: 0%; left: auto; }
+
+  // Hiding custom form spans since we auto-create them
+  span.custom { display: none !important; }
 
   // Bugfix for older Webkit, including mobile Webkit. Adapted from:
   // http://css-tricks.com/webkit-sibling-bug/

data/scss/foundation/components/_tooltips.scss

@@ -53,6 +53,7 @@ $tooltip-pip-size:            5px !default;
   width: 100%;
   color: $tooltip-font-color;
   background: $tooltip-bg;
+  @include radius($tooltip-radius);
 
   &>.nub {
     display: block;
@@ -68,8 +69,6 @@ $tooltip-pip-size:            5px !default;
     color: $has-tip-font-color-hover !important;
     border-bottom: $has-tip-border-bottom-hover !important;
   }
-
-  &.radius{ @include radius($tooltip-radius); }
 }
 
 .tap-to-close {