General Compass Mixins

_mixes.scss

@import "compass";



/////////////////////////////////////////////////////////
//
// Image replacement for elements with hover state
//
// $image - image file that contains default state with 
//          a hover state directly below it 
//
//         _________________________________
//        |                                 |
//        |                                 |
//        |                                 |
//        |         default image           |
//        |                                 |
//        |                                 |
//        |_________________________________|
//        |                                 |
//        |                                 |
//        |                                 |
//        |          hover image            |
//        |                                 |
//        |                                 |
//        |_________________________________|
//
//
//
//
////////////////////////////////////////////////////////

@mixin image-button( $image ) 
{
  @include replace-text-with-dimensions( $image , 0, 0 );
  @include inline-block();

  height : image-height( $image ) / 2;
  border : 0;

  &:hover 
  {
    background-position : 0 ( - image-height($image) / 2 );
    cursor : pointer;
  }
}



/////////////////////////////////////////////////////////
// 
// To style text inputs
// include this on an input element
//
/////////////////////////////////////////////////////////
@mixin text-input (

  $width          : 226px,        // width of text input
  $height         : 35px,         // height of text input
  $border-color   : black,        // border color of text input
  $bgcolor        : transparent,  // background color of text input
  $border-radius  : 4px,        // border radius of text input
  $box-shadow     : 0,
  $padding        : .2em 0 0 .5em,
  $margin         : .2em 0

  ) {
    
  @include border-radius($border-radius);
  @include single-box-shadow(#cccccc, 0, 4px, 2px, 0, inset);
  border           : 1px solid $border-color;
  width            : $width;
  height           : $height;
  background-color : $bgcolor;
  font-size        : $height / 2;
  padding          : $padding;
  margin           : $margin;

}