zurb-foundation 4.3.1 → 4.3.2

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(20) !default;
+$switch-bottom-margin: em-calc(20) !default;
 
 // We use these to control default font sizes for our classes.
 $switch-font-size-tny: 11px !default;
@@ -47,7 +47,6 @@ $switch-label-outline: 1px dotted #888 !default;
 
   // Default position and structure for switch container.
   position: relative;
-  width: 100%;
   padding: 0;
   display: block;
   overflow: hidden;
@@ -127,7 +126,13 @@ $switch-label-outline: 1px dotted #888 !default;
 
   // Bugfix for older Webkit, including mobile Webkit. Adapted from:
   // http://css-tricks.com/webkit-sibling-bug/
-  @if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
+  @media only screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:480px) {
+    @if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
+  }
+
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5) {
+    @if $experimental { -webkit-animation: none 0; }
+  }
 
   form.custom & .hidden-field {
     margin-left: auto;
@@ -139,25 +144,25 @@ $switch-label-outline: 1px dotted #888 !default;
 // We use this mixin to create the size styles for switches.
 @mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
 
-  height: $height;
+  height: em-calc($height);
 
   label {
-    padding: emCalc(0, $switch-label-side-padding);
+    padding: em-calc(0, $switch-label-side-padding);
     line-height: $line-height;
-    font-size: emCalc($font-size);
+    font-size: em-calc($font-size);
   }
 
   input {
     // Move the paddle to the right position
     &:first-of-type:checked ~ span:last-child {
       #{$default-float}: 100%;
-      margin-#{$default-float}: emCalc(-$height + 1px);
+      margin-#{$default-float}: em-calc(-$height + 1px);
     }
   }
 
   span:last-child {
-    width: emCalc($height);
-    height: emCalc($height);
+    width: em-calc($height);
+    height: em-calc($height);
   }
 
 }
@@ -251,12 +256,11 @@ $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: emCalc(0, $switch-label-side-padding + 3); }
+        label { padding: em-calc(0 $switch-label-side-padding + 3); }
       }
 
     }
 
     @if $experimental { @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } } }
-
   }
 }

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(14) !default;
+$table-head-font-size: em-calc(14) !default;
 $table-head-font-color: #222 !default;
 $table-head-font-weight: bold !default;
-$table-head-padding: emCalc(8, 10, 10) !default;
+$table-head-padding: em-calc(8 10 10) !default;
 
 // These control the row padding and font styles
-$table-row-padding: emCalc(9, 10) !default;
-$table-row-font-size: emCalc(14) !default;
+$table-row-padding: em-calc(9 10) !default;
+$table-row-font-size: em-calc(14) !default;
 $table-row-font-color: #222 !default;
-$table-line-height: emCalc(18) !default;
+$table-line-height: em-calc(18) !default;
 
 // These are for controlling the display and margin of tables
 $table-display: table-cell !default;
-$table-margin-bottom: emCalc(20) !default;
+$table-margin-bottom: em-calc(20) !default;
 
 
 //

data/scss/foundation/components/_thumbs.scss

@@ -48,8 +48,6 @@ $thumb-transition-speed: 200ms !default;
 
     &.radius { @include radius($thumb-radius); }
   }
-  a.th { display: inline-block; }
-
-}
-
+  a.th { display: inline-block; max-width:100%; }
 
+}

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(8) !default;
+$tooltip-padding: em-calc(8) !default;
 $tooltip-bg: #000 !default;
-$tooltip-font-size: emCalc(15) !default;
+$tooltip-font-size: em-calc(15) !default;
 $tooltip-font-weight: bold !default;
 $tooltip-font-color: #fff !default;
 $tooltip-line-height: 1.3 !default;
-$tooltip-close-font-size: emCalc(10) !default;
+$tooltip-close-font-size: em-calc(10) !default;
 $tooltip-close-font-weight: normal !default;
 $tooltip-close-font-color: #888 !default;
