zurb-foundation 4.1.5 → 4.1.6

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

@@ -1,6 +1,7 @@
 //
 // Alert Variables
 //
+$include-html-alert-classes: $include-html-classes !default;
 
 // We use this to control alert padding.
 $alert-padding-top:         emCalc(11px)                                   !default;

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

@@ -1,14 +1,12 @@
 //
 // Block Grid Variables
 //
+$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;
 
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-$block-grid-media-queries: true !default;
-
 //
 // Block Grid Mixins
 //
@@ -43,7 +41,7 @@ $block-grid-media-queries: true !default;
 
 }
 
-@if $block-grid-media-queries {
+@if $include-html-grid-classes {
   /* Foundation Block Grids for below small breakpoint */
   @media only screen {
     [class*="block-grid-"] { @include block-grid; }

data/scss/foundation/components/_breadcrumbs.scss

@@ -1,6 +1,7 @@
 //
 // Breadcrumb Variables
 //
+$include-html-nav-classes: $include-html-classes !default;
 
 // We use this to set the background color for the breadcrumb container.
 $crumb-bg: lighten($secondary-color, 5%)                       !default;

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

@@ -1,6 +1,7 @@
 //
 // Button Group Variables
 //
+$include-html-button-classes: $include-html-classes !default;
 
 // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
 $button-bar-margin-opposite: emCalc(10px) !default;

data/scss/foundation/components/_buttons.scss

@@ -1,6 +1,7 @@
 //
 // Button Variables
 //
+$include-html-button-classes: $include-html-classes !default;
 
 // We use these to build padding for buttons.
 $button-med:              emCalc(12px) !default;

data/scss/foundation/components/_clearing.scss

@@ -1,6 +1,7 @@
 //
 // Clearing Variables
 //
+$include-html-clearing-classes: $include-html-classes !default;
 
 // We use these to set the background colors for parts of Clearing.
 $clearing-bg:                           #111 !default;
@@ -26,192 +27,194 @@ $clearing-carousel-height:              150px !default;
 $clearing-carousel-thumb-width:         175px !default;
 $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 
+@if $include-html-clearing-classes {
+  // We decided to not create a mixin for Clearing because it relies
+  // on predefined classes and structure to work properly.
+  // The variables above should give enough control.
 
-// We decided to not create a mixin for Clearing because it relies
-// on predefined classes and structure to work properly.
-// The variables above should give enough control.
+  /* Clearing Styles */
+  [data-clearing] {
+    @include clearfix;
+    margin-bottom: 0;
+    list-style: none;
 
-/* Clearing Styles */
-[data-clearing] {
-  @include clearfix;
-  margin-bottom: 0;
-  list-style: none;
-
-  li {
-    float: $default-float;
-    margin-#{$opposite-direction}: 10px;
+    li {
+      float: $default-float;
+      margin-#{$opposite-direction}: 10px;
+    }
   }
-}
 
-.clearing-blackout {
-  background: $clearing-bg;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  #{$default-float}: 0;
-  z-index: 998;
+  .clearing-blackout {
+    background: $clearing-bg;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    #{$default-float}: 0;
+    z-index: 998;
 
-  .clearing-close { display: block; }
-}
+    .clearing-close { display: block; }
+  }
 
-.clearing-container {
-  position: relative;
-  z-index: 998;
-  height: 100%;
-  overflow: hidden;
-  margin: 0;
-}
+  .clearing-container {
+    position: relative;
+    z-index: 998;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+  }
 
-.visible-img {
-  height: 95%;
-  position: relative;
+  .visible-img {
+    height: 95%;
+    position: relative;
 
-  img {
-    position: absolute;
-    #{$default-float}: 50%;
-    top: 50%;
-    margin-#{$default-float}: -50%;
-    max-height: 100%;
-    max-width: 100%;
+    img {
+      position: absolute;
+      #{$default-float}: 50%;
+      top: 50%;
+      margin-#{$default-float}: -50%;
+      max-height: 100%;
+      max-width: 100%;
+    }
   }
-}
 
-.clearing-caption {
-  color: $clearing-caption-font-color;
-  line-height: 1.3;
-  margin-bottom: 0;
-  text-align: center;
-  bottom: 0;
-  background: $clearing-caption-bg;
-  width: 100%;
-  padding: $clearing-caption-padding;
-  position: absolute;
-  #{$default-float}: 0;
-}
+  .clearing-caption {
+    color: $clearing-caption-font-color;
+    line-height: 1.3;
+    margin-bottom: 0;
+    text-align: center;
+    bottom: 0;
+    background: $clearing-caption-bg;
+    width: 100%;
+    padding: $clearing-caption-padding;
+    position: absolute;
+    #{$default-float}: 0;
+  }
 
-.clearing-close {
-  z-index: 999;
-  padding-#{$default-float}: 20px;
-  padding-top: 10px;
-  font-size: $clearing-close-size;
-  line-height: 1;
-  color: $clearing-close-color;
-  display: none;
-
-  &:hover,
-  &:focus { color: #ccc; }
-}
+  .clearing-close {
+    z-index: 999;
+    padding-#{$default-float}: 20px;
+    padding-top: 10px;
+    font-size: $clearing-close-size;
+    line-height: 1;
+    color: $clearing-close-color;
+    display: none;
+
+    &:hover,
+    &:focus { color: #ccc; }
+  }
 
-.clearing-assembled .clearing-container { height: 100%;
-  .carousel > ul { display: none; }
-}
+  .clearing-assembled .clearing-container { height: 100%;
+    .carousel > ul { display: none; }
+  }
 
 
-// Large screen overrides
-@media #{$small} {
-  .clearing-main-prev,
-  .clearing-main-next {
-    position: absolute;
-    height: 100%;
-    width: 40px;
-    top: 0;
-    & > span {
+  // Large screen overrides
+  @media #{$small} {
+    .clearing-main-prev,
+    .clearing-main-next {
       position: absolute;
-      top: 50%;
-      display: block;
-      width: 0;
-      height: 0;
-      border: solid $clearing-arrow-size;
+      height: 100%;
+      width: 40px;
+      top: 0;
+      & > span {
+        position: absolute;
+        top: 50%;
+        display: block;
+        width: 0;
+        height: 0;
+        border: solid $clearing-arrow-size;
+      }
     }
-  }
-  .clearing-main-prev {
-    #{$default-float}: 0;
-    & > span {
-      #{$default-float}: 5px;
-      border-color: transparent;
-      border-#{$opposite-direction}-color: $clearing-arrow-color;
+    .clearing-main-prev {
+      #{$default-float}: 0;
+      & > span {
+        #{$default-float}: 5px;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $clearing-arrow-color;
+      }
     }
-  }
-  .clearing-main-next {
-    #{$opposite-direction}: 0;
-    & > span {
-      border-color: transparent;
-      border-#{$default-float}-color: $clearing-arrow-color;
+    .clearing-main-next {
+      #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-color: $clearing-arrow-color;
+      }
     }
-  }
 
-  .clearing-main-prev.disabled,
-  .clearing-main-next.disabled { opacity: 0.5; }
+    .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; }
+    // 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 {
+    .clearing-assembled .clearing-container {
 
-    .carousel {
-      background: $clearing-carousel-bg;
-      height: $clearing-carousel-height;
-      margin-top: 5px;
+      .carousel {
+        background: $clearing-carousel-bg;
+        height: $clearing-carousel-height;
+        margin-top: 5px;
 
-      & > ul {
-        display: block;
-        z-index: 999;
-        width: 200%;
-        height: 100%;
-        margin-#{$default-float}: 0;
-        position: relative;
-        #{$default-float}: 0;
-
-        li {
+        & > ul {
           display: block;
-          width: $clearing-carousel-thumb-width;
-          height: inherit;
-          padding: 0;
-          float: $default-float;
-          overflow: hidden;
-          margin-#{$opposite-direction}: 1px;
+          z-index: 999;
+          width: 200%;
+          height: 100%;
+          margin-#{$default-float}: 0;
           position: relative;
-          cursor: pointer;
-          opacity: 0.4;
+          #{$default-float}: 0;
 
-          &.fix-height {
-            img {
-              min-height: 100%;
-              height: 100%;
-              max-width: none;
+          li {
+            display: block;
+            width: $clearing-carousel-thumb-width;
+            height: inherit;
+            padding: 0;
+            float: $default-float;
+            overflow: hidden;
+            margin-#{$opposite-direction}: 1px;
+            position: relative;
+            cursor: pointer;
+            opacity: 0.4;
+
+            &.fix-height {
+              img {
+                min-height: 100%;
+                height: 100%;
+                max-width: none;
+              }
             }
-          }
 
-          a.th {
-            border: none;
-            -webkit-box-shadow: none;
-                    box-shadow: none;
-            display: block;
-          }
+            a.th {
+              border: none;
+              -webkit-box-shadow: none;
+                      box-shadow: none;
+              display: block;
+            }
 
-          img {
-            cursor: pointer !important;
-            min-width: 100% !important;
-          }
+            img {
+              cursor: pointer !important;
+              min-width: 100% !important;
+            }
 
-          &.visible { opacity: 1; }
+            &.visible { opacity: 1; }
+          }
         }
       }
+
+      .visible-img {
+        background: $clearing-img-bg;
+        overflow: hidden;
+        height: $clearing-active-img-height;
+      }
     }
 
-    .visible-img {
-      background: $clearing-img-bg;
-      overflow: hidden;
-      height: $clearing-active-img-height;
+    .clearing-close {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 20px;
+      padding-#{$default-float}: 0;
+      padding-top: 0;
     }
   }
 
-  .clearing-close {
-    position: absolute;
-    top: 10px;
-    #{$opposite-direction}: 20px;
-    padding-#{$default-float}: 0;
-    padding-top: 0;
-  }
 }

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

@@ -1,12 +1,23 @@
+//
+// FIX THE "X" ON CUSTOM FORMS
+//
+
+
 //
 // Custom Form Variables
 //
+$include-html-custom-form-classes: $include-html-classes !default;
 
 // We use these to control the basic form styles input styles
 $custom-form-border-color:              #ccc !default;
+$custom-form-border-size:               1px !default;
 $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-radio-size:                8px !default;
+$custom-form-checkbox-radius:           0px !default;
 
 // We use these to style the custom select form element.
 $custom-select-bg:                      #fff !default;
@@ -42,9 +53,13 @@ $custom-dropdown-width-large:           434px !default;
 // We decided not to make a mixin for the custom forms because
 // they rely on a very specific class naming structure.
 // We may look at updating this in the future.
+@mixin custom-form-input($radius:0px, $mark-size:0px) {
+  @include radius($radius);
+  padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+}
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-button-classes != false {
+@if $include-html-custom-form-classes != false {
 
   /* Custom Checkbox and Radio Inputs */
   form.custom {
@@ -57,28 +72,27 @@ $custom-dropdown-width-large:           434px !default;
 
     .custom {
       display: inline-block;
-      width: 16px;
-      height: 16px;
+      width: $custom-form-input-size;
+      height: $custom-form-input-size;
       position: relative;
-      top: 2px;
-      border: solid 1px $custom-form-border-color;
+      vertical-align: middle;
+      border: solid $custom-form-border-size $custom-form-border-color;
       background: $custom-form-bg;
 
-      &.radio { @include radius(1000px); }
+      &.checkbox {
+        @include custom-form-input($radius:$custom-form-checkbox-radius, $mark-size:$custom-form-check-size);
+      }
+
+      &.radio {
+        @include custom-form-input($radius:1000px, $mark-size:$custom-form-radio-size);
+      }
 
       &.checkbox {
         &:before {
           content: "";
           display: block;
-          line-height: 0.8;
-          height: 14px;
-          width: 14px;
-          text-align: center;
-          position: absolute;
-          top: 0;
-          #{$default-float}: 0;
-          font-size: 14px;
-          color: #fff;
+          font-size: $custom-form-check-size;
+          color: $custom-form-bg;
         }
       }
 
@@ -86,20 +100,20 @@ $custom-dropdown-width-large:           434px !default;
         &:before {
           content: "";
           display: block;
-          width: 8px;
-          height: 8px;
+          width: $custom-form-radio-size;
+          height: $custom-form-radio-size;
           @include radius(1000px);
           background: $custom-form-check-color;
           position: relative;
-          top: 3px;
-          #{$default-float}: 3px;
         }
       }
 
       &.checkbox.checked {
         &:before {
-          content: "\00d7";
+          content: "\2A2F";
           color: $custom-form-check-color;
+          margin-top: -8px;
+          margin-left: 2px;
         }
       }
     }
@@ -241,6 +255,6 @@ $custom-dropdown-width-large:           434px !default;
     }
 
     /* Custom input, disabled */
-    .custom.disabled { background-color: $custom-form-bg-disabled; }
+    .custom.disabled { background: $custom-form-bg-disabled; }
   }
 }