Create a gist now

Instantly share code, notes, and snippets.

jQuery Corners Plugin
//-----------------------------------------------
// Variables
//-----------------------------------------------
$ui-corners-cache-buster: true !default;
// default widths
$ui-corners-corner-height: 10px !default;
$ui-corners-corner-width: 10px !default;
$ui-corners-side-width: 10px !default;
// defaults per corner
$ui-corners-corner-tl-height: $ui-corners-corner-height !default;
$ui-corners-corner-tl-width: $ui-corners-corner-width !default;
$ui-corners-corner-tr-height: $ui-corners-corner-height !default;
$ui-corners-corner-tr-width: $ui-corners-corner-width !default;
$ui-corners-corner-br-height: $ui-corners-corner-height !default;
$ui-corners-corner-br-width: $ui-corners-corner-width !default;
$ui-corners-corner-bl-height: $ui-corners-corner-height !default;
$ui-corners-corner-bl-width: $ui-corners-corner-width !default;
// defaults per side
$ui-corners-side-top-width: $ui-corners-side-width !default;
$ui-corners-side-bottom-width: $ui-corners-side-width !default;
$ui-corners-side-left-width: $ui-corners-side-width !default;
$ui-corners-side-right-width: $ui-corners-side-width !default;
//-----------------------------------------------
// Corner Border Width
// Adds padding to the corner container to simulate a border
// The second parameter allows for setting an inner padding in addition to the border
// @param list $width border-width list: [top] [right] [bottom] [left]
// @param list $padding (optional) padding list: [top] [right] [bottom] [left]
//-----------------------------------------------
@mixin corner-border-width ($border-width, $padding: false) {
@if $padding {
$border-width: corner-zip-widths($border-width, $padding);
}
&.ui-corners { padding: $border-width; }
}
//-----------------------------------------------
// Corner Zip Widths
// returns a list of the two lists added together
// @param list $a list of widths: [top] [right] [bottom] [left]
// @param list $b (optional) list of widths: [top] [right] [bottom] [left]
// @return list
//-----------------------------------------------
@function corner-zip-widths($a, $b: 0) {
$a-t: corner-nth($a, 1, 0);
$a-r: corner-nth($a, 2, $a-t);
$a-b: corner-nth($a, 3, $a-t);
$a-l: corner-nth($a, 4, $a-r);
$b-t: corner-nth($b, 1, 0);
$b-r: corner-nth($b, 2, $b-t);
$b-b: corner-nth($b, 3, $b-t);
$b-l: corner-nth($b, 4, $b-r);
$a-t: $a-t + $b-t;
$a-r: $a-r + $b-r;
$a-b: $a-b + $b-b;
$a-l: $a-l + $b-l;
@if $a-t == $a-b and $a-r == $a-l and $a-t == $a-r {
@return $a-t; // all equal
} @elseif $a-t == $a-b and $a-r == $a-l and $a-t != $a-r {
@return $a-t $a-r; // x and y different
} @elseif $a-t != $a-b and $a-r == $a-l {
@return $a-t $a-r $a-b; // y different
} @else {
@return $a-t $a-r $a-b $a-l;// all different
}
}
//-----------------------------------------------
// Corner Images
// @param list $tl [background-image] [width] [height] [background-position-x] [background-position-y] [left] [top] top-left corner
// @param list $t [background-image] [height] [background-position-x] [background-position-y] [left] [right] [top] top side
// @param list $tr [background-image] [width] [height] [background-position-x] [background-position-y] [right] [top] top-right corner
// @param list $r [background-image] [width] [background-position-x] [background-position-y] [right] [top] [bottom] right side
// @param list $br [background-image] [width] [height] [background-position-x] [background-position-y] [right] [bottom] bottom-right corner
// @param list $b [background-image] [height] [background-position-x] [background-position-y] [left] [right] [bottom] bottom side
// @param list $bl [background-image] [width] [height] [background-position-x] [background-position-y] [left] [bottom] bottom-left corner
// @param list $l [background-image] [width] [background-position-x] [background-position-y] [left] [top] [bottom] left side
//-----------------------------------------------
@mixin corner-images ($tl: auto, $t: auto, $tr: auto, $r: auto, $br: auto, $b: auto, $bl: auto, $l: auto) {
// corner images and dimensions
$tl-image: nth($tl, 1);
$tl-width: corner-var(corner-nth($tl, 2, auto) corner-image-width($tl-image) $ui-corners-corner-tl-width);
$tl-height: corner-var(corner-nth($tl, 3, auto) corner-image-height($tl-image) $ui-corners-corner-tl-height);
$tr-image: nth($tr, 1);
$tr-width: corner-var(corner-nth($tr, 2, auto) corner-image-width($tr-image) $ui-corners-corner-tr-width);
$tr-height: corner-var(corner-nth($tr, 3, auto) corner-image-height($tr-image) $ui-corners-corner-tr-height);
$br-image: nth($br, 1);
$br-width: corner-var(corner-nth($br, 2, auto) corner-image-width($br-image) $ui-corners-corner-br-width);
$br-height: corner-var(corner-nth($br, 3, auto) corner-image-height($br-image) $ui-corners-corner-br-height);
$bl-image: nth($bl, 1);
$bl-width: corner-var(corner-nth($bl, 2, auto) corner-image-width($bl-image) $ui-corners-corner-bl-width);
$bl-height: corner-var(corner-nth($bl, 3, auto) corner-image-height($bl-image) $ui-corners-corner-bl-height);
$t-image: nth($t, 1); $r-image: nth($r, 1); $b-image: nth($b, 1); $l-image: nth($l, 1);
// all backgrounds are the same
@if $tl-image != none and $tl-image == $t-image and $tl-image == $tr-image and $tl-image == $r-image
and $tl-image == $br-image and $tl-image == $b-image and $tl-image == $b-image and $tl-image == $l-image {
.ui-corners-corner, .ui-corners-side { background-image: image-url($tl-image, false, $ui-corners-cache-buster); }
$tl-image: none; $tr-image: none; $br-image: none; $bl-image: none;
$t-image: none; $r-image: none; $b-image: none; $l-image: none;
}
// normalize height and width
$width: false;
$height: false;
// check all width are the same
@if $tl-width == $tr-width and $tl-width == $br-width and $tl-width == $bl-width { $width: $tl-width; }
// check all heights are the same
@if $tl-height == $tr-height and $tl-height == $br-height and $tl-height == $bl-height { $height: $tl-height; }
// set the width and height with a generic class
@if ($width and $width != $ui-corners-corner-width) or ($height and $height != $ui-corners-corner-height)
or ($tl-image != none and $tl-image == $tr-image and $tl-image == $br-image and $tl-image == $bl-image) {
// when it matches default, fall back to generic corner class
.ui-corners-corner {
@if $width and $width != $ui-corners-corner-width { width: $width; }
@if $height and $height != $ui-corners-corner-height { height: $height; }
@if $tl-image != none and $tl-image == $tr-image and $tl-image == $br-image and $tl-image == $bl-image {
background-image: image-url($tl-image, false, $ui-corners-cache-buster);
$tl-image: none; $tr-image: none; $br-image: none; $bl-image: none;
}
}
}
// Top Left
@if $tl != auto {
.ui-corners-corner-tl {
@include corner-props(
$image: $tl-image,
$w: if($width, false, $tl-width),
$h: if($height, false, $tl-height),
$x: corner-nth($tl, 4, auto) false 0,
$y: corner-nth($tl, 5, auto) false 0,
$l: corner-nth($tl, 6, auto) false 0,
$t: corner-nth($tl, 7, auto) false 0
);
}
}
// Top Right
@if $tr != auto {
.ui-corners-corner-tr {
@include corner-props(
$image: $tr-image,
$w: if($width, false, $tr-width),
$h: if($height, false, $tr-height),
$x: corner-nth($tr, 4, auto) false 0,
$y: corner-nth($tr, 5, auto) false 0,
$r: corner-nth($tr, 6, auto) false 0,
$t: corner-nth($tr, 7, auto) false 0
);
}
}
// Bottom Right
@if $br != auto {
.ui-corners-corner-br {
@include corner-props(
$image: $br-image,
$w: if($width, false, $br-width),
$h: if($height, false, $br-height),
$x: corner-nth($br, 4, auto) false 0,
$y: corner-nth($br, 5, auto) false 0,
$r: corner-nth($br, 6, auto) false 0,
$b: corner-nth($br, 7, auto) false 0
);
}
}
// Bottom Left
@if $bl != auto {
.ui-corners-corner-bl {
@include corner-props(
$image: $bl-image,
$w: if($width, false, $bl-width),
$h: if($height, false, $bl-height),
$x: corner-nth($bl, 4, auto) false 0,
$y: corner-nth($bl, 5, auto) false 0,
$l: corner-nth($bl, 6, auto) false 0,
$b: corner-nth($bl, 7, auto) false 0
);
}
}
// 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, 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, 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 + 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 + 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;
$right: false;
$top: false;
$bottom: false;
$width: false;
$height: false;
// check all sides are the same
@if $t-left == $b-left { $left: $t-left; }
@if $t-right == $b-right { $right: $t-right; }
@if $t-height == $b-height { $height: $t-height; }
@if $l-top == $r-top { $top: $l-top; }
@if $l-bottom == $r-bottom { $bottom: $l-bottom; }
@if $l-width == $r-width { $width: $l-width; }
@if $t-image != none and $t-image == $r-image and $t-image == $b-image and $t-image == $l-image {
.ui-corners-side { background-image: image-url($t-image, false, $ui-corners-cache-buster); }
$t-image: none; $r-image: none; $b-image: none; $l-image: none;
}
// set the top and bottom sides with a generic class
@if ($left and $left != $ui-corners-corner-width) or ($right and $right != $ui-corners-corner-width)
or ($height and $height != $ui-corners-side-width) or ($t-image != none and $t-image == $b-image) {
// when it matches default, fall back to generic corner class
.ui-corners-side-top, .ui-corners-side-bottom {
@if $left and $left != $ui-corners-corner-width { left: $left; }
@if $right and $right != $ui-corners-corner-width { right: $right; }
@if $height and $height != $ui-corners-side-width { height: $height; }
@if $t-image != none and $t-image == $b-image { background-image: image-url($t-image, false, $ui-corners-cache-buster); $t-image: none; $b-image: none; }
}
}
// set the left and right sides with a generic class
@if ($top and $top != $ui-corners-corner-height) or ($bottom and $bottom != $ui-corners-corner-height)
or ($width and $width != $ui-corners-side-width) or ($l-image != none and $l-image == $r-image) {
// when it matches default, fall back to generic corner class
.ui-corners-side-left, .ui-corners-side-right {
@if $top and $top != $ui-corners-corner-height { top: $top; }
@if $bottom and $bottom != $ui-corners-corner-height { bottom: $bottom; }
@if $width and $width != $ui-corners-side-width { width: $width; }
@if $l-image != none and $l-image == $r-image { background-image: image-url($l-image, false, $ui-corners-cache-buster); $l-image: none; $r-image: none; }
}
}
// Top
@if $t != auto {
.ui-corners-side-top {
@include corner-props(
$image: $t-image,
$h: if($height, false, $t-height),
$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) + corner-nth($tr, 6, 0),
$t: corner-nth($t, 5, auto) false 0
);
}
}
// Bottom
@if $b != auto {
.ui-corners-side-bottom {
@include corner-props(
$image: $b-image,
$h: if($height, false, $b-height),
$x: corner-nth($b, 3, auto) false left,
$y: corner-nth($b, 4, auto) false bottom,
$l: if($left, false, $b-left),
$r: if($right, false, $b-right),
$b: corner-nth($b, 5, auto) false 0
);
}
}
// Left
@if $l != auto {
.ui-corners-side-left {
@include corner-props(
$image: $l-image,
$w: if($width, false, $l-width),
$x: corner-nth($l, 3, auto) false left,
$y: corner-nth($l, 4, auto) false top,
$l: corner-nth($l, 5, auto) false 0,
$t: if($top, false, $l-top),
$b: if($bottom, false, $l-bottom)
);
}
}
// Right
@if $r != auto {
.ui-corners-side-right {
@include corner-props(
$image: $r-image,
$w: if($width, false, $r-width),
$x: corner-nth($r, 3, auto) false right,
$y: corner-nth($r, 4, auto) false top,
$r: corner-nth($r, 5, auto) false 0,
$t: if($top, false, $r-top),
$b: if($bottom, false, $r-bottom)
);
}
}
}
//-----------------------------------------------
// Corner Props
// creates the porperties of corner or side
// @param image $image (optional)
// @param list $w (optional) [value] [auto] [default] element width.
// @param list $h (optional) [value] [auto] [default] element height.
// @param list $x (optional) [value] [auto] [default] background position x.
// @param list $y (optional) [value] [auto] [default] background position y.
// @param list $l (optional) [value] [auto] [default] position left.
// @param list $r (optional) [value] [auto] [default] position right.
// @param list $t (optional) [value] [auto] [default] position top.
// @param list $b (optional) [value] [auto] [default] position bottom.
//-----------------------------------------------
@mixin corner-props ($image: none, $w: false, $h: false, $x: false, $y: false, $l: false, $r: false, $t: false, $b: false) {
// each variable takes 3 values: passed auto default
$left: corner-var($l);
$right: corner-var($r);
$top: corner-var($t);
$bottom: corner-var($b);
$width: corner-var($w);
$height: corner-var($h);
@if $image != none { background-image: image-url($image, false, $ui-corners-cache-buster); }
@if $left != false { left: $left; }
@if $right != false { right: $right; }
@if $top != false { top: $top; }
@if $bottom != false { bottom: $bottom; }
@if $width != false { width: $width; }
@if $height != false { height: $height; }
$position-x: corner-var($x);
$position-y: corner-var($y);
@if $position-x != false or $position-y != false { background-position: if($position-x != false, $position-x, nth($x, 3)) if($position-y != false, $position-y, nth($x, 3)); }
}
//-----------------------------------------------
// Corner Nth
// returns the value of a list at an index or default value if the index is missing
// @param list $list value list
// @param int $n index within the lsit
// @param mixed $default default value if index does not exist
//-----------------------------------------------
@function corner-nth($list, $n, $default: false) {
$value: $default;
@if length($list) > $n - 1 { $value: nth($list, $n) }
@return $value;
}
//-----------------------------------------------
// Corner Image Width/Height
// returns the width of an image or default
// @param image $image
//-----------------------------------------------
@function corner-image-width($image) {
@if ($image == none) { @return default; }
@return image-width($image);
}
@function corner-image-height($image) {
@if ($image == none) { @return default; }
@return image-height($image);
}
//-----------------------------------------------
// Corner Vars
// returns the current value unless it is "auto" or "default" then those values are returned
// @param list $list list if values [current value] [value of auto] [value of default]
//-----------------------------------------------
@function corner-var($list) {
$val: nth($list, 1);
@if $val == auto { $val: nth($list, 2); }
@if $val == default { $val: nth($list, 3); }
@return $val;
}
//-----------------------------------------------
// Basic Styles (required)
//-----------------------------------------------
// corner wrapper
.ui-corners {
position: relative;
}
// the content of the wrapper
.ui-corners-content {
position: relative;
z-index: 1;
}
// all corners and sides
.ui-corners-corner, .ui-corners-side {
position: absolute;
z-index: 0;
}
//-----------------------------------------------
// Corners
//-----------------------------------------------
.ui-corners-corner {
height: $ui-corners-corner-height;
width: $ui-corners-corner-width;
background-repeat: no-repeat;
}
.ui-corners-corner-tl {
top: 0;
left: 0;
@if $ui-corners-corner-height != $ui-corners-corner-tl-height { height: $ui-corners-corner-tl-height; }
@if $ui-corners-corner-width != $ui-corners-corner-tl-width { width: $ui-corners-corner-tl-width; }
background-position: left top;
}
.ui-corners-corner-tr {
top: 0;
right: 0;
@if $ui-corners-corner-height != $ui-corners-corner-tr-height { height: $ui-corners-corner-tr-height; }
@if $ui-corners-corner-width != $ui-corners-corner-tr-width { width: $ui-corners-corner-tr-width; }
background-position: right top;
}
.ui-corners-corner-br {
bottom: 0;
right: 0;
@if $ui-corners-corner-height != $ui-corners-corner-br-height { height: $ui-corners-corner-br-height; }
@if $ui-corners-corner-width != $ui-corners-corner-br-width { width: $ui-corners-corner-br-width; }
background-position: right bottom;
}
.ui-corners-corner-bl {
bottom: 0;
left: 0;
@if $ui-corners-corner-height != $ui-corners-corner-bl-height { height: $ui-corners-corner-bl-height; }
@if $ui-corners-corner-width != $ui-corners-corner-bl-width { width: $ui-corners-corner-bl-width; }
background-position: left bottom;
}
//-----------------------------------------------
// Sides
//-----------------------------------------------
.ui-corners-side-top, .ui-corners-side-bottom {
left: $ui-corners-corner-width;
right: $ui-corners-corner-width;
height: $ui-corners-side-width;
background-repeat: repeat-x;
}
.ui-corners-side-left, .ui-corners-side-right {
top: $ui-corners-corner-height;
bottom: $ui-corners-corner-height;
width: $ui-corners-side-width;
background-repeat: repeat-y;
}
.ui-corners-side-top {
top: 0;
@if $ui-corners-side-width != $ui-corners-side-top-width { height: $ui-corners-side-top; }
background-position: left top;
}
.ui-corners-side-bottom {
bottom: 0;
@if $ui-corners-side-width != $ui-corners-side-bottom-width { height: $ui-corners-side-bottom; }
background-position: left bottom;
}
.ui-corners-side-left {
left: 0;
@if $ui-corners-side-width != $ui-corners-side-left-width { width: $ui-corners-side-left; }
background-position: left top;
}
.ui-corners-side-right {
right: 0;
@if $ui-corners-side-width != $ui-corners-side-right-width { width: $ui-corners-side-right; }
background-position: right top;
}
/* Default Corners CSS*/
.ui-corners { position: relative; }
.ui-corners-content { position: relative; z-index: 1; }
.ui-corners-corner, .ui-corners-side { position: absolute; z-index: 0; }
.ui-corners-corner { height: 10px; width: 10px; background-repeat: no-repeat; }
.ui-corners-corner-tl { top: 0; left: 0; background-position: left top; }
.ui-corners-corner-tr { top: 0; right: 0; background-position: right top; }
.ui-corners-corner-br { bottom: 0; right: 0; background-position: right bottom; }
.ui-corners-corner-bl { bottom: 0; left: 0; background-position: left bottom; }
.ui-corners-side-top, .ui-corners-side-bottom { left: 10px; right: 10px; height: 10px; background-repeat: repeat-x; }
.ui-corners-side-left, .ui-corners-side-right { top: 10px; bottom: 10px; width: 10px; background-repeat: repeat-y; }
.ui-corners-side-top { top: 0; background-position: left top; }
.ui-corners-side-bottom { bottom: 0; background-position: left bottom; }
.ui-corners-side-left { left: 0; background-position: left top; }
.ui-corners-side-right { right: 0; background-position: right top; }
.box .ui-corners-corner { background-image: url('../i/corner-fancy-sprite.png?1314340388'); }
.box .ui-corners-corner-tl { left: -8px; top: -4px; width: 18px; height: 18px; background-position: 0px -18px; }
.box .ui-corners-corner-tr { right: -4px; top: -4px; width: 20px; height: 18px; background-position: -18px -18px; }
.box .ui-corners-corner-br { right: -4px; bottom: -7px; width: 20px; height: 17px; background-position: -18px -36px; }
.box .ui-corners-corner-bl { left: -8px; bottom: -7px; width: 18px; height: 17px; background-position: 0px -36px; }
.box .ui-corners-side-top, .box .ui-corners-side-bottom { right: 16px; background-image: url('../i/corner-fancy-sprite.png?1314340388'); }
.box .ui-corners-side-left, .box .ui-corners-side-right { top: 14px; background-image: url('../i/corner-fancy-sprite-sides.png?1314340389'); }
.box .ui-corners-side-top { right: false-4px; top: -4px; height: 18px; background-position: 0 0; }
.box .ui-corners-side-bottom { bottom: -7px; height: 17px; background-position: 0 -53px; }
.box .ui-corners-side-left { left: -8px; width: 18px; background-position: 0 0; }
.box .ui-corners-side-right { right: -4px; width: 20px; background-position: -18px 0; }
.box.ui-corners { padding: 11px; }
@import "ui-corners";
.box {
@include corner-images(
"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 -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 -9px -7px,
"corner-fancy-sprite-sides.png" auto 0 0 -9px
);
@include corner-border-width(7px 8px 5px 5px, 4px 3px 6px 6px);
}
.box .ui-corners-corner, .box .ui-corners-side { background-image: url('../i/corner.png?1312605049'); }
.box .ui-corners-corner { width: 12px; height: 12px; }
.box .ui-corners-corner-tl { background-position: -13px -13px; }
.box .ui-corners-corner-tr { background-position: -1px -13px; }
.box .ui-corners-corner-br { background-position: -1px -1px; }
.box .ui-corners-corner-bl { background-position: -13px -1px; }
.box .ui-corners-side-top, .box .ui-corners-side-bottom { left: 12px; right: 12px; height: 12px; }
.box .ui-corners-side-left, .box .ui-corners-side-right { top: 12px; bottom: 12px; width: 12px; }
.box .ui-corners-side-top { background-position: 0 -25px; }
.box .ui-corners-side-bottom { background-position: 0 11px; }
.box .ui-corners-side-left { background-position: -25px 0; }
.box .ui-corners-side-right { background-position: 11px 0; }
.box.ui-corners { padding: 11px; }
@import "ui-corners";
.box {
@include corner-images(
"corner.png" 12px 12px -13px -13px,
"corner.png" auto 0 -25px,
"corner.png" 12px 12px -1px -13px,
"corner.png" auto 11px 0,
"corner.png" 12px 12px -1px -1px,
"corner.png" auto 0 11px,
"corner.png" 12px 12px -13px -1px,
"corner.png" auto -25px 0
);
@include corner-border-width(1px, 10px);
}
.box .ui-corners-corner { width: 12px; height: 12px; }
.box .ui-corners-corner-tl { background-image: url('../i/corner-tl.png?1312605049'); }
.box .ui-corners-corner-tr { background-image: url('../i/corner-tr.png?1312605049'); }
.box .ui-corners-corner-br { background-image: url('../i/corner-br.png?1312605049'); }
.box .ui-corners-corner-bl { background-image: url('../i/corner-bl.png?1312605049'); }
.box .ui-corners-side-top, .box .ui-corners-side-bottom { left: 12px; right: 12px; height: 12px; }
.box .ui-corners-side-left, .box .ui-corners-side-right { top: 12px; bottom: 12px; width: 12px; background-image: url('../i/corner-l.png?1312605049'); }
.box .ui-corners-side-top { background-image: url('../i/corner-t.png?1312605049'); }
.box .ui-corners-side-bottom { background-image: url('../i/corner-b.png?1312605049'); }
.box.ui-corners { padding: 11px; }
<div class="box">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
@import "ui-corners";
.box {
@include corner-images(
"corner-tl.png",
"corner-t.png",
"corner-tr.png",
"corner-l.png",
"corner-br.png",
"corner-b.png",
"corner-bl.png",
"corner-l.png"
);
@include corner-border-width(1px, 10px);
}
<div class="box ui-corners">
<div class="ui-corners-content">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
<span class="ui-corners-corner ui-corners-corner-tl"></span>
<span class="ui-corners-corner ui-corners-corner-tr"></span>
<span class="ui-corners-corner ui-corners-corner-br"></span>
<span class="ui-corners-corner ui-corners-corner-bl"></span>
<span class="ui-corners-side ui-corners-side-top"></span>
<span class="ui-corners-side ui-corners-side-right"></span>
<span class="ui-corners-side ui-corners-side-bottom"></span>
<span class="ui-corners-side ui-corners-side-left"></span>
</div>
///////////////////////////////////////////////////////
// Corners
///////////////////////////////////////////////////////
;(function($, undefined) {
// set up strings
var corners = ["tl", "tr", "br", "bl"],
sides = ["top", "right", "bottom", "left"],
className = "ui-corners",
cornerClassName = className + "-corner",
sideClassName = className + "-side",
spans = "",
spanStart = '<span class="';
// creat the span string
$.each(corners, function() {
spans += spanStart + cornerClassName + ' ' + cornerClassName + '-' + this + '"/>';
});
$.each(sides, function() {
spans += spanStart + sideClassName + ' ' + sideClassName + '-' + this + '"/>';
});
// add corners/sides to an element
// wrap the contents with a content div
function addCorners(el) {
$(el).wrapInner('<div class="' + className + '-content" />').append(spans).addClass(className);
}
// create a jQuery plugin for adding in the corners
$.fn.corners = function() {
this.not('.' + className).each(function() {
addCorners(this);
});
};
})(jQuery);
$('.box').corners();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment