updates rounded util to round swith on parent class

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 4fabc8cc0c073d0d27b002feee431f24bd367b28..a8f0cd3623b4f8652f80873df28319e5a1c0da41 100644 (file)
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -123,12 +123,12 @@ These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used indepen
 
 #### Switches
 
-Please note that you need to add `rounded` class with `switch-paddle` and not `switch`.
+Add the `.rounded` class to `.switch` to make it rounded.
 
 ```html_example
-<div class="switch">
+<div class="switch rounded">
   <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
-  <label class="switch-paddle rounded" for="exampleSwitch">
+  <label class="switch-paddle" for="exampleSwitch">
     <span class="show-for-sr">Download Kittens</span>
   </label>
 </div>
@@ -818,4 +818,3 @@ These relational mixins helps you to manage styling of :nth-child’ified elemen
 @include odd-between($first, $last) {} // applies style to all odd children except first and last
 @include number-between($num, $first, $last) {} // applies style to every n children from first child and last child
 ```
-

diff --git a/scss/prototype/_rounded.scss b/scss/prototype/_rounded.scss
index 8df625081869ae819301335b6df238a169337f40..225fb5569b5088fa56bff2ddc7ebaf3ba3c6c4ea 100644 (file)
--- a/scss/prototype/_rounded.scss
+++ b/scss/prototype/_rounded.scss
@@ -30,8 +30,12 @@ $prototype-border-radius: rem-calc(3) !default;
 @mixin foundation-prototype-rounded {
   .rounded {
     @include border-rounded;
-    &:after {
-      border-radius: 50%; // For switches
+
+    .switch-paddle {
+      @include border-rounded;
+      &:after {
+        border-radius: 50%; // For switches
+      }
     }
   }