zurb-foundation 4.1.2 → 4.1.5

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

@@ -87,7 +87,7 @@ $alert-radius:              $global-radius                                 !defa
   @include radius($radius);
 }
 
-@if $include-html-alert-classes {
+@if $include-html-alert-classes != false {
 
   /* Foundation Alerts */
   .alert-box {

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

@@ -24,7 +24,7 @@ $block-grid-media-queries: true !default;
     @include clearfix;
 
     &>li {
-      display: block;
+      display: inline;
       height: auto;
       float: $default-float;
       padding: 0 $spacing $spacing;
@@ -36,6 +36,7 @@ $block-grid-media-queries: true !default;
       width: 100%/$per-row;
       padding: 0 $spacing $spacing;
 
+      &:nth-of-type(n) { clear: none; }
       &:nth-of-type(#{$per-row}n+1) { clear: both; }
     }
   }
@@ -56,11 +57,14 @@ $block-grid-media-queries: true !default;
 
   /* Foundation Block Grids for above small breakpoint */
   @media #{$small} {
+    /* Remove small grid clearing */
+    @for $i from 1 through $block-grid-elements {
+      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
+    }
     @for $i from 1 through $block-grid-elements {
       .large-block-grid-#{($i)} {
         @include block-grid($i,$block-grid-default-spacing,false);
       }
     }
-    [class*="small-block-grid-"] > li { clear: none !important; }
   }
 }

data/scss/foundation/components/_breadcrumbs.scss

@@ -6,7 +6,7 @@
 $crumb-bg: lighten($secondary-color, 5%)                       !default;
 
 // We use these to set the padding around the breadcrumbs.
-$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px)           !default;
+$crumb-padding: emCalc(9px) emCalc(14px) emCalc(9px)           !default;
 $crumb-side-padding: emCalc(12px)                              !default;
 
 // We use these to control border styles.
@@ -52,36 +52,40 @@ $crumb-slash: "/"                                              !default;
 
   // A normal state will make the links look and act like clickable breadcrumbs.
   margin: 0;
-  padding: 0 $crumb-side-padding 0 0;
   float: $default-float;
+  font-size: $crumb-font-size;
+  text-transform: $crumb-font-transform;
+  color: $crumb-font-color;
 
-  &:hover a,
-  &:focus a { text-decoration: $crumb-link-decor; }
+  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
 
   a,
   span {
-    font-size: $crumb-font-size;
-    padding-#{$default-float}: $crumb-side-padding;
     text-transform: $crumb-font-transform;
     color: $crumb-font-color;
   }
 
   // Current is for the link of the current page
   &.current {
+  	cursor: default;
+  	color: $crumb-font-color-current;
     a {
       cursor: default;
       color: $crumb-font-color-current;
     }
 
-    &:hover a,
-    &:focus a { text-decoration: none; }
+    &:hover, &:hover a,
+    &:focus, &:focus a { text-decoration: none; }
   }
 
   // Unavailable removed color and link styles so it looks inactive.
   &.unavailable {
+  	color: $crumb-font-color-unavailable;
     a { color: $crumb-font-color-unavailable; }
 
+    &:hover,
     &:hover a,
+    &:focus,
     a:focus {
       text-decoration: none;
       color: $crumb-font-color-unavailable;
@@ -92,24 +96,27 @@ $crumb-slash: "/"                                              !default;
   &:before {
     content: "#{$crumb-slash}";
     color: $crumb-slash-color;
+    margin: 0 $crumb-side-padding;
     position: relative;
     top: 1px;
   }
-  &:first-child a,
-  &:first-child span { padding-#{$default-float}: 0; }
-  &:first-child:before { content: " "; }
+
+  &:first-child:before {
+	  content: " ";
+	  margin: 0;
+  }
 
 }
 
 
-@if $include-html-nav-classes {
+@if $include-html-nav-classes != false {
 
   /* Breadcrumbs */
   .breadcrumbs {
     @include crumb-container;
     @include radius($crumb-radius);
 
-    li {
+    &>* {
       @include crumbs;
     }
   }

data/scss/foundation/components/_button-groups.scss

@@ -36,24 +36,36 @@ $button-bar-margin-opposite: emCalc(10px) !default;
 
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
-    &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
-    &:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $button-radius); }
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $button-radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
   }
   @else if $radius {
-    &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
-    &:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $radius); }
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
   }
 
   // We use this to make the buttons even width across their container
   @if $even {
     width: percentage((100/$even) / 100);
-    .button { width: 100%; }
+    button, .button { width: 100%; }
   }
 
 }
 
 // Only include these CSS classes if $include-html-classes: true
