Permalink
Browse files

fixed fancy corners

  • Loading branch information...
1 parent 9f6e4bf commit c36036bd53e945b4ff718e189a1db976facb69af @heygrady committed Aug 25, 2011
Showing with 29 additions and 31 deletions.
  1. +10 −11 css/fancy.css
  2. +2 −2 css/test.css
  3. +11 −11 sass/_ui-corners.scss
  4. +6 −7 sass/fancy.scss
View
@@ -27,16 +27,15 @@
.ui-corners-side-right { right: 0; background-position: right top; }
-.box { outline: 1px dashed red; }
.box .ui-corners-corner { background-image: url('../i/corner-fancy-sprite.png?1314260561'); }
-.box .ui-corners-corner-tl { left: -8px; top: -4px; width: 18px; height: 18px; background-position: 1px -18px; }
-.box .ui-corners-corner-tr { right: -4px; top: -4px; width: 20px; height: 18px; background-position: -16px -18px; }
-.box .ui-corners-corner-br { right: -4px; bottom: -7px; width: 20px; height: 17px; background-position: -16px -36px; }
-.box .ui-corners-corner-bl { left: -4px; bottom: -7px; width: 18px; height: 17px; background-position: 1px -36px; }
-.box .ui-corners-side-top, .box .ui-corners-side-bottom { right: 20px; background-image: url('../i/corner-fancy-sprite.png?1314260561'); }
-.box .ui-corners-side-left, .box .ui-corners-side-right { top: 18px; bottom: 17px; background-image: url('../i/corner-fancy-sprite-sides.png?1314260561'); }
-.box .ui-corners-side-top { left: -4px; height: 18px; background-position: 0 0; }
-.box .ui-corners-side-bottom { left: -7px; height: 17px; background-position: 0 -52px; }
-.box .ui-corners-side-left { left: -4px; width: 18px; background-position: 0 0; }
-.box .ui-corners-side-right { right: -4px; width: 20px; background-position: -18px 0; }
+.box .ui-corners-corner-tl { left: -9px; top: -4px; width: 18px; height: 18px; background-position: 1px -18px; }
+.box .ui-corners-corner-tr { right: -2px; top: -4px; width: 20px; height: 18px; background-position: -16px -18px; }
+.box .ui-corners-corner-br { right: -2px; bottom: -7px; width: 20px; height: 17px; background-position: -16px -36px; }
+.box .ui-corners-corner-bl { left: -9px; bottom: -7px; width: 18px; height: 17px; background-position: 1px -36px; }
+.box .ui-corners-side-top, .box .ui-corners-side-bottom { left: 9px; right: 18px; background-image: url('../i/corner-fancy-sprite.png?1314260561'); }
+.box .ui-corners-side-left, .box .ui-corners-side-right { top: 14px; background-image: url('../i/corner-fancy-sprite-sides.png?1314260561'); }
+.box .ui-corners-side-top { right: false-2px; top: -4px; height: 18px; background-position: 0 0; }
+.box .ui-corners-side-bottom { bottom: -7px; height: 17px; background-position: 0 -52px; }
+.box .ui-corners-side-left { left: -9px; width: 18px; background-position: 0 0; }
+.box .ui-corners-side-right { right: -2px; width: 20px; background-position: -18px 0; }
.box.ui-corners { padding: 11px; }
View
@@ -33,7 +33,7 @@
.normal .ui-corners-corner-bl { background-image: url('../i/corner-bl.png?1313871969'); }
.normal .ui-corners-side-top, .normal .ui-corners-side-bottom { left: 12px; right: 12px; height: 12px; }
.normal .ui-corners-side-left, .normal .ui-corners-side-right { top: 12px; bottom: 12px; width: 12px; background-image: url('../i/corner-l.png?1313871969'); }
-.normal .ui-corners-side-top { background-image: url('../i/corner-t.png?1313871969'); }
+.normal .ui-corners-side-top { background-image: url('../i/corner-t.png?1313871969'); right: false0; }
.normal .ui-corners-side-bottom { background-image: url('../i/corner-b.png?1313871969'); }
.normal.ui-corners { padding: 11px; }
@@ -45,7 +45,7 @@
.sprite .ui-corners-corner-bl { background-position: -13px -1px; }
.sprite .ui-corners-side-top, .sprite .ui-corners-side-bottom { left: 12px; right: 12px; height: 12px; }
.sprite .ui-corners-side-left, .sprite .ui-corners-side-right { top: 12px; bottom: 12px; width: 12px; }
-.sprite .ui-corners-side-top { background-position: 0 -25px; }
+.sprite .ui-corners-side-top { right: false0; background-position: 0 -25px; }
.sprite .ui-corners-side-bottom { background-position: 0 11px; }
.sprite .ui-corners-side-left { background-position: -25px 0; }
.sprite .ui-corners-side-right { background-position: 11px 0; }
View
@@ -193,17 +193,17 @@ $ui-corners-side-right-width: $ui-corners-side-width !default;
// Side left, right, top and bottom
$t-height: corner-var(corner-nth($t, 2, auto) $tl-height $ui-corners-side-left-width);
- $t-left: corner-var(corner-nth($t, 5, auto) $tl-width $ui-corners-corner-width);
- $t-right: corner-var(corner-nth($t, 6, auto) $tr-width $ui-corners-corner-width);
+ $t-left: corner-var(corner-nth($t, 6, auto) ($tl-width + corner-nth($tl, 6, 0)) $ui-corners-corner-width);
+ $t-right: corner-var(corner-nth($t, 7, auto) ($tr-width + corner-nth($tr, 6, 0)) $ui-corners-corner-width);
$b-height: corner-var(corner-nth($b, 2, auto) $bl-height $ui-corners-side-left-width);
- $b-left: corner-var(corner-nth($b, 5, auto) $bl-width $ui-corners-corner-width);
- $b-right: corner-var(corner-nth($b, 6, auto) $br-width $ui-corners-corner-width);
+ $b-left: corner-var(corner-nth($b, 6, auto) ($bl-width + corner-nth($bl, 6, 0)) $ui-corners-corner-width);
+ $b-right: corner-var(corner-nth($b, 7, auto) ($br-width + corner-nth($br, 6, 0)) $ui-corners-corner-width);
$l-width: corner-var(corner-nth($l, 2, auto) $tl-width $ui-corners-side-left-width);
- $l-top: corner-var(corner-nth($l, 6, auto) $tl-height $ui-corners-corner-height);
- $l-bottom: corner-var(corner-nth($l, 7, auto) $bl-height $ui-corners-corner-height);
+ $l-top: corner-var(corner-nth($l, 6, auto) ($tl-height + corner-nth($tl, 7, 0)) $ui-corners-corner-height);
+ $l-bottom: corner-var(corner-nth($l, 7, auto) ($bl-height + corner-nth($bl, 7, 0)) $ui-corners-corner-height);
$r-width: corner-var(corner-nth($r, 2, auto) $tr-width $ui-corners-side-right-width);
- $r-top: corner-var(corner-nth($r, 6, auto) $tr-height $ui-corners-corner-height);
- $r-bottom: corner-var(corner-nth($r, 7, auto) $br-height $ui-corners-corner-height);
+ $r-top: corner-var(corner-nth($r, 6, auto) ($tr-height + corner-nth($tr, 7, 0)) $ui-corners-corner-height);
+ $r-bottom: corner-var(corner-nth($r, 7, auto) ($br-height + corner-nth($br, 7, 0)) $ui-corners-corner-height);
// normalize left and right, top and bottom
$left: false;
@@ -259,8 +259,8 @@ $ui-corners-side-right-width: $ui-corners-side-width !default;
$x: corner-nth($t, 3, auto) false left,
$y: corner-nth($t, 4, auto) false top,
$l: if($left, false, $t-left),
- $r: if($right, false, $t-right),
- $t: corner-nth($t, 7, auto) false 0
+ $r: if($right, false, $t-right) + corner-nth($tr, 6, 0),
+ $t: corner-nth($t, 5, auto) false 0
);
}
}
@@ -275,7 +275,7 @@ $ui-corners-side-right-width: $ui-corners-side-width !default;
$y: corner-nth($b, 4, auto) false bottom,
$l: if($left, false, $b-left),
$r: if($right, false, $b-right),
- $b: corner-nth($b, 7, auto) false 0
+ $b: corner-nth($b, 5, auto) false 0
);
}
}
View
@@ -3,15 +3,14 @@
.box {
@include corner-images(
- "corner-fancy-sprite.png" 18px 18px 1px -18px -8px -4px,
+ "corner-fancy-sprite.png" 18px 18px 1px -18px -9px -4px,
"corner-fancy-sprite.png" auto 0 0 -4px,
- "corner-fancy-sprite.png" 20px 18px -16px -18px -4px -4px,
- "corner-fancy-sprite-sides.png" auto -18px 0 -4px,
- "corner-fancy-sprite.png" 20px 17px -16px -36px -4px -7px,
+ "corner-fancy-sprite.png" 20px 18px -16px -18px -2px -4px,
+ "corner-fancy-sprite-sides.png" auto -18px 0 -2px,
+ "corner-fancy-sprite.png" 20px 17px -16px -36px -2px -7px,
"corner-fancy-sprite.png" auto 0 -52px -7px,
- "corner-fancy-sprite.png" 18px 17px 1px -36px -4px -7px,
- "corner-fancy-sprite-sides.png" auto 0 0 -4px
+ "corner-fancy-sprite.png" 18px 17px 1px -36px -9px -7px,
+ "corner-fancy-sprite-sides.png" auto 0 0 -9px
);
@include corner-border-width(7px 8px 5px 5px, 4px 3px 6px 6px);
- outline: 1px dashed red;
}

0 comments on commit c36036b

Please sign in to comment.