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;
+ }
+}