-@if $include-html-button-classes {
+@if $include-html-button-classes != false {
 
   /* Button Groups */
   .button-group { @include button-group-container;

data/scss/foundation/components/_buttons.scss

@@ -81,10 +81,16 @@ $button-disabled-opacity: 0.6 !default;
 
   // We can set $full-width:true to remove side padding extend width.
   @if $full-width {
-    padding-top: $padding;
-    padding-#{$opposite-direction}: 0px;
-    padding-bottom: $padding + emCalc(1px);
-    padding-#{$default-float}: 0px;
+    // We still need to check if $padding is set.
+    @if $padding {
+	  padding-top: $padding;
+	  padding-bottom: $padding + emCalc(1px);
+    } @else if $padding == false {
+      padding-top:0;
+      padding-bottom:0;
+    }
+    padding-right: 0px;
+    padding-left: 0px;
     width: 100%;
   }
 
@@ -155,7 +161,7 @@ $button-disabled-opacity: 0.6 !default;
 //
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-button-classes {
+@if $include-html-button-classes != false {
 
   // Default styles applied outside of media query
   button, .button {
@@ -170,7 +176,7 @@ $button-disabled-opacity: 0.6 !default;
     &.large  { @include button-size($padding:$button-lrg); }
     &.small  { @include button-size($padding:$button-sml); }
     &.tiny   { @include button-size($padding:$button-tny); }
-    &.expand { @include button-size(false,$full-width:true); }
+    &.expand { @include button-size($padding:null,$full-width:true); }
 
     &.left-align  { text-align: left; text-indent: emCalc(12px); }
     &.right-align { text-align: right; padding-right: emCalc(12px); }
@@ -183,8 +189,7 @@ $button-disabled-opacity: 0.6 !default;
 
   }
 
-  input.button,
-  button.button {
+  button, .button {
     @include button-size($padding:false, $is-input:$button-med);
     &.tiny { @include button-size($padding:false, $is-input:$button-tny); }
     &.small { @include button-size($padding:false, $is-input:$button-sml); }
@@ -194,7 +199,7 @@ $button-disabled-opacity: 0.6 !default;
   // Styles for any browser or device that support media queries
   @media only screen {
 
-    .button {
+    button, .button {
       @include inset-shadow();
       @include single-transition(background-color);
 
@@ -210,10 +215,12 @@ $button-disabled-opacity: 0.6 !default;
 
   // Additional styles for screens larger than 768px
   @media #{$small} {
-    .button {
+
+    button, .button {
       @include button-base($style:false, $display:inline-block);
       @include button-size($padding:false, $full-width:false);
     }
+
   }
 
-}
+}

data/scss/foundation/components/_clearing.scss

@@ -35,6 +35,12 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 [data-clearing] {
   @include clearfix;
   margin-bottom: 0;
+  list-style: none;
+
+  li {
+    float: $default-float;
+    margin-#{$opposite-direction}: 10px;
+  }
 }
 
 .clearing-blackout {

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

@@ -32,8 +32,8 @@ $custom-dropdown-font-color-selected:   #000 !default;
 $custom-dropdown-shadow:                0 2px 2px 0px rgba(0,0,0,0.1) !default;
 $custom-dropdown-offset-top:            auto !default;
 $custom-dropdown-list-padding:          emCalc(4px) !default;
-$custom-dropdown-default-float-padding:          emCalc(6px) !default;
-$custom-dropdown-opposite-padding:         emCalc(38px) !default;
+$custom-dropdown-default-float-padding: emCalc(6px) !default;
+$custom-dropdown-opposite-padding:      emCalc(38px) !default;
 $custom-dropdown-list-item-min-height:  emCalc(24px) !default;
 $custom-dropdown-width-small:           134px !default;
 $custom-dropdown-width-medium:          254px !default;
@@ -44,11 +44,17 @@ $custom-dropdown-width-large:           434px !default;
 // We may look at updating this in the future.
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-button-classes {
-  
+@if $include-html-button-classes != false {
+
   /* Custom Checkbox and Radio Inputs */
   form.custom {
-  
+
+    .hidden-field {
+      margin-#{$default-float}: -99999px;
+      position: absolute;
+      visibility: hidden;
+    }
+
     .custom {
       display: inline-block;
       width: 16px;
@@ -57,9 +63,9 @@ $custom-dropdown-width-large:           434px !default;
       top: 2px;
       border: solid 1px $custom-form-border-color;
       background: $custom-form-bg;
-  
+
       &.radio { @include radius(1000px); }
-  
+
       &.checkbox {
         &:before {
           content: "";
@@ -75,7 +81,7 @@ $custom-dropdown-width-large:           434px !default;
           color: #fff;
         }
       }
-  
+
       &.radio.checked {
         &:before {
           content: "";
@@ -89,7 +95,7 @@ $custom-dropdown-width-large:           434px !default;
           #{$default-float}: 3px;
         }
       }
-  
+
       &.checkbox.checked {
         &:before {
           content: "\00d7";
@@ -98,7 +104,7 @@ $custom-dropdown-width-large:           434px !default;
       }
     }
   }
-  
+
   /* Custom Select Options and Dropdowns */
   form.custom {
     .custom.dropdown {
@@ -118,12 +124,12 @@ $custom-dropdown-width-large:           434px !default;
       box-shadow: none;
       font-size: $custom-dropdown-font-size;
       vertical-align: top;
-  
+
       ul {
         overflow-y: auto;
         max-height: $custom-dropdown-height;
       }
-  
+
       .current {
         cursor:default;
         white-space: nowrap;
@@ -135,7 +141,7 @@ $custom-dropdown-width-large:           434px !default;
         margin-#{$default-float}: $form-spacing / 2;
         margin-#{$opposite-direction}: $custom-select-height;
       }
-  
+
       .selector {
         cursor:default;
         position: absolute;
@@ -154,13 +160,13 @@ $custom-dropdown-width-large:           434px !default;
           margin-top: -3px;
         }
       }
-  
+
       &:hover, &.open {
         a.selector {
           &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
         }
       }
-  
+
       .disabled {
         color: $custom-select-disabled-color;
         &:hover {
@@ -169,24 +175,24 @@ $custom-dropdown-width-large:           434px !default;
           &:after { display: none; }
         }
       }
-  
+
       &.open ul {
         display: block;
         z-index: 10;
         min-width:100%;
         @include box-sizing(content-box);
       }
-  
+
       &.small { max-width: $custom-dropdown-width-small; }
       &.medium { max-width: $custom-dropdown-width-medium; }
       &.large { max-width: $custom-dropdown-width-large; }
       &.expand { width: 100% !important; }
-  
+
       &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
       &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
       &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
     }
-  
+
     .custom.dropdown ul {
       position: absolute;
       width: auto;
@@ -201,7 +207,7 @@ $custom-dropdown-width-large:           434px !default;
       background: $custom-dropdown-bg;
       border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
       font-size: $em-base;
-  
+
       li {
         color: $custom-dropdown-font-color;
         font-size: $custom-dropdown-font-size;
@@ -215,7 +221,7 @@ $custom-dropdown-width-large:           434px !default;
         margin: 0;
         white-space: nowrap;
         list-style: none;
-  
+
         &.selected {
           background: $custom-dropdown-color-selected;
           color: $custom-dropdown-font-color-selected;
@@ -230,10 +236,10 @@ $custom-dropdown-width-large:           434px !default;
           color: $custom-dropdown-font-color-selected;
         }
       }
-  
+
       &.show { display: block; }
     }
-  
+
     /* Custom input, disabled */
     .custom.disabled { background-color: $custom-form-bg-disabled; }
   }

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-button-classes {
+@if $include-html-button-classes != false {
 
   /* Dropdown Button */
   .dropdown.button { @include dropdown-button;

data/scss/foundation/components/_dropdown.scss

@@ -105,18 +105,22 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 @mixin dropdown-style {
   font-size: $f-dropdown-font-size;
   cursor: pointer;
-  padding: $f-dropdown-list-padding;
+  
   line-height: $f-dropdown-line-height;
   margin: 0;
 
   &:hover,
   &:focus { background: $f-dropdown-list-hover-bg; }
 
-  a { color: $f-dropdown-font-color; }
+  a {
+    display: block;
+    padding: $f-dropdown-list-padding;
+    color: $f-dropdown-font-color;
+  }
 }
 
 
-@if $include-html-nav-classes {
+@if $include-html-nav-classes != false {
 
   @media only screen and (max-width: 767px) {
     .f-dropdown {