Caffeine Tests

Box Shadow

.box-shadow {
  @include box-shadow(0 0 1px rgba(0, 0, 0, .3));
}

This paragraph will have a 0 0 1px with 30% transparent black

Transform

.transform-rotate {
  @include transform(rotate(15deg));
}

.transform-skew {
  @include transform(skew(15deg));
}

This box is rotated 15deg

This box is skewed 15deg

Transition

.transition-size,
.transition-radius {
  @include transition(all ease .4s);
}

This box will resize on mouse enter

This box's radius will change on mouse enter

Linear Gradient

.linear-gradient {
  @include linear-gradient(to bottom, #ccc, #999);
}

Radial Gradient

.radial-gradient {
  @include radial-gradient(ellipse at center, #ccc, #999, #222);
}

Center

.center {
  @include center();
}

This element should be centered both vertical and horizontal

Vertical Center

.center-vertical {
  @include center-vertical();
}

This element should be centered vertically

Horizontal Center

.center-horizontal {
  @include center-horizontal();
}

This element should be centered horizontally

Font Size

.font-size {
  @include font-size(14px);
}

This text should have both REM font unit and PX fallback

Placeholder

.placeholder {
  @include placeholder {
    font-style: italic;
  }
}

CSS Arrows

.arrow-top {
  @include arrow(lightblue, 10px);
}

.arrow-right {
  @include arrow(olive, 10px, right);
}

.arrow-bottom {
  @include arrow(turquoise, 10px, bottom);
}

.arrow-left {
  @include arrow(yellow, 10px, left);
}

.bordered-arrow {
  @include arrow(lightblue navy, 10px 12px);
}

Because of size, position issues, you have to position arrows manually