Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 481 lines (440 sloc) 19.831 kb
a5c920f @heygrady re-organizing the project structure to be much less confusing
authored
1 //-----------------------------------------------
2 // Variables
3 //-----------------------------------------------
4 $ui-corners-cache-buster: true !default;
5
6 // default widths
7 $ui-corners-corner-height: 10px !default;
8 $ui-corners-corner-width: 10px !default;
9 $ui-corners-side-width: 10px !default;
10
11 // defaults per corner
12 $ui-corners-corner-tl-height: $ui-corners-corner-height !default;
13 $ui-corners-corner-tl-width: $ui-corners-corner-width !default;
14 $ui-corners-corner-tr-height: $ui-corners-corner-height !default;
15 $ui-corners-corner-tr-width: $ui-corners-corner-width !default;
16 $ui-corners-corner-br-height: $ui-corners-corner-height !default;
17 $ui-corners-corner-br-width: $ui-corners-corner-width !default;
18 $ui-corners-corner-bl-height: $ui-corners-corner-height !default;
19 $ui-corners-corner-bl-width: $ui-corners-corner-width !default;
20
21 // defaults per side
22 $ui-corners-side-top-width: $ui-corners-side-width !default;
23 $ui-corners-side-bottom-width: $ui-corners-side-width !default;
24 $ui-corners-side-left-width: $ui-corners-side-width !default;
25 $ui-corners-side-right-width: $ui-corners-side-width !default;
26
27 //-----------------------------------------------
28 // Corner Border Width
29 // Adds padding to the corner container to simulate a border
30 // The second parameter allows for setting an inner padding in addition to the border
31 // @param list $width border-width list: [top] [right] [bottom] [left]
32 // @param list $padding (optional) padding list: [top] [right] [bottom] [left]
33 //-----------------------------------------------
34 @mixin corner-border-width ($border-width, $padding: false) {
35 @if $padding {
36 $border-width: corner-zip-widths($border-width, $padding);
37 }
38 &.ui-corners { padding: $border-width; }
39 }
40
41 //-----------------------------------------------
42 // Corner Zip Widths
43 // returns a list of the two lists added together
44 // @param list $a list of widths: [top] [right] [bottom] [left]
45 // @param list $b (optional) list of widths: [top] [right] [bottom] [left]
46 // @return list
47 //-----------------------------------------------
48 @function corner-zip-widths($a, $b: 0) {
49 $a-t: corner-nth($a, 1, 0);
50 $a-r: corner-nth($a, 2, $a-t);
51 $a-b: corner-nth($a, 3, $a-t);
52 $a-l: corner-nth($a, 4, $a-r);
53
54 $b-t: corner-nth($b, 1, 0);
55 $b-r: corner-nth($b, 2, $b-t);
56 $b-b: corner-nth($b, 3, $b-t);
57 $b-l: corner-nth($b, 4, $b-r);
58
59 $a-t: $a-t + $b-t;
60 $a-r: $a-r + $b-r;
61 $a-b: $a-b + $b-b;
62 $a-l: $a-l + $b-l;
63
64 @if $a-t == $a-b and $a-r == $a-l and $a-t == $a-r {
65 @return $a-t; // all equal
66 } @elseif $a-t == $a-b and $a-r == $a-l and $a-t != $a-r {
67 @return $a-t $a-r; // x and y different
68 } @elseif $a-t != $a-b and $a-r == $a-l {
69 @return $a-t $a-r $a-b; // y different
70 } @else {
71 @return $a-t $a-r $a-b $a-l;// all different
72 }
73 }
74
75 //-----------------------------------------------
76 // Corner Images
77 // @param list $tl [background-image] [width] [height] [background-position-x] [background-position-y] [left] [top] top-left corner
78 // @param list $t [background-image] [height] [background-position-x] [background-position-y] [left] [right] [top] top side
79 // @param list $tr [background-image] [width] [height] [background-position-x] [background-position-y] [right] [top] top-right corner
80 // @param list $r [background-image] [width] [background-position-x] [background-position-y] [right] [top] [bottom] right side
81 // @param list $br [background-image] [width] [height] [background-position-x] [background-position-y] [right] [bottom] bottom-right corner
82 // @param list $b [background-image] [height] [background-position-x] [background-position-y] [left] [right] [bottom] bottom side
83 // @param list $bl [background-image] [width] [height] [background-position-x] [background-position-y] [left] [bottom] bottom-left corner
84 // @param list $l [background-image] [width] [background-position-x] [background-position-y] [left] [top] [bottom] left side
85 //-----------------------------------------------
86 @mixin corner-images ($tl: auto, $t: auto, $tr: auto, $r: auto, $br: auto, $b: auto, $bl: auto, $l: auto) {
87 // corner images and dimensions
88 $tl-image: nth($tl, 1);
89 $tl-width: corner-var(corner-nth($tl, 2, auto) corner-image-width($tl-image) $ui-corners-corner-tl-width);
90 $tl-height: corner-var(corner-nth($tl, 3, auto) corner-image-height($tl-image) $ui-corners-corner-tl-height);
91 $tr-image: nth($tr, 1);
92 $tr-width: corner-var(corner-nth($tr, 2, auto) corner-image-width($tr-image) $ui-corners-corner-tr-width);
93 $tr-height: corner-var(corner-nth($tr, 3, auto) corner-image-height($tr-image) $ui-corners-corner-tr-height);
94 $br-image: nth($br, 1);
95 $br-width: corner-var(corner-nth($br, 2, auto) corner-image-width($br-image) $ui-corners-corner-br-width);
96 $br-height: corner-var(corner-nth($br, 3, auto) corner-image-height($br-image) $ui-corners-corner-br-height);
97 $bl-image: nth($bl, 1);
98 $bl-width: corner-var(corner-nth($bl, 2, auto) corner-image-width($bl-image) $ui-corners-corner-bl-width);
99 $bl-height: corner-var(corner-nth($bl, 3, auto) corner-image-height($bl-image) $ui-corners-corner-bl-height);
100 $t-image: nth($t, 1); $r-image: nth($r, 1); $b-image: nth($b, 1); $l-image: nth($l, 1);
101
102 // all backgrounds are the same
103 @if $tl-image != none and $tl-image == $t-image and $tl-image == $tr-image and $tl-image == $r-image
104 and $tl-image == $br-image and $tl-image == $b-image and $tl-image == $b-image and $tl-image == $l-image {
105 .ui-corners-corner, .ui-corners-side { background-image: image-url($tl-image, false, $ui-corners-cache-buster); }
106 $tl-image: none; $tr-image: none; $br-image: none; $bl-image: none;
107 $t-image: none; $r-image: none; $b-image: none; $l-image: none;
108 }
109
110 // normalize height and width
111 $width: false;
112 $height: false;
113
114 // check all width are the same
115 @if $tl-width == $tr-width and $tl-width == $br-width and $tl-width == $bl-width { $width: $tl-width; }
116
117 // check all heights are the same
118 @if $tl-height == $tr-height and $tl-height == $br-height and $tl-height == $bl-height { $height: $tl-height; }
119
120 // set the width and height with a generic class
121 @if ($width and $width != $ui-corners-corner-width) or ($height and $height != $ui-corners-corner-height)
122 or ($tl-image != none and $tl-image == $tr-image and $tl-image == $br-image and $tl-image == $bl-image) {
123 // when it matches default, fall back to generic corner class
124 .ui-corners-corner {
125 @if $width and $width != $ui-corners-corner-width { width: $width; }
126 @if $height and $height != $ui-corners-corner-height { height: $height; }
127 @if $tl-image != none and $tl-image == $tr-image and $tl-image == $br-image and $tl-image == $bl-image {
128 background-image: image-url($tl-image, false, $ui-corners-cache-buster);
129 $tl-image: none; $tr-image: none; $br-image: none; $bl-image: none;
130 }
131 }
132 }
133
134 // Top Left
135 @if $tl != auto {
136 .ui-corners-corner-tl {
137 @include corner-props(
138 $image: $tl-image,
139 $w: if($width, false, $tl-width),
140 $h: if($height, false, $tl-height),
141 $x: corner-nth($tl, 4, auto) false 0,
142 $y: corner-nth($tl, 5, auto) false 0,
143 $l: corner-nth($tl, 6, auto) false 0,
144 $t: corner-nth($tl, 7, auto) false 0
145 );
146 }
147 }
148
149 // Top Right
150 @if $tr != auto {
151 .ui-corners-corner-tr {
152 @include corner-props(
153 $image: $tr-image,
154 $w: if($width, false, $tr-width),
155 $h: if($height, false, $tr-height),
156 $x: corner-nth($tr, 4, auto) false 0,
157 $y: corner-nth($tr, 5, auto) false 0,
158 $r: corner-nth($tr, 6, auto) false 0,
159 $t: corner-nth($tr, 7, auto) false 0
160 );
161 }
162 }
163
164 // Bottom Right
165 @if $br != auto {
166 .ui-corners-corner-br {
167 @include corner-props(
168 $image: $br-image,
169 $w: if($width, false, $br-width),
170 $h: if($height, false, $br-height),
171 $x: corner-nth($br, 4, auto) false 0,
172 $y: corner-nth($br, 5, auto) false 0,
173 $r: corner-nth($br, 6, auto) false 0,
174 $b: corner-nth($br, 7, auto) false 0
175 );
176 }
177 }
178
179 // Bottom Left
180 @if $bl != auto {
181 .ui-corners-corner-bl {
182 @include corner-props(
183 $image: $bl-image,
184 $w: if($width, false, $bl-width),
185 $h: if($height, false, $bl-height),
186 $x: corner-nth($bl, 4, auto) false 0,
187 $y: corner-nth($bl, 5, auto) false 0,
188 $l: corner-nth($bl, 6, auto) false 0,
189 $b: corner-nth($bl, 7, auto) false 0
190 );
191 }
192 }
193
194 // Side left, right, top and bottom
195 $t-height: corner-var(corner-nth($t, 2, auto) $tl-height $ui-corners-side-left-width);
196 $t-left: corner-var(corner-nth($t, 6, auto) ($tl-width + corner-nth($tl, 6, 0)) $ui-corners-corner-width);
197 $t-right: corner-var(corner-nth($t, 7, auto) ($tr-width + corner-nth($tr, 6, 0)) $ui-corners-corner-width);
198 $b-height: corner-var(corner-nth($b, 2, auto) $bl-height $ui-corners-side-left-width);
199 $b-left: corner-var(corner-nth($b, 6, auto) ($bl-width + corner-nth($bl, 6, 0)) $ui-corners-corner-width);
200 $b-right: corner-var(corner-nth($b, 7, auto) ($br-width + corner-nth($br, 6, 0)) $ui-corners-corner-width);
201 $l-width: corner-var(corner-nth($l, 2, auto) $tl-width $ui-corners-side-left-width);
202 $l-top: corner-var(corner-nth($l, 6, auto) ($tl-height + corner-nth($tl, 7, 0)) $ui-corners-corner-height);
203 $l-bottom: corner-var(corner-nth($l, 7, auto) ($bl-height + corner-nth($bl, 7, 0)) $ui-corners-corner-height);
204 $r-width: corner-var(corner-nth($r, 2, auto) $tr-width $ui-corners-side-right-width);
205 $r-top: corner-var(corner-nth($r, 6, auto) ($tr-height + corner-nth($tr, 7, 0)) $ui-corners-corner-height);
206 $r-bottom: corner-var(corner-nth($r, 7, auto) ($br-height + corner-nth($br, 7, 0)) $ui-corners-corner-height);
207
208 // normalize left and right, top and bottom
209 $left: false;
210 $right: false;
211 $top: false;
212 $bottom: false;
213 $width: false;
214 $height: false;
215
216 // check all sides are the same
217 @if $t-left == $b-left { $left: $t-left; }
218 @if $t-right == $b-right { $right: $t-right; }
219 @if $t-height == $b-height { $height: $t-height; }
220 @if $l-top == $r-top { $top: $l-top; }
221 @if $l-bottom == $r-bottom { $bottom: $l-bottom; }
222 @if $l-width == $r-width { $width: $l-width; }
223
224 @if $t-image != none and $t-image == $r-image and $t-image == $b-image and $t-image == $l-image {
225 .ui-corners-side { background-image: image-url($t-image, false, $ui-corners-cache-buster); }
226 $t-image: none; $r-image: none; $b-image: none; $l-image: none;
227 }
228
229 // set the top and bottom sides with a generic class
230 @if ($left and $left != $ui-corners-corner-width) or ($right and $right != $ui-corners-corner-width)
231 or ($height and $height != $ui-corners-side-width) or ($t-image != none and $t-image == $b-image) {
232 // when it matches default, fall back to generic corner class
233 .ui-corners-side-top, .ui-corners-side-bottom {
234 @if $left and $left != $ui-corners-corner-width { left: $left; }
235 @if $right and $right != $ui-corners-corner-width { right: $right; }
236 @if $height and $height != $ui-corners-side-width { height: $height; }
237 @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; }
238 }
239 }
240
241 // set the left and right sides with a generic class
242 @if ($top and $top != $ui-corners-corner-height) or ($bottom and $bottom != $ui-corners-corner-height)
243 or ($width and $width != $ui-corners-side-width) or ($l-image != none and $l-image == $r-image) {
244 // when it matches default, fall back to generic corner class
245 .ui-corners-side-left, .ui-corners-side-right {
246 @if $top and $top != $ui-corners-corner-height { top: $top; }
247 @if $bottom and $bottom != $ui-corners-corner-height { bottom: $bottom; }
248 @if $width and $width != $ui-corners-side-width { width: $width; }
249 @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; }
250 }
251 }
252
253 // Top
254 @if $t != auto {
255 .ui-corners-side-top {
256 @include corner-props(
257 $image: $t-image,
258 $h: if($height, false, $t-height),
259 $x: corner-nth($t, 3, auto) false left,
260 $y: corner-nth($t, 4, auto) false top,
261 $l: if($left, false, $t-left),
262 $r: if($right, false, $t-right) + corner-nth($tr, 6, 0),
263 $t: corner-nth($t, 5, auto) false 0
264 );
265 }
266 }
267
268 // Bottom
269 @if $b != auto {
270 .ui-corners-side-bottom {
271 @include corner-props(
272 $image: $b-image,
273 $h: if($height, false, $b-height),
274 $x: corner-nth($b, 3, auto) false left,
275 $y: corner-nth($b, 4, auto) false bottom,
276 $l: if($left, false, $b-left),
277 $r: if($right, false, $b-right),
278 $b: corner-nth($b, 5, auto) false 0
279 );
280 }
281 }
282
283 // Left
284 @if $l != auto {
285 .ui-corners-side-left {
286 @include corner-props(
287 $image: $l-image,
288 $w: if($width, false, $l-width),
289 $x: corner-nth($l, 3, auto) false left,
290 $y: corner-nth($l, 4, auto) false top,
291 $l: corner-nth($l, 5, auto) false 0,
292 $t: if($top, false, $l-top),
293 $b: if($bottom, false, $l-bottom)
294 );
295 }
296 }
297
298 // Right
299 @if $r != auto {
300 .ui-corners-side-right {
301 @include corner-props(
302 $image: $r-image,
303 $w: if($width, false, $r-width),
304 $x: corner-nth($r, 3, auto) false right,
305 $y: corner-nth($r, 4, auto) false top,
306 $r: corner-nth($r, 5, auto) false 0,
307 $t: if($top, false, $r-top),
308 $b: if($bottom, false, $r-bottom)
309 );
310 }
311 }
312 }
313
314 //-----------------------------------------------
315 // Corner Props
316 // creates the porperties of corner or side
317 // @param image $image (optional)
318 // @param list $w (optional) [value] [auto] [default] element width.
319 // @param list $h (optional) [value] [auto] [default] element height.
320 // @param list $x (optional) [value] [auto] [default] background position x.
321 // @param list $y (optional) [value] [auto] [default] background position y.
322 // @param list $l (optional) [value] [auto] [default] position left.
323 // @param list $r (optional) [value] [auto] [default] position right.
324 // @param list $t (optional) [value] [auto] [default] position top.
325 // @param list $b (optional) [value] [auto] [default] position bottom.
326 //-----------------------------------------------
327 @mixin corner-props ($image: none, $w: false, $h: false, $x: false, $y: false, $l: false, $r: false, $t: false, $b: false) {
328 // each variable takes 3 values: passed auto default
329 $left: corner-var($l);
330 $right: corner-var($r);
331 $top: corner-var($t);
332 $bottom: corner-var($b);
333 $width: corner-var($w);
334 $height: corner-var($h);
335
336 @if $image != none { background-image: image-url($image, false, $ui-corners-cache-buster); }
337 @if $left != false { left: $left; }
338 @if $right != false { right: $right; }
339 @if $top != false { top: $top; }
340 @if $bottom != false { bottom: $bottom; }
341 @if $width != false { width: $width; }
342 @if $height != false { height: $height; }
343
344 $position-x: corner-var($x);
345 $position-y: corner-var($y);
346 @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)); }
347 }
348
349 //-----------------------------------------------
350 // Corner Nth
351 // returns the value of a list at an index or default value if the index is missing
352 // @param list $list value list
353 // @param int $n index within the lsit
354 // @param mixed $default default value if index does not exist
355 //-----------------------------------------------
356 @function corner-nth($list, $n, $default: false) {
357 $value: $default;
358 @if length($list) > $n - 1 { $value: nth($list, $n) }
359 @return $value;
360 }
361
362 //-----------------------------------------------
363 // Corner Image Width/Height
364 // returns the width of an image or default
365 // @param image $image
366 //-----------------------------------------------
367 @function corner-image-width($image) {
368 @if ($image == none) { @return default; }
369 @return image-width($image);
370 }
371 @function corner-image-height($image) {
372 @if ($image == none) { @return default; }
373 @return image-height($image);
374 }
375
376 //-----------------------------------------------
377 // Corner Vars
378 // returns the current value unless it is "auto" or "default" then those values are returned
379 // @param list $list list if values [current value] [value of auto] [value of default]
380 //-----------------------------------------------
381 @function corner-var($list) {
382 $val: nth($list, 1);
383 @if $val == auto { $val: nth($list, 2); }
384 @if $val == default { $val: nth($list, 3); }
385 @return $val;
386 }
387
388 //-----------------------------------------------
389 // Basic Styles (required)
390 //-----------------------------------------------
391 // corner wrapper
392 .ui-corners {
393 position: relative;
394 }
395
396 // the content of the wrapper
397 .ui-corners-content {
398 position: relative;
399 z-index: 1;
400 }
401
402 // all corners and sides
403 .ui-corners-corner, .ui-corners-side {
404 position: absolute;
405 z-index: 0;
406 }
407
408
409 //-----------------------------------------------
410 // Corners
411 //-----------------------------------------------
412 .ui-corners-corner {
413 height: $ui-corners-corner-height;
414 width: $ui-corners-corner-width;
415 background-repeat: no-repeat;
416 }
417 .ui-corners-corner-tl {
418 top: 0;
419 left: 0;
420 @if $ui-corners-corner-height != $ui-corners-corner-tl-height { height: $ui-corners-corner-tl-height; }
421 @if $ui-corners-corner-width != $ui-corners-corner-tl-width { width: $ui-corners-corner-tl-width; }
422 background-position: left top;
423 }
424 .ui-corners-corner-tr {
425 top: 0;
426 right: 0;
427 @if $ui-corners-corner-height != $ui-corners-corner-tr-height { height: $ui-corners-corner-tr-height; }
428 @if $ui-corners-corner-width != $ui-corners-corner-tr-width { width: $ui-corners-corner-tr-width; }
429 background-position: right top;
430 }
431 .ui-corners-corner-br {
432 bottom: 0;
433 right: 0;
434 @if $ui-corners-corner-height != $ui-corners-corner-br-height { height: $ui-corners-corner-br-height; }
435 @if $ui-corners-corner-width != $ui-corners-corner-br-width { width: $ui-corners-corner-br-width; }
436 background-position: right bottom;
437 }
438 .ui-corners-corner-bl {
439 bottom: 0;
440 left: 0;
441 @if $ui-corners-corner-height != $ui-corners-corner-bl-height { height: $ui-corners-corner-bl-height; }
442 @if $ui-corners-corner-width != $ui-corners-corner-bl-width { width: $ui-corners-corner-bl-width; }
443 background-position: left bottom;
444 }
445
446 //-----------------------------------------------
447 // Sides
448 //-----------------------------------------------
449 .ui-corners-side-top, .ui-corners-side-bottom {
450 left: $ui-corners-corner-width;
451 right: $ui-corners-corner-width;
452 height: $ui-corners-side-width;
453 background-repeat: repeat-x;
454 }
455 .ui-corners-side-left, .ui-corners-side-right {
456 top: $ui-corners-corner-height;
457 bottom: $ui-corners-corner-height;
458 width: $ui-corners-side-width;
459 background-repeat: repeat-y;
460 }
461 .ui-corners-side-top {
462 top: 0;
463 @if $ui-corners-side-width != $ui-corners-side-top-width { height: $ui-corners-side-top; }
464 background-position: left top;
465 }
466 .ui-corners-side-bottom {
467 bottom: 0;
468 @if $ui-corners-side-width != $ui-corners-side-bottom-width { height: $ui-corners-side-bottom; }
469 background-position: left bottom;
470 }
471 .ui-corners-side-left {
472 left: 0;
473 @if $ui-corners-side-width != $ui-corners-side-left-width { width: $ui-corners-side-left; }
474 background-position: left top;
475 }
476 .ui-corners-side-right {
477 right: 0;
478 @if $ui-corners-side-width != $ui-corners-side-right-width { width: $ui-corners-side-right; }
479 background-position: right top;
480 }
Something went wrong with that request. Please try again.