updating forms docs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cea5c0328024b0523e383ffef4e44b409898dd35..fc7414f22e9f3dbb688560f740f65599ff744bae 100644 (file)
--- a/CHANGELOG.md
+++ b/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).
 

diff --git a/docs/components/custom-forms.html.erb b/docs/components/custom-forms.html.erb
index 67a859b0eb1f170665a6c3a6afc592d96ef5f96b..db5f25b9275cc816e9f3aefdb658b41500f36a74 100644 (file)
--- a/docs/components/custom-forms.html.erb
+++ b/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>

diff --git a/scss/foundation/components/_custom-forms.scss b/scss/foundation/components/_custom-forms.scss
index 0a82cd43c3579a336570eef0a8b361a915c28443..f954a337dedf90f7e9a4ac3304292201ea4c5fee 100644 (file)
--- a/scss/foundation/components/_custom-forms.scss
+++ b/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;