From: EnigmaSolved <sean@enigmasolved.com>
Date: Fri, 19 Oct 2012 23:59:34 +0000 (-0300)
Subject: Add Error, Small to 100% width media query.
X-Git-Tag: v3.2.0.rc1~5^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F1044%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add Error, Small to 100% width media query.

Currently (in 3.1.1) you can add a column class to `small` tags in order to size them to match the corresponding `input` (this is for situations where one is not doing `row` classes, but just using the number classes to size/arrange form fields, eg, `<input class="six">`). However, the `small` tag (with corresponding `error` class) then does not get full width on the Small screen size. I believe this Pull Request should fix that.

However, I would encourage the Zurb folks to double check that I've not missed anything as this particular bit of Foundation scss is less familiar to me, and I was admittedly focused on fixing my particular use case. So there may be additional changes that you all would wish to make and/or there may be implications to the changes I'm proposing that I'm not aware of.

:)
---

diff --git a/scss/foundation/common/_forms.scss b/scss/foundation/common/_forms.scss
index af5e0981c..8334188ec 100644
--- a/scss/foundation/common/_forms.scss
+++ b/scss/foundation/common/_forms.scss
@@ -56,7 +56,7 @@
 
   @media only screen and (max-width: $screenSmall - 1) {
     @for $i from 1 through $totalColumns {
-      input[type="text"].#{convert-number-to-word($i)}, input[type="password"].#{convert-number-to-word($i)}, input[type="date"].#{convert-number-to-word($i)}, input[type="datetime"].#{convert-number-to-word($i)}, input[type="email"].#{convert-number-to-word($i)}, input[type="number"].#{convert-number-to-word($i)}, input[type="search"].#{convert-number-to-word($i)}, input[type="tel"].#{convert-number-to-word($i)}, input[type="time"].#{convert-number-to-word($i)}, input[type="url"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)} { width: 100% !important; }
+      input[type="text"].#{convert-number-to-word($i)}, input[type="password"].#{convert-number-to-word($i)}, input[type="date"].#{convert-number-to-word($i)}, input[type="datetime"].#{convert-number-to-word($i)}, input[type="email"].#{convert-number-to-word($i)}, input[type="number"].#{convert-number-to-word($i)}, input[type="search"].#{convert-number-to-word($i)}, input[type="tel"].#{convert-number-to-word($i)}, input[type="time"].#{convert-number-to-word($i)}, input[type="url"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)}, .error small.#{convert-number-to-word($i)}, small.error.#{convert-number-to-word($i)} { width: 100% !important; }
     }
   }