zurb-foundation 4.2.3 → 4.3.0

data/scss/foundation/components/_global.scss

@@ -15,7 +15,7 @@ $experimental: true !default;
 }
 
 // We use this to create equal side border radius on elements.
-@mixin side-radius($side, $radius) {
+@mixin side-radius($side, $radius:$global-radius) {
   @if $side == left {
     @if $experimental {
       -moz-border-radius-bottomleft: $radius;
@@ -157,11 +157,34 @@ $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: 16px !default;
+$em-base: 16 !default;
 
-// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
-@function emCalc($pxWidth) {
-  @return $pxWidth / $em-base * 1em;
+// 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;
+  @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
+
+  // 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)); }
+
+  $emValues: (); // This will eventually store the converted $values in a list
+  @for $i from 1 through $max {
+    $emValues: append($emValues, convert-to-em(nth($values, $i)));
+  }
+  @return $emValues;
 }
 
 // Maybe you want to create rems and pixels

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

@@ -0,0 +1,214 @@
+//
+// @version
+//   4.3.0
+//
+// @title
+//   Grid
+//
+// @description
+//   With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
+//
+
+//
+// Grid Variables
+//
+$include-html-grid-classes: true !default;
+$row-width: emCalc(1000) !default;
+$column-gutter: emCalc(30) !default;
+$total-columns: 12 !default;
+
+//
+// Grid Calc Function
+//
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
+// Right and Left "auto" for grid
+%right-auto { #{$opposite-direction}: auto; }
+%left-auto { #{$default-float}: auto; }
+
+//
+// Grid Mixins
+//
+
+// Create default, nested, and collapsed rows
+@mixin grid-row($behavior: false) {
+
+  // use @include grid-row(nest); to include a nested row
+  @if $behavior == nest {
+    margin-#{$default-float}: -($column-gutter/2);
+    margin-#{$opposite-direction}: -($column-gutter/2);
+    max-width: none;
+    width: auto;
+  }
+
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    max-width: $row-width;
+    width: 100%;
+  }
+
+  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
+  @else if $behavior == nest-collapse {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    max-width: none;
+    width: auto;
+  }
+
+  // use @include grid-row; to use a container row
+  @else {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
+    width: 100%;
+  }
+
+  @include clearfix;
+}
+
+
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // Gutter padding whenever a column isn't set to collapse
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width: gridCalc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $opposite-direction; }
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    float: none !important;
+  }
+
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
+  // This helps us not need to repeat "position:relative" everywehere
+  @if $include-position-relative { position: relative; }
+}
+
+
+@if $include-html-grid-classes != false {
+  /* Grid HTML Classes */
+  .row {
+    @include grid-row;
+
+    &.collapse {
+      .column,
+      .columns { @include grid-column($collapse:true); }
+    }
+
+    .row { @include grid-row($behavior:nest);
+      &.collapse { @include grid-row($behavior:nest-collapse); }
+    }
+  }
+
+  .column,
+  .columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }
+
+  @media only screen {
+
+    @for $i from 1 through $total-columns {
+      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 2 {
+      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
+    .column.small-centered,
+    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+  }
+
+  @media only screen and (min-width: 640px) {
+
+    @for $i from 1 through $total-columns {
+      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 1 {
+      .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    @for $i from 1 through $total-columns - 1 {
+      .medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
+    }
+
+    .column.medium-centered,
+    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+    .column.medium-uncentered,
+    .columns.medium-uncentered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 1024px) {
+
+    @for $i from 1 through $total-columns {
+      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 1 {
+      .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    @for $i from 1 through $total-columns - 1 {
+      .large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
+    }
+
+    .column.large-centered,
+    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+    .column.large-uncentered,
+    .columns.large-uncentered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
+  }
+
+}

data/scss/foundation/components/_grid.scss

@@ -3,8 +3,8 @@
 //
 $include-html-grid-classes: $include-html-classes !default;
 
-$row-width: emCalc(1000px) !default;
-$column-gutter: emCalc(30px) !default;
+$row-width: emCalc(1000) !default;
+$column-gutter: emCalc(30) !default;
 $total-columns: 12 !default;
 
 //
@@ -112,7 +112,7 @@ $total-columns: 12 !default;
 
 
 @if $include-html-grid-classes != false {
-	/* Grid HTML Classes */
+  /* Grid HTML Classes */
   .row {
     @include grid-row;
 

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(17px) !default;
-$inline-list-default-float-margin: emCalc(-22px) !default;
+$inline-list-bottom-margin: emCalc(17) !default;
+$inline-list-default-float-margin: emCalc(-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(22px);
+    margin-#{$default-float}: emCalc(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(18px) emCalc(20px) emCalc(24px) !default;
+$joyride-tip-padding: emCalc(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(14px) !default;
+$joyride-tip-font-size: emCalc(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: 0 0 emCalc(18px) 0;
+    margin: emCalc(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(17px);
-    bottom: emCalc(16px);
+    #{$opposite-direction}: emCalc(17);
+    bottom: emCalc(16);
   }
   .joyride-timer-indicator {
     display: block;
@@ -214,4 +214,4 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     }
   }
 
-}
+}

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(14px) !default;
+$keystroke-font-size: emCalc(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(2px) emCalc(4px) emCalc(0px) !default;
+$keystroke-padding: emCalc(2, 4, 0) !default;
 
 // We use these to control background and border styles.
 $keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
@@ -54,4 +54,4 @@ $keystroke-radius: $global-radius !default;
     @include radius($keystroke-radius);
   }
 
-}
+}

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(3px) emCalc(10px) emCalc(4px) !default;
+$label-padding: emCalc(3, 10, 4) !default;
 $label-radius: $global-radius !default;
 
 // We use these to style the label text
-$label-font-sizing: emCalc(14px) !default;
+$label-font-sizing: emCalc(14) !default;
 $label-font-weight: bold !default;
 $label-font-color: #333 !default;
 $label-font-color-alt: #fff !default;
@@ -82,4 +82,4 @@ $label-font-color-alt: #fff !default;
     &.secondary { @include label-style($secondary-color); }
   }
 
-}
+}

data/scss/foundation/components/_orbit.scss

@@ -1,4 +1,6 @@
-// Orbit Settings
+//
+// Orbit Variables
+//
 $include-html-orbit-classes: $include-html-classes !default;
 
 // We use these to control the caption styles
@@ -17,7 +19,7 @@ $orbit-timer-bg: rgba(0,0,0,0.6) !default;
 
 // We use these to control the bullet nav styles
 $orbit-bullet-nav-color: #999 !default;
-$orbit-bullet-nav-color-active: #222 !default;
+$orbit-bullet-nav-color-active: #555 !default;
 
 // We use thes to controls the style of slide numbers
 $orbit-slide-number-bg: rgba(0,0,0,0) !default;
@@ -122,12 +124,17 @@ $preloader-class: "preloader" !default;
       padding: 0;
       position: relative;
 
-      img { display: block; }
+      img { display: block; max-width: 100%; }
 
       &>* {
-        position: relative;
-        float: $default-float;
-        height: auto;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        margin-left: 100%;
+
+        &:first-child {
+          margin-left: 0%;
+        }
 
         .orbit-caption {
           position: absolute;
@@ -150,6 +157,7 @@ $preloader-class: "preloader" !default;
       span { font-weight: 700; padding: $orbit-slide-number-padding;}
       color: $orbit-slide-number-font-color;
       background: $orbit-slide-number-bg;
+      z-index: 10;
     }
 
     .orbit-timer {
@@ -158,6 +166,7 @@ $preloader-class: "preloader" !default;
       #{$opposite-direction}: 10px;
       height: 6px;
       width: 100px;
+      z-index: 10;
       .orbit-progress {
         height: 100%;
         background-color: $orbit-timer-bg-old;
@@ -206,6 +215,7 @@ $preloader-class: "preloader" !default;
       line-height: 50px;
       color: white;
       text-indent: -9999px !important;
+      z-index: 10;
 
       & > span {
         position: absolute;
@@ -249,12 +259,12 @@ $preloader-class: "preloader" !default;
 
     li {
       display: block;
-      width: 18px;
-      height: 18px;
+      width: 10px;
+      height: 10px;
       background: $orbit-bullet-nav-color;
       float: $default-float;
       margin-#{$opposite-direction}: 6px;
-      border: solid 2px $orbit-bullet-nav-color-active;
+      border: solid 1px $orbit-bullet-nav-color-active;
       @include radius(1000px);
 
       &.active {
@@ -288,4 +298,19 @@ $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;
+    }
+    .orbit-timer,
+    .orbit-next,
+    .orbit-prev,
+    .orbit-bullets {display: none;}
+  }
 }