undefined

undefined

We have included an effect that makes an element appear to have a three dimensional shading. This is not an actual three dimensional css transform, rather a clever amount of shading applied to give the appearance of three dimensional rounding. It can be applied with a simple mixin three-d which takes an argument of the color you wish the background to be:

.btn {
  @include three-d($green-400);
  border-radius: spacing(4);
  @include pxy(3, 2);
  color: $green-900;
}

Or we can look at it applied to a card:

.card {
  @include three-d($blue-400);
  border-radius: spacing(4);
  height: spacing(50);
  width: spacing(100);
}