Rounded Utility: Removed unneccessary css !

Better to keep it simple for now even for sass mixins!

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index f2c14991e293cb709d66c489416e3dd9c1a33921..18d80e81db69fc465efba56f576e3d756ef45360 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -72,19 +72,11 @@ These `.rounded` & `.bordered` classes helps to make an element round its corner
 ```html
 <img src="" class="rounded">
 <img src="" class="rounded-circle">
-<img src="" class="rounded-top">
-<img src="" class="rounded-right">
-<img src="" class="rounded-bottom">
-<img src="" class="rounded-left">
-``` 
-
-<div class="docs-code-live m-b-20">
-       <img src="http://placehold.it/100x100" class="rounded m-r-10">
-       <img src="http://placehold.it/100x100" class="rounded-circle m-r-10">
-       <img src="http://placehold.it/100x100" class="rounded-top m-r-10">
-       <img src="http://placehold.it/100x100" class="rounded-right m-r-10">
-       <img src="http://placehold.it/100x100" class="rounded-bottom m-r-10">
-       <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
+``` 
+
+<div class="docs-code-live margin-bottom-1">
+       <img src="http://placehold.it/100x100" class="rounded margin-right-1">
+       <img src="http://placehold.it/100x100" class="rounded-circle">
 </div>
 
 #### Cards

diff --git a/scss/prototype/_rounded.scss b/scss/prototype/_rounded.scss
index e6bfb70f84590fbd899d849b9fde9bc0d2efbd2a..0219e5c7c267bdb14d897febbeca2bfc8af5b908 100644 (file)
--- a/scss/prototype/_rounded.scss
+++ b/scss/prototype/_rounded.scss
@@ -22,42 +22,6 @@ $prototype-border-radius: rem-calc(4px) !default;
   border-radius: $radius;
 }
 
-/// Rounded utility (top corner): Adds rounded corner (top corner) to an element by default.
-/// @param {Number} $radius [$prototype-border-radius] Border radius (top corner)
-@mixin border-top-radius(
-  $radius: $prototype-border-radius
-) {
-  border-top-right-radius: $radius;
-  border-top-left-radius: $radius;
-}
-
-/// Rounded utility (right corner): Adds rounded corner (right corner) to an element by default.
-/// @param {Number} $radius [$prototype-border-radius] Border radius (right corner)
-@mixin border-right-radius(
-  $radius: $prototype-border-radius
-) {
-  border-bottom-right-radius: $radius;
-  border-top-right-radius: $radius;
-}
-
-/// Rounded utility (bottom corner): Adds rounded corner (bottom corner) to an element by default.
-/// @param {Number} $radius [$prototype-border-radius] Border radius (bottom corner)
-@mixin border-bottom-radius(
-  $radius: $prototype-border-radius
-) {
-  border-bottom-right-radius: $radius;
-  border-bottom-left-radius: $radius;
-}
-
-/// Rounded utility (left corner): Adds rounded corner (left corner) to an element by default.
-/// @param {Number} $radius [$prototype-border-radius] Border radius (left corner)
-@mixin border-left-radius(
-  $radius: $prototype-border-radius
-) {
-  border-bottom-left-radius: $radius;
-  border-top-left-radius: $radius;
-}
-
 /// Rounded circle utility
 @mixin rounded-circle {
   border-radius: 50% !important;
@@ -67,18 +31,6 @@ $prototype-border-radius: rem-calc(4px) !default;
   .rounded {
     @include border-radius;
   }
-  .rounded-top {
-    @include border-top-radius;
-  }
-  .rounded-right {
-    @include border-right-radius;
-  }
-  .rounded-bottom {
-    @include border-bottom-radius;
-  }
-  .rounded-left {
-    @include border-left-radius;
-  }
   .rounded-circle {
     @include rounded-circle;
   }
@@ -91,18 +43,6 @@ $prototype-border-radius: rem-calc(4px) !default;
           .#{$size}-rounded {
             @include border-radius;
           }
-          .#{$size}-rounded-top {
-            @include border-top-radius;
-          }
-          .#{$size}-rounded-right {
-            @include border-right-radius;
-          }
-          .#{$size}-rounded-bottom {
-            @include border-bottom-radius;
-          }
-          .#{$size}-rounded-left {
-            @include border-left-radius;
-          }
           .#{$size}-rounded-circle {
             @include rounded-circle;
           }

diff --git a/test/visual/prototype/rounded-bordered.html b/test/visual/prototype/rounded-bordered.html
index f2ac3e0ea923e544e06c12919da1f3b9bb1c92f7..407b78aa2bf1e9aff0d4b625ed9d0099a495e84e 100644 (file)
--- a/test/visual/prototype/rounded-bordered.html
+++ b/test/visual/prototype/rounded-bordered.html
@@ -11,7 +11,7 @@
   </head>
   <body>
     <div class="row column">
-      <h2 class="m-t-20">Buttons</h2>
+      <h2 class="margin-top-20">Buttons</h2>
       <button type="button" class="button rounded bordered primary">Primary</button>
       <button type="button" class="button rounded bordered secondary">Secondary</button>
       <button type="button" class="button rounded bordered success">Success</button>
@@ -19,16 +19,12 @@
       <button type="button" class="button rounded bordered warning">Warning</button>
     </div>
     <div class="row column">
-      <h2 class="m-t-20">Images</h2>
-      <img src="http://placehold.it/100x100" class="rounded m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-circle m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-top m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-right m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-bottom m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
+      <h2 class="margin-top-20">Images</h2>
+      <img src="http://placehold.it/100x100" class="rounded margin-right-1">
+      <img src="http://placehold.it/100x100" class="rounded-circle">
     </div>
     <div class="row column">
-      <h2 class="m-t-20">Cards</h2>
+      <h2 class="margin-top-20">Cards</h2>
       <div class="rounded bordered card" style="width: 300px;">
         <img src="../assets/img/generic/rectangle-1.jpg">
         <div class="card-divider">
@@ -41,7 +37,7 @@
       </div>
     </div>
     <div class="row column">
-      <h2 class="m-t-20">Tables</h2>
+      <h2 class="margin-top-20">Tables</h2>
       <table class="rounded bordered">
         <thead>
           <tr>
@@ -79,7 +75,7 @@
         </tbody>
       </table>
     </div>
-    <p class="m-y-20">&nbsp;</p>
+    <p class="margin-vertical-20">&nbsp;</p>
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>