From: David Boskovic <david@momentumapp.co>
Date: Tue, 5 Mar 2013 02:04:26 +0000 (-0500)
Subject: This resolves an issue with the deployed 4.0 version that kept the drop down `.custom... 
X-Git-Tag: v4.0.4~3^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F1708%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

This resolves an issue with the deployed 4.0 version that kept the drop down `.custom.dropdown.open.(small|medium|large) ul` from expanding beyond the width of the parent. The default behavior should be to let the drop down ul expand to the size of it's content. I also fixed a couple issues with the custom documentation.
---

diff --git a/docs/components/custom-forms.html.erb b/docs/components/custom-forms.html.erb
index 90ea2609d..6f855e2db 100644
--- a/docs/components/custom-forms.html.erb
+++ b/docs/components/custom-forms.html.erb
@@ -124,7 +124,7 @@
 </form>', :html %>
 
         <form class="custom">
-          <label for="customDropdown2">Medium Example</label>
+          <label for="customDropdown2">Default Example</label>
           <select id="customDropdown2">
             <option DISABLED>This is a dropdown</option>
             <option>This is another option</option>
@@ -228,7 +228,7 @@
       </select>
     </div>
     <div class="small-4 columns">
-      <a href="#" class="button postfix expand">Button</a>
+      <a href="#" class="button postfix">Button</a>
     </div>
   </div>
 </form>', :html %>
@@ -273,7 +273,7 @@
               </select>
             </div>
             <div class="small-4 columns">
-              <a href="#" class="button postfix expand">Button</a>
+              <a href="#" class="button postfix">Button</a>
             </div>
           </div>
         </form>
diff --git a/scss/foundation/components/_custom-forms.scss b/scss/foundation/components/_custom-forms.scss
index 0a1b4aeda..0a82cd43c 100644
--- a/scss/foundation/components/_custom-forms.scss
+++ b/scss/foundation/components/_custom-forms.scss
@@ -30,11 +30,14 @@ $custom-dropdown-font-size:             emCalc(14px) !default;
 $custom-dropdown-color-selected:        #eeeeee !default;
 $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:            none !default;
+$custom-dropdown-offset-top:            auto !default;
 $custom-dropdown-list-padding:          emCalc(4px) !default;
 $custom-dropdown-left-padding:          emCalc(6px) !default;
 $custom-dropdown-right-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;
+$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.
@@ -171,14 +174,14 @@ form.custom {
       @include box-sizing(content-box);
     }
 
-    &.small { max-width: 134px !important; }
-    &.medium { max-width: 254px !important; }
-    &.large { max-width: 434px !important; }
+    &.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 { max-width: 134px !important; @include box-sizing(border-box); }
-    &.open.medium ul { max-width: 254px !important; @include box-sizing(border-box); }
-    &.open.large ul { max-width: 634px !important; @include box-sizing(border-box); }
+    &.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 {