-$tooltip-font-size-sml: emCalc(14) !default;
+$tooltip-font-size-sml: em-calc(14) !default;
 $tooltip-radius: $global-radius !default;
 $tooltip-pip-size: 5px !default;
 

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

@@ -4,23 +4,24 @@
 $include-html-top-bar-classes: $include-html-classes !default;
 
 // Background color for the top bar
-$topbar-bg: #111 !default;
+$topbar-bg-color: #111 !default;
+$topbar-bg: $topbar-bg-color !default;
 
 // Height and margin
 $topbar-height: 45px !default;
-$topbar-margin-bottom: emCalc(30) !default;
+$topbar-margin-bottom: 0 !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(17) !default;
+$topbar-title-font-size: em-calc(17) !default;
 
 // Style the top bar dropdown elements
 $topbar-dropdown-bg: #222 !default;
 $topbar-dropdown-link-color: #fff !default;
-$topbar-dropdown-link-bg: lighten($topbar-bg, 5%) !default;
+$topbar-dropdown-link-bg: lighten($topbar-bg-color, 5%) !default;
 $topbar-dropdown-toggle-size: 5px !default;
 $topbar-dropdown-toggle-color: #fff !default;
 $topbar-dropdown-toggle-alpha: 0.5 !default;
@@ -30,19 +31,21 @@ $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(13) !default;
+$topbar-link-font-size: em-calc(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;
+$topbar-link-bg-hover: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness) !default;
+$topbar-link-bg-active: darken($topbar-bg-color, 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(10) !default;
+$topbar-dropdown-label-font-size: em-calc(10) !default;
+$topbar-dropdown-label-bg: lighten($topbar-bg-color, 5%) !default;
 
 // Top menu icon styles
 $topbar-menu-link-transform: uppercase !default;
-$topbar-menu-link-font-size: emCalc(13) !default;
+$topbar-menu-link-font-size: em-calc(13) !default;
 $topbar-menu-link-weight: bold !default;
 $topbar-menu-link-color: #fff !default;
 $topbar-menu-icon-color: #fff !default;
@@ -51,15 +54,17 @@ $topbar-menu-icon-color-toggled: #888 !default;
 
 // Transitions and breakpoint styles
 $topbar-transition-speed: 300ms !default;
-$topbar-breakpoint: emCalc(940) !default; // Change to 9999px for always mobile layout
+// Using em-calc for the below breakpoint causes issues with top bar
+$topbar-breakpoint: 940px !default; // Change to 9999px for always mobile layout
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
 
 // Divider Styles
-$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%) !default;
-$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%) !default;
+$topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%) !default;
+$topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%) !default;
 
 // Sticky Class
 $topbar-sticky-class: ".sticky" !default;
