Additional form html conditional

diff --git a/scss/foundation/_foundation-global.scss b/scss/foundation/_foundation-global.scss
index 7c2ff5d8cd92878daefd1f6f4f9d69f9dbc335bd..65fe8c3d8fec9a8b15eccf316a776448f63d71e4 100644 (file)
--- a/scss/foundation/_foundation-global.scss
+++ b/scss/foundation/_foundation-global.scss
@@ -51,6 +51,7 @@ $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;

diff --git a/scss/foundation/components/_custom-forms.scss b/scss/foundation/components/_custom-forms.scss
index f954a337dedf90f7e9a4ac3304292201ea4c5fee..3352d0949db88264fa3833252d34e919306db99b 100644 (file)
--- a/scss/foundation/components/_custom-forms.scss
+++ b/scss/foundation/components/_custom-forms.scss
@@ -43,194 +43,198 @@ $custom-dropdown-width-large:           434px !default;
 // they rely on a very specific class naming structure.
 // We may look at updating this in the future.
 
-/* Custom Checkbox and Radio Inputs */
-form.custom {
-
-  .custom {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    position: relative;
-    top: 2px;
-    border: solid 1px $custom-form-border-color;
-    background: $custom-form-bg;
-
-    &.radio { @include radius(1000px); }
-
-    &.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;
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-button-classes {
+  
+  /* Custom Checkbox and Radio Inputs */
+  form.custom {
+  
+    .custom {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      top: 2px;
+      border: solid 1px $custom-form-border-color;
+      background: $custom-form-bg;
+  
+      &.radio { @include radius(1000px); }
+  
+      &.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;
+        }
       }
-    }
-
-    &.radio.checked {
-      &:before {
-        content: "";
-        display: block;
-        width: 8px;
-        height: 8px;
-        @include radius(1000px);
-        background: $custom-form-check-color;
-        position: relative;
-        top: 3px;
-        #{$default-float}: 3px;
+  
+      &.radio.checked {
+        &:before {
+          content: "";
+          display: block;
+          width: 8px;
+          height: 8px;
+          @include radius(1000px);
+          background: $custom-form-check-color;
+          position: relative;
+          top: 3px;
+          #{$default-float}: 3px;
+        }
       }
-    }
-
-    &.checkbox.checked {
-      &:before {
-        content: "\00d7";
-        color: $custom-form-check-color;
+  
+      &.checkbox.checked {
+        &:before {
+          content: "\00d7";
+          color: $custom-form-check-color;
+        }
       }
     }
   }
-}
-
-/* Custom Select Options and Dropdowns */
-form.custom {
-  .custom.dropdown {
-    display: block;
-    position: relative;
-    top: 0;
-    height: $custom-select-height;
-    margin-bottom: $custom-select-margin-bottom;
-    margin-top: 0px;
-    padding: 0px;
-    width: 100%;
-    background: $custom-dropdown-bg;
-    background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
-    background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
-    background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    font-size: emCalc(14px);
-    vertical-align: top;
-
-    ul {
-      overflow-y: auto;
-      max-height: $custom-dropdown-height;
-    }
-
-    .current {
-      cursor:default;
-      white-space: nowrap;
-      line-height: $custom-select-height - emCalc(1px);
-      color: $input-font-color;
-      text-decoration: none;
-      overflow: hidden;
+  
+  /* Custom Select Options and Dropdowns */
+  form.custom {
+    .custom.dropdown {
       display: block;
-      margin-left: $form-spacing / 2;
-      margin-right: $custom-select-height;
-    }
-
-    .selector {
-      cursor:default;
-      position: absolute;
-      width: $form-spacing * 2.5;
-      height: $custom-select-height;
-      display: block;
-      #{$default-opposite}: 0;
+      position: relative;
       top: 0;
-      &:after {
-        content: "";
+      height: $custom-select-height;
+      margin-bottom: $custom-select-margin-bottom;
+      margin-top: 0px;
+      padding: 0px;
+      width: 100%;
+      background: $custom-dropdown-bg;
+      background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
+      background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      font-size: emCalc(14px);
+      vertical-align: top;
+  
+      ul {
+        overflow-y: auto;
+        max-height: $custom-dropdown-height;
+      }
+  
+      .current {
+        cursor:default;
+        white-space: nowrap;
+        line-height: $custom-select-height - emCalc(1px);
+        color: $input-font-color;
+        text-decoration: none;
+        overflow: hidden;
         display: block;
-        @include css-triangle(5px, $custom-select-triangle-color, top);
+        margin-left: $form-spacing / 2;
+        margin-right: $custom-select-height;
+      }
+  
+      .selector {
+        cursor:default;
         position: absolute;
-        left: ($form-spacing * 2.5) / 2 - emCalc(5px);
-        top: 50%;
-        margin-top: -3px;
+        width: $form-spacing * 2.5;
+        height: $custom-select-height;
+        display: block;
+        #{$default-opposite}: 0;
+        top: 0;
+        &:after {
+          content: "";
+          display: block;
+          @include css-triangle(5px, $custom-select-triangle-color, top);
+          position: absolute;
+          left: ($form-spacing * 2.5) / 2 - emCalc(5px);
+          top: 50%;
+          margin-top: -3px;
+        }
       }
-    }
-
-    &:hover, &.open {
-      a.selector {
-        &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
+  
+      &:hover, &.open {
+        a.selector {
+          &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
+        }
       }
-    }
-
-    .disabled {
-      color: $custom-select-disabled-color;
-      &:hover {
-        background: transparent;
+  
+      .disabled {
         color: $custom-select-disabled-color;
-        &:after { display: none; }
+        &:hover {
+          background: transparent;
+          color: $custom-select-disabled-color;
+          &: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); }
     }
-
-    &.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;
-    display: none;
-    margin: 0;
-    #{$default-float}: -$input-border-width;
-    top: $custom-dropdown-offset-top;
-    -webkit-box-shadow: $custom-dropdown-shadow;
-    box-shadow: $custom-dropdown-shadow;
-    margin: 0;
-    padding: 0;
-    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;
-      cursor: default;
-      padding-top: $custom-dropdown-list-padding;
-      padding-bottom: $custom-dropdown-list-padding;
-      padding-#{$default-float}: $custom-dropdown-left-padding;
-      padding-#{$default-opposite}: $custom-dropdown-right-padding;
-      min-height: $custom-dropdown-list-item-min-height;
-      line-height: $custom-dropdown-list-item-min-height;
+  
+    .custom.dropdown ul {
+      position: absolute;
+      width: auto;
+      display: none;
       margin: 0;
-      white-space: nowrap;
-      list-style: none;
-
-      &.selected {
-        background: $custom-dropdown-color-selected;
-        color: $custom-dropdown-font-color-selected;
-      }
-      &:hover {
-        background-color: darken($custom-dropdown-color-selected, 4%);
-        color: $custom-dropdown-font-color-selected;
-      }
-      &.selected:hover {
-        background: $custom-dropdown-color-selected;
+      #{$default-float}: -$input-border-width;
+      top: $custom-dropdown-offset-top;
+      -webkit-box-shadow: $custom-dropdown-shadow;
+      box-shadow: $custom-dropdown-shadow;
+      margin: 0;
+      padding: 0;
+      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;
         cursor: default;
-        color: $custom-dropdown-font-color-selected;
+        padding-top: $custom-dropdown-list-padding;
+        padding-bottom: $custom-dropdown-list-padding;
+        padding-#{$default-float}: $custom-dropdown-left-padding;
+        padding-#{$default-opposite}: $custom-dropdown-right-padding;
+        min-height: $custom-dropdown-list-item-min-height;
+        line-height: $custom-dropdown-list-item-min-height;
+        margin: 0;
+        white-space: nowrap;
+        list-style: none;
+  
+        &.selected {
+          background: $custom-dropdown-color-selected;
+          color: $custom-dropdown-font-color-selected;
+        }
+        &:hover {
+          background-color: darken($custom-dropdown-color-selected, 4%);
+          color: $custom-dropdown-font-color-selected;
+        }
+        &.selected:hover {
+          background: $custom-dropdown-color-selected;
+          cursor: default;
+          color: $custom-dropdown-font-color-selected;
+        }
       }
+  
+      &.show { display: block; }
     }
-
-    &.show { display: block; }
+  
+    /* Custom input, disabled */
+    .custom.disabled { background-color: $custom-form-bg-disabled; }
   }
-
-  /* Custom input, disabled */
-  .custom.disabled { background-color: $custom-form-bg-disabled; }
 }
\ No newline at end of file

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index c95b189f0060e3cda4e41f717f3ce95cf0df79ce..0d66b5b6c11e156d9d26a8eef1ddf89bf0adb6f4 100644 (file)
--- a/scss/foundation/components/_forms.scss
+++ b/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, 1000px);
+      }
+      &>*:last-child, &>*:last-child * {
+        @include side-radius(right, 1000px);
+      }
     }
   }
-  &.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;
+  }
+}
\ No newline at end of file