Clean up the border-radius example
This commit is contained in:
parent
9f303ce300
commit
7e0c4874e6
@ -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
|
||||
|
@ -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)
|
Loading…
Reference in New Issue
Block a user