sass/susy/_utils.scss in compass-susy-plugin-0.7.0.pre7 vs sass/susy/_utils.scss in compass-susy-plugin-0.7.0.pre8

- old
+ new

@@ -1,43 +1,49 @@ //** Susy Utilities **// + // An extension of the Compass Core Utilities @import "compass/utilities"; // Apply to you container element(s) to show a grid image. // - You need to supply the image. Susy can't do everything. @mixin show-grid($src) { background: { image: image-url($src); repeat: repeat; - position: $side-gutter-width 0; }; } + position: $side-gutter-width 0; + }; +} // Brings IE in line with inline-block display // - Using hacks if called automatically because $hacks == true // - Or not, if you call it from ie.sass because $hacks == false @mixin ie-inline-block($hack: false) { @if $hack { /* ugly hacks for IE6-7 */ #display: inline; // fixes alignment against native input/button on IE6 #vertical-align: auto; - /* end ugly hacks */ } - @else { + } @else { display: inline; // fixes alignment against native input/button on IE6 - vertical-align: auto; } } + vertical-align: auto; + } +} // An override for compass inline-block that lets you take advantage // of Susys $hacks constant. if true, hacks. if false, use ie-inline-block // to help ie along in your ie.sass @mixin inline-block { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; @if $hacks { - @include ie-inline-block(true); } } + @include ie-inline-block(true); + } +} // An inline-block list that works in IE // For those awkward moments when a floated horizontal list just wont cut it // NOTE: If global !hacks == false: // - you'll need to fix list items in ie.sass with +ie-inline-block @@ -47,11 +53,14 @@ @include no-bullet; @include inline-block; white-space: no-wrap; padding: { left: $hpad; - right: $hpad; }; } } + right: $hpad; + }; + } +} // Hide an element from the viewport, but keep it around for accessability @mixin hide { position: absolute; top: -9999em; } @@ -60,14 +69,12 @@ // - Set the location arguments if you care where it appears. @mixin skip-link($t: 0, $r: false, $b: false, $l: false) { @include hide; display: block; &:focus { - @if $t { - top: $t; } - @if $r { - right: $r; } - @if $b { - bottom: $b; } - @if $l { - left: $l; } - z-index: 999; } } + @if $t { top: $t; } + @if $r { right: $r; } + @if $b { bottom: $b; } + @if $l { left: $l; } + z-index: 999; + } +}