zurb-foundation 4.1.6 → 4.2.0

data/scss/foundation/components/_alert-boxes.scss

@@ -4,36 +4,36 @@
 $include-html-alert-classes: $include-html-classes !default;
 
 // We use this to control alert padding.
-$alert-padding-top:         emCalc(11px)                                   !default;
-$alert-padding-default-float:        $alert-padding-top                             !default;
-$alert-padding-opposite-direction:       $alert-padding-top + emCalc(10px)              !default;
-$alert-padding-bottom:      $alert-padding-top + emCalc(1px)               !default;
+$alert-padding-top:                emCalc(11px)                                   !default;
+$alert-padding-default-float:      $alert-padding-top                             !default;
+$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px)              !default;
+$alert-padding-bottom:             $alert-padding-top + emCalc(1px)               !default;
 
 // We use these to control text style.
-$alert-font-weight:         bold                                           !default;
-$alert-font-size:           emCalc(14px)                                   !default;
-$alert-font-color:          #fff                                           !default;
-$alert-font-color-alt:      darken($secondary-color, 60%)                  !default;
+$alert-font-weight:                bold                                           !default;
+$alert-font-size:                  emCalc(14px)                                   !default;
+$alert-font-color:                 #fff                                           !default;
+$alert-font-color-alt:             darken($secondary-color, 60%)                  !default;
 
 // We use this for close hover effect.
-$alert-function-factor:     10%                                            !default;
+$alert-function-factor:            10%                                            !default;
 
 // We use these to control border styles.
-$alert-border-style:        solid                                          !default;
-$alert-border-width:        1px                                            !default;
-$alert-border-color:        darken($primary-color, $alert-function-factor) !default;
-$alert-bottom-margin:       emCalc(20px)                                   !default;
+$alert-border-style:               solid                                          !default;
+$alert-border-width:               1px                                            !default;
+$alert-border-color:               darken($primary-color, $alert-function-factor) !default;
+$alert-bottom-margin:              emCalc(20px)                                   !default;
 
 // We use these to style the close buttons
-$alert-close-color:         #333                                           !default;
-$alert-close-position:      emCalc(5px)                                    !default;
-$alert-close-font-size:     emCalc(22px)                                   !default;
-$alert-close-opacity:       0.3                                            !default;
-$alert-close-opacity-hover: 0.5                                            !default;
-$alert-close-padding:       5px 4px 4px                                    !default;
+$alert-close-color:                #333                                           !default;
+$alert-close-position:             emCalc(5px)                                    !default;
+$alert-close-font-size:            emCalc(22px)                                   !default;
+$alert-close-opacity:              0.3                                            !default;
+$alert-close-opacity-hover:        0.5                                            !default;
+$alert-close-padding:              5px 4px 4px                                    !default;
 
 // We use this to control border radius
-$alert-radius:              $global-radius                                 !default;
+$alert-radius:                     $global-radius                                 !default;
 
 //
 // Alert Mixins

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

@@ -5,7 +5,10 @@ $include-html-grid-classes: $include-html-classes !default;
 
 // We use this to control the maximum number of block grid elements per row
 $block-grid-elements: 12 !default;
-$block-grid-default-spacing: 10px !default;
+$block-grid-default-spacing: emCalc(20px) !default;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+$block-grid-media-queries: true !default;
 
 //
 // Block Grid Mixins
