_mixins-arrows.less

//
// Arrow Mixins
// --------------------------------------------------

.pct-arrow (@dir, @width, @color: @arrow-green) when (@dir = up) {
  border-bottom: @width solid @color;
  border-left: @width solid transparent;
  border-right: @width solid transparent;
}

.pct-arrow (@dir, @width, @color: @arrow-red) when (@dir = down) {
  border-left: @width solid transparent;
  border-right: @width solid transparent;
  border-top: @width solid @color;
}

_percentage-change.less

/**
 * Module: Percentage Change
 *
 * Markup:
 *
 * <div class="pct-change-wrapper text-center">
 *   <div class="pct-arrow-wrapper pct-arrow-up-1">
 *     <div class="pct-arrow"></div>
 *   </div><!-- /.pct-arrow-wrapper -->
 *   <div class="pct-change">100%</div>
 *   <p class="pct-timeframe">Weekly percentage growth (all products)</p>
 * </div><!-- /.pct-change-wrapper -->
 *
 */

.pct-change {
  display: inline-block;
  vertical-align: middle;
}

.pct-timeframe {
  margin: 0 auto;
  padding: .3em .5em 0 .5em;
}

// arrows

.pct-arrow {
  height: 0;
  margin: 0 auto .3em auto;
  width: 0;
}

.pct-arrow-wrapper {
  display: inline-block;
  vertical-align: middle;
}

// single arrow

.pct-arrow-up-1 {
  .pct-arrow {
    .pct-arrow(up, 2.5em); /* 30px */
  }
}

.pct-arrow-down-1 {
  .pct-arrow {
    .pct-arrow(down, 2.5em); /* 30px */
  }
}

// two stacked arrows

.pct-arrow-up-2 {
  .pct-arrow,
  &:before {
    .pct-arrow(up, 1em); /* 10px */
  }
  &:before {
    &:extend(.pct-arrow);
    &:extend(.pseudo-content);
  }
}

.pct-arrow-down-2 {
  .pct-arrow,
  &:before {
    .pct-arrow(down, 1em); /* 10px */
  }
  &:before {
    &:extend(.pct-arrow);
    &:extend(.pseudo-content);
  }
}

// three stacked arrows

.pct-arrow-up-3 {
  .pct-arrow,
  &:after,
  &:before {
    .pct-arrow(up, 0.7em); /* 7px */
  }
  &:after,
  &:before {
    &:extend(.pct-arrow);
    &:extend(.pseudo-content);
  }
}

.pct-arrow-down-3 {
  .pct-arrow,
  &:after,
  &:before {
    .pct-arrow(down, 0.7em); /* 7px */
  }
  &:after,
  &:before {
    &:extend(.pct-arrow);
    &:extend(.pseudo-content);
  }
}