zurb-foundation 4.1.6 → 4.2.0

data/scss/foundation/components/_grid.scss

@@ -138,7 +138,7 @@ $total-columns: 12 !default;
       .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
-    @for $i from 1 through $total-columns - 2 {
+    @for $i from 0 through $total-columns - 2 {
       .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
@@ -156,7 +156,7 @@ $total-columns: 12 !default;
       .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
-    @for $i from 1 through $total-columns - 1 {
+    @for $i from 0 through $total-columns - 1 {
       .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
@@ -165,21 +165,22 @@ $total-columns: 12 !default;
       .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
     }
 
-    @for $i from 1 through $total-columns - 1 {
-      .small-push#{-$i} { #{$default-float}: inherit; }
-      .small-pull#{-$i} { #{$opposite-direction}: inherit; }
-    }
-
     .column.large-centered,
     .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
 
     .column.large-uncentered,
-    .columns.large-uncentered, {
+    .columns.large-uncentered {
       margin-#{$default-float}: 0;
       margin-#{$opposite-direction}: 0;
-      float: none;
+      float: $default-float !important;
     }
 
+    .column.large-uncentered.opposite,
+    .columns.large-uncentered.opposite {
+      float: $opposite-direction !important;
+    }
+
+
   }
 
 }

data/scss/foundation/components/_joyride.scss

@@ -39,7 +39,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
 
   /* Foundation Joyride */
   .joyride-list { display: none; }
-  
+
   /* Default styles for the container */
   .joyride-tip-guide {
     display: none;
@@ -53,21 +53,21 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     font-weight: normal;
     width: 95%;
   }
-  
+
   .lt-ie9 .joyride-tip-guide {
     max-width:800px;
     #{$default-float}: 50%;
     margin-#{$default-float}:-400px;
   }
-  
+
   .joyride-content-wrapper {
     width: 100%;
-  
+
     padding: $joyride-tip-padding;
-  
+
     .button { margin-bottom: 0 !important; }
   }
-  
+
   /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
   .joyride-tip-guide {
     .joyride-nub {
@@ -77,7 +77,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
       width: 0;
       height: 0;
       border: inset $joyride-tip-nub-size;
-  
+
       &.top {
         border-top-style: solid;
         border-color: $joyride-tip-bg;
@@ -94,12 +94,12 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
         border-#{$opposite-direction}-color: transparent !important;
         bottom: -($joyride-tip-nub-size*2);
       }
-  
+
       &.right { right: -($joyride-tip-nub-size*2); }
       &.left { left: -($joyride-tip-nub-size*2); }
     }
   }
-  
+
   /* Typography */
   .joyride-tip-guide h1,
   .joyride-tip-guide h2,
@@ -117,7 +117,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     font-size: $joyride-tip-font-size;
     line-height: 1.3;
   }
-  
+
   .joyride-timer-indicator-wrap {
     width: $joyride-tip-timer-width;
     height: $joyride-tip-timer-height;
@@ -132,7 +132,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     height: inherit;
     background: $joyride-tip-timer-color;
   }
-  
+
   .joyride-close-tip {
     position: absolute;
     #{$opposite-direction}: 12px;
@@ -142,11 +142,11 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     font-size: $joyride-tip-close-size;
     font-weight: $joyride-tip-close-weight;
     line-height: .5 !important;
-  
+
     &:hover,
     &:focus { color: #eee !important; }
   }
-  
+
   .joyride-modal-bg {
     position: fixed;
     height: 100%;
@@ -157,19 +157,21 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     display: none;
     top: 0;
     #{$default-float}: 0;
-    cursor: pointer;
+    cursor: $cursor-pointer-value;
   }
-  
+
   .joyride-expose-wrapper {
     background-color: #ffffff;
     position: absolute;
     border-radius: 3px;
     z-index: 102;
-    -moz-box-shadow: 0px 0px 30px #ffffff;
-    -webkit-box-shadow: 0px 0px 15px #ffffff;
+    @if $experimental {
+      -moz-box-shadow: 0px 0px 30px #ffffff;
+      -webkit-box-shadow: 0px 0px 15px #ffffff;
+    }
     box-shadow: 0px 0px 15px #ffffff;
   }
-  
+
   .joyride-expose-cover {
     background: transparent;
     border-radius: 3px;
@@ -178,8 +180,8 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     top: 0px;
     left: 0px;
   }
-  
-  
+
+
   /* Styles for screens that are atleast 768px; */
   @media #{$small} {
     .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;

data/scss/foundation/components/_keystrokes.scss

@@ -5,7 +5,7 @@ $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(15px) !default;
+$keystroke-font-size:       emCalc(14px) !default;
 $keystroke-font-color:      #222 !default;
 $keystroke-font-color-alt:  #fff !default;
 $keystroke-function-factor: 7% !default;

data/scss/foundation/components/_orbit.scss

@@ -3,7 +3,6 @@ $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-browser: #000 !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;
@@ -25,45 +24,124 @@ $orbit-slide-number-bg: rgba(0,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;
+// Graceful Loading Wrapper and preloader
+$wrapper-class: "slideshow-wrapper" !default;
+$preloader-class: "preloader" !default;
+
 
 @if $include-html-orbit-classes != false {
-  
+
+  @if $experimental {
+    @-webkit-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-moz-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-o-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+  }
+  @keyframes rotate {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+  }
+
+  /* Orbit Graceful Loading */
+  .#{$wrapper-class} {
+    position: relative;
+
+    ul {
+      // Prevent bullets showing before .orbit-container is loaded
+      list-style-type: none;
+      margin: 0;
+
+      // Hide all list items
+      li,
+      li .orbit-caption { display: none; }
+
+      // ...except for the first one
+      li:first-child { display: block; }
+    }
+
+    .orbit-container { background-color: transparent;
+
+      // Show images when .orbit-container is loaded
+      li { display: block;
+
+        .orbit-caption { display: block; }
+      }
+    }
+  }
+
+  // Orbit preloader
+  .#{$preloader-class} {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    border: solid 3px;
+    border-color: #555 #fff;
+    @include radius(1000px);
+    @if $experimental {
+      -webkit-animation-name: rotate;
+      -webkit-animation-duration: 1.5s;
+      -webkit-animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      -moz-animation-name: rotate;
+      -moz-animation-duration: 1.5s;
+      -moz-animation-iteration-count: infinite;
+      -moz-animation-timing-function: linear;
+      -o-animation-name: rotate;
+      -o-animation-duration: 1.5s;
+      -o-animation-iteration-count: infinite;
+      -o-animation-timing-function: linear;
+    }
+    animation-name: rotate;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+
   .orbit-container {
     overflow: hidden;
     width: 100%;
     position: relative;
     background: $orbit-container-bg;
-  
+
     .orbit-slides-container {
       list-style: none;
       margin: 0;
       padding: 0;
       position: relative;
-  
+
       img { display: block; }
-  
+
       &>* {
         position: relative;
         float: $default-float;
-        height: 100%;
-  
+        height: auto;
+
         .orbit-caption {
           position: absolute;
           bottom: 0;
           background-color: $orbit-caption-bg-old;
           background-color: $orbit-caption-bg;
-          color: #fff;
+          color: $orbit-caption-font-color;
           width: 100%;
           padding: 10px 14px;
           font-size: emCalc(14px);
-  
-          * { color: $orbit-caption-font-color; }
         }
       }
     }
-  
+
     .orbit-slide-number {
       position: absolute;
       top: 10px;
@@ -73,7 +151,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       color: $orbit-slide-number-font-color;
       background: $orbit-slide-number-bg;
     }
-  
+
     .orbit-timer {
       position: absolute;
       top: 10px;
@@ -87,7 +165,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
         display: block;
         width: 0%;
       }
-  
+
       & > span {
         display: none;
         position: absolute;
@@ -99,7 +177,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
         border-top: none;
         border-bottom: none;
       }
-  
+
       &.paused {
         & > span {
           #{$opposite-direction}: -6px;
@@ -112,9 +190,9 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
         }
       }
     }
-  
+
     &:hover .orbit-timer > span { display: block; }
-  
+
     // Let's get those controls to be right in the center on each side
     .orbit-prev,
     .orbit-next {
@@ -128,7 +206,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       line-height: 50px;
       color: white;
       text-indent: -9999px !important;
-  
+
       & > span {
         position: absolute;
         top: 50%;
@@ -162,13 +240,13 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       }
     }
   }
-  
+
   .orbit-bullets {
     margin: 0 auto 30px auto;
     overflow: hidden;
     position: relative;
     top: 10px;
-  
+
     li {
       display: block;
       width: 18px;
@@ -178,36 +256,36 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       margin-#{$opposite-direction}: 6px;
       border: solid 2px $orbit-bullet-nav-color-active;
       @include radius(1000px);
-  
+
       &.active {
         background: $orbit-bullet-nav-color-active;
       }
-  
+
       &:last-child { margin-#{$opposite-direction}: 0; }
     }
   }
-  
+
   .touch {
     .orbit-container {
       .orbit-prev,
       .orbit-next { display: none; }
     }
-  
+
     .orbit-bullets { display: none; }
   }
-  
-  
+
+
   @media #{$small} {
-  
+
     .touch {
       .orbit-container {
         .orbit-prev,
         .orbit-next { display: inherit; }
       }
-  
+
       .orbit-bullets { display: block; }
     }
-  
+
   }
 
 }

data/scss/foundation/components/_reveal.scss

@@ -1,4 +1,3 @@
-// NEED TO FINISH THE LOGIC HERE
 $include-html-reveal-classes: $include-html-classes !default;
 
 //
@@ -28,6 +27,9 @@ $reveal-border-style:    solid !default;
 $reveal-border-width:    1px !default;
 $reveal-border-color:    #666 !default;
 
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
 //
 // Reveal Mixins
 //
@@ -54,7 +56,6 @@ $reveal-border-color:    #666 !default;
     #{$default-float}: 50%;
     z-index: 99;
     height: auto;
-    background-color: #fff;
 
     // Make sure rows don't have a min-width on them
     .column,
@@ -81,7 +82,9 @@ $reveal-border-color:    #666 !default;
 
   // We can choose whether or not to include the default box-shadow.
   @if $box-shadow {
-    -webkit-box-shadow: $reveal-box-shadow;
+    @if $experimental {
+      -webkit-box-shadow: $reveal-box-shadow;
+    }
     box-shadow: $reveal-box-shadow;
   }
 
@@ -97,24 +100,25 @@ $reveal-border-color:    #666 !default;
   #{$opposite-direction}: $reveal-close-side;
   color: $color;
   font-weight: $reveal-close-weight;
-  cursor: pointer;
+  cursor: $cursor-pointer-value;
 }
 
 @if $include-html-reveal-classes != false {
+
   // Reveal Modals
   .reveal-modal-bg { @include reveal-bg; }
 
-  .reveal-modal {
+  .#{$reveal-modal-class} {
     @include reveal-modal-base;
     @include reveal-modal-style;
 
-    .close-reveal-modal { @include reveal-close; }
+    .#{$close-reveal-modal-class} { @include reveal-close; }
   }
 
   // Large Screen Styles
   @media #{$small} {
 
-    .reveal-modal {
+    .#{$reveal-modal-class} {
       @include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
 
       &.tiny  { @include reveal-modal-base(false, 30%); }
@@ -127,6 +131,6 @@ $reveal-border-color:    #666 !default;
 
   // Reveal Print Styles
   @media print {
-    .reveal-modal {background: #fff !important;}
+    .#{$reveal-modal-class} {background: #fff !important;}
   }
 }