compassUsefulPlaceholdersAndMixins

compassUsefulPlaceholdersAndMixins.scss

%text-shadow { text-shadow: 2px 2px 1px black; }

%clearfix {
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}

// Image replacement
%ir   {   
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

%border-box {
  @include box-sizing(border-box);
}


@mixin font-size-vm($value) {
  font-size: #{$value}vm;
  font-size: #{$value}vmin;  //FF
}

%hidden {
  display: none;
}

%disabled {
  @include opacity(.5);
  pointer-events: none;
}

%flex {
  @include flex-display;
  @include flex-orient(horizontal);
  @include flex-align(stretch);
  justify-content: space-between;
  width: 100%;
}

@mixin text-overflow($ellipsis: false) {
  overflow: hidden;
  white-space: nowrap;
  @if $ellipsis {
    text-overflow: ellipsis;
  }
  @else {
    text-overflow: clip;
  }
}

@mixin triangle($width, $height, $direction) {
  $halfHeight: $height / 2;
  width: 0px;
  height: 0px;
  border-style: solid;
  @if $direction == left {
    border-width: #{$halfHeight}px #{$width}px #{$halfHeight}px 0;
    border-color: transparent #ffffff transparent transparent;
  } @else {
    border-width: #{$halfHeight}px 0 #{$halfHeight}px #{$width}px;
    border-color: transparent transparent transparent #ffffff;
  }


}