zurb-foundation 4.0.5 → 4.0.7

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

@@ -101,7 +101,7 @@ $dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-button-classes {
 
   /* Dropdown Button */
   .dropdown.button { @include dropdown-button;

data/scss/foundation/components/_dropdown.scss

@@ -108,7 +108,7 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-nav-classes {
 
   @media only screen and (max-width: 767px) {
     .f-dropdown {

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

@@ -37,7 +37,7 @@ $flex-video-widescreen-padding-bottom: 57.25% !default;
   }
 }
 
-@if $include-html-classes {
+@if $include-html-media-classes {
 
   /* Flex Video */
   .flex-video { @include flex-video-container; }

data/scss/foundation/components/_forms.scss

@@ -241,96 +241,98 @@ $input-error-message-font-color-alt: #333 !default;
   @else { color: $input-error-message-font-color-alt; }
 }
 
-
-/* Standard Forms */
-form { margin: 0 0 $form-spacing; }
-
-/* Using forms within rows, we need to set some defaults */
-form .row { @include form-row-base; }
-form .row .row { margin: 0; }
-
-/* Label Styles */
-label { @include form-label;
-  &.right { @include form-label(right,false); }
-  &.inline { @include form-label(inline,false); }
-}
-
-/* Attach elements to the beginning or end of an input */
-.prefix,
-.postfix { @include prefix-postfix-base; }
-
-/* Adjust padding, alignment and radius if pre/post element is a button */
-.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
-.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
-.prefix.button.radius { @include side-radius(left, $global-radius); }
-.postfix.button.radius { @include side-radius(right, $global-radius); }
-.prefix.button.round { @include side-radius(left, 1000px); }
-.postfix.button.round { @include side-radius(right, 1000px); }
-
-/* Separate prefix and postfix styles when on span so buttons keep their own */
-span.prefix { @include prefix();
-  &.radius { @include side-radius(left, $global-radius); }
-}
-span.postfix { @include postfix();
-  &.radius { @include side-radius(right, $global-radius); }
-}
-
-/* Input groups will automatically style first and last elements of the group */
-.input-group {
-  &.radius {
-    &>*:first-child,  &>*:first-child * {
-    	@include side-radius(left, $global-radius);
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-form-classes {
+	/* Standard Forms */
+  form { margin: 0 0 $form-spacing; }
+  
+  /* Using forms within rows, we need to set some defaults */
+  form .row { @include form-row-base; }
+  form .row .row { margin: 0; }
+  
+  /* Label Styles */
+  label { @include form-label;
+    &.right { @include form-label(right,false); }
+    &.inline { @include form-label(inline,false); }
+  }
+  
+  /* Attach elements to the beginning or end of an input */
+  .prefix,
+  .postfix { @include prefix-postfix-base; }
+  
+  /* Adjust padding, alignment and radius if pre/post element is a button */
+  .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
+  .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
+  .prefix.button.radius { @include side-radius(left, $global-radius); }
+  .postfix.button.radius { @include side-radius(right, $global-radius); }
+  .prefix.button.round { @include side-radius(left, 1000px); }
+  .postfix.button.round { @include side-radius(right, 1000px); }
+  
+  /* Separate prefix and postfix styles when on span so buttons keep their own */
+  span.prefix { @include prefix();
+    &.radius { @include side-radius(left, $global-radius); }
+  }
+  span.postfix { @include postfix();
+    &.radius { @include side-radius(right, $global-radius); }
+  }
+  
+  /* Input groups will automatically style first and last elements of the group */
+  .input-group {
+    &.radius {
+      &>*:first-child,  &>*:first-child * {
+        @include side-radius(left, $global-radius);
+      }
+      &>*:last-child, &>*:last-child * {
+        @include side-radius(right, $global-radius);
+      }
     }
-    &>*:last-child, &>*:last-child * {
-    	@include side-radius(right, $global-radius);
+    &.round {
+      &>*:first-child,  &>*:first-child * {
+        @include side-radius(left, $button-round);
+      }
+      &>*:last-child, &>*:last-child * {
+        @include side-radius(right, $button-round);
+      }
     }
   }
-  &.round {
-  	&>*:first-child,  &>*:first-child * {
-  		@include side-radius(left, 1000px);
-  	}
-  	&>*:last-child, &>*:last-child * {
-  		@include side-radius(right, 1000px);
-  	}
+  
+  /* We use this to get basic styling on all basic form elements */
+  input[type="text"],
+  input[type="password"],
+  input[type="date"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"],
+  input[type="email"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="time"],
+  input[type="url"],
+  textarea {
+    @include form-element;
+    @include single-transition(all, 0.15s, linear);
   }
-}
-
-/* We use this to get basic styling on all basic form elements */
-input[type="text"],
-input[type="password"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="week"],
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="tel"],
-input[type="time"],
-input[type="url"],
-textarea {
-  @include form-element;
-  @include single-transition(all, 0.15s, linear);
-}
-
-/* We add basic fieldset styling */
-fieldset {
-  @include fieldset;
-}
-
-/* Error Handling */
-.error input,
-input.error,
-.error textarea,
-textarea.error {
-  @include form-error-color;
-}
-
-.error label,
-label.error { @include form-label-error-color; }
-
-.error small,
-small.error {
-  @include form-error-message;
-}
+  
+  /* We add basic fieldset styling */
+  fieldset {
+    @include fieldset;
+  }
+  
+  /* Error Handling */
+  .error input,
+  input.error,
+  .error textarea,
+  textarea.error {
+    @include form-error-color;
+  }
+  
+  .error label,
+  label.error { @include form-label-error-color; }
+  
+  .error small,
+  small.error {
+    @include form-error-message;
+  }
+}

data/scss/foundation/components/_global.scss

@@ -6,7 +6,7 @@
 }
 
 html,
-body { font-size: $em-base; }
+body { font-size: $base-font-size; }
 
 // Default body styles
 body {
@@ -19,7 +19,6 @@ body {
   font-style: $body-font-style;
   line-height: 1;
   position: relative;
-  -webkit-font-smoothing: $font-smoothing;
 }
 
 // Override outline from normalize, we don't like it
@@ -51,6 +50,12 @@ img { -ms-interpolation-mode: bicubic; }
 .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; }
 

data/scss/foundation/components/_grid.scss

@@ -1,8 +1,8 @@
 //
 // Grid Variables
 //
-$row-width:     62.5em !default;
-$column-gutter: 1.875em !default;
+$row-width:     emCalc(1000px) !default;
+$column-gutter: emCalc(30px) !default;
 $total-columns: 12 !default;
 
 //
@@ -100,7 +100,7 @@ $total-columns: 12 !default;
 
 
 /* Grid HTML Classes */
-@if $include-html-classes {
+@if $include-html-grid-classes {
 
   .row {
     @include grid-row;

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

@@ -37,7 +37,7 @@ $inline-list-children-display: block !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-grid-classes {
 
   /* Inline Lists */
   .inline-list {

data/scss/foundation/components/_keystrokes.scss

@@ -17,7 +17,7 @@ $keystroke-bg:              darken(#fff, $keystroke-function-factor) !default;
 $keystroke-border-style:    solid !default;
 $keystroke-border-width:    1px !default;
 $keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor) !default;
-$keystroke-radius:          $button-radius !default;
+$keystroke-radius:          $global-radius !default;
 
 //
 // Keystroke Mixins
@@ -44,7 +44,7 @@ $keystroke-radius:          $button-radius !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-media-classes {
 
   /* Keystroke Characters */
   .keystroke,

data/scss/foundation/components/_labels.scss

@@ -4,7 +4,7 @@
 
 // We use these to style the labels
 $label-padding:     emCalc(3px) emCalc(10px) emCalc(4px) !default;
-$label-radius:      $button-radius !default;
+$label-radius:      $global-radius !default;
 
 // We use these to style the label text
 $label-font-size:   emCalc(14px) !default;
@@ -21,7 +21,7 @@ $label-font-weight: bold !default;
   text-decoration: none;
   line-height: 1;
   white-space: nowrap;
-  display: inline;
+  display: inline-block;
   position: relative;
 }
 
@@ -61,7 +61,7 @@ $label-font-weight: bold !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-label-classes {
 
   /* Labels */
   .label {

data/scss/foundation/components/_magellan.scss

@@ -3,7 +3,7 @@
 //
 $magellan-bg: #fff !default;
 
-@if $include-html-classes {
+@if $include-html-magellan-classes {
 
   [data-magellan-expedition] {
     background: $magellan-bg;

data/scss/foundation/components/_pagination.scss

@@ -91,7 +91,7 @@ $pagination-link-current-active-bg:      $primary-color !default;
 
 
 
-@if $include-html-classes {
+@if $include-html-nav-classes {
 
   /* Pagination */
   .pagination { @include pagination; }

data/scss/foundation/components/_panels.scss

@@ -56,7 +56,7 @@ $panel-font-color-alt:  #fff !default;
 }
 
 // Only include these classes if the option exists
-@if $include-html-classes {
+@if $include-html-panel-classes {
 
   /* Panels */
   .panel { @include panel;

data/scss/foundation/components/_pricing-tables.scss

@@ -114,7 +114,7 @@ $price-cta-padding:         emCalc(20px) emCalc(20px) 0 !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-pricing-classes {
 
   /* Pricing Tables */
   .pricing-table {

data/scss/foundation/components/_progress-bars.scss

@@ -10,7 +10,7 @@ $progress-bar-color: transparent !default;
 $progress-bar-border-color: darken(#fff, 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
-$progress-bar-border-radius: $button-radius !default;
+$progress-bar-border-radius: $global-radius !default;
 
 // We use these to control the margin & padding
 $progress-bar-pad: emCalc(2px) !default;
@@ -43,7 +43,7 @@ $progress-meter-alert-color: $alert-color !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-media-classes {
 
   /* Progress Bar */
   .progress {

data/scss/foundation/components/_reveal.scss

@@ -99,7 +99,7 @@ $reveal-border-color:    #666 !default;
   cursor: pointer;
 }
 
-@if $include-html-classes {
+@if $include-html-reveal-classes {
   // Reveal Modals
   .reveal-modal-bg { @include reveal-bg; }
 

data/scss/foundation/components/_section.scss

@@ -200,7 +200,7 @@ $section-bottom-margin:          emCalc(20px) !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-section-classes {
 
   /* Sections */
   .section-container {

data/scss/foundation/components/_side-nav.scss

@@ -60,7 +60,7 @@ $side-nav-divider-color:     darken(#fff, 10%) !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-nav-classes {
 
   /* Side Nav */
   .side-nav { @include side-nav; }

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

@@ -137,7 +137,7 @@ $split-button-pip-left-lrg:    emCalc(-9px) !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-button-classes {
 
   /* Split Buttons */
   .split.button { @include split-button;

data/scss/foundation/components/_sub-nav.scss

@@ -59,7 +59,7 @@ $sub-nav-active-cursor:      default !default;
 }
 
 
-@if $include-html-classes {
+@if $include-html-nav-classes {
 
   /* Side Nav */
   .sub-nav { @include sub-nav; }

data/scss/foundation/components/_switch.scss

@@ -213,13 +213,13 @@ $switch-label-outline:            1px dotted #888 !default;
   @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
 }
 
-@if $include-html-classes {
+@if $include-html-button-classes {
 
   /* Foundation Switches */
   @media only screen {
 
     // Containing element for the radio switch
-    .switch {
+    div.switch {
       @include switch;
 
       // Large radio switches
@@ -247,4 +247,4 @@ $switch-label-outline:            1px dotted #888 !default;
     @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
 
   }
-}
+}