zurb-foundation 4.3.1 → 4.3.2

data/scss/foundation/components/_global.scss

@@ -157,39 +157,51 @@ $base-font-size: 100% !default;
 $base-line-height: 150% !default;
 
 // This is the default html and body font-size for the base em value.
-$em-base: 16 !default;
+$em-base: 16px !default;
 
 // It strips the unit of measure and returns it
 @function strip-unit($num) {
   @return $num / ($num * 0 + 1);
 }
 
-// Converts "px" to "em" using the ($)em-base
-@function convert-to-em($value)  {
-  $value: strip-unit($value) / strip-unit($em-base) * 1em;
+// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of em's.
+// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported
+// em-calc(10 20 30px 40);
+// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
+// em-calc((10, 20, 30, 40px));
+// Optionally call with a different base (eg: 8px) to calculate em.
+// em-calc(16px 32px 48px, 8px);
+// If you require to comma separate your list
+// em-calc((16px, 32px, 48), 8px);
+
+@function convert-to-em($value, $base-value: $em-base)  {
+  $value: strip-unit($value) / strip-unit($base-value) * 1em;
   @if ($value == 0em) { $value: 0; } // Turn 0em into 0
   @return $value;
 }
 
-// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#)
-// Just enter the number, no need to mention "px"
-@function emCalc($values...) {
-  $max: length($values); // Get the total number of parameters passed
+@function em-calc($values, $base-value: $em-base) {
+  $max: length($values);
 
-  // If there is only 1 parameter, then return it as an integer.
-  // This is done because a list can't be multiplied or divided even if it contains a single value
-  @if $max == 1 { @return convert-to-em(nth($values, 1)); }
+  @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
 
-  $emValues: (); // This will eventually store the converted $values in a list
+  $emValues: ();
   @for $i from 1 through $max {
-    $emValues: append($emValues, convert-to-em(nth($values, $i)));
+    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
   }
   @return $emValues;
 }
 
-// Maybe you want to create rems and pixels
+// Support for the old syntax
+
+@function emCalc($values){
+  @return em-calc($values);
+}
+
+// Maybe you want to create rems with pixels
+// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
 // @function remCalc($pxWidth) {
-//   @return $pxWidth / $em-base * 1rem;
+//   @return $pxWidth / $rem-base * 1rem;
 // }
 
 // We use these to control various global styles
@@ -248,6 +260,22 @@ $large: "only screen and (min-width:#{$large-screen})" !default;
 $landscape: "only screen and (orientation: landscape)" !default;
 $portrait: "only screen and (orientation: portrait)" !default;
 
+// Used to provide media query values for javascript components.
+meta.foundation-mq-small {
+  font-family: $small;
+  width: $small-screen;
+}
+
+meta.foundation-mq-medium {
+  font-family: $medium;
+  width: $medium-screen;
+}
+
+meta.foundation-mq-large {
+  font-family: $large;
+  width: $large-screen;
+}
+
 //We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
 $cursor-crosshair-value: crosshair !default;
 $cursor-default-value: default !default;
@@ -284,9 +312,6 @@ $cursor-text-value: text !default;
 
 a:hover { cursor: $cursor-pointer-value; }
 
-  // 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,

data/scss/foundation/components/_grid-5.scss

@@ -13,8 +13,8 @@
 // Grid Variables
 //
 $include-html-grid-classes: true !default;
-$row-width: emCalc(1000) !default;
-$column-gutter: emCalc(30) !default;
+$row-width: em-calc(1000) !default;
+$column-gutter: em-calc(30) !default;
 $total-columns: 12 !default;
 
 //
@@ -157,7 +157,7 @@ $total-columns: 12 !default;
     .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
   }
 
-  @media only screen and (min-width: 640px) {
+  @media only screen and (min-width: $small-screen) {
 
     @for $i from 1 through $total-columns {
       .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
@@ -184,7 +184,7 @@ $total-columns: 12 !default;
 
   }
 
-  @media only screen and (min-width: 1024px) {
+  @media only screen and (min-width: $medium-screen) {
 
     @for $i from 1 through $total-columns {
       .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }

data/scss/foundation/components/_grid.scss

@@ -3,8 +3,8 @@
 //
 $include-html-grid-classes: $include-html-classes !default;
 
-$row-width: emCalc(1000) !default;
-$column-gutter: emCalc(30) !default;
+$row-width: em-calc(1000) !default;
+$column-gutter: em-calc(30) !default;
 $total-columns: 12 !default;
 
 //
@@ -117,8 +117,10 @@ $total-columns: 12 !default;
     @include grid-row;
 
     &.collapse {
-      .column,
-      .columns { @include grid-column($collapse:true); }
+       > .column,
+       > .columns { @include grid-column($collapse:true); }
+    
+      .row {margin-left:0; margin-right:0;}
     }
 
     .row { @include grid-row($behavior:nest);

data/scss/foundation/components/_inline-lists.scss

@@ -6,8 +6,8 @@ $include-html-inline-list-classes: $include-html-classes !default;
 // We use this to control the margins and padding of the inline list.
 $inline-list-top-margin: 0 !default;
 $inline-list-opposite-margin: 0 !default;
-$inline-list-bottom-margin: emCalc(17) !default;
-$inline-list-default-float-margin: emCalc(-22) !default;
+$inline-list-bottom-margin: em-calc(17) !default;
+$inline-list-default-float-margin: em-calc(-22) !default;
 
 $inline-list-padding: 0 !default;
 
@@ -36,7 +36,7 @@ $inline-list-children-display: block !default;
   & > li {
     list-style: none;
     float: $default-float;
-    margin-#{$default-float}: emCalc(22);
+    margin-#{$default-float}: em-calc(22);
     display: $inline-list-display;
     &>* { display: $inline-list-children-display; }
   }

data/scss/foundation/components/_joyride.scss

@@ -6,14 +6,14 @@ $include-html-joyride-classes: $include-html-classes !default;
 // Controlling default Joyride styles
 $joyride-tip-bg: rgb(0,0,0) !default;
 $joyride-tip-default-width: 300px !default;
-$joyride-tip-padding: emCalc(18, 20, 24) !default;
+$joyride-tip-padding: em-calc(18 20 24) !default;
 $joyride-tip-border: solid 1px #555 !default;
 $joyride-tip-radius: 4px !default;
 $joyride-tip-position-offset: 22px !default;
 
 // Here, we're setting the tip dont styles
 $joyride-tip-font-color: #fff !default;
-$joyride-tip-font-size: emCalc(14) !default;
+$joyride-tip-font-size: em-calc(14) !default;
 $joyride-tip-header-weight: bold !default;
 
 // This changes the nub size
@@ -113,7 +113,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     color: $joyride-tip-font-color;
   }
   .joyride-tip-guide p {
-    margin: emCalc(0, 0, 18, 0);
+    margin: em-calc(0 0 18 0);
     font-size: $joyride-tip-font-size;
     line-height: 1.3;
   }
@@ -123,8 +123,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     height: $joyride-tip-timer-height;
     border: $joyride-tip-border;
     position: absolute;
-    #{$opposite-direction}: emCalc(17);
-    bottom: emCalc(16);
+    #{$opposite-direction}: em-calc(17);
+    bottom: em-calc(16);
   }
   .joyride-timer-indicator {
     display: block;
@@ -166,10 +166,10 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     border-radius: 3px;
     z-index: 102;
     @if $experimental {
-      -moz-box-shadow: 0px 0px 30px #ffffff;
-      -webkit-box-shadow: 0px 0px 15px #ffffff;
+      -moz-box-shadow: 0 0 30px #ffffff;
+      -webkit-box-shadow: 0 0 15px #ffffff;
     }
-    box-shadow: 0px 0px 15px #ffffff;
+    box-shadow: 0 0 15px #ffffff;
   }
 
   .joyride-expose-cover {
@@ -177,8 +177,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     border-radius: 3px;
     position: absolute;
     z-index: 9999;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
   }
 
 

data/scss/foundation/components/_keystrokes.scss

@@ -5,13 +5,13 @@ $include-html-type-classes: $include-html-classes !default;
 
 // We use these to control text styles.
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
-$keystroke-font-size: emCalc(14) !default;
+$keystroke-font-size: em-calc(14) !default;
 $keystroke-font-color: #222 !default;
 $keystroke-font-color-alt: #fff !default;
 $keystroke-function-factor: 7% !default;
 
 // We use this to control keystroke padding.
-$keystroke-padding: emCalc(2, 4, 0) !default;
+$keystroke-padding: em-calc(2 4 0) !default;
 
 // We use these to control background and border styles.
 $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;

data/scss/foundation/components/_labels.scss

@@ -4,11 +4,11 @@
 $include-html-label-classes: $include-html-classes !default;
 
 // We use these to style the labels
-$label-padding: emCalc(3, 10, 4) !default;
+$label-padding: em-calc(3 10 4) !default;
 $label-radius: $global-radius !default;
 
 // We use these to style the label text
-$label-font-sizing: emCalc(14) !default;
+$label-font-sizing: em-calc(14) !default;
 $label-font-weight: bold !default;
 $label-font-color: #333 !default;
 $label-font-color-alt: #fff !default;

data/scss/foundation/components/_orbit.scss

@@ -1,30 +1,35 @@
-//
 // Orbit Variables
 //
 $include-html-orbit-classes: $include-html-classes !default;
 
 // We use these to control the caption styles
 $orbit-container-bg: #f5f5f5 !default;
-$orbit-caption-bg-old: rgb(0,0,0) !default;
 $orbit-caption-bg: rgba(0,0,0,0.6) !default;
 $orbit-caption-font-color: #fff !default;
+$orbit-caption-font-size: em-calc(14) !default;
+$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
+$orbit-caption-padding: em-calc(10,14) !default;
+$orbit-caption-height: auto !default;
 
 // We use these to control the left/right nav styles
-$orbit-nav-bg-old: rgb(0,0,0) !default;
 $orbit-nav-bg: rgba(0,0,0,0.6) !default;
+$orbit-nav-bg-hover: rgba(0,0,0,0.6) !default;
+$orbit-nav-arrow-color: #fff !default;
+$orbit-nav-arrow-color-hover: #ccc !default;
 
 // We use these to control the timer styles
-$orbit-timer-bg-old: rgb(0,0,0) !default;
 $orbit-timer-bg: rgba(0,0,0,0.6) !default;
+$orbit-timer-show-progress-bar: true !default;
 
 // We use these to control the bullet nav styles
 $orbit-bullet-nav-color: #999 !default;
 $orbit-bullet-nav-color-active: #555 !default;
+$orbit-bullet-radius: em-calc(12) !default;
 
-// We use thes to controls the style of slide numbers
+// We use these to controls the style of slide numbers
 $orbit-slide-number-bg: rgba(0,0,0,0) !default;
 $orbit-slide-number-font-color: #fff !default;
-$orbit-slide-number-padding: emCalc(5px) !default;
+$orbit-slide-number-padding: em-calc(5) !default;
 
 // Graceful Loading Wrapper and preloader
 $wrapper-class: "slideshow-wrapper" !default;
@@ -39,17 +44,17 @@ $preloader-class: "preloader" !default;
       to { -webkit-transform: rotate(360deg); }
     }
     @-moz-keyframes rotate {
-      from { -webkit-transform: rotate(0deg); }
-      to { -webkit-transform: rotate(360deg); }
+      from { -moz-transform: rotate(0deg); }
+      to { -moz-transform: rotate(360deg); }
     }
     @-o-keyframes rotate {
-      from { -webkit-transform: rotate(0deg); }
-      to { -webkit-transform: rotate(360deg); }
+      from { -o-transform: rotate(0deg); }
+      to { -o-transform: rotate(360deg); }
     }
   }
   @keyframes rotate {
-    from { -webkit-transform: rotate(0deg); }
-    to { -webkit-transform: rotate(360deg); }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 
   /* Orbit Graceful Loading */
@@ -136,7 +141,7 @@ $preloader-class: "preloader" !default;
         @else {
           margin-left: 100%;
         }
-        
+
         &:first-child {
           @if $text-direction == rtl {
           margin-right: 0%;
@@ -147,14 +152,18 @@ $preloader-class: "preloader" !default;
         }
 
         .orbit-caption {
-          position: absolute;
-          bottom: 0;
-          background-color: $orbit-caption-bg-old;
+          @if $orbit-caption-position == "bottom" {
+            position: absolute;
+            bottom: 0;
+          } @else if $orbit-caption-position == "under" {
+            position: relative;
+          }
+
           background-color: $orbit-caption-bg;
           color: $orbit-caption-font-color;
           width: 100%;
           padding: 10px 14px;
-          font-size: emCalc(14px);
+          font-size: em-calc(14);
         }
       }
     }
@@ -178,18 +187,20 @@ $preloader-class: "preloader" !default;
       width: 100px;
       z-index: 10;
       .orbit-progress {
-        height: 100%;
-        background-color: $orbit-timer-bg-old;
-        background-color: $orbit-timer-bg;
-        display: block;
-        width: 0%;
+        @if $orbit-timer-show-progress-bar {
+          height: 100%;
+          background-color: $orbit-timer-bg;
+          display: block;
+          width: 0%;
+        }
       }
 
+      // Play button
       & > span {
         display: none;
         position: absolute;
         top: 10px;
-        #{$opposite-direction}: 0px;
+        #{$opposite-direction}: 0;
         width: 11px;
         height: 14px;
         border: solid 4px #000;
@@ -197,6 +208,7 @@ $preloader-class: "preloader" !default;
         border-bottom: none;
       }
 
+      // Pause button
       &.paused {
         & > span {
           #{$opposite-direction}: -6px;
@@ -218,7 +230,6 @@ $preloader-class: "preloader" !default;
       position: absolute;
       top: 50%;
       margin-top: -25px;
-      background-color: $orbit-nav-bg-old;
       background-color: $orbit-nav-bg;
       width: 50px;
       height: 60px;
@@ -227,6 +238,10 @@ $preloader-class: "preloader" !default;
       text-indent: -9999px !important;
       z-index: 10;
 
+      &:hover {
+        background-color: $orbit-nav-bg-hover;
+      }
+
       & > span {
         position: absolute;
         top: 50%;
@@ -241,22 +256,22 @@ $preloader-class: "preloader" !default;
       & > span {
         border-#{$opposite-direction}-style: solid;
         border-color: transparent;
-        border-#{$opposite-direction}-color: #fff;
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color;
       }
       &:hover > span {
-        border-#{$opposite-direction}-color: #ccc;
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover;
       }
     }
     .orbit-next { #{$opposite-direction}: 0;
       & > span {
         border-color: transparent;
         border-#{$default-float}-style: solid;
-        border-#{$default-float}-color: #fff;
+        border-#{$default-float}-color: $orbit-nav-arrow-color;
         #{$default-float}: 50%;
         margin-#{$default-float}: -8px;
       }
       &:hover > span {
-        border-#{$default-float}-color: #ccc;
+        border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
       }
     }
   }
@@ -269,8 +284,8 @@ $preloader-class: "preloader" !default;
 
     li {
       display: block;
-      width: 10px;
-      height: 10px;
+      width: $orbit-bullet-radius;
+      height: $orbit-bullet-radius;
       background: $orbit-bullet-nav-color;
       float: $default-float;
       margin-#{$opposite-direction}: 6px;
@@ -308,19 +323,18 @@ $preloader-class: "preloader" !default;
 
   }
 
-}
-
-
-@media only screen and (max-width: #{$small-screen}) {
-  .orbit-stack-on-small {
-    .orbit-slides-container {height: auto !important;}
-    .orbit-slides-container > * {
-      position: relative;
-      margin-left: 0% !important;
+  @media only screen and (max-width: #{$small-screen}) {
+    .orbit-stack-on-small {
+      .orbit-slides-container {height: auto !important;}
+      .orbit-slides-container > * {
+        position: relative;
+        margin-left: 0% !important;
+      }
+      .orbit-timer,
+      .orbit-next,
+      .orbit-prev,
+      .orbit-bullets {display: none;}
     }
-    .orbit-timer,
-    .orbit-next,
-    .orbit-prev,
-    .orbit-bullets {display: none;}
   }
-}
+
+}