Clean up the border-radius example

This commit is contained in:
Chris Eppstein 2010-04-25 02:57:00 -07:00
parent 9f303ce300
commit 7e0c4874e6
2 changed files with 41 additions and 46 deletions

View File

@ -1,49 +1,39 @@
%p
Box with all corners rounded
#border-radius.border-radius-example
%p
Box with only top left corner rounded
%p
Box with all corners rounded
#border-radius-top-left.border-radius-example
%p
Box with only top right corner rounded
%p
Box with only top left corner rounded
#border-radius-top-right.border-radius-example
%p
Box with only bottom left corner rounded
%p
Box with only top right corner rounded
#border-radius-bottom-left.border-radius-example
%p
Box with only bottom right corner rounded
%p
Box with only bottom left corner rounded
#border-radius-bottom-right.border-radius-example
%p
Box with top corners rounded
%p
Box with only bottom right corner rounded
#border-radiusTop.border-radius-example
%p
Box with bottom corners rounded
%p
Box with top corners rounded
#border-radius-bottom.border-radius-example
%p
Box with left corners rounded
%p
Box with bottom corners rounded
#border-radius-left.border-radius-example
%p
Box with right corners rounded
%p
Box with left corners rounded
#border-radius-right.border-radius-example
%p
Box with different roundings for top/bottom and left/right
%p
Box with right corners rounded
#border-radius-combo.border-radius-example
%p
Box with different roundings for top/bottom and left/right

View File

@ -1,40 +1,45 @@
@import compass/css3
@import compass/css3, compass/utilities
#demo
+clearfix
.border-radius-example
width: 40px
height: 40px
width: 125px
height: 125px
background: red
margin: 20px
float: left
padding: 5px
#border-radius
+border-radius("10px")
+border-radius(25px)
#border-radius-top-left
+border-top-left-radius("10px")
+border-top-left-radius(25px)
#border-radius-top-right
+border-top-right-radius("10px")
+border-top-right-radius(25px)
#border-radius-bottom-left
+border-bottom-left-radius("10px")
+border-bottom-left-radius(25px)
#border-radius-bottom-right
+border-bottom-right-radius("10px")
+border-bottom-right-radius(25px)
#border-radius-top
+border-top-radius("10px")
+border-top-radius(25px)
#border-radius-bottom
+border-bottom-radius("10px")
+border-bottom-radius(25px)
#border-radius-left
+border-left-radius("10px")
+border-left-radius(25px)
#border-radius-right
+border-right-radius("10px")
+border-right-radius(25px)
#border-radius-combo
+border-corner-radius("top", "left", "20px")
+border-corner-radius("top", "right", "5px")
+border-corner-radius("bottom", "left", "12px")
+border-corner-radius("bottom", "right", "28px")
+border-corner-radius(top, left, 40px)
+border-corner-radius(top, right, 5px)
+border-corner-radius(bottom, left, 15px)
+border-corner-radius(bottom, right, 30px)