zurb-foundation 4.1.2 → 4.1.5

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

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

data/scss/foundation/components/_forms.scss

@@ -6,11 +6,11 @@
 $form-spacing:                       emCalc(16px) !default;
 
 // We use these to style the labels in different ways
-$label-pointer:                      pointer !default;
-$label-font-size:                    emCalc(14px) !default;
-$label-font-weight:                  500 !default;
-$label-font-color:                   lighten(#000, 30%) !default;
-$label-bottom-margin:                emCalc(3px) !default;
+$form-label-pointer:                 pointer !default;
+$form-label-font-size:               emCalc(14px) !default;
+$form-label-font-weight:             500 !default;
+$form-label-font-color:              lighten(#000, 30%) !default;
+$form-label-bottom-margin:           emCalc(3px) !default;
 $input-font-family:                  inherit !default;
 $input-font-color:                   rgba(0,0,0,0.75) !default;
 $input-font-size:                    emCalc(14px) !default;
@@ -22,6 +22,7 @@ $input-border-style:                 solid !default;
 $input-border-width:                 1px !default;
 $input-disabled-bg:                  #ddd !default;
 $input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1) !default;
+$input-include-glowing-effect:       true !default;
 
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style:              solid !default;
@@ -52,6 +53,9 @@ $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
+$glowing-effect-fade-time:           0.45s !default;
+$glowing-effect-color:               $input-focus-border-color !default;
 
 //
 // Form Mixins
@@ -59,7 +63,7 @@ $input-error-message-font-color-alt: #333 !default;
 
 // We use this mixin to give us form styles for rows inside of forms
 @mixin form-row-base {
-  .row { margin: 0 -$form-spacing / 2;
+  .row { margin: 0 ((-$form-spacing) / 2);
 
     .column,
     .columns { padding: 0 $form-spacing / 2; }
@@ -73,7 +77,9 @@ $input-error-message-font-color-alt: #333 !default;
     }
   }
   input.column,
-  input.columns { padding-#{$default-float}: $form-spacing / 2; }
+  input.columns,
+  textarea.column,
+  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
 }
 
 // We use this mixin to give all basic form elements their style
@@ -91,7 +97,9 @@ $input-error-message-font-color-alt: #333 !default;
   height: emCalc(13px) + ($form-spacing * 1.5);
   width: 100%;
   @include box-sizing(border-box);
-
+  @if $input-include-glowing-effect {
+      @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
+  }
   // Basic focus styles
   &:focus {
     background: $input-focus-bg-color;
@@ -108,12 +116,12 @@ $input-error-message-font-color-alt: #333 !default;
 
   // Control whether or not the base styles come through.
   @if $base-style {
-    font-size: $label-font-size;
-    color: $label-font-color;
-    cursor: $label-pointer;
+    font-size: $form-label-font-size;
+    color: $form-label-font-color;
+    cursor: $form-label-pointer;
     display: block;
-    font-weight: $label-font-weight;
-    margin-bottom: $label-bottom-margin;
+    font-weight: $form-label-font-weight;
+    margin-bottom: $form-label-bottom-margin;
   }
 
   // Alignment options
@@ -139,9 +147,9 @@ $input-error-message-font-color-alt: #333 !default;
   border-style: $input-prefix-border-type;
   border-width: $input-prefix-border-size;
   overflow: $input-prefix-overflow;
-  font-size: $label-font-size;
-  height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
-  line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
+  font-size: $form-label-font-size;
+  height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
+  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
 }
 
 // We use this mixin to create prefix label styles
@@ -242,7 +250,7 @@ $input-error-message-font-color-alt: #333 !default;
 }
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-form-classes {
+@if $include-html-form-classes != false {
 	/* Standard Forms */
   form { margin: 0 0 $form-spacing; }
 
@@ -262,17 +270,18 @@ $input-error-message-font-color-alt: #333 !default;
   /* 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($default-float, $global-radius); }
-  .postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
-  .prefix.button.round { @include side-radius($default-float, 1000px); }
-  .postfix.button.round { @include side-radius($opposite-direction, 1000px); }
+
+  .prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
+  .postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
+  .prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
+  .postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
 
   /* Separate prefix and postfix styles when on span so buttons keep their own */
   span.prefix { @include prefix();
-    &.radius { @include side-radius($default-float, $global-radius); }
+    &.radius { @include radius(0); @include side-radius(left, $global-radius); }
   }
   span.postfix { @include postfix();
-    &.radius { @include side-radius($opposite-direction, $global-radius); }
+    &.radius { @include radius(0); @include side-radius(right, $global-radius); }
   }
 
   /* Input groups will automatically style first and last elements of the group */
@@ -311,7 +320,22 @@ $input-error-message-font-color-alt: #333 !default;
   input[type="url"],
   textarea {
     @include form-element;
-    @include single-transition(all, 0.15s, linear);
+    @if not $input-include-glowing-effect {
+        @include single-transition(all, 0.15s, linear);
+    }
+  }
+
+  /* Adjust margin for form elements below */
+  input[type="file"],
+  input[type="checkbox"],
+  input[type="radio"],
+  select {
+    margin: 0 0 $form-spacing 0;
+  }
+  
+  /* Normalize file input width */
+  input[type="file"] {
+    width:100%;
   }
 
   /* We add basic fieldset styling */
@@ -334,4 +358,4 @@ $input-error-message-font-color-alt: #333 !default;
   small.error {
     @include form-error-message;
   }
-}
+}

data/scss/foundation/components/_global.scss

@@ -1,3 +1,219 @@
+//
+// Global Foundation Mixins
+//
+
+// We use this to control border radius.
+@mixin radius($radius:$global-radius) {
+  @if $radius {
+    -webkit-border-radius: $radius;
+    border-radius: $radius;
+  }
+}
+
+// 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;
+    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;
+    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;
+    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;
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+}
+
+// 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;
+  box-shadow: $shiny-edge-size $shiny-edge-color inset;
+
+  @if $active { &:active {
+    -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;
+  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;
+  box-sizing: $type;
+}
+
+// We use this to create equilateral triangles
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: inset $triangle-size;
+  @if ($triangle-direction == top) {
+    border-color: $triangle-color transparent transparent transparent;
+    border-top-style: solid;
+  }
+  @if ($triangle-direction == bottom) {
+    border-color: transparent transparent $triangle-color transparent;
+    border-bottom-style: solid;
+  }
+  @if ($triangle-direction == left) {
+    border-color: transparent transparent transparent $triangle-color;
+    border-left-style: solid;
+  }
+  @if ($triangle-direction == right) {
+    border-color: transparent $triangle-color transparent transparent;
+    border-right-style: solid;
+  }
+}
+
+// We use this to do clear floats
+@mixin clearfix() {
+  *zoom:1;
+  &:before, &:after { content: " "; display: table; }
+  &:after { clear: both; }
+}
+
+
+// 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;
+
+  &:#{$selector} {
+    -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;
+  }
+}
+
+//
+// Foundation Variables
+//
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with brower-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it effect the grid breakpoints,
+// set $em-base to $base-font-size and make sure $base-font-size is a px value.
+$base-font-size: 100% !default;
+
+// $base-line-height is 24px while $base-font-size is 16px
+$base-line-height: 150% !default;
+
+// This is the default html and body font-size for the base em value.
+$em-base: 16px !default;
+
+// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
+@function emCalc($pxWidth) {
+  @return $pxWidth / $em-base * 1em;
+}
+
+// Maybe you want to create rems and pixels
+// @function remCalc($pxWidth) {
+//   @return $pxWidth / $em-base * 1rem;
+// }
+
+// We use these to control various global styles
+$body-bg: #fff !default;
+$body-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: normal !default;
+$body-font-style: normal !default;
+
+// We use this to control font-smoothing
+$font-smoothing: antialiased !default;
+
+// We use these to control text direction settings
+$text-direction: ltr !default;
+
+// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
+$default-float: left !default;
+$opposite-direction: right !default;
+@if $text-direction == ltr {
+  $default-float: left;
+  $opposite-direction: right;
+} @else {
+  $default-float: right;
+  $opposite-direction: left;
+}
+
+// We use these as default colors throughout
+$primary-color: #2ba6cb !default;
+$secondary-color: #e9e9e9 !default;
+$alert-color: #c60f13 !default;
+$success-color: #5da423 !default;
+
+// We use these to make sure border radius matches unless we want it different.
+$global-radius: 3px !default;
+$global-rounded: 1000px !default;
+
+// We use these to control inset shadow shiny edges and depressions.
+$shiny-edge-size: 0 1px 0 !default;
+$shiny-edge-color: rgba(#fff, .5) !default;
+$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;
+
+// Media Queries
+$small-screen: emCalc(768px) !default;
+$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;
+$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,
@@ -17,7 +233,7 @@ body {
   font-family: $body-font-family;
   font-weight: $body-font-weight;
   font-style: $body-font-style;
-  line-height: 1;
+  line-height: 1; // Set to $base-line-height to take on browser default of 150%
   position: relative;
 }
 
@@ -57,7 +273,10 @@ img { -ms-interpolation-mode: bicubic; }
 .antialiased { -webkit-font-smoothing: antialiased; }
 
 // Get rid of gap under images by making them display: inline-block; by default
-img { display: inline-block; }
+img {
+  display: inline-block;
+  vertical-align: middle;
+}
 
 //
 // Global resets for forms
@@ -67,4 +286,4 @@ img { display: inline-block; }
 textarea { height: auto; min-height: 50px; }
 
 // Make select elements 100% width by default
-select { width: 100%; }
+select { width: 100%; }

data/scss/foundation/components/_grid.scss

@@ -5,6 +5,14 @@ $row-width:     emCalc(1000px) !default;
 $column-gutter: emCalc(30px) !default;
 $total-columns: 12 !default;
 
+//
+// Grid Function
+//
+
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
 //
 // Grid Mixins
 //
@@ -53,14 +61,21 @@ $total-columns: 12 !default;
 
 
 // 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:$default-float) {
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
 
   position: relative;
 
+  // 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
-  @if $collapse == false {
-    padding-#{$default-float}: $column-gutter / 2;
-    padding-#{$opposite-direction}: $column-gutter / 2;
+  // (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
@@ -69,14 +84,8 @@ $total-columns: 12 !default;
 
     // If last column, float naturally instead of to the right
     @if $last-column { float: $opposite-direction; }
-
-    // if collapsed, get rid of gutter padding
-    @else if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
-
   }
 
-  @if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
-
   // If offset, calculate appropriate margins
   @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
 
@@ -92,7 +101,7 @@ $total-columns: 12 !default;
   }
 
   @if $float {
-    @if $float == left or true { float: $default-float; }
+    @if $float == left or $float == true { float: $default-float; }
     @else if $float == right { float: $opposite-direction; }
     @else { float: none; }
   }
