/* positioning */ @mixin group { &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } } @mixin text-hidden { text-indent: 0; line-height: 0; font-size: 0; } @mixin inline-block { display: inline-block; *display: inline; *zoom: 1; } /* sprites */ @mixin sprite-icon { text-indent: -9999px; line-height: 0; font-size: 0; overflow: hidden; display: block; background-image: url("../img/greentech-sprite-icons.png"); background-repeat: no-repeat; } @mixin sprite-image { text-indent: -9999px; line-height: 0; font-size: 0; overflow: hidden; display: block; background-image: url("../img/greentech-sprite-images.png"); background-repeat: no-repeat; } /* borders made from backgrounds */ @mixin border-vertical-dotted($position) { background-image: url("../img/border-vertical-dotted.png"); background-repeat: repeat-y; background-position: $position top; } @mixin border-horizontal-dotted($position) { background-image: url("../img/border-horizontal-dotted.png"); background-repeat: repeat-x; background-position: left $position; } /* triangles */ @mixin triangle-vertical($size: 7px, $position: "bottom", $color: #999, $rgba: rgba(0, 0, 0, 0.7)) { @include text-hidden; position : absolute; height : 0; width : 0; border-style : solid; border-width : $size; border-color : transparent transparent $color transparent; border-color : transparent transparent $rgba transparent; left : 50%; margin-left : $size * -2; #{$position} : 0; } @mixin triangle-angled($size: 4px, $position: "bottom", $color: #333, $rgba: "") { @include text-hidden; position : absolute; height : 0; width : 0; border-style : solid; border-width : $size; border-color : $color transparent transparent $color; @if $rgba != "" { border-color : $rgba transparent transparent $rgba; } left : 50%; margin-left : $size * -2; #{$position} : $size * -2; } /* css3 */ @mixin rounded($radius: 5px) { -moz-border-radius: $radius; border-radius: $radius; } @mixin rounded-side($horizontal, $vertical, $magnitude: 5px) { border-#{$vertical}-#{$horizontal}-radius: $magnitude; -moz-border-radius-#{$vertical}#{$horizontal}: $magnitude; -webkit-border-#{$vertical}-#{$horizontal}-radius: $magnitude; } @mixin transition($property, $time: 0.25s) { -webkit-transition: $property $time ease-in-out; -moz-transition: $property $time ease-in-out; -o-transition: $property $time ease-in-out; -ms-transition: $property $time ease-in-out; transition: $property $time ease-in-out; } @mixin inner-shadow($horizontal: -5px, $vertical: -5px, $magnitude: 5px, $color: #888) { -moz-box-shadow: inset $horizontal $vertical $magnitude $color; -webkit-box-shadow: inset $horizontal $vertical $magnitude $color; box-shadow: inset $horizontal $vertical $magnitude $color; } @mixin drop-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) { -moz-box-shadow: $horizontal $vertical $magnitude $color; -webkit-box-shadow: $horizontal $vertical $magnitude $color; box-shadow: $horizontal $vertical $magnitude $color; }