Added rounded classes as well removed unnecessary radius and round cl…

…asses inside.
foundation · Aug 20, 2014 · b6bbf2f · b6bbf2f
1 parent da2ade6
commit b6bbf2f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 13 deletions.
diff --git a/doc/includes/form/examples_form_labels.html b/doc/includes/form/examples_form_labels.html
@@ -23,7 +23,7 @@
     <div class="large-6 columns">
       <div class="row collapse prefix-radius">
         <div class="small-3 columns">
-          <span class="prefix radius">Label</span>
+          <span class="prefix">Label</span>
         </div>
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
@@ -36,7 +36,29 @@
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>

diff --git a/doc/includes/form/examples_form_labels_rendered.html b/doc/includes/form/examples_form_labels_rendered.html
@@ -25,7 +25,7 @@
     <div class="large-6 columns">
       <div class="row collapse prefix-radius">
         <div class="small-3 columns">
-          <span class="prefix radius">Label</span>
+          <span class="prefix">Label</span>
         </div>
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
@@ -38,7 +38,29 @@
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>

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">`. 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:
+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, this way you don't also have to include the `.radius` class anywhere except on the parent element. Likewise, you can also use either `<div class="row collapse prefix-round">` or `<div class="row collapse postfix-round">`. 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
@@ -397,12 +397,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
 
     /* Separate prefix and postfix styles when on span or label so buttons keep their own */
-    span.prefix,label.prefix { @include prefix();
-      &.radius { @include radius(0); @include side-radius($default-float, $global-radius); }
-    }
-    span.postfix,label.postfix { @include postfix();
-      &.radius { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
-    }
+    span.prefix,label.prefix { @include prefix(); }
+    span.postfix,label.postfix { @include postfix(); }
 
     /* We use this to get basic styling on all basic form elements */
     input[type="text"],
@@ -436,12 +432,26 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
         .prefix-radius.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
+          select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
         }
         .postfix-radius.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($default-float, $global-radius); }
+          select { @include radius(0); @include side-radius($default-float, $button-radius); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+        }
+        .prefix-round.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+        }
+        .postfix-round.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($default-float, $button-round); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
         }
       }
     }