updating forms docs

Author: zurbchris

CHANGELOG.md

@@ -17,6 +17,7 @@ We're currently working on patch fixes for various parts of Foundation. We'll ad
 * Added variable for progress bar background color
 * Fixed inconsistency between side margins on unordered and ordered lists
 * Made it so you can set `custom_back_text` variable in top-bar to control if the back link is generic or specific
+* Updated visibility classes to work properly with table display properties
 
 You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.4...master).
 

docs/components/custom-forms.html.erb

@@ -17,14 +17,14 @@
         <form class="custom">
           <div class="row">
             <div class="large-4 columns">
-              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
-              <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
-              <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
             </div>
             <div class="large-4 columns">
               <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
-              <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
-              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
+              <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
             </div>
             <div class="large-4 columns">
               <label for="customDropdown1">Medium Example</label>
@@ -46,18 +46,18 @@
 <form class="custom">
   <div class="row">
     <div class="large-4 columns">
-      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
-      <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
-      <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
     </div>
     <div class="large-4 columns">
       <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
-      <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
-      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
+      <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
     </div>
     <div class="large-4 columns">
-      <label for="customDropdown">Medium Example</label>
-      <select id="customDropdown" class="medium">
+      <label for="customDropdown1">Medium Example</label>
+      <select id="customDropdown1" class="medium">
         <option DISABLED>This is a dropdown</option>
         <option>This is another option</option>
         <option>This is another option too</option>

scss/foundation/components/_custom-forms.scss

@@ -45,6 +45,7 @@ $custom-dropdown-width-large:           434px !default;
 
 /* Custom Checkbox and Radio Inputs */
 form.custom {
+
   .custom {
     display: inline-block;
     width: 16px;
@@ -57,7 +58,6 @@ form.custom {
     &.radio { @include radius(1000px); }
 
     &.checkbox {
-      z-index: -1;
       &:before {
         content: "";
         display: block;