Added prefix and postfix classes which also change the radius of inpu…

…ts accordingly.
foundation · Aug 20, 2014 · da2ade6 · da2ade6
1 parent fadd0d8
commit da2ade6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/doc/includes/form/examples_form_labels.html b/doc/includes/form/examples_form_labels.html
@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -18,8 +18,20 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix radius">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
@@ -29,4 +41,4 @@
       </div>
     </div>
   </div>
-</form>
+</form>
diff --git a/doc/includes/form/examples_form_labels_rendered.html b/doc/includes/form/examples_form_labels_rendered.html
@@ -10,7 +10,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -20,8 +20,20 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix radius">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
@@ -33,4 +45,4 @@
   </div>
 </form>
 ```
-{{/markdown}}
+{{/markdown}}
diff --git a/doc/pages/components/forms.html b/doc/pages/components/forms.html
@@ -83,7 +83,7 @@ <h4>Rendered HTML</h4>
 
 ### Pre/Postfix Labels &amp; Actions
 
-Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use `<div class="row collapse">` to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix `<span class="postfix">` or `<span class="prefix">`. Here are a few examples:
+Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use `<div class="row collapse">` to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix `<span class="postfix">` or `<span class="prefix">`. Keep in mind, if you also want to make sure the input has a radius then you can wrap your input and prefix/postfix in `<div class="row collapse prefix-radius">` or `<div class="row collapse postfix-radius">` accordingly. Here are a few examples:
 
 <div class="row">
   <div class="large-6 columns">

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
@@ -321,14 +321,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   -webkit-appearance: none !important;
   -webkit-border-radius: 0px;
   background-color: $select-bg-color;
-  
+
   // The custom arrow have some fake horizontal padding so we can align it
   // from the right side of the element without relying on CSS3
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
-  
+
   // We can safely use leftmost and rightmost now
   background-position: if($text-direction == 'rtl', 0%, 100%) center;
-  
+
   background-repeat: no-repeat;
   border: $input-border-width $input-border-style $input-border-color;
   padding: $form-spacing / 2;
@@ -431,6 +431,21 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       }
     }
 
+    form {
+      .row {
+        .prefix-radius.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
+        }
+        .postfix-radius.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($default-float, $global-radius); }
+        }
+      }
+    }
+
     input[type="submit"] {
       -webkit-appearance: none;
       -webkit-border-radius: 0px;