@@ -18,21 +21,21 @@ $block-grid-default-spacing: 10px !default;
   @if $base-style {
     display: block;
     padding: 0;
-    margin: 0 (-$spacing);
+    margin: 0 -($spacing/2);
     @include clearfix;
 
     &>li {
       display: inline;
       height: auto;
       float: $default-float;
-      padding: 0 $spacing $spacing;
+      padding: 0 ($spacing/2) $spacing;
     }
   }
 
   @if $per-row {
     &>li {
       width: 100%/$per-row;
-      padding: 0 $spacing $spacing;
+      padding: 0 ($spacing/2) $spacing;
 
       &:nth-of-type(n) { clear: none; }
       &:nth-of-type(#{$per-row}n+1) { clear: both; }

data/scss/foundation/components/_breadcrumbs.scss

@@ -68,10 +68,10 @@ $crumb-slash: "/"                                              !default;
 
   // Current is for the link of the current page
   &.current {
-  	cursor: default;
+  	cursor: $cursor-default-value;
   	color: $crumb-font-color-current;
     a {
-      cursor: default;
+      cursor: $cursor-default-value;
       color: $crumb-font-color-current;
     }
 
@@ -90,7 +90,7 @@ $crumb-slash: "/"                                              !default;
     a:focus {
       text-decoration: none;
       color: $crumb-font-color-unavailable;
-      cursor: default;
+      cursor: $cursor-default-value;
     }
   }
 

data/scss/foundation/components/_buttons.scss

@@ -49,7 +49,7 @@ $button-disabled-opacity: 0.6 !default;
   @if $style {
     border-style: $button-border-style;
     border-width: $button-border-width;
-    cursor: pointer;
+    cursor: $cursor-pointer-value;
     font-family: $button-font-family;
     font-weight: $button-font-weight;
     line-height: 1;
@@ -135,9 +135,11 @@ $button-disabled-opacity: 0.6 !default;
 
   // We can set $disabled:true to create a disabled transparent button.
   @if $disabled {
-    cursor: default;
+    cursor: $cursor-default-value;
     opacity: $button-disabled-opacity;
-    -webkit-box-shadow: none;
+    @if $experimental {
+      -webkit-box-shadow: none;
+    }
     box-shadow: none;
     &:hover,
     &:focus { background-color: $bg; }

data/scss/foundation/components/_clearing.scss

@@ -108,6 +108,13 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
     .carousel > ul { display: none; }
   }
 
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature li {
+    display: none;
+    &.clearing-featured-img {
+      display: block;
+    }
+  }
 
   // Large screen overrides
   @media #{$small} {
@@ -145,9 +152,6 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
     .clearing-main-prev.disabled,
     .clearing-main-next.disabled { opacity: 0.5; }
 
-    // If you want to show a lightbox, but only have a single image come through as the thumbnail
-    .clearing-feature ~ li { display: none; }
-
     .clearing-assembled .clearing-container {
 
       .carousel {
@@ -173,7 +177,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
             overflow: hidden;
             margin-#{$opposite-direction}: 1px;
             position: relative;
-            cursor: pointer;
+            cursor: $cursor-pointer-value;
             opacity: 0.4;
 
             &.fix-height {
@@ -186,13 +190,15 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 
             a.th {
               border: none;
-              -webkit-box-shadow: none;
+              @if $experimental {
+                -webkit-box-shadow: none;
+              }
                       box-shadow: none;
               display: block;
             }
 
             img {
-              cursor: pointer !important;
+            cursor: $cursor-pointer-value !important;
               min-width: 100% !important;
             }
 

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

@@ -15,7 +15,7 @@ $custom-form-bg:                        #fff !default;
 $custom-form-bg-disabled:               #ddd !default;
 $custom-form-input-size:                16px !default;
 $custom-form-check-color:               #222 !default;
-$custom-form-check-size:                20px !default;
+$custom-form-check-size:                16px !default;
 $custom-form-radio-size:                8px !default;
 $custom-form-checkbox-radius:           0px !default;
 
@@ -110,10 +110,13 @@ $custom-dropdown-width-large:           434px !default;
 
       &.checkbox.checked {
         &:before {
-          content: "\2A2F";
+          content: "\00d7";
           color: $custom-form-check-color;
-          margin-top: -8px;
-          margin-left: 2px;
+          position: absolute;
+          top: -50%;
+          left: 50%;
+          margin-top: 4px;
+          margin-left: -5px;
         }
       }
     }
@@ -131,10 +134,12 @@ $custom-dropdown-width-large:           434px !default;
       padding: 0px;
       width: 100%;
       background: $custom-dropdown-bg;
-      background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
-      background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      @if $experimental {
+        background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
+        background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+        -webkit-box-shadow: none;
+      }
       background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
-      -webkit-box-shadow: none;
       box-shadow: none;
       font-size: $custom-dropdown-font-size;
       vertical-align: top;
@@ -214,7 +219,9 @@ $custom-dropdown-width-large:           434px !default;
       margin: 0;
       #{$default-float}: -$input-border-width;
       top: $custom-dropdown-offset-top;
-      -webkit-box-shadow: $custom-dropdown-shadow;
+      @if $experimental {
+        -webkit-box-shadow: $custom-dropdown-shadow;
+      }
       box-shadow: $custom-dropdown-shadow;
       margin: 0;
       padding: 0;
@@ -225,7 +232,7 @@ $custom-dropdown-width-large:           434px !default;
       li {
         color: $custom-dropdown-font-color;
         font-size: $custom-dropdown-font-size;
-        cursor: default;
+        cursor: $cursor-default-value;
         padding-top: $custom-dropdown-list-padding;
         padding-bottom: $custom-dropdown-list-padding;
         padding-#{$default-float}: $custom-dropdown-default-float-padding;
@@ -246,7 +253,7 @@ $custom-dropdown-width-large:           434px !default;
         }
         &.selected:hover {
           background: $custom-dropdown-color-selected;
-          cursor: default;
+          cursor: $cursor-default-value;
           color: $custom-dropdown-font-color-selected;
         }
       }

data/scss/foundation/components/_dropdown.scss

@@ -29,7 +29,7 @@ $f-dropdown-font-size:            emCalc(14px) !default;
 $f-dropdown-list-padding:         emCalc(5px) emCalc(10px) !default;
 $f-dropdown-line-height:          emCalc(18px) !default;
 $f-dropdown-list-hover-bg:        #eeeeee !default;
-$dropdown-mobile-default-float:            0 !default;
+$dropdown-mobile-default-float:   0 !default;
 
 // We use this to control the styles for when the dropdown has custom content.
 $f-dropdown-content-padding:      emCalc(20px) !default;
@@ -46,8 +46,8 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
   top: -9999px;
   list-style: $f-dropdown-list-style;
 
-  *:first-child { margin-top: 0; }
-  *:last-child { margin-bottom: 0; }
+  > *:first-child { margin-top: 0; }
+  > *:last-child { margin-bottom: 0; }
 
   @if $content == list {
     width: 100%;
@@ -105,8 +105,8 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 // We use this to style the list elements or content inside the dropdown.
 @mixin dropdown-style {
   font-size: $f-dropdown-font-size;
-  cursor: pointer;
-  
+  cursor: $cursor-pointer-value;
+
   line-height: $f-dropdown-line-height;
   margin: 0;
 
@@ -132,7 +132,7 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 
   /* Foundation Dropdowns */
   .f-dropdown {
-    @include dropdown-container(content);
+    @include dropdown-container(list);
     // max-width: none;
 
     li { @include dropdown-style; }

data/scss/foundation/components/_forms.scss

@@ -54,7 +54,7 @@ $input-error-message-font-weight:    bold !default;
 $input-error-message-font-color:     #fff !default;
 $input-error-message-font-color-alt: #333 !default;
 
-//We use this to style the glowing effect of inputs when focused
+// We use this to style the glowing effect of inputs when focused
 $glowing-effect-fade-time:           0.45s !default;
 $glowing-effect-color:               $input-focus-border-color !default;
 
@@ -88,7 +88,9 @@ $glowing-effect-color:               $input-focus-border-color !default;
   background-color: $input-bg-color;
   font-family: $input-font-family;
   border: $input-border-width $input-border-style $input-border-color;
-  -webkit-box-shadow: $input-box-shadow;
+  @if $experimental {
+    -webkit-box-shadow: $input-box-shadow;
+  }
   box-shadow: $input-box-shadow;
   color: $input-font-color;
   display: block;
@@ -333,7 +335,7 @@ $glowing-effect-color:               $input-focus-border-color !default;
   select {
     margin: 0 0 $form-spacing 0;
   }
-  
+
   /* Normalize file input width */
   input[type="file"] {
     width:100%;

data/scss/foundation/components/_global.scss

@@ -5,7 +5,9 @@
 // We use this to control border radius.
 @mixin radius($radius:$global-radius) {
   @if $radius {
-    -webkit-border-radius: $radius;
+    @if $experimental {
+      -webkit-border-radius: $radius;
+    }
     border-radius: $radius;
   }
 }
@@ -13,34 +15,42 @@
 // We use this to create equal side border radius on elements.
 @mixin side-radius($side, $radius) {
   @if $side == left {
-    -moz-border-radius-bottomleft: $radius;
-    -moz-border-radius-topleft: $radius;
-    -webkit-border-bottom-left-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
+    @if $experimental {
+      -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 {
-    -moz-border-radius-topright: $radius;
-    -moz-border-radius-bottomright: $radius;
-    -webkit-border-top-right-radius: $radius;
-    -webkit-border-bottom-right-radius: $radius;
+    @if $experimental {
+      -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 {
-    -moz-border-radius-topright: $radius;
-    -moz-border-radius-topleft: $radius;
-    -webkit-border-top-right-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
+    @if $experimental {
+      -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 {
-    -moz-border-radius-bottomright: $radius;
-    -moz-border-radius-bottomleft: $radius;
-    -webkit-border-bottom-right-radius: $radius;
-    -webkit-border-bottom-left-radius: $radius;
+    @if $experimental {
+      -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;
   }
@@ -48,25 +58,33 @@
 
 // We can control whether or not we have inset shadows edges.
 @mixin inset-shadow($active:true) {
-  -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
+  @if $experimental {
+    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
+  }
   box-shadow: $shiny-edge-size $shiny-edge-color inset;
 
   @if $active { &:active {
-    -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+    @if $experimental {
+      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+    }
     box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
 }
 
 // We use this to add transitions to elements
 @mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
-  -webkit-transition: $property $speed $ease;
-  -moz-transition: $property $speed $ease;
+  @if $experimental {
+    -webkit-transition: $property $speed $ease;
+    -moz-transition: $property $speed $ease;
+  }
   transition: $property $speed $ease;
 }
 
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
-  -moz-box-sizing: $type;
-  -webkit-box-sizing: $type;
+  @if $experimental {
+    -moz-box-sizing: $type;
+    -webkit-box-sizing: $type;
+  }
   box-sizing: $type;
 }
 
@@ -105,13 +123,17 @@
 
 // We use this to add a glowing effect to block elements
 @mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
-  -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
-  -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
+  @if $experimental {
+    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
+    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
+  }
   transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
 
   &:#{$selector} {
-    -webkit-box-shadow: 0 0 5px $glowing-effect-color;
-    -moz-box-shadow: 0 0 5px $glowing-effect-color;
+    @if $experimental {
+      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
+      -moz-box-shadow: 0 0 5px $glowing-effect-color;
+    }
     box-shadow: 0 0 5px $glowing-effect-color;
     border-color: $glowing-effect-color;
   }
@@ -190,9 +212,9 @@ $include-print-styles: true !default;
 $include-html-global-classes: $include-html-classes !default;
 
 // Media Queries
-$small-screen: emCalc(768px) !default;
-$medium-screen: emCalc(1280px) !default;
-$large-screen: emCalc(1440px) !default;
+$small-screen: 768px !default;
+$medium-screen: 1280px !default;
+$large-screen: 1440px !default;
 
 $screen: "only screen" !default;
 $small: "only screen and (min-width: #{$small-screen})" !default;
@@ -201,6 +223,14 @@ $large: "only screen and (min-width:#{$large-screen})" !default;
 $landscape: "only screen and (orientation: landscape)" !default;
 $portrait: "only screen and (orientation: portrait)" !default;
 
+//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;
+$cursor-pointer-value: pointer !default;
+$cursor-help-value: help !default;
+$cursor-text-value: text !default;
+
+
 @if $include-html-global-classes {
 
   // Set box-sizing globally to handle padding and border widths
@@ -224,8 +254,11 @@ $portrait: "only screen and (orientation: portrait)" !default;
     font-style: $body-font-style;
     line-height: 1; // Set to $base-line-height to take on browser default of 150%
     position: relative;
+    cursor: $cursor-default-value;
   }
 
+a:hover { cursor: $cursor-pointer-value; }
+
   // Override outline from normalize, we don't like it
   a:focus { outline: none; }