+$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
 
 @if $include-html-top-bar-classes != false {
 
@@ -78,6 +83,24 @@ $topbar-sticky-class: ".sticky" !default;
     position: fixed;
     top: 0;
     z-index: 99;
+
+    &.expanded:not(.top-bar) {
+        overflow-y: auto;
+        height: auto;
+        width: 100%;
+        max-height: 100%;
+
+      .title-area {
+        position: fixed;
+        width: 100%;
+        z-index: 99;
+      }
+      // Ensure you can scroll the menu on small screens
+      .top-bar-section {
+        z-index: 98;
+        margin-top: $topbar-height;
+      }
+    }
   }
 
   .top-bar {
@@ -246,25 +269,27 @@ $topbar-sticky-class: ".sticky" !default;
         &.button {
           background: $primary-color;
           font-size: $topbar-link-font-size;
-          &.hover {
+           padding-right: $topbar-height / 3;
+           padding-left: $topbar-height / 3;
+          &:hover {
             background: darken($primary-color, 10%);
           }
         }
         &.button.secondary {
           background: $secondary-color;
-          &.hover {
+          &:hover {
             background: darken($secondary-color, 10%);
           }
         }
         &.button.success {
           background: $success-color;
-          &.hover {
+          &:hover {
             background: darken($success-color, 10%);
           }
         }
         &.button.alert {
           background: $alert-color;
-          &.hover {
+          &:hover {
             background: darken($alert-color, 10%);
           }
         }
@@ -272,7 +297,7 @@ $topbar-sticky-class: ".sticky" !default;
       }
 
       // Apply the hover link color when it has that class
-      &.hover > a {
+      &:hover > a {
         background: $topbar-link-bg-hover;
         color: $topbar-link-color-hover;
       }
@@ -293,7 +318,9 @@ $topbar-sticky-class: ".sticky" !default;
 
       & > a {
         &:after {
-          @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
+          @if ($topbar-arrows){
+            @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
+          }
           margin-#{$opposite-direction}: $topbar-height / 3;
           margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
           position: absolute;
@@ -304,7 +331,7 @@ $topbar-sticky-class: ".sticky" !default;
 
       &.moved { position: static;
         & > .dropdown {
-          visibility: visible;
+          display: block;
         }
       }
     }
@@ -314,7 +341,7 @@ $topbar-sticky-class: ".sticky" !default;
       position: absolute;
       #{$default-float}: 100%;
       top: 0;
-      visibility: hidden;
+      display: none;
       z-index: 99;
 
       li {
@@ -372,7 +399,7 @@ $topbar-sticky-class: ".sticky" !default;
       input,
       .button {
         line-height: 2em;
-        font-size: emCalc(14);
+        font-size: em-calc(14);
         height: 2em;
         padding: 0 10px;
         position: relative;
@@ -404,32 +431,42 @@ $topbar-sticky-class: ".sticky" !default;
       }
 
       li {
+        &.hover {
+          > a:not(.button) {
+            background: $topbar-link-bg-hover;
+            color: $topbar-link-color-hover;
+          }
+        }
         a:not(.button) {
           padding: 0 $topbar-height / 3;
           line-height: $topbar-height;
           background: $topbar-bg;
-          &.hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
+          &:hover { background: $topbar-link-bg-hover; }
         }
       }
 
       .has-dropdown {
-        & > a {
-          padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
 
-          &:after {
-            @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
-            margin-top: -($topbar-dropdown-toggle-size / 2);
-            top: $topbar-height / 2;
+        @if($topbar-arrows){
+
+          & > a {
+            padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
+            &:after {
+              @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
+              margin-top: -($topbar-dropdown-toggle-size / 2);
+              top: $topbar-height / 2;
+            }
           }
+
         }
 
         &.moved { position: relative;
-          & > .dropdown { visibility: hidden; }
+          & > .dropdown { display: none; }
         }
 
         &.hover, &.not-click:hover {
           & > .dropdown {
-            visibility: visible;
+            display: block;
           }
         }
 
@@ -438,7 +475,8 @@ $topbar-sticky-class: ".sticky" !default;
             &:after {
               border: none;
               content: "\00bb";
-              margin-top: -16px;
+              top: 1em;
+              margin-top: -7px;
               #{$opposite-direction}: 5px;
             }
           }
@@ -463,7 +501,7 @@ $topbar-sticky-class: ".sticky" !default;
 
           label {
             white-space: nowrap;
-            background: lighten($topbar-bg, 5%);
+            background: $topbar-dropdown-label-bg;
           }
 
           // Second Level Dropdowns
@@ -482,7 +520,7 @@ $topbar-sticky-class: ".sticky" !default;
         border-#{$default-float}: $topbar-divider-border-top;
         clear: none;
         height: $topbar-height;
-        width: 0px;
+        width: 0;
       }
 
       .has-form {
@@ -501,8 +539,8 @@ $topbar-sticky-class: ".sticky" !default;
         }
       }
     }
-    
-    // Degrade gracefully when Javascript is disabled. Displays dropdown and changes 
+
+    // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
     // background & text color on hover.
     .no-js .top-bar-section {
 	  ul li {
@@ -517,16 +555,16 @@ $topbar-sticky-class: ".sticky" !default;
           background: $topbar-link-bg-active;
           color: $topbar-link-color-active;
         }
-      }    
-      
+      }
+
 	  .has-dropdown {
         &:hover {
           & > .dropdown {
-            visibility: visible;
+            display: block;
           }
         }
 	  }
-	}    
+	}
   }
 
 }

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(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;
+$h1-font-size: em-calc(44) !default;
+$h2-font-size: em-calc(37) !default;
+$h3-font-size: em-calc(27) !default;
+$h4-font-size: em-calc(23) !default;
+$h5-font-size: em-calc(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(20) !default;
-$paragraph-aside-font-size: emCalc(14) !default;
+$paragraph-margin-bottom: em-calc(20) !default;
+$paragraph-aside-font-size: em-calc(14) !default;
 $paragraph-aside-line-height: 1.35 !default;
 $paragraph-aside-font-style: italic !default;
 $paragraph-text-rendering: optimizeLegibility !default;
@@ -57,21 +57,22 @@ $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(20) !default;
+$hr-margin: em-calc(20) !default;
 
 // We use these to style lists
 $list-style-position: outside !default;
 $list-side-margin: 0 !default;
-$list-nested-margin: emCalc(20) !default;
+$list-side-margin-no-bullet: $list-side-margin;
+$list-nested-margin: em-calc(20) !default;
 $definition-list-header-weight: bold !default;
 $definition-list-header-margin-bottom: .3em !default;
-$definition-list-margin-bottom: emCalc(12) !default;
+$definition-list-margin-bottom: em-calc(12) !default;
 
 // We use these to style blockquotes
 $blockquote-font-color: lighten($header-font-color, 30%) !default;
-$blockquote-padding: emCalc(9, 20, 0, 19) !default;
+$blockquote-padding: em-calc(9 20 0 19) !default;
 $blockquote-border: 1px solid #ddd !default;
-$blockquote-cite-font-size: emCalc(13) !default;
+$blockquote-cite-font-size: em-calc(13) !default;
 $blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
 $blockquote-cite-link-color: $blockquote-cite-font-color !default;
 
@@ -79,8 +80,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(10, 12) !default;
-$microformat-margin: emCalc(0, 0, 20, 0) !default;
+$microformat-padding: em-calc(10 12) !default;
+$microformat-margin: em-calc(0 0 20 0) !default;
 
 // We use these to control the border styles
 $microformat-border-width: 1px !default;
@@ -89,13 +90,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(15) !default;
+$microformat-fullname-font-size: em-calc(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: emCalc(0, 1) !default;
+$microformat-abbr-padding: em-calc(0 1) !default;
 
 // We use this to control abbr font styles
 $microformat-abbr-font-weight: bold !default;
@@ -108,7 +109,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.5);
+  font-size: $paragraph-font-size + em-calc(3.5);
   line-height: 1.6;
 }
 
@@ -186,7 +187,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(3);
+    line-height: $header-line-height - em-calc(3);
 
     small {
       font-size: $small-font-size;
@@ -195,10 +196,10 @@ $microformat-abbr-font-decoration: none !default;
     }
   }
 
-  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); }
+  h1 { font-size: $h1-font-size - em-calc(10); }
+  h2 { font-size: $h2-font-size - em-calc(10); }
+  h3 { font-size: $h3-font-size - em-calc(5); }
+  h4 { font-size: $h4-font-size - em-calc(5); }
   h5 { font-size: $h5-font-size; }
   h6 { font-size: $h6-font-size; }
 
@@ -208,7 +209,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(1));
+    margin: $hr-margin 0 ($hr-margin - em-calc(1));
     height: 0;
   }
 
@@ -249,6 +250,7 @@ $microformat-abbr-font-decoration: none !default;
 
   ul, ol {
     margin-#{$default-float}: $list-side-margin;
+    &.no-bullet { margin-#{$default-float}: $list-side-margin-no-bullet; }
   }
 
   /* Unordered Lists */