_baselines.scss

// Align text baselines for blocks with different font sizes, so both elements have the same height.
//
// Suitable for aligning single-line elements while keeping the same height.
//
// Block elements with different font-sizes and the same line-height have
// their middles aligned vertically instead of the same baseline. Use this
// to make floated or inline-block elements align on the same baseline.
//
// This mixin should be used on the smaller font-size element to align its
// baseline to the larger text element's line-height.
//
// * $this-size: The font-size of this text
// * $other-size: The font-size of the other, larger text
// * $other-line-height: Optional, defaults to the same as $other-font-size (i.e. line-height: 1)

@mixin align-baseline( $this-size, $other-size, $other-line-height: 1 ) {
  /* Parameter errors */
  @if unit($this-size) != unit($other-size) {
    @warn "#{$this-size} and #{$other-size} must be the same units to align line heights.";
  }
  @if unit($other-line-height) == 'px' and unit($other-size) != 'px' {
    @warn "$other-line-height must be em or unitless when aligning relative sizes.";
  }

  /* Set default for $other-line-height */
  @if $other-line-height == 1 and unit($other-size) == 'px' {
    $other-line-height: $other-size;
  }

  $line-padding: ceil( ($other-line-height - $this-size) / 2 );
  padding-top: $line-padding;
  line-height: $other-line-height - $line-padding !important;
}