zurb-foundation 4.1.5 → 4.1.6

data/scss/foundation/components/_dropdown-buttons.scss

@@ -1,6 +1,7 @@
 //
 // Dropdown Button Variables
 //
+$include-html-button-classes: $include-html-classes !default;
 
 // We use these to set the color of the pip in dropdown buttons
 $dropdown-button-pip-color:     #fff !default;
@@ -101,7 +102,7 @@ $dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
 }
 
 
-@if $include-html-button-classes != false {
+@if $include-html-button-classes {
 
   /* Dropdown Button */
   .dropdown.button { @include dropdown-button;

data/scss/foundation/components/_dropdown.scss

@@ -1,6 +1,7 @@
 //
 // Dropdown Variables
 //
+$include-html-button-classes: $include-html-classes !default;
 
 // We use these to controls height and width styles.
 $f-dropdown-max-width:            200px !default;
@@ -120,7 +121,7 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 }
 
 
-@if $include-html-nav-classes != false {
+@if $include-html-button-classes != false {
 
   @media only screen and (max-width: 767px) {
     .f-dropdown {

data/scss/foundation/components/_flex-video.scss

@@ -1,6 +1,7 @@
 //
 // Flex Video Variables
 //
+$include-html-media-classes: $include-html-classes !default;
 
 // We use these to control video container padding and margins
 $flex-video-padding-top:               emCalc(25px) !default;

data/scss/foundation/components/_forms.scss

@@ -1,6 +1,7 @@
 //
 // Form Variables
 //
+$include-html-form-classes: $include-html-classes !default;
 
 // We use this to set the base for lots of form spacing and positioning styles
 $form-spacing:                       emCalc(16px) !default;

data/scss/foundation/components/_global.scss

@@ -105,9 +105,9 @@
 
 // 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: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
-  -moz-transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
-  transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
+  -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;
@@ -153,7 +153,7 @@ $body-font-weight: normal !default;
 $body-font-style: normal !default;
 
 // We use this to control font-smoothing
-$font-smoothing: antialiased !default;
+$font-smoothing: subpixel-antialiased !default;
 
 // We use these to control text direction settings
 $text-direction: ltr !default;
@@ -187,20 +187,7 @@ $shiny-edge-active-color: rgba(#000, .2) !default;
 // We use this to control whether or not CSS classes come through in the gem files.
 $include-html-classes: true !default;
 $include-print-styles: true !default;
-$include-html-grid-classes: $include-html-classes !default;
-$include-html-visibility-classes: $include-html-classes !default;
-$include-html-button-classes: $include-html-classes !default;
-$include-html-form-classes: $include-html-classes !default;
-$include-html-media-classes: $include-html-classes !default;
-$include-html-section-classes: $include-html-classes !default;
-$include-html-reveal-classes: $include-html-classes !default;
-$include-html-alert-classes: $include-html-classes !default;
-$include-html-nav-classes: $include-html-classes !default;
-$include-html-label-classes: $include-html-classes !default;
-$include-html-panel-classes: $include-html-classes !default;
-$include-html-pricing-classes: $include-html-classes !default;
-$include-html-progress-classes: $include-html-classes !default;
-$include-html-magellan-classes: $include-html-classes !default;
+$include-html-global-classes: $include-html-classes !default;
 
 // Media Queries
 $small-screen: emCalc(768px) !default;
@@ -208,82 +195,86 @@ $medium-screen: emCalc(1280px) !default;
 $large-screen: emCalc(1440px) !default;
 
 $screen: "only screen" !default;
-$small: "only screen and (min-width:"#{$small-screen}")" !default;
-$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
-$large: "only screen and (min-width:"#{$large-screen}")" !default;
+$small: "only screen and (min-width: #{$small-screen})" !default;
+$medium: "only screen and (min-width:#{$medium-screen})" !default;
+$large: "only screen and (min-width:#{$large-screen})" !default;
 $landscape: "only screen and (orientation: landscape)" !default;
 $portrait: "only screen and (orientation: portrait)" !default;
 
-// Set box-sizing globally to handle padding and border widths
-*,
-*:before,
-*:after {
-  @include box-sizing(border-box);
-}
-
-html,
-body { font-size: $base-font-size; }
-
-// Default body styles
-body {
-  background: $body-bg;
-  color: $body-font-color;
-  padding: 0;
-  margin: 0;
-  font-family: $body-font-family;
-  font-weight: $body-font-weight;
-  font-style: $body-font-style;
-  line-height: 1; // Set to $base-line-height to take on browser default of 150%
-  position: relative;
-}
+@if $include-html-global-classes {
 
-// Override outline from normalize, we don't like it
-a:focus { outline: none; }
+  // Set box-sizing globally to handle padding and border widths
+  *,
+  *:before,
+  *:after {
+    @include box-sizing(border-box);
+  }
 
-// Grid Defaults to get images and embeds to work properly
-img,
-object,
-embed { max-width: 100%; height: auto; }
+  html,
+  body { font-size: $base-font-size; }
+
+  // Default body styles
+  body {
+    background: $body-bg;
+    color: $body-font-color;
+    padding: 0;
+    margin: 0;
+    font-family: $body-font-family;
+    font-weight: $body-font-weight;
+    font-style: $body-font-style;
+    line-height: 1; // Set to $base-line-height to take on browser default of 150%
+    position: relative;
+  }
 
-object,
-embed { height: 100%; }
-img { -ms-interpolation-mode: bicubic; }
+  // Override outline from normalize, we don't like it
+  a:focus { outline: none; }
 
-#map_canvas,
-.map_canvas {
+  // Grid Defaults to get images and embeds to work properly
   img,
-  embed,
-  object { max-width: none !important;
+  object,
+  embed { max-width: 100%; height: auto; }
+
+  object,
+  embed { height: 100%; }
+  img { -ms-interpolation-mode: bicubic; }
+
+  #map_canvas,
+  .map_canvas {
+    img,
+    embed,
+    object { max-width: none !important;
+    }
   }
-}
 
-// Miscellaneous useful HTML classes
-.left         { float: left !important; }
-.right        { float: right !important; }
-.text-left    { text-align: left !important; }
-.text-right   { text-align: right !important; }
-.text-center  { text-align: center !important; }
-.text-justify { text-align: justify !important; }
-.hide         { display: none; }
-
-// Font smoothing
-// Antialiased font smoothing works best for light text on a dark background.
-// Apply to single elements instead of globally to body.
-// Note this only applies to webkit-based desktop browsers on the Mac.
-.antialiased { -webkit-font-smoothing: antialiased; }
-
-// Get rid of gap under images by making them display: inline-block; by default
-img {
-  display: inline-block;
-  vertical-align: middle;
-}
+  // Miscellaneous useful HTML classes
+  .left         { float: left !important; }
+  .right        { float: right !important; }
+  .text-left    { text-align: left !important; }
+  .text-right   { text-align: right !important; }
+  .text-center  { text-align: center !important; }
+  .text-justify { text-align: justify !important; }
+  .hide         { display: none; }
+
+  // Font smoothing
+  // Antialiased font smoothing works best for light text on a dark background.
+  // Apply to single elements instead of globally to body.
+  // Note this only applies to webkit-based desktop browsers on the Mac.
+  .antialiased { -webkit-font-smoothing: antialiased; }
+
+  // Get rid of gap under images by making them display: inline-block; by default
+  img {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-//
-// Global resets for forms
-//
+  //
+  // Global resets for forms
+  //
+
+  // Make sure textarea takes on height automatically
+  textarea { height: auto; min-height: 50px; }
 
-// Make sure textarea takes on height automatically
-textarea { height: auto; min-height: 50px; }
+  // Make select elements 100% width by default
+  select { width: 100%; }
 
-// Make select elements 100% width by default
-select { width: 100%; }
+}

data/scss/foundation/components/_grid.scss

@@ -1,6 +1,8 @@
 //
 // Grid Variables
 //
+$include-html-grid-classes: $include-html-classes !default;
+
 $row-width:     emCalc(1000px) !default;
 $column-gutter: emCalc(30px) !default;
 $total-columns: 12 !default;
@@ -109,9 +111,8 @@ $total-columns: 12 !default;
 }
 
 
-/* Grid HTML Classes */
 @if $include-html-grid-classes != false {
-
+	/* Grid HTML Classes */
   .row {
     @include grid-row;
 
@@ -169,16 +170,16 @@ $total-columns: 12 !default;
       .small-pull#{-$i} { #{$opposite-direction}: inherit; }
     }
 
-    .column.small-centered,
-    .columns.small-centered {
+    .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;
+      float: none;
     }
 
-    .column.large-centered,
-    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
-
   }
 
 }

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

@@ -1,6 +1,7 @@
 //
 // Inline List Variables
 //
+$include-html-global-classes: $include-html-classes !default;
 
 // We use this to control the margins and padding of the inline list.
 $inline-list-top-margin: 0 !default;
@@ -42,7 +43,7 @@ $inline-list-children-display: block !default;
 }
 
 
-@if $include-html-grid-classes != false {
+@if $include-html-global-classes != false {
 
   /* Inline Lists */
   .inline-list {

data/scss/foundation/components/_joyride.scss

@@ -1,6 +1,7 @@
 //
 // Joyride Variables
 //
+$include-html-joyride-classes: $include-html-classes !default;
 
 // Controlling default Joyride styles
 $joyride-tip-bg:              rgb(0,0,0) !default;
@@ -34,177 +35,181 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
 
 // We decided not to make a mixin for this because it relies on predefined classes to work properly.
 
-/* Foundation Joyride */
-.joyride-list { display: none; }
+@if $include-html-joyride-classes != false {
 
-/* Default styles for the container */
-.joyride-tip-guide {
-  display: none;
-  position: absolute;
-  background: $joyride-tip-bg;
-  color: $joyride-tip-font-color;
-  z-index: 101;
-  top: 0;
-  #{$default-float}: 2.5%;
-  font-family: inherit;
-  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 {
-    display: block;
+  /* Foundation Joyride */
+  .joyride-list { display: none; }
+  
+  /* Default styles for the container */
+  .joyride-tip-guide {
+    display: none;
     position: absolute;
-    #{$default-float}: $joyride-tip-position-offset;
-    width: 0;
-    height: 0;
-    border: inset $joyride-tip-nub-size;
-
-    &.top {
-      border-top-style: solid;
-      border-color: $joyride-tip-bg;
-      border-top-color: transparent !important;
-      border-#{$default-float}-color: transparent !important;
-      border-#{$opposite-direction}-color: transparent !important;
-      top: -($joyride-tip-nub-size*2);
-    }
-    &.bottom {
-      border-bottom-style: solid;
-      border-color: $joyride-tip-bg !important;
-      border-bottom-color: transparent !important;
-      border-#{$default-float}-color: transparent !important;
-      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); }
+    background: $joyride-tip-bg;
+    color: $joyride-tip-font-color;
+    z-index: 101;
+    top: 0;
+    #{$default-float}: 2.5%;
+    font-family: inherit;
+    font-weight: normal;
+    width: 95%;
   }
-}
-
-/* Typography */
-.joyride-tip-guide h1,
-.joyride-tip-guide h2,
-.joyride-tip-guide h3,
-.joyride-tip-guide h4,
-.joyride-tip-guide h5,
-.joyride-tip-guide h6 {
-  line-height: 1.25;
-  margin: 0;
-  font-weight: $joyride-tip-header-weight;
-  color: $joyride-tip-font-color;
-}
-.joyride-tip-guide p {
-  margin: 0 0 emCalc(18px) 0;
-  font-size: $joyride-tip-font-size;
-  line-height: 1.3;
-}
-
-.joyride-timer-indicator-wrap {
-  width: $joyride-tip-timer-width;
-  height: $joyride-tip-timer-height;
-  border: $joyride-tip-border;
-  position: absolute;
-  #{$opposite-direction}: emCalc(17px);
-  bottom: emCalc(16px);
-}
-.joyride-timer-indicator {
-  display: block;
-  width: 0;
-  height: inherit;
-  background: $joyride-tip-timer-color;
-}
-
-.joyride-close-tip {
-  position: absolute;
-  #{$opposite-direction}: 12px;
-  top: 10px;
-  color: $joyride-tip-close-color !important;
-  text-decoration: none;
-  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%;
-  width: 100%;
-  background: transparent;
-  background: $joyride-screenfill;
-  z-index: 100;
-  display: none;
-  top: 0;
-  #{$default-float}: 0;
-  cursor: pointer;
-}
-
-.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;
-  box-shadow: 0px 0px 15px #ffffff;
-}
-
-.joyride-expose-cover {
-  background: transparent;
-  border-radius: 3px;
-  position: absolute;
-  z-index: 9999;
-  top: 0px;
-  left: 0px;
-}
-
-
-/* Styles for screens that are atleast 768px; */
-@media #{$small} {
-  .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+  
+  .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 {
+      display: block;
+      position: absolute;
+      #{$default-float}: $joyride-tip-position-offset;
+      width: 0;
+      height: 0;
+      border: inset $joyride-tip-nub-size;
+  
+      &.top {
+        border-top-style: solid;
+        border-color: $joyride-tip-bg;
+        border-top-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
+        top: -($joyride-tip-nub-size*2);
+      }
       &.bottom {
+        border-bottom-style: solid;
         border-color: $joyride-tip-bg !important;
         border-bottom-color: transparent !important;
         border-#{$default-float}-color: transparent !important;
         border-#{$opposite-direction}-color: transparent !important;
         bottom: -($joyride-tip-nub-size*2);
       }
-      &.right {
-        border-color: $joyride-tip-bg !important;
-        border-top-color: transparent !important;
-        border-right-color: transparent !important; border-bottom-color: transparent !important;
-        top: $joyride-tip-position-offset;
-        left: auto;
-        right: -($joyride-tip-nub-size*2);
-      }
-      &.left {
-        border-color: $joyride-tip-bg !important;
-        border-top-color: transparent !important;
-        border-left-color: transparent !important;
-        border-bottom-color: transparent !important;
-        top: $joyride-tip-position-offset;
-        left: -($joyride-tip-nub-size*2);
-        right: auto;
+  
+      &.right { right: -($joyride-tip-nub-size*2); }
+      &.left { left: -($joyride-tip-nub-size*2); }
+    }
+  }
+  
+  /* Typography */
+  .joyride-tip-guide h1,
+  .joyride-tip-guide h2,
+  .joyride-tip-guide h3,
+  .joyride-tip-guide h4,
+  .joyride-tip-guide h5,
+  .joyride-tip-guide h6 {
+    line-height: 1.25;
+    margin: 0;
+    font-weight: $joyride-tip-header-weight;
+    color: $joyride-tip-font-color;
+  }
+  .joyride-tip-guide p {
+    margin: 0 0 emCalc(18px) 0;
+    font-size: $joyride-tip-font-size;
+    line-height: 1.3;
+  }
+  
+  .joyride-timer-indicator-wrap {
+    width: $joyride-tip-timer-width;
+    height: $joyride-tip-timer-height;
+    border: $joyride-tip-border;
+    position: absolute;
+    #{$opposite-direction}: emCalc(17px);
+    bottom: emCalc(16px);
+  }
+  .joyride-timer-indicator {
+    display: block;
+    width: 0;
+    height: inherit;
+    background: $joyride-tip-timer-color;
+  }
+  
+  .joyride-close-tip {
+    position: absolute;
+    #{$opposite-direction}: 12px;
+    top: 10px;
+    color: $joyride-tip-close-color !important;
+    text-decoration: none;
+    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%;
+    width: 100%;
+    background: transparent;
+    background: $joyride-screenfill;
+    z-index: 100;
+    display: none;
+    top: 0;
+    #{$default-float}: 0;
+    cursor: pointer;
+  }
+  
+  .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;
+    box-shadow: 0px 0px 15px #ffffff;
+  }
+  
+  .joyride-expose-cover {
+    background: transparent;
+    border-radius: 3px;
+    position: absolute;
+    z-index: 9999;
+    top: 0px;
+    left: 0px;
+  }
+  
+  
+  /* Styles for screens that are atleast 768px; */
+  @media #{$small} {
+    .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+      .joyride-nub {
+        &.bottom {
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+        &.right {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-right-color: transparent !important; border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: auto;
+          right: -($joyride-tip-nub-size*2);
+        }
+        &.left {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-left-color: transparent !important;
+          border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: -($joyride-tip-nub-size*2);
+          right: auto;
+        }
       }
     }
   }
-}
+
+}