Mixins

mixins.scss

%clearfix {
  &:before, &:after {
    content: " ";
    display: table;
  }  
  &:after {
    clear: both;
  }
}

%inline-block {
  display: inline-block;
  vertical-align: top;  
}

%pseudo-content-after {
  position: relative;
  &:after {
    content: " ";
    position: absolute;
    display: block;
   }
}

%pseudo-content-before {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    display: block;
   }
}

%h-list {
  @extend %clearfix; 
  margin-bottom: 0;
  li {
    float: left;
  }
}

@mixin caret-after($size, $color, $left, $top) {
  @extend %pseudo-content-after;
  &:after {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    left: $left;
    top: $top;
  }
}

@mixin caret-after-up($size, $color, $left, $top) {
  @extend %pseudo-content-after;
  &:after {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    left: $left;
    top: $top;
  }
}


@mixin caret-before($size, $color, $left, $top) {
  @extend %pseudo-content-before;
  &:before {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    left: $left;
    top: $top;
  }
}


@mixin gradient($top-color, $bottom-color){
  background-color:$top-color;
  background-image: -moz-linear-gradient(top, $top-color, $bottom-color);
  background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $top-color),color-stop(1, $bottom-color));
  background-image: linear-gradient(top,$top-color, $bottom-color);
}

@mixin gradient-highlight($highlight-color, $top-color, $bottom-color, $size) {
  background: $top-color;
	background: -webkit-linear-gradient(top,  $highlight-color 1%, $top-color $size,$bottom-color 100%);
	background: -moz-linear-gradient(top,  $highlight-color 1%, $top-color $size,$bottom-color 100%);
	background: linear-gradient(top,  $highlight-color 1%, $top-color $size, $bottom-color 100%);
}

@mixin three-d($border-color, $shadow-color, $txt-shadow-color, $txt-shadow-offset, $border-radius) {
	border: 1px solid $border-color;
	text-shadow:0 $txt-shadow-offset 1px $txt-shadow-color;
	box-shadow: 0 1px 1px $shadow-color;
	border-radius: $border-radius;
}