@@ -101,14 +110,11 @@ $total-columns: 12 !default;
 
 
 /* Grid HTML Classes */
-@if $include-html-grid-classes {
+@if $include-html-grid-classes != false {
 
   .row {
     @include grid-row;
 
-    .column,
-    .columns { @include grid-column($columns:$total-columns); }
-
     &.collapse {
       .column,
       .columns { @include grid-column($collapse:true); }
@@ -119,17 +125,20 @@ $total-columns: 12 !default;
     }
   }
 
+  .column,
+  .columns { @include grid-column($columns:$total-columns); }
+
   @media only screen {
 
-    .row .column,
-    .row .columns { @include grid-column($columns:false); }
+    .column,
+    .columns { @include grid-column($columns:false); }
 
     @for $i from 1 through $total-columns {
-      .row .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
     @for $i from 1 through $total-columns - 2 {
-      .row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
     [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
@@ -143,26 +152,33 @@ $total-columns: 12 !default;
   @media #{$small} {
 
     @for $i from 1 through $total-columns {
-      .row .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
-    @for $i from 1 through $total-columns - 2 {
+    @for $i from 1 through $total-columns - 1 {
       .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
-    @for $i from 2 through $total-columns - 2 {
+    @for $i from 1 through $total-columns - 1 {
       .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
       .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
     }
 
-    @for $i from 2 through $total-columns - 2 {
+    @for $i from 1 through $total-columns - 1 {
       .small-push#{-$i} { #{$default-float}: inherit; }
       .small-pull#{-$i} { #{$opposite-direction}: inherit; }
     }
 
+    .column.small-centered,
+    .columns.small-centered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
     .column.large-centered,
     .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
 
   }
 
-}
+}