Remove circle and correct responsive sass!

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 1a40a3f0111102ad7c8c2c5bc9954236bed5bcaa..afc07ad72b0139821d8dbcf6153769dd522532aa 100644 (file)
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -81,7 +81,7 @@ Looking for more customization including **responsive breakpoints?** Click here
 
 ## Component Styling
 
-These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more
+These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.
 
 <div class="primary callout">
        **Sass Tip**: You can use [Shadow](#shadow) mixin to create something like `shadow-hover-focus`. [Codepen example](http://codepen.io/IamManchanda/pen/XMRMwo)
@@ -204,12 +204,10 @@ These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used indepen
 
 ```html
 <img src="http://placehold.it/100x100" class="radius">
-<img src="http://placehold.it/100x100" class="circle">
 ```
 
 <div class="docs-code-live margin-bottom-1">
        <img src="http://placehold.it/100x100" class="radius margin-right-1">
-       <img src="http://placehold.it/100x100" class="circle">
 </div>
 
 ---

diff --git a/scss/prototype/_rounded.scss b/scss/prototype/_rounded.scss
index 2b65d48313cd8168cade755642a20b12b196d816..b09fb3d563b14fa455ac8bc0eb26079380de34b8 100644 (file)
--- a/scss/prototype/_rounded.scss
+++ b/scss/prototype/_rounded.scss
@@ -22,21 +22,12 @@ $prototype-border-radius: rem-calc(3) !default;
   border-radius: $radius;
 }
 
-/// Circle utility (all corners): Rounds all corners to an element by default to make a cirlce.
-@mixin circle {
-  border-radius: 50% !important;
-}
-
 /// Rounded square utility or rectangle utility (all corners): Rounds all corners to an element by default to make a pill shape.
 @mixin border-rounded {
   border-radius: 5000px !important;
 }
 
 @mixin foundation-prototype-rounded {
-  .circle {
-    @include circle;
-  }
-
   .rounded {
     @include border-rounded;
   }
@@ -51,10 +42,10 @@ $prototype-border-radius: rem-calc(3) !default;
       @include breakpoint($size) {
         @if $size != $-zf-zero-breakpoint {
           .#{$size}-rounded {
-            @include border-radius;
+            @include border-rounded;
           }
-          .#{$size}-rounded-circle {
-            @include rounded-circle;
+          .#{$size}-radius {
+            @include rounded-radius;
           }
         }
       }